diff --git a/apps/web/components/editor/pdf-editor.tsx b/apps/web/components/editor/pdf-editor.tsx
new file mode 100644
index 000000000..14f350f45
--- /dev/null
+++ b/apps/web/components/editor/pdf-editor.tsx
@@ -0,0 +1,19 @@
+import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib/constants";
+import { useRouter } from "next/router";
+import dynamic from "next/dynamic";
+import React from "react";
+
+const PDFViewer = dynamic(() => import("./pdf-viewer"), {
+  ssr: false,
+});
+
+export default function PDFEditor(props: any) {
+  const router = useRouter();
+
+  return (
+    <PDFViewer
+      document={props.document}
+      pdfUrl={`${NEXT_PUBLIC_WEBAPP_URL}/api/documents/${router.query.id}`}
+    />
+  );
+}
diff --git a/apps/web/pages/documents/[id]/index.tsx b/apps/web/pages/documents/[id]/index.tsx
index 317c78755..2b1121c9b 100644
--- a/apps/web/pages/documents/[id]/index.tsx
+++ b/apps/web/pages/documents/[id]/index.tsx
@@ -16,13 +16,7 @@ import { getDocument } from "@documenso/lib/query";
 import { Document as PrismaDocument } from "@prisma/client";
 import { Button, Breadcrumb } from "@documenso/ui";
 import short from "short-uuid";
-
-const PDFViewer = dynamic(
-  () => import("../../../components/editor/pdf-viewer"),
-  {
-    ssr: false,
-  }
-);
+import PDFEditor from "../../../components/editor/pdf-editor";
 
 const DocumentsDetailPage: NextPageWithLayout = (props: any) => {
   const router = useRouter();
@@ -97,10 +91,7 @@ const DocumentsDetailPage: NextPageWithLayout = (props: any) => {
         </div>
       </div>
       <div className="mx-auto w-fit">
-        <PDFViewer
-          document={props.document}
-          pdfUrl={`${NEXT_PUBLIC_WEBAPP_URL}/api/documents/${router.query.id}`}
-        />
+        <PDFEditor document={props.document} />
       </div>
     </div>
   );