diff --git a/src/app/@modal/(.)/paperless-documents/modal.tsx b/src/app/@modal/(.)/paperless-documents/modal.tsx
deleted file mode 100644
index 5176ebe..0000000
--- a/src/app/@modal/(.)/paperless-documents/modal.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-'use client';
-
-import { type ElementRef, useEffect, useRef } from 'react';
-import { useRouter } from 'next/navigation';
-import { createPortal } from 'react-dom';
-
-export function Modal({ children }: { children: React.ReactNode }) {
-  const router = useRouter();
-  const dialogRef = useRef<ElementRef<'dialog'>>(null);
-
-  useEffect(() => {
-    if (!dialogRef.current?.open) {
-      dialogRef.current?.showModal();
-    }
-  }, []);
-
-  function onDismiss() {
-    router.back();
-  }
-
-  return createPortal(
-    <div className="modal-backdrop">
-      <dialog ref={dialogRef} className="modal" onClose={onDismiss}>
-        {children}
-        <button onClick={onDismiss} className="close-button" />
-      </dialog>
-    </div>,
-    document.getElementById('modal-root')!
-  );
-}
\ No newline at end of file
diff --git a/src/app/@modal/(.)/paperless-documents/page.tsx b/src/app/@modal/(.)/paperless-documents/page.tsx
deleted file mode 100644
index df8694c..0000000
--- a/src/app/@modal/(.)/paperless-documents/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Modal } from './modal';
-
-export default function PhotoModal({
-    params: { id: photoId },
-  }: {
-    params: { id: string };
-  }) {
-    return <Modal>{photoId}</Modal>;
-  }
\ No newline at end of file
diff --git a/src/app/@modal/(.)paperless/document/[id]/page.tsx b/src/app/@modal/(.)paperless/document/[id]/page.tsx
new file mode 100644
index 0000000..aff1f6f
--- /dev/null
+++ b/src/app/@modal/(.)paperless/document/[id]/page.tsx
@@ -0,0 +1,7 @@
+export default function DocumentPage({
+    params: { id },
+  }: {
+    params: { id: string };
+  }) {
+    return <div>{id}</div>;
+  }
\ No newline at end of file
diff --git a/src/app/@modal/default.tsx b/src/app/@modal/default.tsx
index 7592cba..7046598 100644
--- a/src/app/@modal/default.tsx
+++ b/src/app/@modal/default.tsx
@@ -1,3 +1,3 @@
-export default function Default() {
+export default function DefaultModal() {
     return null;
   }
\ No newline at end of file
diff --git a/src/app/documents/[id]/page.tsx b/src/app/documents/[id]/page.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 6745ff0..fc41b22 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -15,8 +15,10 @@ export const metadata = {
 
 export default function RootLayout({
   children,
+  modal,
 }: {
   children: React.ReactNode;
+  modal: React.ReactNode;
 }) {
   return (
     <ClerkProvider
@@ -40,6 +42,8 @@ export default function RootLayout({
                 {children}
               </div>
             </div>
+            {modal}
+            <div id="modal-root" />
           </ThemeProvider>
         </body>
       </html>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index f0b0726..ec4ad96 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,4 +1,5 @@
 import OpenLinkInNewPage from "@/components/open-link-in-new-page";
+import Link from "next/link";
 
 export default async function HomePage() {
   return (
@@ -13,6 +14,7 @@ export default async function HomePage() {
           to get started.
         </div>
         <div>Or sign in to access the dashboard.</div>
+        <Link href="/documents/12">Buttom</Link>
       </div>
     </main>
   );
diff --git a/src/app/paperless/page.tsx b/src/app/paperless/page.tsx
index 4f2c6ad..a5ae116 100644
--- a/src/app/paperless/page.tsx
+++ b/src/app/paperless/page.tsx
@@ -143,15 +143,12 @@ function DocumentsPage() {
       <ul className="list-disc">
         {paperlessDocumentMap.map((document, index) => (
           <li className="underline" key={index}>
-            <a
-              rel="noopener noreferrer"
-              target="_blank"
-              className="text-blue-600 underline hover:text-blue-800"
-              href={`${paperlessURL}/api/documents/${document.id}/preview/#search="${query}"`}
+            <Link
+              className="underline hover:text-slate-300"
+              href={`/documents/${document.id}`}
             >
               {document.title}
-              <ExternalLink size={16} className="mx-1 inline-block" />
-            </a>
+            </Link>
           </li>
         ))}
       </ul>
diff --git a/src/components/topnav.tsx b/src/components/topnav.tsx
index f1c9ef5..277dba8 100644
--- a/src/components/topnav.tsx
+++ b/src/components/topnav.tsx
@@ -124,7 +124,7 @@ export function TopNav() {
         {/* Desktop links */}
         <div className="hidden h-full items-center rounded-r bg-slate-300 dark:bg-slate-700 md:flex">
           <Link
-            href="paperless"
+            href="/paperless"
             className={buttonVariants({ variant: "link" })}
           >
             Paperless-ngx
@@ -153,7 +153,7 @@ export function TopNav() {
               <DropdownMenuLabel>Links</DropdownMenuLabel>
               <DropdownMenuItem asChild>
                 <Link
-                  href="paperless"
+                  href="/paperless"
                   className={buttonVariants({ variant: "link" })}
                 >
                   Paperless-ngx