diff --git a/apps/web/src/atoms/mode.ts b/apps/web/src/atoms/mode.ts
new file mode 100644
index 0000000000..bb883df6b6
--- /dev/null
+++ b/apps/web/src/atoms/mode.ts
@@ -0,0 +1,12 @@
+import { currentPageIdAtom } from '@toeverything/plugin-infra/manager';
+import { atom } from 'jotai/vanilla';
+
+import { pageSettingFamily } from './index';
+
+export const currentModeAtom = atom<'page' | 'edgeless'>(get => {
+  const pageId = get(currentPageIdAtom);
+  if (!pageId) {
+    return 'page';
+  }
+  return get(pageSettingFamily(pageId)).mode;
+});
diff --git a/apps/web/src/components/blocksuite/workspace-header/header.tsx b/apps/web/src/components/blocksuite/workspace-header/header.tsx
index d5254edacf..3ee4db07d6 100644
--- a/apps/web/src/components/blocksuite/workspace-header/header.tsx
+++ b/apps/web/src/components/blocksuite/workspace-header/header.tsx
@@ -23,7 +23,7 @@ import {
 
 import { guideDownloadClientTipAtom } from '../../../atoms/guide';
 import { contentLayoutAtom } from '../../../atoms/layout';
-import { useCurrentMode } from '../../../hooks/current/use-current-mode';
+import { currentModeAtom } from '../../../atoms/mode';
 import type { AffineOfficialWorkspace } from '../../../shared';
 import { DownloadClientTip } from './download-tips';
 import EditPage from './header-right-items/edit-page';
@@ -205,7 +205,7 @@ export const Header = forwardRef<
   const open = useAtomValue(appSidebarOpenAtom);
   const appSidebarFloating = useAtomValue(appSidebarFloatingAtom);
 
-  const mode = useCurrentMode();
+  const mode = useAtomValue(currentModeAtom);
 
   return (
     <div
diff --git a/apps/web/src/components/pure/help-island/index.tsx b/apps/web/src/components/pure/help-island/index.tsx
index 70c1af9a43..7794e5d66a 100644
--- a/apps/web/src/components/pure/help-island/index.tsx
+++ b/apps/web/src/components/pure/help-island/index.tsx
@@ -1,11 +1,12 @@
 import { MuiFade, Tooltip } from '@affine/component';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { CloseIcon, NewIcon, UserGuideIcon } from '@blocksuite/icons';
-import { useSetAtom } from 'jotai';
+import { useSetAtom } from 'jotai/react';
+import { useAtomValue } from 'jotai/react';
 import { useCallback, useState } from 'react';
 
 import { openOnboardingModalAtom, openSettingModalAtom } from '../../../atoms';
-import { useCurrentMode } from '../../../hooks/current/use-current-mode';
+import { currentModeAtom } from '../../../atoms/mode';
 import { ShortcutsModal } from '../shortcuts-modal';
 import { ContactIcon, HelpIcon, KeyboardIcon } from './icons';
 import {
@@ -27,7 +28,7 @@ export const HelpIsland = ({
 }: {
   showList?: IslandItemNames[];
 }) => {
-  const mode = useCurrentMode();
+  const mode = useAtomValue(currentModeAtom);
   const setOpenOnboarding = useSetAtom(openOnboardingModalAtom);
   const setOpenSettingModalAtom = useSetAtom(openSettingModalAtom);
   const [spread, setShowSpread] = useState(false);
diff --git a/apps/web/src/hooks/current/use-current-mode.ts b/apps/web/src/hooks/current/use-current-mode.ts
deleted file mode 100644
index d7bd2cced8..0000000000
--- a/apps/web/src/hooks/current/use-current-mode.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { currentPageIdAtom } from '@toeverything/plugin-infra/manager';
-import { atom, useAtomValue } from 'jotai';
-
-import { pageSettingFamily } from '../../atoms';
-
-const currentModeAtom = atom<'page' | 'edgeless'>(get => {
-  const pageId = get(currentPageIdAtom);
-  // fixme(himself65): pageId should not be null
-  if (!pageId) {
-    return 'page';
-  }
-  return get(pageSettingFamily(pageId))?.mode ?? 'page';
-});
-
-export const useCurrentMode = () => {
-  return useAtomValue(currentModeAtom);
-};