diff --git a/app/(main)/(routes)/documents/[documentId]/page.tsx b/app/(main)/(routes)/documents/[documentId]/page.tsx
index 5baa478..9b05016 100644
--- a/app/(main)/(routes)/documents/[documentId]/page.tsx
+++ b/app/(main)/(routes)/documents/[documentId]/page.tsx
@@ -7,12 +7,11 @@ import { Toolbar } from "@/components/toolbar";
 import { Cover } from "@/components/cover";
 import { useMemo } from "react";
 import dynamic from "next/dynamic";
-import { useRouter } from "next/router";
+import { useParams  } from "next/navigation";
 
 
 export default function DocumentIdPage() {
-    const router = useRouter();
-    const documentId  =  router.query.documentId;
+    const {documentId} = useParams ();
   const Editor = useMemo(
       () => dynamic(() => import("@/components/editor"), { ssr: false }),
       []
diff --git a/app/(public)/(routes)/preview/[documentId]/page.tsx b/app/(public)/(routes)/preview/[documentId]/page.tsx
index feec6ba..949687a 100644
--- a/app/(public)/(routes)/preview/[documentId]/page.tsx
+++ b/app/(public)/(routes)/preview/[documentId]/page.tsx
@@ -8,12 +8,11 @@ import { api } from "@/convex/_generated/api";
 import { Toolbar } from "@/components/toolbar";
 import { Cover } from "@/components/cover";
 import { Skeleton } from "@/components/ui/skeleton";
-import {useRouter} from "next/router";
+import {useParams } from "next/navigation";
 
 
 export default function DocumentIdPage() {
-  const router = useRouter();
-  const documentId  =  router.query.documentId;
+  const {documentId} = useParams ();
   const Editor = useMemo(
     () => dynamic(() => import("@/components/editor"), { ssr: false }),
     [],