diff --git a/apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx b/apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx
index 7684c9b64..027d845b2 100644
--- a/apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx
@@ -153,7 +153,7 @@ export const EditDocumentForm = ({
         gradient
       >
         <CardContent className="p-2">
-          <LazyPDFViewer documentData={documentData} />
+          <LazyPDFViewer key={documentData.id} documentData={documentData} />
         </CardContent>
       </Card>
 
diff --git a/apps/web/src/app/(dashboard)/documents/[id]/page.tsx b/apps/web/src/app/(dashboard)/documents/[id]/page.tsx
index 85e30012c..3493bcf30 100644
--- a/apps/web/src/app/(dashboard)/documents/[id]/page.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/page.tsx
@@ -91,7 +91,7 @@ export default async function DocumentPage({ params }: DocumentPageProps) {
 
       {document.status === InternalDocumentStatus.COMPLETED && (
         <div className="mx-auto mt-12 max-w-2xl">
-          <LazyPDFViewer documentData={documentData} />
+          <LazyPDFViewer key={documentData.id} documentData={documentData} />
         </div>
       )}
     </div>
diff --git a/apps/web/src/app/(signing)/sign/[token]/page.tsx b/apps/web/src/app/(signing)/sign/[token]/page.tsx
index 3841a2da6..ccf3e9d07 100644
--- a/apps/web/src/app/(signing)/sign/[token]/page.tsx
+++ b/apps/web/src/app/(signing)/sign/[token]/page.tsx
@@ -74,7 +74,7 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
             gradient
           >
             <CardContent className="p-2">
-              <LazyPDFViewer documentData={documentData} />
+              <LazyPDFViewer key={documentData.id} documentData={documentData} />
             </CardContent>
           </Card>
 
diff --git a/packages/ui/primitives/pdf-viewer.tsx b/packages/ui/primitives/pdf-viewer.tsx
index fb7b0d51a..ed1733559 100644
--- a/packages/ui/primitives/pdf-viewer.tsx
+++ b/packages/ui/primitives/pdf-viewer.tsx
@@ -66,6 +66,8 @@ export const PDFViewer = ({
   const [numPages, setNumPages] = useState(0);
   const [pdfError, setPdfError] = useState(false);
 
+  const isLoading = isDocumentBytesLoading || !documentBytes;
+
   const onDocumentLoaded = (doc: LoadedPDFDocument) => {
     setNumPages(doc.numPages);
     onDocumentLoad?.(doc);
@@ -153,13 +155,17 @@ export const PDFViewer = ({
 
   return (
     <div ref={$el} className={cn('overflow-hidden', className)} {...props}>
-      {isDocumentBytesLoading ? (
-        <div className={cn('h-[80vh] max-h-[60rem] w-full overflow-hidden rounded')}>
+      {isLoading ? (
+        <div
+          className={cn(
+            'flex h-[80vh] max-h-[60rem] w-full flex-col items-center justify-center overflow-hidden rounded',
+          )}
+        >
           <PDFLoader />
         </div>
       ) : (
         <PDFDocument
-          file={documentBytes}
+          file={documentBytes.buffer}
           className={cn('w-full overflow-hidden rounded', {
             'h-[80vh] max-h-[60rem]': numPages === 0,
           })}