diff --git a/src/app/@modal/(.)paperless/document/[id]/page.tsx b/src/app/@modal/(.)paperless/document/[id]/page.tsx
index d4c683f..6d8d8af 100644
--- a/src/app/@modal/(.)paperless/document/[id]/page.tsx
+++ b/src/app/@modal/(.)paperless/document/[id]/page.tsx
@@ -1,5 +1,5 @@
 import { Modal } from "./modal";
-import DocumentViewer from "@/components/DocumentViewer";
+import DocumentViewer from "@/components/document-viewer";
 
 export default function DocumentModal(props: { id: number }) {
   return (
diff --git a/src/app/paperless/document/[id]/page.tsx b/src/app/paperless/document/[id]/page.tsx
index 5c4995e..be788e3 100644
--- a/src/app/paperless/document/[id]/page.tsx
+++ b/src/app/paperless/document/[id]/page.tsx
@@ -1,4 +1,4 @@
-import DocumentViewer from "@/components/DocumentViewer";
+import DocumentViewer from "@/components/document-viewer";
 
 export default function FullPageDocumentPage(props: { id: number }) {
   return (
diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx
index ace6ec4..c31b715 100644
--- a/src/app/settings/page.tsx
+++ b/src/app/settings/page.tsx
@@ -19,7 +19,7 @@ import { useState } from "react";
 import { useUser } from "@clerk/nextjs";
 import { redirect, usePathname } from "next/navigation";
 import LoadingSpinner from "@/components/loading-spinner";
-import { getUserData, setUserProperty } from "../actions";
+import { getUserData, setUserProperty } from "@/app/actions";
 import { Toaster } from "@/components/ui/sonner";
 import { toast } from "sonner";
 import {
diff --git a/src/components/DocumentViewer.tsx b/src/components/DocumentViewer.tsx
deleted file mode 100644
index e8a6def..0000000
--- a/src/components/DocumentViewer.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { getUserData } from "@/app/actions";
-import LoadingSpinner from "./loading-spinner";
-
-export default async function DocumentViewer(props: { id: number }) {
-  const userData = await getUserData();
-
-  if (!userData) {
-    return <h1>Failure</h1>;
-  }
-
-  const url = `${userData.paperlessURL}/api/documents${props.id}/preview`;
-
-  return (
-    <embed
-      src={url}
-      className="h-screen w-2/3"
-      type="application/pdf"
-      width="100%"
-      height="100%"
-    />
-  );
-}
diff --git a/src/components/document-viewer.tsx b/src/components/document-viewer.tsx
new file mode 100644
index 0000000..8adf363
--- /dev/null
+++ b/src/components/document-viewer.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { getUserData } from "@/app/actions";
+import LoadingSpinner from "@/components/loading-spinner";
+
+export default function DocumentViewer(props: { id: number }) {
+  const [pdfUrl, setPdfUrl] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      setLoading(true);
+      const userData = await getUserData();
+      if (!userData) {
+        setLoading(false);
+        return;
+      }
+
+      const url = `${userData.paperlessURL}/api/documents/${props.id}/download/`;
+      try {
+        const response = await fetch(url, {
+          headers: {
+            "Content-Type": "application/pdf",
+            Authorization: `Token ${userData.paperlessToken}`,
+          },
+        });
+        if (response.ok) {
+          const blob = await response.blob();
+          const objectUrl = URL.createObjectURL(blob);
+          setPdfUrl(objectUrl);
+          // Cleanup function to revoke URL when component unmounts or pdfUrl changes
+          return () => URL.revokeObjectURL(objectUrl);
+        } else {
+          console.error("Failed to fetch PDF");
+        }
+      } catch (error) {
+        console.error("Error fetching PDF:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData().catch((error) => {
+      console.error("An error occurred:", error);
+    });
+  }, [props.id]); // Dependency array to refetch if id changes
+
+  if (loading) {
+    return <LoadingSpinner>Loading...</LoadingSpinner>;
+  }
+
+  if (!pdfUrl) {
+    return <h1>Failure</h1>;
+  }
+
+  return (
+    <embed
+      src={pdfUrl}
+      className="h-screen w-2/3"
+      type="application/pdf"
+      width="100%"
+      height="100%"
+    />
+  );
+}