diff --git a/bun.lockb b/bun.lockb
index 3943349..1b7c16f 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/next.config.mjs b/next.config.js
similarity index 60%
rename from next.config.mjs
rename to next.config.js
index 07d270c..5bbc884 100644
--- a/next.config.mjs
+++ b/next.config.js
@@ -19,6 +19,23 @@ const config = {
       },
     ],
   },
+  webpack: (config, { isServer }) => {
+    if (!isServer) {
+      config.resolve.fallback.fs = false;
+    }
+
+    return config;
+  },
+  experimental: {
+    turbo: {
+      rules: {
+        "*.svg": {
+          loaders: ["@svgr/webpack"],
+          as: "*.js",
+        },
+      },
+    },
+  },
 };
 
 export default config;
diff --git a/package.json b/package.json
index 2393025..bdbb14d 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,8 @@
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tooltip": "^1.1.1",
+    "@react-pdf-viewer/core": "^3.12.0",
+    "@react-pdf/renderer": "^3.4.4",
     "@t3-oss/env-nextjs": "^0.10.1",
     "@tanstack/eslint-plugin-query": "^5.43.1",
     "@tanstack/react-query": "^5.45.0",
diff --git a/src/app/actions.ts b/src/app/actions.ts
index d3b653c..09e288f 100644
--- a/src/app/actions.ts
+++ b/src/app/actions.ts
@@ -66,17 +66,27 @@ export async function getPaperlessDocuments(query: string) {
 
 export async function getPaperlessDocument(id: number) {
   const userData = await getUserData();
+  if (!userData) {
+    return null;
+  }
 
-  if (!id || !userData) return null;
-
-  const response = await fetch(
-    `${userData.paperlessURL}/api/documents/?query=${query}`,
-    {
-      method: "GET",
+  const url = `${userData.paperlessURL}/api/documents/${id}/download/`;
+  try {
+    const response = await fetch(url, {
       headers: {
-        "Content-Type": "application/json",
+        "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);
 }
diff --git a/src/app/document-testing/page.tsx b/src/app/document-testing/page.tsx
new file mode 100644
index 0000000..e34e854
--- /dev/null
+++ b/src/app/document-testing/page.tsx
@@ -0,0 +1,40 @@
+"use client";
+import { useState } from 'react';
+import { Document, Page, pdfjs } from 'react-pdf';
+import { getServerSideProps } from './something'; 
+
+// Configure PDF.js worker
+pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;
+
+interface PDFViewerProps {
+  pdfUrl: string; // URL to the PDF document
+}
+
+const PDFViewer: React.FC<PDFViewerProps> = ({ pdfUrl }) => {
+  const [numPages, setNumPages] = useState<number | null>(null);
+
+  const onDocumentLoadSuccess = ({ numPages }: { numPages: number }) => {
+    setNumPages(numPages);
+  };
+
+  return (
+    <div>
+      <Document
+        file={pdfUrl}
+        onLoadSuccess={onDocumentLoadSuccess}
+      >
+        {Array.from(
+          new Array(numPages || 0),
+          (el, index) => (
+            <Page
+              key={`page_${index + 1}`}
+              pageNumber={index + 1}
+            />
+          ),
+        )}
+      </Document>
+    </div>
+  );
+};
+
+export default PDFViewer;
diff --git a/src/app/document-testing/something.tsx b/src/app/document-testing/something.tsx
new file mode 100644
index 0000000..1478fb8
--- /dev/null
+++ b/src/app/document-testing/something.tsx
@@ -0,0 +1,53 @@
+// pages/pdf-viewer.tsx
+
+import { useState } from 'react';
+import { Document, Page, pdfjs } from 'react-pdf';
+import { GetServerSideProps } from 'next';
+
+// Configure PDF.js worker
+pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;
+
+interface PDFViewerProps {
+  pdfUrl: string; // URL to the PDF document
+}
+
+const PDFViewer: React.FC<PDFViewerProps> = ({ pdfUrl }) => {
+  const [numPages, setNumPages] = useState<number | null>(null);
+
+  const onDocumentLoadSuccess = ({ numPages }: { numPages: number }) => {
+    setNumPages(numPages);
+  };
+
+  return (
+    <div>
+      <Document
+        file={pdfUrl}
+        onLoadSuccess={onDocumentLoadSuccess}
+      >
+        {Array.from(
+          new Array(numPages || 0),
+          (el, index) => (
+            <Page
+              key={`page_${index + 1}`}
+              pageNumber={index + 1}
+            />
+          ),
+        )}
+      </Document>
+    </div>
+  );
+};
+
+export const getServerSideProps: GetServerSideProps = async () => {
+  // Fetch PDF URL from your API or any other source
+  const res = await fetch('URL_TO_YOUR_PDF_API_ENDPOINT');
+  const { pdfUrl } = await res.json();
+
+  return {
+    props: {
+      pdfUrl
+    }
+  };
+};
+
+export default PDFViewer;
diff --git a/src/app/page.tsx b/src/app/page.tsx
index a776ba4..85dbc69 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,7 +1,9 @@
+"use client";
+
 import OpenLinkInNewPage from "@/components/open-link-in-new-page";
 import Link from "next/link";
 
-export default async function HomePage() {
+export default function HomePage() {
   return (
     <main>
       <div>
@@ -14,7 +16,7 @@ export default async function HomePage() {
           to get started.
         </div>
         <div>Or sign in to access the dashboard.</div>
-        <Link href="/paperless/document/12">Buttom</Link>
+        <Link href="/paperless/document/12">Button</Link>
       </div>
     </main>
   );
diff --git a/tsconfig.json b/tsconfig.json
index 4366ce7..7a0cf7b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -37,6 +37,6 @@
     "**/*.cjs",
     "**/*.js",
     ".next/types/**/*.ts"
-, "next.config.mjs"  ],
+, "next.config.js"  ],
   "exclude": ["node_modules"]
 }