diff --git a/src/components/document-details.tsx b/src/components/document-details.tsx
index a8dae87..9528d4c 100644
--- a/src/components/document-details.tsx
+++ b/src/components/document-details.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { Download } from "lucide-react";
 import {
   AlertDialog,
@@ -11,15 +13,21 @@ import {
   AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
 import { toast } from "sonner";
-import DocumentPreview from "./document-preview";
+import DocumentPreview, { getPaperlessDocument } from "./document-preview";
 import { getUserData } from "@/app/actions";
-import { Button } from "./ui/button";
+import { Button, buttonVariants } from "./ui/button";
 import { useRouter } from "next/navigation";
 import {
   useQuery,
   QueryClientProvider,
   QueryClient,
 } from "@tanstack/react-query";
+import type { UsersTableType } from "@/server/db/schema";
+import LoadingSpinner from "./loading-spinner";
+import OpenExternalLink from "./external-link";
+import { PaperlessDocumentType } from "@/types";
+import React from "react";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 const queryClient = new QueryClient();
 
@@ -46,7 +54,37 @@ async function deleteDocument(documentId: number) {
   return response;
 }
 
-export default function DocumentDetails(props: { id: number }) {
+const fetchUserData = async (): Promise<UsersTableType> => {
+  const response = await fetch(`/api/getUserData`);
+  if (!response.ok) {
+    throw new Error("Network error");
+  }
+  const data = (await response.json()) as UsersTableType;
+  return data;
+};
+
+async function getPaperlessDocumentData(id: number, userData: UsersTableType) {
+  try {
+    const url = `${userData.paperlessURL}/api/documents/${id}/`;
+    const response = await fetch(url, {
+      headers: {
+        Authorization: `Token ${userData.paperlessToken}`,
+      },
+    });
+    if (response.ok) {
+      const data = (await response.json()) as PaperlessDocumentType[];
+      return data[0];
+    } else {
+      console.error("Failed to fetch PDF");
+      return null;
+    }
+  } catch (error) {
+    console.error("Error fetching PDF:", error);
+    return null;
+  }
+}
+
+function DocumentDetailsInner(props: { id: number }) {
   const router = useRouter();
 
   const { data: userData, isLoading: isUserDataLoading } = useQuery({
@@ -54,19 +92,23 @@ export default function DocumentDetails(props: { id: number }) {
     queryFn: fetchUserData,
   });
 
-  const { data: pdfUrl, isLoading: isPdfUrlLoading } = useQuery({
+  const { data: documentData, isLoading: isdocumentDataLoading } = useQuery({
     queryKey: ["pdfUrl", props.id, userData], // Include id and paperlessURL in the query key
     queryFn: async () => {
-      console.log("fetching");
-      return await getPaperlessDocument(props.id, userData!);
+      return await getPaperlessDocumentData(props.id, userData!);
     },
     enabled: !!userData,
   });
 
+  if (isUserDataLoading ?? isdocumentDataLoading) {
+    return <LoadingSpinner>Loading...</LoadingSpinner>;
+  }
+
   return (
     <div className="flex h-full w-full min-w-0 justify-center">
       <div className="flex h-4/5 flex-col rounded-xl bg-slate-600/50 md:w-1/2">
         <div className="m-4 flex flex-grow flex-col justify-center gap-8 md:m-8 md:flex-row md:gap-16">
+          <div>{documentData?.title}</div>
           <DocumentPreview id={props.id} />
           <div className="flex flex-col gap-8">
             <Button
@@ -77,11 +119,7 @@ export default function DocumentDetails(props: { id: number }) {
             >
               Back
             </Button>
-            <a
-              href={pdfUrl}
-              download={pdfUrl}
-              className={`${buttonVariants({ variant: "default" })}`}
-            >
+            <a>
               Download
               <Download />
             </a>
@@ -135,3 +173,12 @@ export default function DocumentDetails(props: { id: number }) {
     </div>
   );
 }
+
+export default function DocumentDetails(props: { id: number }) {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <DocumentDetailsInner {...props} />
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  );
+}
diff --git a/src/types/index.ts b/src/types/index.ts
index 6d1f774..aa6c94b 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -68,6 +68,29 @@ export type PaperlessDocumentsType = {
   }[];
 };
 
+export type PaperlessDocumentType = {
+  id: number;
+  correspondent: number;
+  document_type: number;
+  storage_path: number;
+  title: string;
+  content: string;
+  tags: number[];
+  created: string;
+  created_date: string;
+  modified: string;
+  added: string;
+  deleted_at: string;
+  archive_serial_number: number;
+  original_file_name: string;
+  archived_file_name: string;
+  owner: number;
+  user_can_change: boolean;
+  is_shared_by_requester: boolean;
+  notes: string[];
+  custom_fields: string[];
+};
+
 export type WhishperRecordingType = {
   id: string;
   status: number;