diff --git a/src/__tests__/subtitles/subtitles.test.ts b/src/__tests__/subtitles/subtitles.test.ts
index 50270d5c..69934f8f 100644
--- a/src/__tests__/subtitles/subtitles.test.ts
+++ b/src/__tests__/subtitles/subtitles.test.ts
@@ -1,10 +1,12 @@
 import { describe, it } from "vitest";
+
 import {
-  isSupportedSubtitle,
   getMWCaptionTypeFromUrl,
+  isSupportedSubtitle,
   parseSubtitles,
 } from "@/backend/helpers/captions";
 import { MWCaptionType } from "@/backend/helpers/streams";
+
 import {
   ass,
   multilineSubtitlesTestVtt,
diff --git a/src/backend/providers/flixhq.ts b/src/backend/providers/flixhq.ts
index 61568af3..f0f559bd 100644
--- a/src/backend/providers/flixhq.ts
+++ b/src/backend/providers/flixhq.ts
@@ -1,13 +1,13 @@
 import { compareTitle } from "@/utils/titleMatch";
 
-import { proxiedFetch } from "../helpers/fetch";
-import { registerProvider } from "../helpers/register";
-import { MWCaption, MWStreamQuality, MWStreamType } from "../helpers/streams";
-import { MWMediaType } from "../metadata/types";
 import {
   getMWCaptionTypeFromUrl,
   isSupportedSubtitle,
 } from "../helpers/captions";
+import { proxiedFetch } from "../helpers/fetch";
+import { registerProvider } from "../helpers/register";
+import { MWCaption, MWStreamQuality, MWStreamType } from "../helpers/streams";
+import { MWMediaType } from "../metadata/types";
 
 const flixHqBase = "https://api.consumet.org/meta/tmdb";
 
diff --git a/src/backend/providers/superstream/index.ts b/src/backend/providers/superstream/index.ts
index 0730708b..435c36bb 100644
--- a/src/backend/providers/superstream/index.ts
+++ b/src/backend/providers/superstream/index.ts
@@ -1,6 +1,10 @@
 import CryptoJS from "crypto-js";
 import { customAlphabet } from "nanoid";
 
+import {
+  getMWCaptionTypeFromUrl,
+  isSupportedSubtitle,
+} from "@/backend/helpers/captions";
 import { proxiedFetch } from "@/backend/helpers/fetch";
 import { registerProvider } from "@/backend/helpers/register";
 import {
@@ -11,10 +15,6 @@ import {
 } from "@/backend/helpers/streams";
 import { MWMediaType } from "@/backend/metadata/types";
 import { compareTitle } from "@/utils/titleMatch";
-import {
-  getMWCaptionTypeFromUrl,
-  isSupportedSubtitle,
-} from "@/backend/helpers/captions";
 
 const nanoid = customAlphabet("0123456789abcdef", 32);
 
diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
index e2fac636..aff10ea4 100644
--- a/src/components/Dropdown.tsx
+++ b/src/components/Dropdown.tsx
@@ -37,7 +37,7 @@ export function Dropdown(props: DropdownProps) {
               leaveFrom="opacity-100"
               leaveTo="opacity-0"
             >
-              <Listbox.Options className="absolute top-10 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:top-10 sm:text-sm">
+              <Listbox.Options className="absolute left-0 right-0 top-10 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:top-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 2513e409..4940cbc7 100644
--- a/src/components/SearchBar.tsx
+++ b/src/components/SearchBar.tsx
@@ -40,7 +40,7 @@ export function SearchBarInput(props: SearchBarProps) {
 
   return (
     <div className="relative flex flex-col rounded-[28px] bg-denim-400 transition-colors focus-within:bg-denim-400 hover:bg-denim-500 sm:flex-row sm:items-center">
-      <div className="pointer-events-none absolute left-5 top-0 bottom-0 flex max-h-14 items-center">
+      <div className="pointer-events-none absolute bottom-0 left-5 top-0 flex max-h-14 items-center">
         <Icon icon={Icons.SEARCH} />
       </div>
 
@@ -52,7 +52,7 @@ export function SearchBarInput(props: SearchBarProps) {
         placeholder={props.placeholder}
       />
 
-      <div className="px-4 py-4 pt-0 sm:py-2 sm:px-2">
+      <div className="px-4 py-4 pt-0 sm:px-2 sm:py-2">
         <DropdownButton
           icon={Icons.SEARCH}
           open={dropdownOpen}
diff --git a/src/components/layout/Backdrop.tsx b/src/components/layout/Backdrop.tsx
index 7e022347..0286880e 100644
--- a/src/components/layout/Backdrop.tsx
+++ b/src/components/layout/Backdrop.tsx
@@ -100,7 +100,7 @@ export function BackdropContainer(
   return (
     <div ref={root}>
       {createPortal(
-        <div className="pointer-events-none fixed top-0 left-0 z-[999]">
+        <div className="pointer-events-none fixed left-0 top-0 z-[999]">
           <Backdrop active={props.active} {...props} />
           <div ref={copy} className="pointer-events-auto absolute">
             {props.children}
diff --git a/src/components/layout/Navigation.tsx b/src/components/layout/Navigation.tsx
index df6d464b..a9a3e0c1 100644
--- a/src/components/layout/Navigation.tsx
+++ b/src/components/layout/Navigation.tsx
@@ -24,7 +24,7 @@ export function Navigation(props: NavigationProps) {
         top: `${bannerHeight}px`,
       }}
     >
-      <div className="fixed left-0 right-0 flex items-center justify-between py-5 px-7">
+      <div className="fixed left-0 right-0 flex items-center justify-between px-7 py-5">
         <div
           className={`${
             props.bg ? "opacity-100" : "opacity-0"
diff --git a/src/components/media/EpisodeButton.tsx b/src/components/media/EpisodeButton.tsx
index f3e4375c..76e38c85 100644
--- a/src/components/media/EpisodeButton.tsx
+++ b/src/components/media/EpisodeButton.tsx
@@ -9,12 +9,12 @@ export function Episode(props: EpisodeProps) {
   return (
     <div
       onClick={props.onClick}
-      className={`transition-[background-color, transform, box-shadow] relative mr-3 mb-3 inline-flex h-10 w-10 cursor-pointer select-none items-center justify-center overflow-hidden rounded bg-denim-500 font-bold text-white hover:bg-denim-400 active:scale-110 ${
+      className={`transition-[background-color, transform, box-shadow] relative mb-3 mr-3 inline-flex h-10 w-10 cursor-pointer select-none items-center justify-center overflow-hidden rounded bg-denim-500 font-bold text-white hover:bg-denim-400 active:scale-110 ${
         props.active ? "shadow-[inset_0_0_0_2px] shadow-bink-500" : ""
       }`}
     >
       <div
-        className="absolute bottom-0 top-0 left-0 bg-bink-500 bg-opacity-50"
+        className="absolute bottom-0 left-0 top-0 bg-bink-500 bg-opacity-50"
         style={{
           width: `${props.progress || 0}%`,
         }}
diff --git a/src/components/media/MediaCard.tsx b/src/components/media/MediaCard.tsx
index 3769245e..22865717 100644
--- a/src/components/media/MediaCard.tsx
+++ b/src/components/media/MediaCard.tsx
@@ -61,7 +61,7 @@ function MediaCardContent({
           {series ? (
             <div
               className={[
-                "absolute right-2 top-2 rounded-md bg-denim-200 py-1 px-2 transition-colors",
+                "absolute right-2 top-2 rounded-md bg-denim-200 px-2 py-1 transition-colors",
                 closable ? "" : "group-hover:bg-denim-500",
               ].join(" ")}
             >
diff --git a/src/components/popout/FloatingCard.tsx b/src/components/popout/FloatingCard.tsx
index 5a837d01..b4fd250c 100644
--- a/src/components/popout/FloatingCard.tsx
+++ b/src/components/popout/FloatingCard.tsx
@@ -167,7 +167,7 @@ export const FloatingCardView = {
             <div>{props.action ?? null}</div>
           </div>
 
-          <h2 className="mt-8 mb-2 text-3xl font-bold text-white">
+          <h2 className="mb-2 mt-8 text-3xl font-bold text-white">
             {props.title}
           </h2>
           <p>{props.description}</p>
diff --git a/src/utils/thumbnailCreator.ts b/src/utils/thumbnailCreator.ts
new file mode 100644
index 00000000..159f4349
--- /dev/null
+++ b/src/utils/thumbnailCreator.ts
@@ -0,0 +1,41 @@
+export default async function extractThumbnails(
+  videoUrl: string,
+  numThumbnails: number
+): Promise<string[]> {
+  const video = document.createElement("video");
+  video.src = videoUrl;
+  video.crossOrigin = "anonymous";
+
+  // Wait for the video metadata to load
+  const metadata = await new Promise((resolve, reject) => {
+    video.addEventListener("loadedmetadata", resolve);
+    video.addEventListener("error", reject);
+  });
+  console.log(metadata);
+
+  const canvas = document.createElement("canvas");
+  canvas.width = video.videoWidth;
+  canvas.height = video.videoHeight;
+  const ctx = canvas.getContext("2d");
+  const thumbnails = [];
+  if (!ctx) return [""];
+
+  for (let i = 0; i < numThumbnails; i += 1) {
+    const time = ((i + 1) / (numThumbnails + 1)) * video.duration;
+
+    // Seek to the specified time
+    video.currentTime = time;
+    await new Promise((resolve) => {
+      video.addEventListener("seeked", resolve);
+    });
+
+    // Draw the video frame on the canvas
+    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+
+    // Convert the canvas to a data URL and add it to the list of thumbnails
+    const thumbnailUrl = canvas.toDataURL("image/jpeg", 0.8);
+    thumbnails.push(thumbnailUrl);
+  }
+
+  return thumbnails;
+}
diff --git a/src/video/components/VideoPlayer.tsx b/src/video/components/VideoPlayer.tsx
index 6dc8983a..eca0477e 100644
--- a/src/video/components/VideoPlayer.tsx
+++ b/src/video/components/VideoPlayer.tsx
@@ -120,7 +120,7 @@ export function VideoPlayer(props: Props) {
               <Transition
                 animation="slide-down"
                 show={show}
-                className="pointer-events-auto absolute inset-x-0 top-0 flex flex-col py-6 px-8 pb-2"
+                className="pointer-events-auto absolute inset-x-0 top-0 flex flex-col px-8 py-6 pb-2"
               >
                 <HeaderAction
                   showControls={isMobile}
diff --git a/src/video/components/actions/VolumeAdjustedAction.tsx b/src/video/components/actions/VolumeAdjustedAction.tsx
index a5c547c5..295f3883 100644
--- a/src/video/components/actions/VolumeAdjustedAction.tsx
+++ b/src/video/components/actions/VolumeAdjustedAction.tsx
@@ -14,7 +14,7 @@ export function VolumeAdjustedAction() {
         videoInterface.volumeChangedWithKeybind
           ? "mt-10 scale-100 opacity-100"
           : "mt-5 scale-75 opacity-0",
-        "absolute left-1/2 z-[100] flex -translate-x-1/2 items-center space-x-4 rounded-full bg-bink-300 bg-opacity-50 py-2 px-5 transition-all duration-100",
+        "absolute left-1/2 z-[100] flex -translate-x-1/2 items-center space-x-4 rounded-full bg-bink-300 bg-opacity-50 px-5 py-2 transition-all duration-100",
       ].join(" ")}
     >
       <Icon
diff --git a/src/video/components/actions/list-entries/QualityDisplayAction.tsx b/src/video/components/actions/list-entries/QualityDisplayAction.tsx
index c2a58c50..aef30a06 100644
--- a/src/video/components/actions/list-entries/QualityDisplayAction.tsx
+++ b/src/video/components/actions/list-entries/QualityDisplayAction.tsx
@@ -8,7 +8,7 @@ export function QualityDisplayAction() {
   if (!source.source) return null;
 
   return (
-    <div className="rounded-md bg-denim-300 py-1 px-2 transition-colors">
+    <div className="rounded-md bg-denim-300 px-2 py-1 transition-colors">
       <p className="text-center text-xs font-bold text-slate-300 transition-colors">
         {source.source.quality}
       </p>
diff --git a/src/video/components/parts/VideoErrorBoundary.tsx b/src/video/components/parts/VideoErrorBoundary.tsx
index 8228f057..5786aa7a 100644
--- a/src/video/components/parts/VideoErrorBoundary.tsx
+++ b/src/video/components/parts/VideoErrorBoundary.tsx
@@ -64,7 +64,7 @@ export class VideoErrorBoundary extends Component<
 
     return (
       <div className="absolute inset-0 bg-denim-100">
-        <div className="pointer-events-auto absolute inset-x-0 top-0 flex flex-col py-6 px-8 pb-2">
+        <div className="pointer-events-auto absolute inset-x-0 top-0 flex flex-col px-8 py-6 pb-2">
           <VideoPlayerHeader
             media={this.props.media}
             onClick={this.props.onGoBack}
diff --git a/src/video/components/parts/VideoPlayerError.tsx b/src/video/components/parts/VideoPlayerError.tsx
index d6fd0306..09177ddb 100644
--- a/src/video/components/parts/VideoPlayerError.tsx
+++ b/src/video/components/parts/VideoPlayerError.tsx
@@ -32,7 +32,7 @@ export function VideoPlayerError(props: VideoPlayerErrorProps) {
           {err?.name}: {err?.description}
         </p>
       </div>
-      <div className="pointer-events-auto absolute inset-x-0 top-0 flex flex-col py-6 px-8 pb-2">
+      <div className="pointer-events-auto absolute inset-x-0 top-0 flex flex-col px-8 py-6 pb-2">
         <VideoPlayerHeader media={meta?.meta.meta} onClick={props.onGoBack} />
       </div>
     </div>
diff --git a/src/views/developer/VideoTesterView.tsx b/src/views/developer/VideoTesterView.tsx
index 4c3cb7e5..b192cd40 100644
--- a/src/views/developer/VideoTesterView.tsx
+++ b/src/views/developer/VideoTesterView.tsx
@@ -51,7 +51,7 @@ export default function VideoTesterView() {
 
   if (video) {
     return (
-      <div className="fixed top-0 left-0 h-[100dvh] w-screen">
+      <div className="fixed left-0 top-0 h-[100dvh] w-screen">
         <Helmet>
           <html data-full="true" />
         </Helmet>
diff --git a/src/views/media/MediaErrorView.tsx b/src/views/media/MediaErrorView.tsx
index e79d3521..b9c88012 100644
--- a/src/views/media/MediaErrorView.tsx
+++ b/src/views/media/MediaErrorView.tsx
@@ -14,7 +14,7 @@ export function MediaFetchErrorView() {
       <Helmet>
         <title>{t("media.errors.failedMeta")}</title>
       </Helmet>
-      <div className="fixed inset-x-0 top-0 py-6 px-8">
+      <div className="fixed inset-x-0 top-0 px-8 py-6">
         <VideoPlayerHeader onClick={goBack} />
       </div>
       <ErrorMessage>
diff --git a/src/views/media/MediaView.tsx b/src/views/media/MediaView.tsx
index 132161dd..c55211c7 100644
--- a/src/views/media/MediaView.tsx
+++ b/src/views/media/MediaView.tsx
@@ -34,7 +34,7 @@ function MediaViewLoading(props: { onGoBack(): void }) {
       <Helmet>
         <title>{t("videoPlayer.loading")}</title>
       </Helmet>
-      <div className="absolute inset-x-0 top-0 py-6 px-8">
+      <div className="absolute inset-x-0 top-0 px-8 py-6">
         <VideoPlayerHeader onClick={props.onGoBack} />
       </div>
       <div className="flex flex-col items-center">
@@ -68,7 +68,7 @@ function MediaViewScraping(props: MediaViewScrapingProps) {
       <Helmet>
         <title>{props.meta.meta.title}</title>
       </Helmet>
-      <div className="absolute inset-x-0 top-0 py-6 px-8">
+      <div className="absolute inset-x-0 top-0 px-8 py-6">
         <VideoPlayerHeader onClick={props.onGoBack} media={props.meta.meta} />
       </div>
       <div className="flex flex-col items-center transition-opacity duration-200">
@@ -134,7 +134,7 @@ export function MediaViewPlayer(props: MediaViewPlayerProps) {
   }
 
   return (
-    <div className="fixed top-0 left-0 h-[100dvh] w-screen">
+    <div className="fixed left-0 top-0 h-[100dvh] w-screen">
       <Helmet>
         <html data-full="true" />
       </Helmet>
diff --git a/src/views/notfound/NotFoundView.tsx b/src/views/notfound/NotFoundView.tsx
index b7dfccf1..21ba4c63 100644
--- a/src/views/notfound/NotFoundView.tsx
+++ b/src/views/notfound/NotFoundView.tsx
@@ -23,7 +23,7 @@ export function NotFoundWrapper(props: {
         <title>{t("notFound.genericTitle")}</title>
       </Helmet>
       {props.video ? (
-        <div className="absolute inset-x-0 top-0 py-6 px-8">
+        <div className="absolute inset-x-0 top-0 px-8 py-6">
           <VideoPlayerHeader onClick={goBack} />
         </div>
       ) : (
@@ -46,7 +46,7 @@ export function NotFoundMedia() {
         className="mb-6 text-xl text-bink-600"
       />
       <Title>{t("notFound.media.title")}</Title>
-      <p className="mt-5 mb-12 max-w-sm">{t("notFound.media.description")}</p>
+      <p className="mb-12 mt-5 max-w-sm">{t("notFound.media.description")}</p>
       <ArrowLink to="/" linkText={t("notFound.backArrow")} />
     </div>
   );
@@ -62,7 +62,7 @@ export function NotFoundProvider() {
         className="mb-6 text-xl text-bink-600"
       />
       <Title>{t("notFound.provider.title")}</Title>
-      <p className="mt-5 mb-12 max-w-sm">
+      <p className="mb-12 mt-5 max-w-sm">
         {t("notFound.provider.description")}
       </p>
       <ArrowLink to="/" linkText={t("notFound.backArrow")} />
@@ -80,7 +80,7 @@ export function NotFoundPage() {
         className="mb-6 text-xl text-bink-600"
       />
       <Title>{t("notFound.page.title")}</Title>
-      <p className="mt-5 mb-12 max-w-sm">{t("notFound.page.description")}</p>
+      <p className="mb-12 mt-5 max-w-sm">{t("notFound.page.description")}</p>
       <ArrowLink to="/" linkText={t("notFound.backArrow")} />
     </NotFoundWrapper>
   );
diff --git a/src/views/search/HomeView.tsx b/src/views/search/HomeView.tsx
index bfb64695..a7a9a396 100644
--- a/src/views/search/HomeView.tsx
+++ b/src/views/search/HomeView.tsx
@@ -169,7 +169,7 @@ function NewDomainModal() {
             }}
           />
           <div className="relative flex items-center justify-center">
-            <div className="rounded-full bg-bink-200 py-4 px-12 text-center text-sm font-bold text-white md:text-xl">
+            <div className="rounded-full bg-bink-200 px-12 py-4 text-center text-sm font-bold text-white md:text-xl">
               {t("v3.newDomain")}
             </div>
           </div>
@@ -186,7 +186,7 @@ function NewDomainModal() {
           </p>
           <p>{t("v3.tireless")}</p>
         </div>
-        <div className="mt-16 mb-6 flex items-center justify-center">
+        <div className="mb-6 mt-16 flex items-center justify-center">
           <Button icon={Icons.PLAY} onClick={() => closeModal()}>
             {t("v3.leaveAnnouncement")}
           </Button>
diff --git a/src/views/search/SearchLoadingView.tsx b/src/views/search/SearchLoadingView.tsx
index 4c59d677..45971860 100644
--- a/src/views/search/SearchLoadingView.tsx
+++ b/src/views/search/SearchLoadingView.tsx
@@ -8,7 +8,7 @@ export function SearchLoadingView() {
   const [query] = useSearchQuery();
   return (
     <Loading
-      className="mt-40 mb-24 "
+      className="mb-24 mt-40 "
       text={
         t(`search.loading_${query.type}`) ||
         t("search.loading") ||
diff --git a/src/views/search/SearchResultsView.tsx b/src/views/search/SearchResultsView.tsx
index 25d347c9..331d4f2d 100644
--- a/src/views/search/SearchResultsView.tsx
+++ b/src/views/search/SearchResultsView.tsx
@@ -18,7 +18,7 @@ function SearchSuffix(props: { failed?: boolean; results?: number }) {
   const icon: Icons = props.failed ? Icons.WARNING : Icons.EYE_SLASH;
 
   return (
-    <div className="mt-40 mb-24  flex flex-col items-center justify-center space-y-3 text-center">
+    <div className="mb-24 mt-40  flex flex-col items-center justify-center space-y-3 text-center">
       <IconPatch
         icon={icon}
         className={`text-xl ${props.failed ? "text-red-400" : "text-bink-600"}`}
diff --git a/src/views/search/SearchView.tsx b/src/views/search/SearchView.tsx
index fce4ce08..3fee80b8 100644
--- a/src/views/search/SearchView.tsx
+++ b/src/views/search/SearchView.tsx
@@ -33,7 +33,7 @@ export function SearchView() {
         <Navigation bg={showBg} />
         <ThinContainer>
           <div className="mt-44 space-y-16 text-center">
-            <div className="absolute left-0 bottom-0 right-0 flex h-0 justify-center">
+            <div className="absolute bottom-0 left-0 right-0 flex h-0 justify-center">
               <div className="absolute bottom-4 h-[100vh] w-[3000px] rounded-[100%] bg-denim-300 md:w-[200vw]" />
             </div>
             <div className="relative z-10 mb-16">