diff --git a/src/components/Explorer/FileActions.tsx b/src/components/Explorer/FileActions.tsx
index 78269df..c6e5df6 100644
--- a/src/components/Explorer/FileActions.tsx
+++ b/src/components/Explorer/FileActions.tsx
@@ -25,6 +25,12 @@ import {
   DrawerTitle,
   DrawerTrigger,
 } from "~/components/ui/drawer";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu";
 import Icon from "~/components/ui/icon";
 import { Input } from "~/components/ui/input";
 import { Separator } from "~/components/ui/separator";
@@ -43,8 +49,6 @@ import { GetSearchResultPath, SearchFiles } from "~/actions/search";
 
 import config from "config";
 
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../ui/dropdown-menu";
-
 export default function FileActions() {
   const loading = useLoading();
   const { layout, setLayout, isPending } = useLayout();
diff --git a/src/components/Explorer/FileBreadcrumbs.tsx b/src/components/Explorer/FileBreadcrumbs.tsx
index 9edf2db..3566dd5 100644
--- a/src/components/Explorer/FileBreadcrumbs.tsx
+++ b/src/components/Explorer/FileBreadcrumbs.tsx
@@ -13,6 +13,12 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from "~/components/ui/breadcrumb";
+import {
+  ResponsiveDropdownMenu,
+  ResponsiveDropdownMenuContent,
+  ResponsiveDropdownMenuItem,
+  ResponsiveDropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu.responsive";
 import Icon from "~/components/ui/icon";
 import { Skeleton } from "~/components/ui/skeleton";
 
@@ -22,13 +28,6 @@ import { type Schema_Breadcrumb } from "~/types/schema";
 
 import config from "config";
 
-import {
-  ResponsiveDropdownMenu,
-  ResponsiveDropdownMenuContent,
-  ResponsiveDropdownMenuItem,
-  ResponsiveDropdownMenuTrigger,
-} from "../ui/dropdown-menu.responsive";
-
 type Props = {
   data?: z.infer<typeof Schema_Breadcrumb>[];
 };
diff --git a/src/components/Explorer/FileItem.tsx b/src/components/Explorer/FileItem.tsx
index bbc5580..bb90ddb 100644
--- a/src/components/Explorer/FileItem.tsx
+++ b/src/components/Explorer/FileItem.tsx
@@ -5,6 +5,14 @@ import { useCallback, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
 import { type z } from "zod";
 
+import { Button } from "~/components/ui/button";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "~/components/ui/context-menu";
 import Icon from "~/components/ui/icon";
 
 import { type TLayout } from "~/context/layoutContext";
@@ -16,15 +24,6 @@ import { type Schema_File } from "~/types/schema";
 
 import config from "config";
 
-import { Button } from "../ui/button";
-import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuSeparator,
-  ContextMenuTrigger,
-} from "../ui/context-menu";
-
 type Props = {
   data: z.infer<typeof Schema_File>;
   layout: TLayout;
@@ -108,7 +107,7 @@ export default function FileItem({ data, layout }: Props) {
               router.push(filePath);
             }}
             className={cn(
-              "group grid h-full w-full cursor-pointer overflow-hidden rounded-lg border bg-card text-card-foreground shadow transition hover:border-accent-foreground",
+              "group grid h-full w-full cursor-pointer overflow-hidden rounded-lg border bg-card text-card-foreground shadow transition hover:border-primary/50",
               layout === "list" && "flex items-center",
             )}
           >
diff --git a/src/components/Global/Markdown.tsx b/src/components/Global/Markdown.tsx
index 054c3c1..eac003b 100644
--- a/src/components/Global/Markdown.tsx
+++ b/src/components/Global/Markdown.tsx
@@ -18,8 +18,6 @@ import Icon from "~/components/ui/icon";
 
 import { cn } from "~/lib/utils";
 
-import "~/styles/code-highlight.css";
-
 type Props = {
   content: string;
   view?: "markdown" | "raw";
diff --git a/src/components/Layout/Footer.tsx b/src/components/Layout/Footer.tsx
index 8482366..dca9343 100644
--- a/src/components/Layout/Footer.tsx
+++ b/src/components/Layout/Footer.tsx
@@ -6,12 +6,12 @@ import ReactMarkdown from "react-markdown";
 import remarkBreaks from "remark-breaks";
 import { NO_LAYOUT_PATHS } from "~/constant";
 
+import { Skeleton } from "~/components/ui/skeleton";
+
 import useLoading from "~/hooks/useLoading";
 
 import config from "config";
 
-import { Skeleton } from "../ui/skeleton";
-
 type Props = {
   content?: string;
 };
diff --git a/src/components/Layout/Provider.tsx b/src/components/Layout/Provider.tsx
index 2f4083d..7abdb36 100644
--- a/src/components/Layout/Provider.tsx
+++ b/src/components/Layout/Provider.tsx
@@ -6,14 +6,14 @@ import { usePathname } from "next/navigation";
 import NextTopLoader, { type NextTopLoaderProps } from "nextjs-toploader";
 import { type ToasterProps } from "sonner";
 
+import { Toaster } from "~/components/ui/sonner";
+import { TooltipProvider } from "~/components/ui/tooltip";
+
 import UseConfirmDialogProvider from "~/context/confirmProvider";
 import { LayoutProvider } from "~/context/layoutContext";
 import { ResponsiveProvider } from "~/context/responsiveContext";
 import { cn } from "~/lib/utils";
 
-import { Toaster } from "../ui/sonner";
-import { TooltipProvider } from "../ui/tooltip";
-
 type Props = {
   loader?: NextTopLoaderProps;
   theme?: ThemeProviderProps;
@@ -23,19 +23,19 @@ type Props = {
 export default function Provider(props: React.PropsWithChildren<Props>) {
   const pathname = usePathname();
   return (
-    <LayoutProvider>
-      <ResponsiveProvider>
-        <NextTopLoader
-          color='hsl(var(--primary))'
-          {...props.loader}
-        />
-        <ThemeProvider {...props.theme}>
+    <ThemeProvider {...props.theme}>
+      <LayoutProvider>
+        <ResponsiveProvider>
+          <NextTopLoader
+            color='hsl(var(--primary))'
+            {...props.loader}
+          />
           <UseConfirmDialogProvider>
             <TooltipProvider {...props.tooltip}>
               <div
                 className={cn(
                   "flex w-full flex-col items-start font-sans text-foreground",
-                  pathname.startsWith("/_/embed/") ? "h-fit" : "h-full min-h-screen",
+                  pathname.startsWith("/ngdi-internal/embed/") ? "h-fit" : "h-full min-h-screen",
                 )}
               >
                 {props.children}
@@ -44,8 +44,8 @@ export default function Provider(props: React.PropsWithChildren<Props>) {
 
             <Toaster {...props.toaster} />
           </UseConfirmDialogProvider>
-        </ThemeProvider>
-      </ResponsiveProvider>
-    </LayoutProvider>
+        </ResponsiveProvider>
+      </LayoutProvider>
+    </ThemeProvider>
   );
 }
diff --git a/src/components/Preview/Document.tsx b/src/components/Preview/Document.tsx
index 13d821d..1240d1d 100644
--- a/src/components/Preview/Document.tsx
+++ b/src/components/Preview/Document.tsx
@@ -4,6 +4,9 @@ import { usePathname } from "next/navigation";
 import { useState } from "react";
 import { type z } from "zod";
 
+import { Status } from "~/components/global";
+import { PageLoader } from "~/components/layout";
+
 import useLoading from "~/hooks/useLoading";
 import { cn } from "~/lib/utils";
 
@@ -11,9 +14,6 @@ import { type Schema_File } from "~/types/schema";
 
 import config from "config";
 
-import { Status } from "../global";
-import { PageLoader } from "../layout";
-
 type Props = {
   file: z.infer<typeof Schema_File>;
   token: string;
@@ -54,7 +54,6 @@ export default function PreviewDocument({ file, token }: Props) {
             onLoad={() => setLoaded(true)}
             onError={() => setError("Failed to load PDF")}
             allowFullScreen
-            allowTransparency
           />
         </div>
       )}
diff --git a/src/components/Preview/Information.tsx b/src/components/Preview/Information.tsx
index 8d5c8ff..65421e9 100644
--- a/src/components/Preview/Information.tsx
+++ b/src/components/Preview/Information.tsx
@@ -6,17 +6,8 @@ import { useCallback, useMemo, useState } from "react";
 import { toast } from "sonner";
 import { type z } from "zod";
 
+import { Button } from "~/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
-
-import { useResponsive } from "~/context/responsiveContext";
-import { getFileType } from "~/lib/previewHelper";
-import { bytesToReadable, durationToReadable, formatDate } from "~/lib/utils";
-
-import { type Schema_File } from "~/types/schema";
-
-import config from "config";
-
-import { Button } from "../ui/button";
 import {
   ResponsiveDialog,
   ResponsiveDialogBody,
@@ -27,16 +18,24 @@ import {
   ResponsiveDialogHeader,
   ResponsiveDialogTitle,
   ResponsiveDialogTrigger,
-} from "../ui/dialog.responsive";
+} from "~/components/ui/dialog.responsive";
 import {
   ResponsiveDropdownMenu,
   ResponsiveDropdownMenuContent,
   ResponsiveDropdownMenuItem,
   ResponsiveDropdownMenuSeparator,
   ResponsiveDropdownMenuTrigger,
-} from "../ui/dropdown-menu.responsive";
-import Icon from "../ui/icon";
-import { Separator } from "../ui/separator";
+} from "~/components/ui/dropdown-menu.responsive";
+import Icon from "~/components/ui/icon";
+import { Separator } from "~/components/ui/separator";
+
+import { useResponsive } from "~/context/responsiveContext";
+import { getFileType } from "~/lib/previewHelper";
+import { bytesToReadable, durationToReadable, formatDate } from "~/lib/utils";
+
+import { type Schema_File } from "~/types/schema";
+
+import config from "config";
 
 type Props = {
   file: z.infer<typeof Schema_File>;
@@ -111,7 +110,7 @@ export default function PreviewInformation({ file, token }: Props) {
     });
     try {
       const embedContent = `<iframe title="${file.name}" src="${new URL(
-        `/_/embed/${pathname}`.replace(/\/+/g, "/"),
+        `/ngdi-internal/embed/${pathname}`.replace(/\/+/g, "/"),
         config.basePath,
       ).toString()}" frameborder="0" allowfullscreen allowtransparency width="100%" height="100%" style="max-width:${
         fileType === "audio" ? "480px" : "1280px"
@@ -309,7 +308,7 @@ export default function PreviewInformation({ file, token }: Props) {
                         onClick={onCopyEmbed}
                       >
                         {`<iframe title="${file.name}" src="${new URL(
-                          `/_/embed/${pathname}`.replace(/\/+/g, "/"),
+                          `/ngdi-internal/embed/${pathname}`.replace(/\/+/g, "/"),
                           config.basePath,
                         ).toString()}" frameborder="0" allowfullscreen allowtransparency width="100%" height="100%" style="max-width:${
                           fileType === "audio" ? "480px" : "1280px"
diff --git a/src/components/Preview/Manga.tsx b/src/components/Preview/Manga.tsx
index 8d53191..75361fa 100644
--- a/src/components/Preview/Manga.tsx
+++ b/src/components/Preview/Manga.tsx
@@ -19,8 +19,8 @@ import {
 import Icon from "~/components/ui/icon";
 import { Progress } from "~/components/ui/progress";
 
+import { useResponsive } from "~/context/responsiveContext";
 import useLoading from "~/hooks/useLoading";
-import useMediaQuery from "~/hooks/useMediaQuery";
 import { cn } from "~/lib/utils";
 
 import { type Schema_File } from "~/types/schema";
@@ -123,7 +123,7 @@ export default function PreviewManga({ file }: Props) {
     unzip.push(buffer);
   }, []);
 
-  const isDesktop = useMediaQuery("(min-width: 768px)");
+  const { isDesktop } = useResponsive();
 
   useEffect(() => {
     if (!api) return;
diff --git a/src/components/Preview/Media.tsx b/src/components/Preview/Media.tsx
index 6d7d827..6e9208c 100644
--- a/src/components/Preview/Media.tsx
+++ b/src/components/Preview/Media.tsx
@@ -15,7 +15,7 @@ import {
   useAudioGainOptions,
   usePlaybackRateOptions,
 } from "@vidstack/react";
-import { DefaultAudioLayout, DefaultVideoLayout, defaultLayoutIcons } from "@vidstack/react/player/layouts/default";
+import { DefaultAudioLayout, DefaultVideoLayout } from "@vidstack/react/player/layouts/default";
 import "@vidstack/react/player/styles/base.css";
 import "@vidstack/react/player/styles/default/layouts/audio.css";
 import "@vidstack/react/player/styles/default/layouts/video.css";
@@ -24,375 +24,16 @@ import { ChevronLeft, ChevronRight } from "lucide-react";
 import { useCallback, useRef, useState } from "react";
 import { type z } from "zod";
 
+import { PageLoader } from "~/components/layout";
 import Icon from "~/components/ui/icon";
 
 import useLoading from "~/hooks/useLoading";
+import { MediaPlayerIcons } from "~/lib/previewHelper";
 
 import { type Schema_File } from "~/types/schema";
 
 import "~/styles/vidstack.css";
 
-import { PageLoader } from "../layout";
-
-export const MediaPlayerIcons = {
-  ...defaultLayoutIcons,
-  AirPlayButton: {
-    Default: () => (
-      <Icon
-        hideWrapper
-        name='Airplay'
-        className='vds-icon size-5'
-      />
-    ),
-    Connecting: () => (
-      <Icon
-        hideWrapper
-        name='LoaderCircle'
-        className='vds-icon size-5 animate-spin'
-      />
-    ),
-    Connected: () => (
-      <Icon
-        hideWrapper
-        name='Airplay'
-        className='vds-icon size-5'
-      />
-    ),
-  },
-  GoogleCastButton: {
-    Default: () => (
-      <Icon
-        hideWrapper
-        name='Cast'
-        className='vds-icon size-5'
-      />
-    ),
-    Connecting: () => (
-      <Icon
-        hideWrapper
-        name='LoaderCircle'
-        className='vds-icon size-5 animate-spin'
-      />
-    ),
-    Connected: () => (
-      <Icon
-        hideWrapper
-        name='Cast'
-        className='vds-icon size-5'
-      />
-    ),
-  },
-  PlayButton: {
-    Play: () => (
-      <Icon
-        hideWrapper
-        name='Play'
-        className='vds-icon size-5 fill-current media-ended:hidden media-playing:hidden'
-      />
-    ),
-    Pause: () => (
-      <Icon
-        hideWrapper
-        name='Pause'
-        className='vds-icon size-5 fill-current media-paused:hidden'
-      />
-    ),
-    Replay: () => (
-      <Icon
-        hideWrapper
-        name='RotateCcw'
-        className='vds-icon hidden size-5 media-ended:block'
-      />
-    ),
-  },
-  MuteButton: {
-    Mute: () => (
-      <Icon
-        hideWrapper
-        name='VolumeX'
-        className='vds-icon mute-icon size-5'
-      />
-    ),
-    VolumeLow: () => (
-      <Icon
-        hideWrapper
-        name='Volume1'
-        className='vds-icon volume-low-icon size-5'
-      />
-    ),
-    VolumeHigh: () => (
-      <Icon
-        hideWrapper
-        name='Volume2'
-        className='vds-icon volume-high-icon size-5'
-      />
-    ),
-  },
-  CaptionButton: {
-    On: () => (
-      <Icon
-        hideWrapper
-        name='Captions'
-        className='vds-icon size-5'
-      />
-    ),
-    Off: () => (
-      <Icon
-        hideWrapper
-        name='CaptionsOff'
-        className='vds-icon size-5'
-      />
-    ),
-  },
-  PIPButton: {
-    Enter: () => (
-      <Icon
-        hideWrapper
-        name='PictureInPicture'
-        className='vds-icon size-5'
-      />
-    ),
-    Exit: () => (
-      <Icon
-        hideWrapper
-        name='X'
-        className='vds-icon size-5'
-      />
-    ),
-  },
-  FullscreenButton: {
-    Enter: () => (
-      <Icon
-        hideWrapper
-        name='Maximize2'
-        className='vds-icon size-5'
-      />
-    ),
-    Exit: () => (
-      <Icon
-        hideWrapper
-        name='Minimize2'
-        className='vds-icon size-5'
-      />
-    ),
-  },
-  SeekButton: {
-    Backward: () => (
-      <Icon
-        hideWrapper
-        name='ChevronsLeft'
-        className='vds-icon size-5'
-      />
-    ),
-    Forward: () => (
-      <Icon
-        hideWrapper
-        name='ChevronsRight'
-        className='vds-icon size-5'
-      />
-    ),
-  },
-  DownloadButton: {
-    Default: () => (
-      <Icon
-        hideWrapper
-        name='Download'
-        className='vds-icon size-5'
-      />
-    ),
-  },
-  Menu: {
-    Accessibility: () => (
-      <Icon
-        hideWrapper
-        name='PersonStanding'
-        className='vds-icon mr-2 size-5'
-      />
-    ),
-    ArrowLeft: () => null,
-    ArrowRight: () => (
-      <Icon
-        hideWrapper
-        name='ChevronRight'
-        className='vds-icon size-5'
-      />
-    ),
-    Audio: () => (
-      <Icon
-        hideWrapper
-        name='Volume2'
-        className='vds-icon mr-2 size-5'
-      />
-    ),
-    AudioBoostUp: () => (
-      <Icon
-        hideWrapper
-        name='Volume2'
-        className='vds-icon size-5'
-      />
-    ),
-    AudioBoostDown: () => (
-      <Icon
-        hideWrapper
-        name='Volume'
-        className='vds-icon size-5'
-      />
-    ),
-    Chapters: () => (
-      <Icon
-        hideWrapper
-        name='TableOfContents'
-        className='vds-icon size-5'
-      />
-    ),
-    Captions: () => (
-      <Icon
-        hideWrapper
-        name='Captions'
-        className='vds-icon size-5'
-      />
-    ),
-    Playback: () => (
-      <Icon
-        hideWrapper
-        name='ListVideo'
-        className='size5 mr-2 '
-      />
-    ),
-    Settings: () => (
-      <Icon
-        hideWrapper
-        name='Settings'
-        className='vds-icon vds-rotate-icon size-5'
-      />
-    ),
-    SpeedUp: () => (
-      <Icon
-        hideWrapper
-        name='ChevronsUp'
-        className='vds-icon size-5'
-      />
-    ),
-    SpeedDown: () => (
-      <Icon
-        hideWrapper
-        name='ChevronsDown'
-        className='vds-icon size-5'
-      />
-    ),
-    QualityUp: () => null,
-    QualityDown: () => null,
-    FontSizeUp: () => null,
-    FontSizeDown: () => null,
-    OpacityUp: () => null,
-    OpacityDown: () => null,
-    RadioCheck: () => null,
-  },
-  KeyboardDisplay: {
-    Play: () => (
-      <div className='grid h-full w-full place-items-center'>
-        <Icon
-          hideWrapper
-          name='Play'
-          className='size-6'
-        />
-      </div>
-    ),
-    Pause: () => (
-      <div className='grid h-full w-full place-items-center'>
-        <Icon
-          hideWrapper
-          name='Pause'
-          className='size-6'
-        />
-      </div>
-    ),
-    Mute: () => (
-      <div className='grid h-full w-full place-items-center'>
-        <Icon
-          hideWrapper
-          name='VolumeX'
-          className='size-6'
-        />
-      </div>
-    ),
-    VolumeUp: () => (
-      <div className='grid h-full w-full place-items-center'>
-        <Icon
-          hideWrapper
-          name='Volume2'
-          className='size-6'
-        />
-      </div>
-    ),
-    VolumeDown: () => (
-      <div className='grid h-full w-full place-items-center'>
-        <Icon
-          hideWrapper
-          name='Volume1'
-          className='size-6'
-        />
-      </div>
-    ),
-    EnterFullscreen: () => (
-      <div className='grid h-full w-full place-items-center'>
-        <Icon
-          hideWrapper
-          name='Maximize2'
-          className='size-6'
-        />
-      </div>
-    ),
-    ExitFullscreen: () => (
-      <div className='grid h-full w-full place-items-center'>
-        <Icon
-          hideWrapper
-          name='Minimize2'
-          className='size-6'
-        />
-      </div>
-    ),
-    // EnterPiP: () => null,
-    // ExitPiP: () => null,
-    CaptionsOn: () => (
-      <div className='grid h-full w-full place-items-center'>
-        <Icon
-          hideWrapper
-          name='Captions'
-          className='size-6'
-        />
-      </div>
-    ),
-    CaptionsOff: () => (
-      <div className='grid h-full w-full place-items-center'>
-        <Icon
-          hideWrapper
-          name='CaptionsOff'
-          className='size-6'
-        />
-      </div>
-    ),
-    SeekForward: () => (
-      <div className='grid h-full w-full place-items-center'>
-        <Icon
-          hideWrapper
-          name='ChevronsRight'
-          className='size-6'
-        />
-      </div>
-    ),
-    SeekBackward: () => (
-      <div className='grid h-full w-full place-items-center'>
-        <Icon
-          hideWrapper
-          name='ChevronsLeft'
-          className='size-6'
-        />
-      </div>
-    ),
-  },
-};
-
 type Props = {
   file: z.infer<typeof Schema_File>;
   type: "video" | "audio";
diff --git a/src/components/Preview/Pdf.tsx b/src/components/Preview/Pdf.tsx
index c8be21d..8b00ebb 100644
--- a/src/components/Preview/Pdf.tsx
+++ b/src/components/Preview/Pdf.tsx
@@ -3,14 +3,14 @@
 import { useState } from "react";
 import { type z } from "zod";
 
+import { Status } from "~/components/global";
+import { PageLoader } from "~/components/layout";
+
 import useLoading from "~/hooks/useLoading";
 import { cn } from "~/lib/utils";
 
 import { type Schema_File } from "~/types/schema";
 
-import { Status } from "../global";
-import { PageLoader } from "../layout";
-
 type Props = {
   file: z.infer<typeof Schema_File>;
 };