diff --git a/src/App.tsx b/src/App.tsx
index e67c09b8..b427c62e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,8 +1,8 @@
-import { MWMediaType } from "providers";
 import { Redirect, Route, Switch } from "react-router-dom";
-import { BookmarkContextProvider } from "state/bookmark";
-import { WatchedContextProvider } from "state/watched";
-import { NotFoundPage } from "views/notfound/NotFoundView";
+import { MWMediaType } from "@/providers";
+import { BookmarkContextProvider } from "@/state/bookmark";
+import { WatchedContextProvider } from "@/state/watched";
+import { NotFoundPage } from "@/views/notfound/NotFoundView";
 import "./index.css";
 import { MediaView } from "./views/MediaView";
 import { SearchView } from "./views/SearchView";
diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
index 32c89cb8..d0bd882f 100644
--- a/src/components/Dropdown.tsx
+++ b/src/components/Dropdown.tsx
@@ -1,7 +1,7 @@
-import { Icon, Icons } from "components/Icon";
 import React, { Fragment } from "react";
 
 import { Listbox, Transition } from "@headlessui/react";
+import { Icon, Icons } from "@/components/Icon";
 
 export interface OptionItem {
   id: string;
@@ -20,7 +20,7 @@ export const Dropdown = React.forwardRef<HTMLDivElement, DropdownProps>(
       <Listbox value={props.selectedItem} onChange={props.setSelectedItem}>
         {({ open }) => (
           <>
-            <Listbox.Button className="bg-denim-500 focus-visible:ring-bink-500 focus-visible:ring-offset-bink-300 relative w-full cursor-default rounded-lg py-2 pl-3 pr-10 text-left text-white shadow-md focus:outline-none focus-visible:border-indigo-500  focus-visible:ring-2 focus-visible:ring-opacity-75 focus-visible:ring-offset-2 sm:text-sm">
+            <Listbox.Button className="relative w-full cursor-default rounded-lg bg-denim-500 py-2 pl-3 pr-10 text-left text-white shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-bink-500  focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-bink-300 sm:text-sm">
               <span className="block truncate">{props.selectedItem.name}</span>
               <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
                 <Icon
@@ -37,7 +37,7 @@ export const Dropdown = React.forwardRef<HTMLDivElement, DropdownProps>(
               leaveFrom="opacity-100"
               leaveTo="opacity-0"
             >
-              <Listbox.Options className="bg-denim-500 scrollbar-thin scrollbar-track-denim-400 scrollbar-thumb-denim-200 absolute bottom-11 left-0 right-0 z-10 mt-1 max-h-60 overflow-auto rounded-md py-1 text-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:bottom-10 sm:text-sm">
+              <Listbox.Options className="absolute bottom-11 left-0 right-0 z-10 mt-1 max-h-60 overflow-auto rounded-md bg-denim-500 py-1 text-white shadow-lg ring-1 ring-black ring-opacity-5 scrollbar-thin scrollbar-track-denim-400 scrollbar-thumb-denim-200 focus:outline-none sm:bottom-10 sm:text-sm">
                 {props.options.map((opt) => (
                   <Listbox.Option
                     className={({ active }) =>
diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
index 9caef7da..4cd6a6de 100644
--- a/src/components/SearchBar.tsx
+++ b/src/components/SearchBar.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { MWMediaType, MWQuery } from "providers";
+import { MWMediaType, MWQuery } from "@/providers";
 import { DropdownButton } from "./buttons/DropdownButton";
 import { Icons } from "./Icon";
 import { TextInputControl } from "./text-inputs/TextInputControl";
diff --git a/src/components/buttons/DropdownButton.tsx b/src/components/buttons/DropdownButton.tsx
index 0dbfcb71..5c1a12c5 100644
--- a/src/components/buttons/DropdownButton.tsx
+++ b/src/components/buttons/DropdownButton.tsx
@@ -1,12 +1,12 @@
-import { Icon, Icons } from "components/Icon";
 import React, {
   MouseEventHandler,
   SyntheticEvent,
   useEffect,
   useState,
 } from "react";
+import { Icon, Icons } from "@/components/Icon";
 
-import { Backdrop, useBackdrop } from "components/layout/Backdrop";
+import { Backdrop, useBackdrop } from "@/components/layout/Backdrop";
 import { ButtonControlProps, ButtonControl } from "./ButtonControl";
 
 export interface OptionItem {
@@ -33,7 +33,7 @@ export interface OptionProps {
 function Option({ option, onClick, tabIndex }: OptionProps) {
   return (
     <div
-      className="text-denim-700 flex h-10 cursor-pointer items-center space-x-2 px-4 py-2 text-left transition-colors hover:text-white"
+      className="flex h-10 cursor-pointer items-center space-x-2 px-4 py-2 text-left text-denim-700 transition-colors hover:text-white"
       onClick={onClick}
       tabIndex={tabIndex}
     >
@@ -95,7 +95,7 @@ export const DropdownButton = React.forwardRef<
       >
         <ButtonControl
           {...props}
-          className="sm:justify-left bg-bink-200 hover:bg-bink-300 relative z-20 flex h-10 w-full items-center justify-center space-x-2 rounded-[20px] px-4 py-2 text-white"
+          className="sm:justify-left relative z-20 flex h-10 w-full items-center justify-center space-x-2 rounded-[20px] bg-bink-200 px-4 py-2 text-white hover:bg-bink-300"
         >
           <Icon icon={selectedItem.icon} />
           <span className="flex-1">{selectedItem.name}</span>
@@ -105,7 +105,7 @@ export const DropdownButton = React.forwardRef<
           />
         </ButtonControl>
         <div
-          className={`bg-denim-300 absolute top-0 z-10 w-full rounded-[20px] pt-[40px] transition-all duration-200 ${
+          className={`absolute top-0 z-10 w-full rounded-[20px] bg-denim-300 pt-[40px] transition-all duration-200 ${
             props.open
               ? "block max-h-60 opacity-100"
               : "invisible max-h-0 opacity-0"
diff --git a/src/components/buttons/IconButton.tsx b/src/components/buttons/IconButton.tsx
index 7ded2203..b247a440 100644
--- a/src/components/buttons/IconButton.tsx
+++ b/src/components/buttons/IconButton.tsx
@@ -1,4 +1,4 @@
-import { Icon, Icons } from "components/Icon";
+import { Icon, Icons } from "@/components/Icon";
 import { ButtonControlProps, ButtonControl } from "./ButtonControl";
 
 export interface IconButtonProps extends ButtonControlProps {
@@ -9,7 +9,7 @@ export function IconButton(props: IconButtonProps) {
   return (
     <ButtonControl
       {...props}
-      className="flex items-center px-4 py-2 space-x-2 bg-bink-200 hover:bg-bink-300 text-white rounded-full"
+      className="flex items-center space-x-2 rounded-full bg-bink-200 px-4 py-2 text-white hover:bg-bink-300"
     >
       <Icon icon={props.icon} />
       <span>{props.children}</span>
diff --git a/src/components/buttons/IconPatch.tsx b/src/components/buttons/IconPatch.tsx
index 1a80061c..f14a3f56 100644
--- a/src/components/buttons/IconPatch.tsx
+++ b/src/components/buttons/IconPatch.tsx
@@ -1,4 +1,4 @@
-import { Icon, Icons } from "components/Icon";
+import { Icon, Icons } from "@/components/Icon";
 
 export interface IconPatchProps {
   active?: boolean;
@@ -12,11 +12,11 @@ export function IconPatch(props: IconPatchProps) {
   return (
     <div className={props.className || undefined} onClick={props.onClick}>
       <div
-        className={`bg-denim-300 flex h-12 w-12 items-center justify-center rounded-full border-2 border-transparent transition-[color,transform,border-color] duration-75 ${
+        className={`flex h-12 w-12 items-center justify-center rounded-full border-2 border-transparent bg-denim-300 transition-[color,transform,border-color] duration-75 ${
           props.clickable
-            ? "hover:bg-denim-400 cursor-pointer hover:scale-110 hover:text-white active:scale-125"
+            ? "cursor-pointer hover:scale-110 hover:bg-denim-400 hover:text-white active:scale-125"
             : ""
-        } ${props.active ? "text-bink-600 border-bink-600 bg-bink-100" : ""}`}
+        } ${props.active ? "border-bink-600 bg-bink-100 text-bink-600" : ""}`}
       >
         <Icon icon={props.icon} />
       </div>
diff --git a/src/components/layout/Backdrop.tsx b/src/components/layout/Backdrop.tsx
index cc5b68f2..65d3a81d 100644
--- a/src/components/layout/Backdrop.tsx
+++ b/src/components/layout/Backdrop.tsx
@@ -1,5 +1,5 @@
-import { useFade } from "hooks/useFade";
 import { useEffect, useState } from "react";
+import { useFade } from "@/hooks/useFade";
 
 interface BackdropProps {
   onClick?: (e: MouseEvent) => void;
diff --git a/src/components/layout/BrandPill.tsx b/src/components/layout/BrandPill.tsx
index b2b8eabd..842cf8a3 100644
--- a/src/components/layout/BrandPill.tsx
+++ b/src/components/layout/BrandPill.tsx
@@ -1,11 +1,11 @@
-import { Icon, Icons } from "components/Icon";
+import { Icon, Icons } from "@/components/Icon";
 
 export function BrandPill(props: { clickable?: boolean }) {
   return (
     <div
-      className={`bg-bink-100 text-bink-600 flex items-center space-x-2 rounded-full bg-opacity-50 px-4 py-2 ${
+      className={`flex items-center space-x-2 rounded-full bg-bink-100 bg-opacity-50 px-4 py-2 text-bink-600 ${
         props.clickable
-          ? "hover:bg-bink-200 hover:text-bink-700 transition-[transform,background-color] hover:scale-105 active:scale-95"
+          ? "transition-[transform,background-color] hover:scale-105 hover:bg-bink-200 hover:text-bink-700 active:scale-95"
           : ""
       }`}
     >
diff --git a/src/components/layout/ErrorBoundary.tsx b/src/components/layout/ErrorBoundary.tsx
index 3bd20e88..75aab1e1 100644
--- a/src/components/layout/ErrorBoundary.tsx
+++ b/src/components/layout/ErrorBoundary.tsx
@@ -1,9 +1,9 @@
-import { IconPatch } from "components/buttons/IconPatch";
-import { Icons } from "components/Icon";
-import { Link } from "components/text/Link";
-import { Title } from "components/text/Title";
-import { DISCORD_LINK, GITHUB_LINK } from "mw_constants";
 import { Component } from "react";
+import { IconPatch } from "@/components/buttons/IconPatch";
+import { Icons } from "@/components/Icon";
+import { Link } from "@/components/text/Link";
+import { Title } from "@/components/text/Title";
+import { DISCORD_LINK, GITHUB_LINK } from "@/mw_constants";
 
 interface ErrorBoundaryState {
   hasError: boolean;
diff --git a/src/components/layout/Navigation.tsx b/src/components/layout/Navigation.tsx
index dfc8891f..0a255395 100644
--- a/src/components/layout/Navigation.tsx
+++ b/src/components/layout/Navigation.tsx
@@ -1,8 +1,8 @@
-import { IconPatch } from "components/buttons/IconPatch";
-import { Icons } from "components/Icon";
-import { DISCORD_LINK, GITHUB_LINK } from "mw_constants";
 import { ReactNode } from "react";
 import { Link } from "react-router-dom";
+import { IconPatch } from "@/components/buttons/IconPatch";
+import { Icons } from "@/components/Icon";
+import { DISCORD_LINK, GITHUB_LINK } from "@/mw_constants";
 import { BrandPill } from "./BrandPill";
 
 export interface NavigationProps {
@@ -11,8 +11,8 @@ export interface NavigationProps {
 
 export function Navigation(props: NavigationProps) {
   return (
-    <div className="absolute left-0 right-0 top-0 flex items-center justify-between py-5 px-7 min-h-[88px]">
-      <div className="flex items-center justify-center w-full sm:w-fit">
+    <div className="absolute left-0 right-0 top-0 flex min-h-[88px] items-center justify-between py-5 px-7">
+      <div className="flex w-full items-center justify-center sm:w-fit">
         <div className="mr-auto sm:mr-6">
           <Link to="/">
             <BrandPill clickable />
@@ -20,7 +20,11 @@ export function Navigation(props: NavigationProps) {
         </div>
         {props.children}
       </div>
-      <div className={`${props.children ? "hidden sm:flex" : "flex"} flex-row	gap-4`}>
+      <div
+        className={`${
+          props.children ? "hidden sm:flex" : "flex"
+        } flex-row	gap-4`}
+      >
         <a
           href={DISCORD_LINK}
           target="_blank"
diff --git a/src/components/layout/Seasons.tsx b/src/components/layout/Seasons.tsx
index 51ada962..7f510cdb 100644
--- a/src/components/layout/Seasons.tsx
+++ b/src/components/layout/Seasons.tsx
@@ -1,19 +1,19 @@
-import { IconPatch } from "components/buttons/IconPatch";
-import { Dropdown, OptionItem } from "components/Dropdown";
-import { Icons } from "components/Icon";
-import { WatchedEpisode } from "components/media/WatchedEpisodeButton";
-import { useLoading } from "hooks/useLoading";
-import { serializePortableMedia } from "hooks/usePortableMedia";
+import { useEffect, useState } from "react";
+import { useHistory } from "react-router-dom";
+import { IconPatch } from "@/components/buttons/IconPatch";
+import { Dropdown, OptionItem } from "@/components/Dropdown";
+import { Icons } from "@/components/Icon";
+import { WatchedEpisode } from "@/components/media/WatchedEpisodeButton";
+import { useLoading } from "@/hooks/useLoading";
+import { serializePortableMedia } from "@/hooks/usePortableMedia";
 import {
   convertMediaToPortable,
   MWMedia,
   MWMediaSeasons,
   MWMediaSeason,
   MWPortableMedia,
-} from "providers";
-import { getSeasonDataFromMedia } from "providers/methods/seasons";
-import { useEffect, useState } from "react";
-import { useHistory } from "react-router-dom";
+} from "@/providers";
+import { getSeasonDataFromMedia } from "@/providers/methods/seasons";
 
 export interface SeasonsProps {
   media: MWMedia;
@@ -23,13 +23,13 @@ export function LoadingSeasons(props: { error?: boolean }) {
   return (
     <div>
       <div>
-        <div className="bg-denim-400 mb-3 mt-5  h-10 w-56 rounded opacity-50" />
+        <div className="mb-3 mt-5 h-10  w-56 rounded bg-denim-400 opacity-50" />
       </div>
       {!props.error ? (
         <>
-          <div className="bg-denim-400 mr-3 mb-3 inline-block h-10 w-10 rounded opacity-50" />
-          <div className="bg-denim-400 mr-3 mb-3 inline-block h-10 w-10 rounded opacity-50" />
-          <div className="bg-denim-400 mr-3 mb-3 inline-block h-10 w-10 rounded opacity-50" />
+          <div className="mr-3 mb-3 inline-block h-10 w-10 rounded bg-denim-400 opacity-50" />
+          <div className="mr-3 mb-3 inline-block h-10 w-10 rounded bg-denim-400 opacity-50" />
+          <div className="mr-3 mb-3 inline-block h-10 w-10 rounded bg-denim-400 opacity-50" />
         </>
       ) : (
         <div className="flex items-center space-x-3">
diff --git a/src/components/layout/SectionHeading.tsx b/src/components/layout/SectionHeading.tsx
index e341496b..fd89d47a 100644
--- a/src/components/layout/SectionHeading.tsx
+++ b/src/components/layout/SectionHeading.tsx
@@ -1,6 +1,6 @@
-import { Icon, Icons } from "components/Icon";
-import { ArrowLink } from "components/text/ArrowLink";
 import { ReactNode } from "react";
+import { Icon, Icons } from "@/components/Icon";
+import { ArrowLink } from "@/components/text/ArrowLink";
 
 interface SectionHeadingProps {
   icon?: Icons;
@@ -15,7 +15,7 @@ export function SectionHeading(props: SectionHeadingProps) {
   return (
     <div className={`mt-12 ${props.className}`}>
       <div className="mb-4 flex items-end">
-        <p className="text-denim-700 flex flex-1 items-center font-bold uppercase">
+        <p className="flex flex-1 items-center font-bold uppercase text-denim-700">
           {props.icon ? (
             <span className="mr-2 text-xl">
               <Icon icon={props.icon} />
diff --git a/src/components/media/MediaCard.tsx b/src/components/media/MediaCard.tsx
index 1e8ceb02..2171f7cb 100644
--- a/src/components/media/MediaCard.tsx
+++ b/src/components/media/MediaCard.tsx
@@ -1,13 +1,13 @@
+import { Link } from "react-router-dom";
 import {
   convertMediaToPortable,
   getProviderFromId,
   MWMediaMeta,
   MWMediaType,
-} from "providers";
-import { Link } from "react-router-dom";
-import { Icon, Icons } from "components/Icon";
-import { serializePortableMedia } from "hooks/usePortableMedia";
-import { DotList } from "components/text/DotList";
+} from "@/providers";
+import { Icon, Icons } from "@/components/Icon";
+import { serializePortableMedia } from "@/hooks/usePortableMedia";
+import { DotList } from "@/components/text/DotList";
 
 export interface MediaCardProps {
   media: MWMediaMeta;
@@ -30,7 +30,7 @@ function MediaCardContent({
 
   return (
     <article
-      className={`bg-denim-300 group relative mb-4 flex overflow-hidden rounded py-4 px-5 ${
+      className={`group relative mb-4 flex overflow-hidden rounded bg-denim-300 py-4 px-5 ${
         linkable ? "hover:bg-denim-400" : ""
       }`}
     >
@@ -38,12 +38,12 @@ function MediaCardContent({
       {watchedPercentage > 0 ? (
         <div className="absolute top-0 left-0 right-0 bottom-0">
           <div
-            className="bg-bink-300 relative h-full bg-opacity-30"
+            className="relative h-full bg-bink-300 bg-opacity-30"
             style={{
               width: `${watchedPercentage}%`,
             }}
           >
-            <div className="from-bink-400 absolute right-0 top-0 bottom-0 ml-auto w-40 bg-gradient-to-l to-transparent opacity-40" />
+            <div className="absolute right-0 top-0 bottom-0 ml-auto w-40 bg-gradient-to-l from-bink-400 to-transparent opacity-40" />
           </div>
         </div>
       ) : null}
@@ -54,7 +54,7 @@ function MediaCardContent({
           <h1 className="mb-1 font-bold text-white">
             {media.title}
             {series && media.seasonId && media.episodeId ? (
-              <span className="text-denim-700 ml-2 text-xs">
+              <span className="ml-2 text-xs text-denim-700">
                 S{media.seasonId} E{media.episodeId}
               </span>
             ) : null}
diff --git a/src/components/media/VideoPlayer.tsx b/src/components/media/VideoPlayer.tsx
index 92ea4d1c..0009922e 100644
--- a/src/components/media/VideoPlayer.tsx
+++ b/src/components/media/VideoPlayer.tsx
@@ -1,9 +1,9 @@
-import { IconPatch } from "components/buttons/IconPatch";
-import { Icons } from "components/Icon";
-import { Loading } from "components/layout/Loading";
-import { MWMediaCaption, MWMediaStream } from "providers";
 import { ReactElement, useEffect, useRef, useState } from "react";
 import Hls from "hls.js";
+import { IconPatch } from "@/components/buttons/IconPatch";
+import { Icons } from "@/components/Icon";
+import { Loading } from "@/components/layout/Loading";
+import { MWMediaCaption, MWMediaStream } from "@/providers";
 
 export interface VideoPlayerProps {
   source: MWMediaStream;
@@ -14,7 +14,7 @@ export interface VideoPlayerProps {
 
 export function SkeletonVideoPlayer(props: { error?: boolean }) {
   return (
-    <div className="bg-denim-200 flex aspect-video w-full items-center justify-center lg:rounded-xl">
+    <div className="flex aspect-video w-full items-center justify-center bg-denim-200 lg:rounded-xl">
       {props.error ? (
         <div className="flex flex-col items-center">
           <IconPatch icon={Icons.WARNING} className="text-red-400" />
@@ -44,8 +44,7 @@ export function VideoPlayer(props: VideoPlayerProps) {
 
     // hls support
     if (mustUseHls) {
-      if (!videoRef.current)
-        return;
+      if (!videoRef.current) return;
 
       if (!Hls.isSupported()) {
         setLoading(false);
@@ -55,7 +54,7 @@ export function VideoPlayer(props: VideoPlayerProps) {
 
       const hls = new Hls();
 
-      if (videoRef.current.canPlayType('application/vnd.apple.mpegurl')) {
+      if (videoRef.current.canPlayType("application/vnd.apple.mpegurl")) {
         videoRef.current.src = props.source.url;
         return;
       }
@@ -81,8 +80,7 @@ export function VideoPlayer(props: VideoPlayerProps) {
     <>
       {skeletonUi}
       <video
-        className={`bg-black w-full rounded-xl ${!showVideo ? "hidden" : ""
-          }`}
+        className={`w-full rounded-xl bg-black ${!showVideo ? "hidden" : ""}`}
         ref={videoRef}
         onProgress={(e) =>
           props.onProgress && props.onProgress(e.nativeEvent as ProgressEvent)
diff --git a/src/components/media/WatchedEpisodeButton.tsx b/src/components/media/WatchedEpisodeButton.tsx
index 8c31db02..aa699859 100644
--- a/src/components/media/WatchedEpisodeButton.tsx
+++ b/src/components/media/WatchedEpisodeButton.tsx
@@ -1,5 +1,5 @@
-import { getEpisodeFromMedia, MWMedia } from "providers";
-import { useWatchedContext, getWatchedFromPortable } from "state/watched";
+import { getEpisodeFromMedia, MWMedia } from "@/providers";
+import { useWatchedContext, getWatchedFromPortable } from "@/state/watched";
 import { Episode } from "./EpisodeButton";
 
 export interface WatchedEpisodeProps {
diff --git a/src/components/media/WatchedMediaCard.tsx b/src/components/media/WatchedMediaCard.tsx
index 294e74fb..f8338d57 100644
--- a/src/components/media/WatchedMediaCard.tsx
+++ b/src/components/media/WatchedMediaCard.tsx
@@ -1,5 +1,5 @@
-import { MWMediaMeta } from "providers";
-import { useWatchedContext, getWatchedFromPortable } from "state/watched";
+import { MWMediaMeta } from "@/providers";
+import { useWatchedContext, getWatchedFromPortable } from "@/state/watched";
 import { MediaCard } from "./MediaCard";
 
 export interface WatchedMediaCardProps {
diff --git a/src/components/text/ArrowLink.tsx b/src/components/text/ArrowLink.tsx
index 67c645fb..1bcfddcf 100644
--- a/src/components/text/ArrowLink.tsx
+++ b/src/components/text/ArrowLink.tsx
@@ -1,5 +1,5 @@
-import { Icon, Icons } from "components/Icon";
 import { Link as LinkRouter } from "react-router-dom";
+import { Icon, Icons } from "@/components/Icon";
 
 interface IArrowLinkPropsBase {
   linkText: string;
@@ -26,7 +26,7 @@ export function ArrowLink(props: ArrowLinkProps) {
   const isExternal = !!(props as IArrowLinkPropsExternal).url;
   const isInternal = !!(props as IArrowLinkPropsInternal).to;
   const content = (
-    <span className="text-bink-600 hover:text-bink-700 group inline-flex cursor-pointer items-center space-x-1 font-bold active:scale-95 mt-1 pr-1">
+    <span className="group mt-1 inline-flex cursor-pointer items-center space-x-1 pr-1 font-bold text-bink-600 hover:text-bink-700 active:scale-95">
       {direction === "left" ? (
         <span className="text-xl transition-transform group-hover:-translate-x-1">
           <Icon icon={Icons.ARROW_LEFT} />
@@ -45,7 +45,9 @@ export function ArrowLink(props: ArrowLinkProps) {
     return <a href={(props as IArrowLinkPropsExternal).url}>{content}</a>;
   if (isInternal)
     return (
-      <LinkRouter to={(props as IArrowLinkPropsInternal).to}>{content}</LinkRouter>
+      <LinkRouter to={(props as IArrowLinkPropsInternal).to}>
+        {content}
+      </LinkRouter>
     );
   return (
     <span onClick={() => props.onClick && props.onClick()}>{content}</span>
diff --git a/src/hooks/usePortableMedia.ts b/src/hooks/usePortableMedia.ts
index c7f64cf8..81744fb9 100644
--- a/src/hooks/usePortableMedia.ts
+++ b/src/hooks/usePortableMedia.ts
@@ -1,6 +1,6 @@
-import { MWPortableMedia } from "providers";
 import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
+import { MWPortableMedia } from "@/providers";
 
 export function deserializePortableMedia(media: string): MWPortableMedia {
   return JSON.parse(atob(decodeURIComponent(media)));
diff --git a/src/hooks/useSearchQuery.ts b/src/hooks/useSearchQuery.ts
index 7a1bb329..7f83f6aa 100644
--- a/src/hooks/useSearchQuery.ts
+++ b/src/hooks/useSearchQuery.ts
@@ -1,6 +1,6 @@
-import { MWMediaType, MWQuery } from "providers";
 import React, { useRef, useState } from "react";
 import { generatePath, useHistory, useRouteMatch } from "react-router-dom";
+import { MWMediaType, MWQuery } from "@/providers";
 
 export function useSearchQuery(): [
   MWQuery,
diff --git a/src/index.tsx b/src/index.tsx
index 96812ef1..7342c4c5 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom";
 import { HashRouter } from "react-router-dom";
 import "./index.css";
-import { ErrorBoundary } from "components/layout/ErrorBoundary";
+import { ErrorBoundary } from "@/components/layout/ErrorBoundary";
 import App from "./App";
 
 ReactDOM.render(
diff --git a/src/providers/list/flixhq/index.ts b/src/providers/list/flixhq/index.ts
index d192b8e7..452c7359 100644
--- a/src/providers/list/flixhq/index.ts
+++ b/src/providers/list/flixhq/index.ts
@@ -4,10 +4,10 @@ import {
   MWPortableMedia,
   MWMediaStream,
   MWQuery,
-  MWProviderMediaResult
-} from "providers/types";
+  MWProviderMediaResult,
+} from "@/providers/types";
 
-import { CORS_PROXY_URL } from "mw_constants";
+import { CORS_PROXY_URL } from "@/mw_constants";
 
 export const flixhqProvider: MWMediaProvider = {
   id: "flixhq",
@@ -15,9 +15,13 @@ export const flixhqProvider: MWMediaProvider = {
   type: [MWMediaType.MOVIE],
   displayName: "flixhq",
 
-  async getMediaFromPortable(media: MWPortableMedia): Promise<MWProviderMediaResult> {
+  async getMediaFromPortable(
+    media: MWPortableMedia
+  ): Promise<MWProviderMediaResult> {
     const searchRes = await fetch(
-      `${CORS_PROXY_URL}https://api.consumet.org/movies/flixhq/info?id=${encodeURIComponent(media.mediaId)}`
+      `${CORS_PROXY_URL}https://api.consumet.org/movies/flixhq/info?id=${encodeURIComponent(
+        media.mediaId
+      )}`
     ).then((d) => d.json());
 
     return {
@@ -29,39 +33,49 @@ export const flixhqProvider: MWMediaProvider = {
 
   async searchForMedia(query: MWQuery): Promise<MWProviderMediaResult[]> {
     const searchRes = await fetch(
-      `${CORS_PROXY_URL}https://api.consumet.org/movies/flixhq/${encodeURIComponent(query.searchQuery)}`
+      `${CORS_PROXY_URL}https://api.consumet.org/movies/flixhq/${encodeURIComponent(
+        query.searchQuery
+      )}`
     ).then((d) => d.json());
 
-    const results: MWProviderMediaResult[] = (searchRes || []).results.map((item: any) => ({
-      title: item.title,
-      year: item.releaseDate,
-      mediaId: item.id,
-      type: MWMediaType.MOVIE,
-    }));
+    const results: MWProviderMediaResult[] = (searchRes || []).results.map(
+      (item: any) => ({
+        title: item.title,
+        year: item.releaseDate,
+        mediaId: item.id,
+        type: MWMediaType.MOVIE,
+      })
+    );
 
     return results;
   },
 
   async getStream(media: MWPortableMedia): Promise<MWMediaStream> {
     const searchRes = await fetch(
-      `${CORS_PROXY_URL}https://api.consumet.org/movies/flixhq/info?id=${encodeURIComponent(media.mediaId)}`
+      `${CORS_PROXY_URL}https://api.consumet.org/movies/flixhq/info?id=${encodeURIComponent(
+        media.mediaId
+      )}`
     ).then((d) => d.json());
 
     const params = new URLSearchParams({
       episodeId: searchRes.episodes[0].id,
-      mediaId: media.mediaId
-    })
+      mediaId: media.mediaId,
+    });
 
     const watchRes = await fetch(
-      `${CORS_PROXY_URL}https://api.consumet.org/movies/flixhq/watch?${encodeURIComponent(params.toString())}`
+      `${CORS_PROXY_URL}https://api.consumet.org/movies/flixhq/watch?${encodeURIComponent(
+        params.toString()
+      )}`
     ).then((d) => d.json());
 
-    const source = watchRes.sources.reduce((p: any, c: any) => (c.quality > p.quality) ? c : p);
+    const source = watchRes.sources.reduce((p: any, c: any) =>
+      c.quality > p.quality ? c : p
+    );
 
     return {
       url: source.url,
       type: source.isM3U8 ? "m3u8" : "mp4",
-      captions: []
+      captions: [],
     } as MWMediaStream;
   },
 };
diff --git a/src/providers/list/gdriveplayer/index.ts b/src/providers/list/gdriveplayer/index.ts
index 5b03e7ba..423a2ece 100644
--- a/src/providers/list/gdriveplayer/index.ts
+++ b/src/providers/list/gdriveplayer/index.ts
@@ -1,15 +1,15 @@
+import { unpack } from "unpacker";
+import CryptoJS from "crypto-js";
 import {
   MWMediaProvider,
   MWMediaType,
   MWPortableMedia,
   MWMediaStream,
   MWQuery,
-  MWProviderMediaResult
-} from "providers/types";
+  MWProviderMediaResult,
+} from "@/providers/types";
 
-import { CORS_PROXY_URL } from "mw_constants";
-import { unpack } from "unpacker";
-import CryptoJS from "crypto-js";
+import { CORS_PROXY_URL } from "@/mw_constants";
 
 const format = {
   stringify: (cipher: any) => {
@@ -34,7 +34,7 @@ const format = {
       salt,
     });
     return cipher;
-  }
+  },
 };
 
 export const gDrivePlayerScraper: MWMediaProvider = {
@@ -43,8 +43,12 @@ export const gDrivePlayerScraper: MWMediaProvider = {
   type: [MWMediaType.MOVIE],
   displayName: "gdriveplayer",
 
-  async getMediaFromPortable(media: MWPortableMedia): Promise<MWProviderMediaResult> {
-    const res = await fetch(`${CORS_PROXY_URL}https://api.gdriveplayer.us/v1/imdb/${media.mediaId}`).then((d) => d.json());
+  async getMediaFromPortable(
+    media: MWPortableMedia
+  ): Promise<MWProviderMediaResult> {
+    const res = await fetch(
+      `${CORS_PROXY_URL}https://api.gdriveplayer.us/v1/imdb/${media.mediaId}`
+    ).then((d) => d.json());
 
     return {
       ...media,
@@ -54,19 +58,25 @@ export const gDrivePlayerScraper: MWMediaProvider = {
   },
 
   async searchForMedia(query: MWQuery): Promise<MWProviderMediaResult[]> {
-    const searchRes = await fetch(`${CORS_PROXY_URL}https://api.gdriveplayer.us/v1/movie/search?title=${query.searchQuery}`).then((d) => d.json());
+    const searchRes = await fetch(
+      `${CORS_PROXY_URL}https://api.gdriveplayer.us/v1/movie/search?title=${query.searchQuery}`
+    ).then((d) => d.json());
 
-    const results: MWProviderMediaResult[] = (searchRes || []).map((item: any) => ({
-      title: item.title,
-      year: item.year,
-      mediaId: item.imdb,
-    }));
+    const results: MWProviderMediaResult[] = (searchRes || []).map(
+      (item: any) => ({
+        title: item.title,
+        year: item.year,
+        mediaId: item.imdb,
+      })
+    );
 
     return results;
   },
 
   async getStream(media: MWPortableMedia): Promise<MWMediaStream> {
-    const streamRes = await fetch(`${CORS_PROXY_URL}https://database.gdriveplayer.us/player.php?imdb=${media.mediaId}`).then((d) => d.text());
+    const streamRes = await fetch(
+      `${CORS_PROXY_URL}https://database.gdriveplayer.us/player.php?imdb=${media.mediaId}`
+    ).then((d) => d.text());
     const page = new DOMParser().parseFromString(streamRes, "text/html");
 
     const script: HTMLElement | undefined = Array.from(
@@ -78,10 +88,29 @@ export const gDrivePlayerScraper: MWMediaProvider = {
     }
 
     /// NOTE: this code requires re-write, it's not safe
-    const data = unpack(script.textContent).split("var data=\\'")[1].split("\\'")[0].replace(/\\/g, "");
-    const decryptedData = unpack(CryptoJS.AES.decrypt(data, "alsfheafsjklNIWORNiolNIOWNKLNXakjsfwnBdwjbwfkjbJjkopfjweopjASoiwnrflakefneiofrt", { format }).toString(CryptoJS.enc.Utf8));
+    const data = unpack(script.textContent)
+      .split("var data=\\'")[1]
+      .split("\\'")[0]
+      .replace(/\\/g, "");
+    const decryptedData = unpack(
+      CryptoJS.AES.decrypt(
+        data,
+        "alsfheafsjklNIWORNiolNIOWNKLNXakjsfwnBdwjbwfkjbJjkopfjweopjASoiwnrflakefneiofrt",
+        { format }
+      ).toString(CryptoJS.enc.Utf8)
+    );
     // eslint-disable-next-line
-    const sources = JSON.parse(JSON.stringify(eval(decryptedData.split("sources:")[1].split(",image")[0].replace(/\\/g, "").replace(/document\.referrer/g, "\"\""))));
+    const sources = JSON.parse(
+      JSON.stringify(
+        eval(
+          decryptedData
+            .split("sources:")[1]
+            .split(",image")[0]
+            .replace(/\\/g, "")
+            .replace(/document\.referrer/g, '""')
+        )
+      )
+    );
     const source = sources[sources.length - 1];
     /// END
 
diff --git a/src/providers/list/gomostream/index.ts b/src/providers/list/gomostream/index.ts
index 4232ee47..50cb5dc3 100644
--- a/src/providers/list/gomostream/index.ts
+++ b/src/providers/list/gomostream/index.ts
@@ -1,15 +1,15 @@
+import { unpack } from "unpacker";
+import json5 from "json5";
 import {
   MWMediaProvider,
   MWMediaType,
   MWPortableMedia,
   MWMediaStream,
   MWQuery,
-  MWProviderMediaResult
-} from "providers/types";
+  MWProviderMediaResult,
+} from "@/providers/types";
 
-import { CORS_PROXY_URL, OMDB_API_KEY } from "mw_constants";
-import { unpack } from "unpacker";
-import json5 from "json5";
+import { CORS_PROXY_URL, OMDB_API_KEY } from "@/mw_constants";
 
 export const gomostreamScraper: MWMediaProvider = {
   id: "gomostream",
@@ -17,21 +17,25 @@ export const gomostreamScraper: MWMediaProvider = {
   type: [MWMediaType.MOVIE],
   displayName: "gomostream",
 
-  async getMediaFromPortable(media: MWPortableMedia): Promise<MWProviderMediaResult> {
+  async getMediaFromPortable(
+    media: MWPortableMedia
+  ): Promise<MWProviderMediaResult> {
     const params = new URLSearchParams({
       apikey: OMDB_API_KEY,
       i: media.mediaId,
-      type: media.mediaType
+      type: media.mediaType,
     });
 
     const res = await fetch(
-      `${CORS_PROXY_URL}http://www.omdbapi.com/?${encodeURIComponent(params.toString())}`,
-    ).then(d => d.json())
+      `${CORS_PROXY_URL}http://www.omdbapi.com/?${encodeURIComponent(
+        params.toString()
+      )}`
+    ).then((d) => d.json());
 
     return {
       ...media,
       title: res.Title,
-      year: res.Year
+      year: res.Year,
     } as MWProviderMediaResult;
   },
 
@@ -41,51 +45,69 @@ export const gomostreamScraper: MWMediaProvider = {
     const params = new URLSearchParams({
       apikey: OMDB_API_KEY,
       s: term,
-      type: query.type
+      type: query.type,
     });
     const searchRes = await fetch(
-      `${CORS_PROXY_URL}http://www.omdbapi.com/?${encodeURIComponent(params.toString())}`,
-    ).then(d => d.json())
+      `${CORS_PROXY_URL}http://www.omdbapi.com/?${encodeURIComponent(
+        params.toString()
+      )}`
+    ).then((d) => d.json());
 
-    const results: MWProviderMediaResult[] = (searchRes.Search || []).map((d: any) => ({
-      title: d.Title,
-      year: d.Year,
-      mediaId: d.imdbID
-    } as MWProviderMediaResult));
+    const results: MWProviderMediaResult[] = (searchRes.Search || []).map(
+      (d: any) =>
+        ({
+          title: d.Title,
+          year: d.Year,
+          mediaId: d.imdbID,
+        } as MWProviderMediaResult)
+    );
 
     return results;
   },
 
   async getStream(media: MWPortableMedia): Promise<MWMediaStream> {
-    const type = media.mediaType === MWMediaType.SERIES ? 'show' : media.mediaType;
-    const res1 = await fetch(`${CORS_PROXY_URL}https://gomo.to/${type}/${media.mediaId}`).then((d) => d.text());
-    if (res1 === "Movie not available." || res1 === "Episode not available.") throw new Error(res1);
+    const type =
+      media.mediaType === MWMediaType.SERIES ? "show" : media.mediaType;
+    const res1 = await fetch(
+      `${CORS_PROXY_URL}https://gomo.to/${type}/${media.mediaId}`
+    ).then((d) => d.text());
+    if (res1 === "Movie not available." || res1 === "Episode not available.")
+      throw new Error(res1);
 
     const tc = res1.match(/var tc = '(.+)';/)?.[1] || "";
     const _token = res1.match(/"_token": "(.+)",/)?.[1] || "";
 
-    const fd = new FormData()
-    fd.append('tokenCode', tc)
-    fd.append('_token', _token)
+    const fd = new FormData();
+    fd.append("tokenCode", tc);
+    fd.append("_token", _token);
 
-    const src = await fetch(`${CORS_PROXY_URL}https://gomo.to/decoding_v3.php`, {
-      method: "POST",
-      body: fd,
-      headers: {
-        'x-token': `${tc.slice(5, 13).split("").reverse().join("")}13574199`
+    const src = await fetch(
+      `${CORS_PROXY_URL}https://gomo.to/decoding_v3.php`,
+      {
+        method: "POST",
+        body: fd,
+        headers: {
+          "x-token": `${tc.slice(5, 13).split("").reverse().join("")}13574199`,
+        },
       }
-    }).then((d) => d.json());
-    const embeds = src.filter((url: string) => url.includes('gomo.to'));
+    ).then((d) => d.json());
+    const embeds = src.filter((url: string) => url.includes("gomo.to"));
 
     // maybe try all embeds in the future
     const embedUrl = embeds[1];
-    const res2 = await fetch(`${CORS_PROXY_URL}${embedUrl}`).then((d) => d.text());
+    const res2 = await fetch(`${CORS_PROXY_URL}${embedUrl}`).then((d) =>
+      d.text()
+    );
 
     const res2DOM = new DOMParser().parseFromString(res2, "text/html");
-    if (res2DOM.body.innerText === "File was deleted") throw new Error("File was deleted");
+    if (res2DOM.body.innerText === "File was deleted")
+      throw new Error("File was deleted");
 
-    const script = Array.from(res2DOM.querySelectorAll("script")).find((s: HTMLScriptElement) => s.innerHTML.includes("eval(function(p,a,c,k,e,d"))?.innerHTML;
-    if (!script) throw new Error("Could not get packed data")
+    const script = Array.from(res2DOM.querySelectorAll("script")).find(
+      (s: HTMLScriptElement) =>
+        s.innerHTML.includes("eval(function(p,a,c,k,e,d")
+    )?.innerHTML;
+    if (!script) throw new Error("Could not get packed data");
 
     const unpacked = unpack(script);
     const rawSources = /sources:(\[.*?\])/.exec(unpacked);
@@ -94,9 +116,10 @@ export const gomostreamScraper: MWMediaProvider = {
     const sources = json5.parse(rawSources[1]);
     const streamUrl = sources[0].file;
 
-    const streamType = streamUrl.split('.').at(-1);
-    if (streamType !== "mp4" && streamType !== "m3u8") throw new Error("Unsupported stream type");
+    const streamType = streamUrl.split(".").at(-1);
+    if (streamType !== "mp4" && streamType !== "m3u8")
+      throw new Error("Unsupported stream type");
 
     return { url: streamUrl, type: streamType, captions: [] };
-  }
+  },
 };
diff --git a/src/providers/list/superstream/index.ts b/src/providers/list/superstream/index.ts
index 04259ff5..72df7e98 100644
--- a/src/providers/list/superstream/index.ts
+++ b/src/providers/list/superstream/index.ts
@@ -1,6 +1,10 @@
 // this is derived from https://github.com/recloudstream/cloudstream-extensions
 // for more info please check the LICENSE file in the same directory
 
+import { customAlphabet } from "nanoid";
+import toWebVTT from "srt-webvtt";
+import CryptoJS from "crypto-js";
+import { CORS_PROXY_URL, TMDB_API_KEY } from "@/mw_constants";
 import {
   MWMediaProvider,
   MWMediaType,
@@ -9,11 +13,7 @@ import {
   MWQuery,
   MWMediaSeasons,
   MWProviderMediaResult,
-} from "providers/types";
-import { CORS_PROXY_URL, TMDB_API_KEY } from "mw_constants";
-import { customAlphabet } from "nanoid";
-import toWebVTT from "srt-webvtt";
-import CryptoJS from "crypto-js";
+} from "@/providers/types";
 
 const nanoid = customAlphabet("0123456789abcdef", 32);
 
@@ -41,7 +41,7 @@ const crypto = {
   getVerify(str: string, str2: string, str3: string) {
     if (str) {
       return CryptoJS.MD5(
-        CryptoJS.MD5(str2).toString() + str3 + str,
+        CryptoJS.MD5(str2).toString() + str3 + str
       ).toString();
     }
     return null;
@@ -66,7 +66,7 @@ const get = (data: object, altApi = false) => {
     JSON.stringify({
       ...defaultData,
       ...data,
-    }),
+    })
   );
   const appKeyHash = CryptoJS.MD5(appKey).toString();
   const verify = crypto.getVerify(encryptedData, appKey, key);
@@ -102,7 +102,7 @@ export const superStreamScraper: MWMediaProvider = {
   displayName: "SuperStream",
 
   async getMediaFromPortable(
-    media: MWPortableMedia,
+    media: MWPortableMedia
   ): Promise<MWProviderMediaResult> {
     let apiQuery: any;
     if (media.mediaType === MWMediaType.SERIES) {
@@ -174,10 +174,18 @@ export const superStreamScraper: MWMediaProvider = {
       };
       const mediaRes = (await get(apiQuery).then((r) => r.json())).data;
       const hdQuality =
-        mediaRes.list.find((quality: any) => (quality.quality === "1080p" && quality.path)) ??
-        mediaRes.list.find((quality: any) => (quality.quality === "720p" && quality.path)) ??
-        mediaRes.list.find((quality: any) => (quality.quality === "480p" && quality.path)) ??
-        mediaRes.list.find((quality: any) => (quality.quality === "360p" && quality.path));
+        mediaRes.list.find(
+          (quality: any) => quality.quality === "1080p" && quality.path
+        ) ??
+        mediaRes.list.find(
+          (quality: any) => quality.quality === "720p" && quality.path
+        ) ??
+        mediaRes.list.find(
+          (quality: any) => quality.quality === "480p" && quality.path
+        ) ??
+        mediaRes.list.find(
+          (quality: any) => quality.quality === "360p" && quality.path
+        );
 
       if (!hdQuality) throw new Error("No quality could be found.");
 
@@ -192,7 +200,7 @@ export const superStreamScraper: MWMediaProvider = {
       const mappedCaptions = await Promise.all(
         subtitleRes.list.map(async (subtitle: any) => {
           const captionBlob = await fetch(
-            `${CORS_PROXY_URL}${subtitle.subtitles[0].file_path}`,
+            `${CORS_PROXY_URL}${subtitle.subtitles[0].file_path}`
           ).then((captionRes) => captionRes.blob()); // cross-origin bypass
           const captionUrl = await toWebVTT(captionBlob); // convert to vtt so it's playable
           return {
@@ -200,7 +208,7 @@ export const superStreamScraper: MWMediaProvider = {
             url: captionUrl,
             label: subtitle.language,
           };
-        }),
+        })
       );
 
       return { url: hdQuality.path, type: "mp4", captions: mappedCaptions };
@@ -217,10 +225,18 @@ export const superStreamScraper: MWMediaProvider = {
     };
     const mediaRes = (await get(apiQuery).then((r) => r.json())).data;
     const hdQuality =
-      mediaRes.list.find((quality: any) => (quality.quality === "1080p" && quality.path)) ??
-      mediaRes.list.find((quality: any) => (quality.quality === "720p" && quality.path)) ??
-      mediaRes.list.find((quality: any) => (quality.quality === "480p" && quality.path)) ??
-      mediaRes.list.find((quality: any) => (quality.quality === "360p" && quality.path));
+      mediaRes.list.find(
+        (quality: any) => quality.quality === "1080p" && quality.path
+      ) ??
+      mediaRes.list.find(
+        (quality: any) => quality.quality === "720p" && quality.path
+      ) ??
+      mediaRes.list.find(
+        (quality: any) => quality.quality === "480p" && quality.path
+      ) ??
+      mediaRes.list.find(
+        (quality: any) => quality.quality === "360p" && quality.path
+      );
 
     if (!hdQuality) throw new Error("No quality could be found.");
 
@@ -237,7 +253,7 @@ export const superStreamScraper: MWMediaProvider = {
     const mappedCaptions = await Promise.all(
       subtitleRes.list.map(async (subtitle: any) => {
         const captionBlob = await fetch(
-          `${CORS_PROXY_URL}${subtitle.subtitles[0].file_path}`,
+          `${CORS_PROXY_URL}${subtitle.subtitles[0].file_path}`
         ).then((captionRes) => captionRes.blob()); // cross-origin bypass
         const captionUrl = await toWebVTT(captionBlob); // convert to vtt so it's playable
         return {
@@ -245,13 +261,13 @@ export const superStreamScraper: MWMediaProvider = {
           url: captionUrl,
           label: subtitle.language,
         };
-      }),
+      })
     );
 
     return { url: hdQuality.path, type: "mp4", captions: mappedCaptions };
   },
   async getSeasonDataFromMedia(
-    media: MWPortableMedia,
+    media: MWPortableMedia
   ): Promise<MWMediaSeasons> {
     const apiQuery = {
       module: "TV_detail_1",
@@ -261,11 +277,11 @@ export const superStreamScraper: MWMediaProvider = {
     const detailRes = (await get(apiQuery, true).then((r) => r.json())).data;
     const firstSearchResult = (
       await fetch(
-        `https://api.themoviedb.org/3/search/tv?api_key=${TMDB_API_KEY}&language=en-US&page=1&query=${detailRes.title}&include_adult=false`,
+        `https://api.themoviedb.org/3/search/tv?api_key=${TMDB_API_KEY}&language=en-US&page=1&query=${detailRes.title}&include_adult=false`
       ).then((r) => r.json())
     ).results[0];
     const showDetails = await fetch(
-      `https://api.themoviedb.org/3/tv/${firstSearchResult.id}?api_key=${TMDB_API_KEY}`,
+      `https://api.themoviedb.org/3/tv/${firstSearchResult.id}?api_key=${TMDB_API_KEY}`
     ).then((r) => r.json());
 
     return {
@@ -279,7 +295,7 @@ export const superStreamScraper: MWMediaProvider = {
             sort: epNum + 1,
             id: (epNum + 1).toString(),
             episodeNumber: epNum + 1,
-          }),
+          })
         ),
       })),
     };
diff --git a/src/providers/list/theflix/index.ts b/src/providers/list/theflix/index.ts
index 5b93805f..cf41cc11 100644
--- a/src/providers/list/theflix/index.ts
+++ b/src/providers/list/theflix/index.ts
@@ -5,17 +5,17 @@ import {
   MWMediaStream,
   MWQuery,
   MWMediaSeasons,
-  MWProviderMediaResult
-} from "providers/types";
+  MWProviderMediaResult,
+} from "@/providers/types";
 
 import {
   searchTheFlix,
   getDataFromSearch,
   turnDataIntoMedia,
-} from "providers/list/theflix/search";
+} from "@/providers/list/theflix/search";
 
-import { getDataFromPortableSearch } from "providers/list/theflix/portableToMedia";
-import { CORS_PROXY_URL } from "mw_constants";
+import { getDataFromPortableSearch } from "@/providers/list/theflix/portableToMedia";
+import { CORS_PROXY_URL } from "@/mw_constants";
 
 export const theFlixScraper: MWMediaProvider = {
   id: "theflix",
diff --git a/src/providers/list/theflix/portableToMedia.ts b/src/providers/list/theflix/portableToMedia.ts
index 6a2b75d1..4115e703 100644
--- a/src/providers/list/theflix/portableToMedia.ts
+++ b/src/providers/list/theflix/portableToMedia.ts
@@ -1,5 +1,5 @@
-import { CORS_PROXY_URL } from "mw_constants";
-import { MWMediaType, MWPortableMedia } from "providers/types";
+import { CORS_PROXY_URL } from "@/mw_constants";
+import { MWMediaType, MWPortableMedia } from "@/providers/types";
 
 const getTheFlixUrl = (media: MWPortableMedia, params?: URLSearchParams) => {
   if (media.mediaType === MWMediaType.MOVIE) {
diff --git a/src/providers/list/theflix/search.ts b/src/providers/list/theflix/search.ts
index db4df27e..661f2542 100644
--- a/src/providers/list/theflix/search.ts
+++ b/src/providers/list/theflix/search.ts
@@ -1,5 +1,5 @@
-import { CORS_PROXY_URL } from "mw_constants";
-import { MWMediaType, MWProviderMediaResult, MWQuery } from "providers";
+import { CORS_PROXY_URL } from "@/mw_constants";
+import { MWMediaType, MWProviderMediaResult, MWQuery } from "@/providers";
 
 const getTheFlixUrl = (type: "tv-shows" | "movies", params: URLSearchParams) =>
   `https://theflix.to/${type}/trending?${params}`;
diff --git a/src/providers/list/xemovie/index.ts b/src/providers/list/xemovie/index.ts
index d265011d..3f6b585b 100644
--- a/src/providers/list/xemovie/index.ts
+++ b/src/providers/list/xemovie/index.ts
@@ -5,10 +5,10 @@ import {
   MWMediaStream,
   MWQuery,
   MWProviderMediaResult,
-  MWMediaCaption
-} from "providers/types";
+  MWMediaCaption,
+} from "@/providers/types";
 
-import { CORS_PROXY_URL } from "mw_constants";
+import { CORS_PROXY_URL } from "@/mw_constants";
 
 export const xemovieScraper: MWMediaProvider = {
   id: "xemovie",
@@ -16,15 +16,21 @@ export const xemovieScraper: MWMediaProvider = {
   type: [MWMediaType.MOVIE],
   displayName: "xemovie",
 
-  async getMediaFromPortable(media: MWPortableMedia): Promise<MWProviderMediaResult> {
+  async getMediaFromPortable(
+    media: MWPortableMedia
+  ): Promise<MWProviderMediaResult> {
     const res = await fetch(
-      `${CORS_PROXY_URL}https://xemovie.co/movies/${media.mediaId}/watch`,
-    ).then(d => d.text());
+      `${CORS_PROXY_URL}https://xemovie.co/movies/${media.mediaId}/watch`
+    ).then((d) => d.text());
 
     const DOM = new DOMParser().parseFromString(res, "text/html");
 
-    const title = DOM.querySelector(".text-primary.text-lg.font-extrabold")?.textContent || "";
-    const year = DOM.querySelector("div.justify-between:nth-child(3) > div:nth-child(2)")?.textContent || "";
+    const title =
+      DOM.querySelector(".text-primary.text-lg.font-extrabold")?.textContent ||
+      "";
+    const year =
+      DOM.querySelector("div.justify-between:nth-child(3) > div:nth-child(2)")
+        ?.textContent || "";
 
     return {
       ...media,
@@ -36,68 +42,99 @@ export const xemovieScraper: MWMediaProvider = {
   async searchForMedia(query: MWQuery): Promise<MWProviderMediaResult[]> {
     const term = query.searchQuery.toLowerCase();
 
-    const searchUrl = `${CORS_PROXY_URL}https://xemovie.co/search?q=${encodeURIComponent(term)}`;
+    const searchUrl = `${CORS_PROXY_URL}https://xemovie.co/search?q=${encodeURIComponent(
+      term
+    )}`;
     const searchRes = await fetch(searchUrl).then((d) => d.text());
 
     const parser = new DOMParser();
     const doc = parser.parseFromString(searchRes, "text/html");
 
-    const movieContainer = doc.querySelectorAll(".py-10")[0].querySelector(".grid");
+    const movieContainer = doc
+      .querySelectorAll(".py-10")[0]
+      .querySelector(".grid");
     if (!movieContainer) return [];
-    const movieNodes = Array.from(movieContainer.querySelectorAll("a")).filter(link => !link.className);
+    const movieNodes = Array.from(movieContainer.querySelectorAll("a")).filter(
+      (link) => !link.className
+    );
 
-    const results: MWProviderMediaResult[] = movieNodes.map((node) => {
-      const parent = node.parentElement;
-      if (!parent) return;
+    const results: MWProviderMediaResult[] = movieNodes
+      .map((node) => {
+        const parent = node.parentElement;
+        if (!parent) return;
 
-      const aElement = parent.querySelector("a");
-      if (!aElement) return;
+        const aElement = parent.querySelector("a");
+        if (!aElement) return;
 
-      return {
-        title: parent.querySelector("div > div > a > h6")?.textContent,
-        year: parent.querySelector("div.float-right")?.textContent,
-        mediaId: aElement.href.split('/').pop() || "",
-      }
-    }).filter((d): d is MWProviderMediaResult => !!d);
+        return {
+          title: parent.querySelector("div > div > a > h6")?.textContent,
+          year: parent.querySelector("div.float-right")?.textContent,
+          mediaId: aElement.href.split("/").pop() || "",
+        };
+      })
+      .filter((d): d is MWProviderMediaResult => !!d);
 
     return results;
   },
 
   async getStream(media: MWPortableMedia): Promise<MWMediaStream> {
-    if (media.mediaType !== MWMediaType.MOVIE) throw new Error("Incorrect type")
+    if (media.mediaType !== MWMediaType.MOVIE)
+      throw new Error("Incorrect type");
 
     const url = `${CORS_PROXY_URL}https://xemovie.co/movies/${media.mediaId}/watch`;
 
     let streamUrl = "";
     const subtitles: MWMediaCaption[] = [];
 
-    const res = await fetch(url).then(d => d.text());
-    const scripts = Array.from(new DOMParser().parseFromString(res, "text/html").querySelectorAll("script"));
+    const res = await fetch(url).then((d) => d.text());
+    const scripts = Array.from(
+      new DOMParser()
+        .parseFromString(res, "text/html")
+        .querySelectorAll("script")
+    );
 
     for (const script of scripts) {
       if (!script.textContent) continue;
 
       if (script.textContent.match(/https:\/\/[a-z][0-9]\.xemovie\.com/)) {
-        const data = JSON.parse(JSON.stringify(eval(`(${script.textContent.replace("const data = ", "").split("};")[0]}})`)));
+        const data = JSON.parse(
+          JSON.stringify(
+            eval(
+              `(${
+                script.textContent.replace("const data = ", "").split("};")[0]
+              }})`
+            )
+          )
+        );
         streamUrl = data.playlist[0].file;
 
-        for (const [index, subtitleTrack] of data.playlist[0].tracks.entries()) {
+        for (const [
+          index,
+          subtitleTrack,
+        ] of data.playlist[0].tracks.entries()) {
           const subtitleBlob = URL.createObjectURL(
-            await fetch(`${CORS_PROXY_URL}${subtitleTrack.file}`).then((captionRes) => captionRes.blob())
+            await fetch(`${CORS_PROXY_URL}${subtitleTrack.file}`).then(
+              (captionRes) => captionRes.blob()
+            )
           ); // do this so no need for CORS errors
 
           subtitles.push({
             id: index,
             url: subtitleBlob,
-            label: subtitleTrack.label
-          })
+            label: subtitleTrack.label,
+          });
         }
       }
     }
 
-    const streamType = streamUrl.split('.').at(-1);
-    if (streamType !== "mp4" && streamType !== "m3u8") throw new Error("Unsupported stream type");
+    const streamType = streamUrl.split(".").at(-1);
+    if (streamType !== "mp4" && streamType !== "m3u8")
+      throw new Error("Unsupported stream type");
 
-    return { url: streamUrl, type: streamType, captions: subtitles } as MWMediaStream;
-  }
+    return {
+      url: streamUrl,
+      type: streamType,
+      captions: subtitles,
+    } as MWMediaStream;
+  },
 };
diff --git a/src/providers/methods/contentCache.ts b/src/providers/methods/contentCache.ts
index 84d52d6a..c2e43a7b 100644
--- a/src/providers/methods/contentCache.ts
+++ b/src/providers/methods/contentCache.ts
@@ -1,9 +1,11 @@
-import { SimpleCache } from "utils/cache";
-import { MWPortableMedia, MWMedia } from "providers";
+import { SimpleCache } from "@/utils/cache";
+import { MWPortableMedia, MWMedia } from "@/providers";
 
 // cache
 const contentCache = new SimpleCache<MWPortableMedia, MWMedia>();
-contentCache.setCompare((a,b) => a.mediaId === b.mediaId && a.providerId === b.providerId);
+contentCache.setCompare(
+  (a, b) => a.mediaId === b.mediaId && a.providerId === b.providerId
+);
 contentCache.initialize();
 
-export default contentCache;
\ No newline at end of file
+export default contentCache;
diff --git a/src/providers/methods/helpers.ts b/src/providers/methods/helpers.ts
index 8ed1aa67..4ab75794 100644
--- a/src/providers/methods/helpers.ts
+++ b/src/providers/methods/helpers.ts
@@ -1,5 +1,5 @@
-import { MWMediaType, MWMediaProviderMetadata } from "providers";
-import { MWMedia, MWMediaEpisode, MWMediaSeason } from "providers/types";
+import { MWMediaType, MWMediaProviderMetadata } from "@/providers";
+import { MWMedia, MWMediaEpisode, MWMediaSeason } from "@/providers/types";
 import { mediaProviders, mediaProvidersUnchecked } from "./providers";
 
 /*
diff --git a/src/providers/methods/providers.ts b/src/providers/methods/providers.ts
index 13c5350a..c7d68875 100644
--- a/src/providers/methods/providers.ts
+++ b/src/providers/methods/providers.ts
@@ -1,19 +1,19 @@
-import { theFlixScraper } from "providers/list/theflix";
-import { gDrivePlayerScraper } from "providers/list/gdriveplayer";
-import { MWWrappedMediaProvider, WrapProvider } from "providers/wrapper";
-import { gomostreamScraper } from "providers/list/gomostream";
-import { xemovieScraper } from "providers/list/xemovie";
-import { flixhqProvider } from "providers/list/flixhq";
-import { superStreamScraper } from "providers/list/superstream";
+import { theFlixScraper } from "@/providers/list/theflix";
+import { gDrivePlayerScraper } from "@/providers/list/gdriveplayer";
+import { MWWrappedMediaProvider, WrapProvider } from "@/providers/wrapper";
+import { gomostreamScraper } from "@/providers/list/gomostream";
+import { xemovieScraper } from "@/providers/list/xemovie";
+import { flixhqProvider } from "@/providers/list/flixhq";
+import { superStreamScraper } from "@/providers/list/superstream";
 
 export const mediaProvidersUnchecked: MWWrappedMediaProvider[] = [
-	WrapProvider(superStreamScraper),
-	WrapProvider(theFlixScraper),
-	WrapProvider(gDrivePlayerScraper),
-	WrapProvider(gomostreamScraper),
-	WrapProvider(xemovieScraper),
-	WrapProvider(flixhqProvider),
+  WrapProvider(superStreamScraper),
+  WrapProvider(theFlixScraper),
+  WrapProvider(gDrivePlayerScraper),
+  WrapProvider(gomostreamScraper),
+  WrapProvider(xemovieScraper),
+  WrapProvider(flixhqProvider),
 ];
 
 export const mediaProviders: MWWrappedMediaProvider[] =
-	mediaProvidersUnchecked.filter((v) => v.enabled);
+  mediaProvidersUnchecked.filter((v) => v.enabled);
diff --git a/src/providers/methods/search.ts b/src/providers/methods/search.ts
index 4459a29f..856fc0fa 100644
--- a/src/providers/methods/search.ts
+++ b/src/providers/methods/search.ts
@@ -4,8 +4,8 @@ import {
   MWMedia,
   MWQuery,
   convertMediaToPortable,
-} from "providers";
-import { SimpleCache } from "utils/cache";
+} from "@/providers";
+import { SimpleCache } from "@/utils/cache";
 import { GetProvidersForType } from "./helpers";
 import contentCache from "./contentCache";
 
diff --git a/src/providers/methods/seasons.ts b/src/providers/methods/seasons.ts
index 6ded3d0e..a9e996be 100644
--- a/src/providers/methods/seasons.ts
+++ b/src/providers/methods/seasons.ts
@@ -1,6 +1,10 @@
-import { SimpleCache } from "utils/cache";
-import { MWPortableMedia } from "providers";
-import { MWMediaSeasons, MWMediaType, MWMediaProviderSeries } from "providers/types";
+import { SimpleCache } from "@/utils/cache";
+import { MWPortableMedia } from "@/providers";
+import {
+  MWMediaSeasons,
+  MWMediaType,
+  MWMediaProviderSeries,
+} from "@/providers/types";
 import { getProviderFromId } from "./helpers";
 
 // cache
@@ -23,7 +27,10 @@ export async function getSeasonDataFromMedia(
     };
   }
 
-  if (!provider.type.includes(MWMediaType.SERIES) && !provider.type.includes(MWMediaType.ANIME)) {
+  if (
+    !provider.type.includes(MWMediaType.SERIES) &&
+    !provider.type.includes(MWMediaType.ANIME)
+  ) {
     return {
       seasons: [],
     };
diff --git a/src/state/bookmark/context.tsx b/src/state/bookmark/context.tsx
index 04b3b9de..c8eb2dca 100644
--- a/src/state/bookmark/context.tsx
+++ b/src/state/bookmark/context.tsx
@@ -1,4 +1,3 @@
-import { getProviderMetadata, MWMediaMeta } from "providers";
 import {
   createContext,
   ReactNode,
@@ -7,6 +6,7 @@ import {
   useMemo,
   useState,
 } from "react";
+import { getProviderMetadata, MWMediaMeta } from "@/providers";
 import { BookmarkStore } from "./store";
 
 interface BookmarkStoreData {
diff --git a/src/state/bookmark/store.ts b/src/state/bookmark/store.ts
index 09ffcf0e..17f06642 100644
--- a/src/state/bookmark/store.ts
+++ b/src/state/bookmark/store.ts
@@ -1,13 +1,13 @@
-import { versionedStoreBuilder } from 'utils/storage';
+import { versionedStoreBuilder } from "@/utils/storage";
 
 export const BookmarkStore = versionedStoreBuilder()
-  .setKey('mw-bookmarks')
+  .setKey("mw-bookmarks")
   .addVersion({
     version: 0,
     create() {
       return {
-        bookmarks: []
-      }
-    }
+        bookmarks: [],
+      };
+    },
   })
-  .build()
+  .build();
diff --git a/src/state/watched/context.tsx b/src/state/watched/context.tsx
index dc7fe136..789d2308 100644
--- a/src/state/watched/context.tsx
+++ b/src/state/watched/context.tsx
@@ -1,4 +1,3 @@
-import { MWMediaMeta, getProviderMetadata, MWMediaType } from "providers";
 import React, {
   createContext,
   ReactNode,
@@ -7,6 +6,7 @@ import React, {
   useMemo,
   useState,
 } from "react";
+import { MWMediaMeta, getProviderMetadata, MWMediaType } from "@/providers";
 import { VideoProgressStore } from "./store";
 
 interface WatchedStoreItem extends MWMediaMeta {
@@ -38,7 +38,7 @@ export function getWatchedFromPortable(
 }
 
 const WatchedContext = createContext<WatchedStoreDataWrapper>({
-  updateProgress: () => { },
+  updateProgress: () => {},
   getFilteredWatched: () => [],
   watched: {
     items: [],
diff --git a/src/state/watched/store.ts b/src/state/watched/store.ts
index 5acd4ef0..0b3a79f7 100644
--- a/src/state/watched/store.ts
+++ b/src/state/watched/store.ts
@@ -1,5 +1,5 @@
-import { MWMediaType } from "providers";
-import { versionedStoreBuilder } from "utils/storage";
+import { MWMediaType } from "@/providers";
+import { versionedStoreBuilder } from "@/utils/storage";
 import { WatchedStoreData } from "./context";
 
 export const VideoProgressStore = versionedStoreBuilder()
@@ -12,35 +12,48 @@ export const VideoProgressStore = versionedStoreBuilder()
     migrate(data: any) {
       const output: WatchedStoreData = { items: [] };
 
-      if (!data || data.constructor !== Object)
-        return output;
+      if (!data || data.constructor !== Object) return output;
 
       Object.keys(data).forEach((scraperId) => {
         if (scraperId === "--version") return;
         if (scraperId === "save") return;
 
-        if (data[scraperId].movie && data[scraperId].movie.constructor === Object) {
+        if (
+          data[scraperId].movie &&
+          data[scraperId].movie.constructor === Object
+        ) {
           Object.keys(data[scraperId].movie).forEach((movieId) => {
             try {
               output.items.push({
-                mediaId: movieId.includes("player.php") ? movieId.split("player.php%3Fimdb%3D")[1] : movieId,
+                mediaId: movieId.includes("player.php")
+                  ? movieId.split("player.php%3Fimdb%3D")[1]
+                  : movieId,
                 mediaType: MWMediaType.MOVIE,
                 providerId: scraperId,
                 title: data[scraperId].movie[movieId].full.meta.title,
                 year: data[scraperId].movie[movieId].full.meta.year,
                 progress: data[scraperId].movie[movieId].full.currentlyAt,
-                percentage: Math.round((data[scraperId].movie[movieId].full.currentlyAt / data[scraperId].movie[movieId].full.totalDuration) * 100)
+                percentage: Math.round(
+                  (data[scraperId].movie[movieId].full.currentlyAt /
+                    data[scraperId].movie[movieId].full.totalDuration) *
+                    100
+                ),
               });
             } catch (err) {
-              console.error(`Failed to migrate movie: ${scraperId}/${movieId}`, data[scraperId].movie[movieId]);
+              console.error(
+                `Failed to migrate movie: ${scraperId}/${movieId}`,
+                data[scraperId].movie[movieId]
+              );
             }
           });
         }
 
-        if (data[scraperId].show && data[scraperId].show.constructor === Object) {
+        if (
+          data[scraperId].show &&
+          data[scraperId].show.constructor === Object
+        ) {
           Object.keys(data[scraperId].show).forEach((showId) => {
-            if (data[scraperId].show[showId].constructor !== Object)
-              return;
+            if (data[scraperId].show[showId].constructor !== Object) return;
             Object.keys(data[scraperId].show[showId]).forEach((episodeId) => {
               try {
                 output.items.push({
@@ -49,13 +62,21 @@ export const VideoProgressStore = versionedStoreBuilder()
                   providerId: scraperId,
                   title: data[scraperId].show[showId][episodeId].meta.title,
                   year: data[scraperId].show[showId][episodeId].meta.year,
-                  percentage: Math.round((data[scraperId].show[showId][episodeId].currentlyAt / data[scraperId].show[showId][episodeId].totalDuration) * 100),
+                  percentage: Math.round(
+                    (data[scraperId].show[showId][episodeId].currentlyAt /
+                      data[scraperId].show[showId][episodeId].totalDuration) *
+                      100
+                  ),
                   progress: data[scraperId].show[showId][episodeId].currentlyAt,
-                  episodeId: data[scraperId].show[showId][episodeId].show.episode,
+                  episodeId:
+                    data[scraperId].show[showId][episodeId].show.episode,
                   seasonId: data[scraperId].show[showId][episodeId].show.season,
                 });
               } catch (err) {
-                console.error(`Failed to migrate series: ${scraperId}/${showId}/${episodeId}`, data[scraperId].show[showId][episodeId]);
+                console.error(
+                  `Failed to migrate series: ${scraperId}/${showId}/${episodeId}`,
+                  data[scraperId].show[showId][episodeId]
+                );
               }
             });
           });
diff --git a/src/views/MediaView.tsx b/src/views/MediaView.tsx
index 7b2020d1..446d9515 100644
--- a/src/views/MediaView.tsx
+++ b/src/views/MediaView.tsx
@@ -1,14 +1,19 @@
-import { IconPatch } from "components/buttons/IconPatch";
-import { Icons } from "components/Icon";
-import { Navigation } from "components/layout/Navigation";
-import { Paper } from "components/layout/Paper";
-import { LoadingSeasons, Seasons } from "components/layout/Seasons";
-import { SkeletonVideoPlayer, VideoPlayer } from "components/media/VideoPlayer";
-import { ArrowLink } from "components/text/ArrowLink";
-import { DotList } from "components/text/DotList";
-import { Title } from "components/text/Title";
-import { useLoading } from "hooks/useLoading";
-import { usePortableMedia } from "hooks/usePortableMedia";
+import { ReactElement, useEffect, useState } from "react";
+import { useHistory } from "react-router-dom";
+import { IconPatch } from "@/components/buttons/IconPatch";
+import { Icons } from "@/components/Icon";
+import { Navigation } from "@/components/layout/Navigation";
+import { Paper } from "@/components/layout/Paper";
+import { LoadingSeasons, Seasons } from "@/components/layout/Seasons";
+import {
+  SkeletonVideoPlayer,
+  VideoPlayer,
+} from "@/components/media/VideoPlayer";
+import { ArrowLink } from "@/components/text/ArrowLink";
+import { DotList } from "@/components/text/DotList";
+import { Title } from "@/components/text/Title";
+import { useLoading } from "@/hooks/useLoading";
+import { usePortableMedia } from "@/hooks/usePortableMedia";
 import {
   MWPortableMedia,
   getStream,
@@ -18,14 +23,12 @@ import {
   getProviderFromId,
   MWMediaProvider,
   MWMediaType,
-} from "providers";
-import { ReactElement, useEffect, useState } from "react";
-import { useHistory } from "react-router-dom";
+} from "@/providers";
 import {
   getIfBookmarkedFromPortable,
   useBookmarkContext,
-} from "state/bookmark";
-import { getWatchedFromPortable, useWatchedContext } from "state/watched";
+} from "@/state/bookmark";
+import { getWatchedFromPortable, useWatchedContext } from "@/state/watched";
 import { NotFoundChecks } from "./notfound/NotFoundChecks";
 
 interface StyledMediaViewProps {
@@ -106,10 +109,10 @@ function LoadingMediaFooter(props: { error?: boolean }) {
     <Paper className="mt-5">
       <div className="flex">
         <div className="flex-1">
-          <div className="bg-denim-500 mb-2 h-4 w-48 rounded-full" />
+          <div className="mb-2 h-4 w-48 rounded-full bg-denim-500" />
           <div>
-            <span className="bg-denim-400 mr-4 inline-block h-2 w-12 rounded-full" />
-            <span className="bg-denim-400 mr-4 inline-block h-2 w-12 rounded-full" />
+            <span className="mr-4 inline-block h-2 w-12 rounded-full bg-denim-400" />
+            <span className="mr-4 inline-block h-2 w-12 rounded-full bg-denim-400" />
           </div>
           {props.error ? (
             <div className="flex items-center space-x-3">
diff --git a/src/views/SearchView.tsx b/src/views/SearchView.tsx
index 871ba69a..f832a2b2 100644
--- a/src/views/SearchView.tsx
+++ b/src/views/SearchView.tsx
@@ -1,23 +1,23 @@
-import { WatchedMediaCard } from "components/media/WatchedMediaCard";
-import { SearchBarInput } from "components/SearchBar";
-import { MWMassProviderOutput, MWQuery, SearchProviders } from "providers";
 import { useEffect, useMemo, useState } from "react";
-import { ThinContainer } from "components/layout/ThinContainer";
-import { SectionHeading } from "components/layout/SectionHeading";
-import { Icons } from "components/Icon";
-import { Loading } from "components/layout/Loading";
-import { Tagline } from "components/text/Tagline";
-import { Title } from "components/text/Title";
-import { useDebounce } from "hooks/useDebounce";
-import { useLoading } from "hooks/useLoading";
-import { IconPatch } from "components/buttons/IconPatch";
-import { Navigation } from "components/layout/Navigation";
-import { useSearchQuery } from "hooks/useSearchQuery";
-import { useWatchedContext } from "state/watched/context";
+import { WatchedMediaCard } from "@/components/media/WatchedMediaCard";
+import { SearchBarInput } from "@/components/SearchBar";
+import { MWMassProviderOutput, MWQuery, SearchProviders } from "@/providers";
+import { ThinContainer } from "@/components/layout/ThinContainer";
+import { SectionHeading } from "@/components/layout/SectionHeading";
+import { Icons } from "@/components/Icon";
+import { Loading } from "@/components/layout/Loading";
+import { Tagline } from "@/components/text/Tagline";
+import { Title } from "@/components/text/Title";
+import { useDebounce } from "@/hooks/useDebounce";
+import { useLoading } from "@/hooks/useLoading";
+import { IconPatch } from "@/components/buttons/IconPatch";
+import { Navigation } from "@/components/layout/Navigation";
+import { useSearchQuery } from "@/hooks/useSearchQuery";
+import { useWatchedContext } from "@/state/watched/context";
 import {
   getIfBookmarkedFromPortable,
   useBookmarkContext,
-} from "state/bookmark/context";
+} from "@/state/bookmark/context";
 
 function SearchLoading() {
   return <Loading className="my-24" text="Fetching your favourite shows..." />;
diff --git a/src/views/notfound/NotFoundChecks.tsx b/src/views/notfound/NotFoundChecks.tsx
index a26018c8..0981e180 100644
--- a/src/views/notfound/NotFoundChecks.tsx
+++ b/src/views/notfound/NotFoundChecks.tsx
@@ -1,5 +1,5 @@
-import { getProviderMetadata, MWPortableMedia } from "providers";
 import { ReactElement } from "react";
+import { getProviderMetadata, MWPortableMedia } from "@/providers";
 import { NotFoundMedia, NotFoundProvider } from "./NotFoundView";
 
 export interface NotFoundChecksProps {
diff --git a/src/views/notfound/NotFoundView.tsx b/src/views/notfound/NotFoundView.tsx
index 89490246..aee1481b 100644
--- a/src/views/notfound/NotFoundView.tsx
+++ b/src/views/notfound/NotFoundView.tsx
@@ -1,9 +1,9 @@
-import { IconPatch } from "components/buttons/IconPatch";
-import { Icons } from "components/Icon";
-import { Navigation } from "components/layout/Navigation";
-import { ArrowLink } from "components/text/ArrowLink";
-import { Title } from "components/text/Title";
 import { ReactNode } from "react";
+import { IconPatch } from "@/components/buttons/IconPatch";
+import { Icons } from "@/components/Icon";
+import { Navigation } from "@/components/layout/Navigation";
+import { ArrowLink } from "@/components/text/ArrowLink";
+import { Title } from "@/components/text/Title";
 
 function NotFoundWrapper(props: { children?: ReactNode }) {
   return (
@@ -21,7 +21,7 @@ export function NotFoundMedia() {
     <div className="flex flex-1 flex-col items-center justify-center p-5 text-center">
       <IconPatch
         icon={Icons.EYE_SLASH}
-        className="text-bink-600 mb-6 text-xl"
+        className="mb-6 text-xl text-bink-600"
       />
       <Title>Couldn&apos;t find that media</Title>
       <p className="mt-5 mb-12 max-w-sm">
@@ -38,7 +38,7 @@ export function NotFoundProvider() {
     <div className="flex flex-1 flex-col items-center justify-center p-5 text-center">
       <IconPatch
         icon={Icons.EYE_SLASH}
-        className="text-bink-600 mb-6 text-xl"
+        className="mb-6 text-xl text-bink-600"
       />
       <Title>This provider has been disabled</Title>
       <p className="mt-5 mb-12 max-w-sm">
@@ -55,7 +55,7 @@ export function NotFoundPage() {
     <NotFoundWrapper>
       <IconPatch
         icon={Icons.EYE_SLASH}
-        className="text-bink-600 mb-6 text-xl"
+        className="mb-6 text-xl text-bink-600"
       />
       <Title>Couldn&apos;t find that page</Title>
       <p className="mt-5 mb-12 max-w-sm">
diff --git a/tsconfig.json b/tsconfig.json
index 4685074f..69d40355 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "target": "ES2020",
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -20,8 +16,10 @@
     "noEmit": true,
     "jsx": "react-jsx",
     "baseUrl": "./src",
+    "paths": {
+      "@/*": ["./*"]
+    },
+    "types": ["vite/client"]
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src"]
 }
diff --git a/vite.config.ts b/vite.config.ts
index 607b7700..d02fa01f 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -6,13 +6,7 @@ export default defineConfig({
   plugins: [react()],
   resolve: {
     alias: {
-      components: path.resolve(__dirname, "./src/components"),
-      hooks: path.resolve(__dirname, "./src/hooks"),
-      state: path.resolve(__dirname, "./src/state"),
-      providers: path.resolve(__dirname, "./src/providers"),
-      views: path.resolve(__dirname, "./src/views"),
-      utils: path.resolve(__dirname, "./src/utils"),
-      mw_constants: path.resolve(__dirname, "./src/mw_constants"),
+      "@": path.resolve(__dirname, "./src"),
     },
   },
 });