diff --git a/apps/web/src/components/page-detail-editor.tsx b/apps/web/src/components/page-detail-editor.tsx
index 610d858e4d..cdb30a9c48 100644
--- a/apps/web/src/components/page-detail-editor.tsx
+++ b/apps/web/src/components/page-detail-editor.tsx
@@ -2,6 +2,7 @@ import type { EditorContainer } from '@blocksuite/editor';
 import type { Page } from '@blocksuite/store';
 import { assertExists } from '@blocksuite/store';
 import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
+import { useBlockSuiteWorkspacePage } from '@toeverything/hooks/use-block-suite-workspace-page';
 import { useBlockSuiteWorkspacePageTitle } from '@toeverything/hooks/use-block-suite-workspace-page-title';
 import { useAtomValue, useSetAtom } from 'jotai';
 import Head from 'next/head';
@@ -34,7 +35,7 @@ export const PageDetailEditor: React.FC<PageDetailEditorProps> = ({
   isPreview,
 }) => {
   const blockSuiteWorkspace = workspace.blockSuiteWorkspace;
-  const page = blockSuiteWorkspace.getPage(pageId);
+  const page = useBlockSuiteWorkspacePage(blockSuiteWorkspace, pageId);
   if (!page) {
     throw new PageNotFoundError(blockSuiteWorkspace, pageId);
   }
@@ -63,7 +64,7 @@ export const PageDetailEditor: React.FC<PageDetailEditorProps> = ({
         style={{
           height: 'calc(100% - 52px)',
         }}
-        key={`${workspace.flavour}-${workspace.id}-${[pageId]}`}
+        key={`${workspace.flavour}-${workspace.id}-${pageId}`}
         mode={isPublic ? 'page' : currentMode}
         page={page}
         onInit={useCallback(
diff --git a/apps/web/src/hooks/use-sync-router-with-current-page-id.ts b/apps/web/src/hooks/use-sync-router-with-current-page-id.ts
index b4373dfb43..92b77a65d4 100644
--- a/apps/web/src/hooks/use-sync-router-with-current-page-id.ts
+++ b/apps/web/src/hooks/use-sync-router-with-current-page-id.ts
@@ -13,6 +13,9 @@ export function useSyncRouterWithCurrentPageId(router: NextRouter) {
     if (typeof pageId === 'string') {
       console.log('set page id', pageId);
       setCurrentPageId(pageId);
+    } else if (pageId === undefined) {
+      console.log('cleanup page');
+      setCurrentPageId(null);
     }
   }, [router.isReady, router.query.pageId, setCurrentPageId]);
 }