diff --git a/packages/frontend/core/src/modules/right-sidebar/entities/right-sidebar.ts b/packages/frontend/core/src/modules/right-sidebar/entities/right-sidebar.ts
index d670c31d01..88dac9d7c2 100644
--- a/packages/frontend/core/src/modules/right-sidebar/entities/right-sidebar.ts
+++ b/packages/frontend/core/src/modules/right-sidebar/entities/right-sidebar.ts
@@ -1,9 +1,16 @@
 import { LiveData } from '@toeverything/infra/livedata';
+import type { GlobalState } from '@toeverything/infra/storage';
 
 import type { RightSidebarView } from './right-sidebar-view';
 
+const RIGHT_SIDEBAR_KEY = 'app:settings:rightsidebar';
+
 export class RightSidebar {
-  readonly isOpen = new LiveData(false);
+  constructor(private readonly globalState: GlobalState) {}
+  readonly isOpen = LiveData.from(
+    this.globalState.watch<boolean>(RIGHT_SIDEBAR_KEY),
+    false
+  ).map(Boolean);
   readonly views = new LiveData<RightSidebarView[]>([]);
   readonly front = this.views.map(
     stack => stack[0] as RightSidebarView | undefined
@@ -11,15 +18,19 @@ export class RightSidebar {
   readonly hasViews = this.views.map(stack => stack.length > 0);
 
   open() {
-    this.isOpen.next(true);
+    this._set(true);
   }
 
   toggle() {
-    this.isOpen.next(!this.isOpen.value);
+    this._set(!this.isOpen.value);
   }
 
   close() {
-    this.isOpen.next(false);
+    this._set(false);
+  }
+
+  _set(value: boolean) {
+    this.globalState.set(RIGHT_SIDEBAR_KEY, value);
   }
 
   /**
diff --git a/packages/frontend/core/src/modules/services.ts b/packages/frontend/core/src/modules/services.ts
index d6072a4e01..52cefe71e0 100644
--- a/packages/frontend/core/src/modules/services.ts
+++ b/packages/frontend/core/src/modules/services.ts
@@ -28,7 +28,7 @@ export function configureBusinessServices(services: ServiceCollection) {
     .scope(WorkspaceScope)
     .add(Workbench)
     .add(Navigator, [Workbench])
-    .add(RightSidebar)
+    .add(RightSidebar, [GlobalState])
     .add(WorkspacePropertiesAdapter, [Workspace])
     .add(CollectionService, [Workspace])
     .add(WorkspaceLegacyProperties, [Workspace])
diff --git a/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx b/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx
index 020369f489..6541cf31ce 100644
--- a/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx
+++ b/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx
@@ -16,6 +16,8 @@ import type { Doc as BlockSuiteDoc } from '@blocksuite/store';
 import {
   Doc,
   globalBlockSuiteSchema,
+  GlobalState,
+  LiveData,
   PageManager,
   PageRecordList,
   ServiceProviderContext,
@@ -65,7 +67,23 @@ import { PageNotFound } from '../../404';
 import * as styles from './detail-page.css';
 import { DetailPageHeader } from './detail-page-header';
 
+const RIGHT_SIDEBAR_TABS_ACTIVE_KEY = 'app:settings:rightsidebar:tabs:active';
+
 const DetailPageImpl = memo(function DetailPageImpl() {
+  const globalState = useService(GlobalState);
+  const activeTabName = useLiveData(
+    LiveData.from(
+      globalState.watch<SidebarTabName>(RIGHT_SIDEBAR_TABS_ACTIVE_KEY),
+      'journal'
+    )
+  );
+  const setActiveTabName = useCallback(
+    (name: string) => {
+      globalState.set(RIGHT_SIDEBAR_TABS_ACTIVE_KEY, name);
+    },
+    [globalState]
+  );
+
   const page = useService(Doc);
   const pageRecordList = useService(PageRecordList);
   const currentPageId = page.id;
@@ -84,10 +102,6 @@ const DetailPageImpl = memo(function DetailPageImpl() {
     }
   }, [editor, isActiveView, setActiveBlockSuiteEditor]);
 
-  const [activeTabName, setActiveTabName] = useState<SidebarTabName | null>(
-    null
-  );
-
   const pageMeta = useBlockSuiteDocMeta(docCollection).find(
     meta => meta.id === page.id
   );