diff --git a/packages/frontend/core/src/modules/peek-view/view/peek-view-controls.tsx b/packages/frontend/core/src/modules/peek-view/view/peek-view-controls.tsx
index 279fc2f88..33cf2dc41 100644
--- a/packages/frontend/core/src/modules/peek-view/view/peek-view-controls.tsx
+++ b/packages/frontend/core/src/modules/peek-view/view/peek-view-controls.tsx
@@ -1,5 +1,4 @@
 import { IconButton } from '@affine/component';
-import { useNavigateHelper } from '@affine/core/hooks/use-navigate-helper';
 import { useI18n } from '@affine/i18n';
 import {
   CloseIcon,
@@ -20,7 +19,6 @@ import {
 import { WorkbenchService } from '../../workbench';
 import { PeekViewService } from '../services/peek-view';
 import * as styles from './peek-view-controls.css';
-import { useEditor } from './utils';
 
 type ControlButtonProps = {
   nameKey: string;
@@ -98,9 +96,7 @@ export const DocPeekViewControls = ({
 }: DocPeekViewControlsProps) => {
   const peekView = useService(PeekViewService).peekView;
   const workbench = useService(WorkbenchService).workbench;
-  const { jumpToPageBlock } = useNavigateHelper();
   const t = useI18n();
-  const { doc, workspace } = useEditor(docId);
   const controls = useMemo(() => {
     return [
       {
@@ -115,14 +111,7 @@ export const DocPeekViewControls = ({
         nameKey: 'open',
         onClick: () => {
           // TODO(@Peng): for frame blocks, we should mimic "view in edgeless" button behavior
-          if (mode) {
-            // TODO(@eyhn): change this to use mode link
-            doc?.setPrimaryMode(mode);
-          }
-
-          blockId
-            ? jumpToPageBlock(workspace.id, docId, blockId)
-            : workbench.openDoc(docId);
+          workbench.openDoc({ docId, blockId, mode });
 
           peekView.close('none');
         },
@@ -146,17 +135,7 @@ export const DocPeekViewControls = ({
         },
       },
     ].filter((opt): opt is ControlButtonProps => Boolean(opt));
-  }, [
-    blockId,
-    doc,
-    docId,
-    jumpToPageBlock,
-    mode,
-    peekView,
-    t,
-    workbench,
-    workspace.id,
-  ]);
+  }, [blockId, docId, mode, peekView, t, workbench]);
   return (
     <div {...rest} className={clsx(styles.root, className)}>
       {controls.map(option => (
diff --git a/packages/frontend/core/src/modules/workbench/entities/workbench.ts b/packages/frontend/core/src/modules/workbench/entities/workbench.ts
index cbbef3977..8c2c277be 100644
--- a/packages/frontend/core/src/modules/workbench/entities/workbench.ts
+++ b/packages/frontend/core/src/modules/workbench/entities/workbench.ts
@@ -1,4 +1,5 @@
 import { Unreachable } from '@affine/env/constant';
+import type { DocMode } from '@blocksuite/blocks';
 import { Entity, LiveData } from '@toeverything/infra';
 import { type To } from 'history';
 import { nanoid } from 'nanoid';
@@ -121,12 +122,15 @@ export class Workbench extends Entity {
   }
 
   openDoc(
-    id: string | { docId: string; blockId?: string },
+    id: string | { docId: string; blockId?: string; mode?: DocMode },
     options?: WorkbenchOpenOptions
   ) {
     const docId = typeof id === 'string' ? id : id.docId;
     const blockId = typeof id === 'string' ? undefined : id.blockId;
-    this.open(blockId ? `/${docId}#${blockId}` : `/${docId}`, options);
+    const mode = typeof id === 'string' ? undefined : id.mode;
+    const hash = blockId ? `#${blockId}` : '';
+    const query = mode ? `?mode=${mode}` : '';
+    this.open(`/${docId}${query}${hash}`, options);
   }
 
   openCollections(options?: WorkbenchOpenOptions) {