diff --git a/packages/frontend/core/src/desktop/dialogs/setting/types.ts b/packages/frontend/core/src/desktop/dialogs/setting/types.ts
index 38f60d6cb..6df4fd37d 100644
--- a/packages/frontend/core/src/desktop/dialogs/setting/types.ts
+++ b/packages/frontend/core/src/desktop/dialogs/setting/types.ts
@@ -1,5 +1,5 @@
 import type { SettingTab } from '@affine/core/modules/dialogs/constant';
-import type { ReactNode } from 'react';
+import type { ReactElement } from 'react';
 
 export interface SettingState {
   activeTab: SettingTab;
@@ -9,6 +9,6 @@ export interface SettingState {
 export interface SettingSidebarItem {
   key: SettingTab;
   title: string;
-  icon: ReactNode;
+  icon: ReactElement;
   testId: string;
 }
diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/index.tsx b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/index.tsx
index 747f30e40..b84e03f41 100644
--- a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/index.tsx
+++ b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/index.tsx
@@ -2,14 +2,22 @@ import { useWorkspaceInfo } from '@affine/core/components/hooks/use-workspace-in
 import type { SettingTab } from '@affine/core/modules/dialogs/constant';
 import { WorkspaceService } from '@affine/core/modules/workspace';
 import { useI18n } from '@affine/i18n';
-import { PaymentIcon, PropertyIcon, SettingsIcon } from '@blocksuite/icons/rc';
+import {
+  CollaborationIcon,
+  PaymentIcon,
+  PropertyIcon,
+  SaveIcon,
+  SettingsIcon,
+} from '@blocksuite/icons/rc';
 import { useService } from '@toeverything/infra';
 import { useMemo } from 'react';
 
 import type { SettingSidebarItem, SettingState } from '../types';
 import { WorkspaceSettingBilling } from './billing';
-import { WorkspaceSettingDetail } from './new-workspace-setting-detail';
+import { MembersPanel } from './members';
+import { WorkspaceSettingDetail } from './preference';
 import { WorkspaceSettingProperties } from './properties';
+import { WorkspaceSettingStorage } from './storage';
 
 export const WorkspaceSetting = ({
   activeTab,
@@ -22,16 +30,20 @@ export const WorkspaceSetting = ({
 }) => {
   switch (activeTab) {
     case 'workspace:preference':
+      return <WorkspaceSettingDetail onCloseSetting={onCloseSetting} />;
+    case 'workspace:properties':
+      return <WorkspaceSettingProperties />;
+    case 'workspace:members':
       return (
-        <WorkspaceSettingDetail
+        <MembersPanel
           onCloseSetting={onCloseSetting}
           onChangeSettingState={onChangeSettingState}
         />
       );
-    case 'workspace:properties':
-      return <WorkspaceSettingProperties />;
     case 'workspace:billing':
       return <WorkspaceSettingBilling />;
+    case 'workspace:storage':
+      return <WorkspaceSettingStorage />;
     default:
       return null;
   }
@@ -58,17 +70,27 @@ export const useWorkspaceSettingList = (): SettingSidebarItem[] => {
         icon: <PropertyIcon />,
         testId: 'workspace-setting:properties',
       },
-      ...(showBilling
-        ? [
-            {
-              key: 'workspace:billing' as SettingTab,
-              title: t['com.affine.settings.workspace.billing'](),
-              icon: <PaymentIcon />,
-              testId: 'workspace-setting:billing',
-            },
-          ]
-        : []),
-    ];
+      {
+        key: 'workspace:members',
+        title: t['Members'](),
+        icon: <CollaborationIcon />,
+        testId: 'workspace-setting:members',
+      },
+      {
+        key: 'workspace:storage',
+        title: t['Storage'](),
+        icon: <SaveIcon />,
+        testId: 'workspace-setting:storage',
+      },
+      showBilling && {
+        key: 'workspace:billing' as SettingTab,
+        title: t['com.affine.settings.workspace.billing'](),
+        icon: <PaymentIcon />,
+        testId: 'workspace-setting:billing',
+      },
+
+      // todo(@pengx17): add selfhost's team license
+    ].filter((item): item is SettingSidebarItem => !!item);
   }, [showBilling, t]);
 
   return items;
diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/members/cloud-members-panel.tsx b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/cloud-members-panel.tsx
similarity index 99%
rename from packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/members/cloud-members-panel.tsx
rename to packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/cloud-members-panel.tsx
index 63df9df56..37dba6f28 100644
--- a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/members/cloud-members-panel.tsx
+++ b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/cloud-members-panel.tsx
@@ -24,7 +24,7 @@ import { ExportIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useService } from '@toeverything/infra';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
-import type { SettingState } from '../../../types';
+import type { SettingState } from '../../types';
 import { MemberList } from './member-list';
 import * as styles from './styles.css';
 
diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/members/confirm-assign-modal.tsx b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/confirm-assign-modal.tsx
similarity index 100%
rename from packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/members/confirm-assign-modal.tsx
rename to packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/confirm-assign-modal.tsx
diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/members/index.tsx b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/index.tsx
similarity index 61%
rename from packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/members/index.tsx
rename to packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/index.tsx
index f80f51366..fcac31542 100644
--- a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/members/index.tsx
+++ b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/index.tsx
@@ -7,19 +7,22 @@ import { useI18n } from '@affine/i18n';
 import { useService } from '@toeverything/infra';
 import type { ReactElement } from 'react';
 
-import type { SettingState } from '../../../types';
+import type { SettingState } from '../../types';
+import { EnableCloudPanel } from '../preference/enable-cloud';
 import { CloudWorkspaceMembersPanel } from './cloud-members-panel';
 import * as styles from './styles.css';
 
 export const MembersPanel = ({
   onChangeSettingState,
+  onCloseSetting,
 }: {
   onChangeSettingState: (settingState: SettingState) => void;
+  onCloseSetting: () => void;
 }): ReactElement | null => {
   const workspace = useService(WorkspaceService).workspace;
   const isTeam = useWorkspaceInfo(workspace.meta)?.isTeam;
   if (workspace.flavour === 'local') {
-    return <MembersPanelLocal />;
+    return <MembersPanelLocal onCloseSetting={onCloseSetting} />;
   }
   return (
     <AffineErrorBoundary>
@@ -31,15 +34,22 @@ export const MembersPanel = ({
   );
 };
 
-const MembersPanelLocal = () => {
+const MembersPanelLocal = ({
+  onCloseSetting,
+}: {
+  onCloseSetting: () => void;
+}) => {
   const t = useI18n();
   return (
-    <Tooltip content={t['com.affine.settings.member-tooltip']()}>
-      <div className={styles.fakeWrapper}>
-        <SettingRow name={`${t['Members']()} (0)`} desc={t['Members hint']()}>
-          <Button>{t['Invite Members']()}</Button>
-        </SettingRow>
-      </div>
-    </Tooltip>
+    <div className={styles.localMembersPanel}>
+      <Tooltip content={t['com.affine.settings.member-tooltip']()}>
+        <div className={styles.fakeWrapper}>
+          <SettingRow name={`${t['Members']()} (0)`} desc={t['Members hint']()}>
+            <Button>{t['Invite Members']()}</Button>
+          </SettingRow>
+        </div>
+      </Tooltip>
+      <EnableCloudPanel onCloseSetting={onCloseSetting} />
+    </div>
   );
 };
diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/members/member-list.tsx b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/member-list.tsx
similarity index 100%
rename from packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/members/member-list.tsx
rename to packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/member-list.tsx
diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/members/member-option.tsx b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/member-option.tsx
similarity index 100%
rename from packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/members/member-option.tsx
rename to packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/member-option.tsx
diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/members/styles.css.ts b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/styles.css.ts
similarity index 96%
rename from packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/members/styles.css.ts
rename to packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/styles.css.ts
index 4d6f2419c..1c414363e 100644
--- a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/members/styles.css.ts
+++ b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/styles.css.ts
@@ -29,6 +29,12 @@ export const membersPanel = style({
   justifyContent: 'space-between',
 });
 
+export const localMembersPanel = style({
+  gap: '24px',
+  display: 'flex',
+  flexDirection: 'column',
+});
+
 export const goUpgradeWrapper = style({
   display: 'inline-flex',
   alignItems: 'center',
diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/index.tsx b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/index.tsx
deleted file mode 100644
index e1459dbfe..000000000
--- a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/index.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import {
-  SettingHeader,
-  SettingRow,
-  SettingWrapper,
-} from '@affine/component/setting-components';
-import { useWorkspaceInfo } from '@affine/core/components/hooks/use-workspace-info';
-import { WorkspaceServerService } from '@affine/core/modules/cloud';
-import { WorkspaceService } from '@affine/core/modules/workspace';
-import { UNTITLED_WORKSPACE_NAME } from '@affine/env/constant';
-import { useI18n } from '@affine/i18n';
-import { FrameworkScope, useService } from '@toeverything/infra';
-
-import { DeleteLeaveWorkspace } from './delete-leave-workspace';
-import { EnableCloudPanel } from './enable-cloud';
-import { DesktopExportPanel } from './export';
-import { LabelsPanel } from './labels';
-import { MembersPanel } from './members';
-import { ProfilePanel } from './profile';
-import { SharingPanel } from './sharing';
-import { TemplateDocSetting } from './template';
-import type { WorkspaceSettingDetailProps } from './types';
-import { WorkspaceQuotaPanel } from './workspace-quota';
-
-export const WorkspaceSettingDetail = ({
-  onCloseSetting,
-  onChangeSettingState,
-}: WorkspaceSettingDetailProps) => {
-  const t = useI18n();
-
-  const workspace = useService(WorkspaceService).workspace;
-  const server = workspace?.scope.get(WorkspaceServerService).server;
-
-  const workspaceInfo = useWorkspaceInfo(workspace);
-
-  if (!workspace) {
-    return null;
-  }
-
-  return (
-    <FrameworkScope scope={server?.scope}>
-      <FrameworkScope scope={workspace.scope}>
-        <SettingHeader
-          title={t[`Workspace Settings with name`]({
-            name: workspaceInfo?.name ?? UNTITLED_WORKSPACE_NAME,
-          })}
-          subtitle={t['com.affine.settings.workspace.description']()}
-        />
-        <SettingWrapper title={t['Info']()}>
-          <SettingRow
-            name={t['Workspace Profile']()}
-            desc={t['com.affine.settings.workspace.not-owner']()}
-            spreadCol={false}
-          >
-            <ProfilePanel />
-            <LabelsPanel />
-          </SettingRow>
-        </SettingWrapper>
-        <TemplateDocSetting />
-        <SettingWrapper title={t['com.affine.brand.affineCloud']()}>
-          <EnableCloudPanel onCloseSetting={onCloseSetting} />
-          {workspace.flavour !== 'local' && <WorkspaceQuotaPanel />}
-          {workspace.flavour !== 'local' && (
-            <MembersPanel onChangeSettingState={onChangeSettingState} />
-          )}
-        </SettingWrapper>
-        <SharingPanel />
-        {BUILD_CONFIG.isElectron && (
-          <SettingWrapper title={t['Storage and Export']()}>
-            <DesktopExportPanel workspace={workspace} />
-          </SettingWrapper>
-        )}
-        <SettingWrapper>
-          <DeleteLeaveWorkspace onCloseSetting={onCloseSetting} />
-        </SettingWrapper>
-      </FrameworkScope>
-    </FrameworkScope>
-  );
-};
diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/types.ts b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/types.ts
deleted file mode 100644
index d5856e744..000000000
--- a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { SettingState } from '../../types';
-
-export interface WorkspaceSettingDetailProps {
-  onCloseSetting: () => void;
-  onChangeSettingState: (settingState: SettingState) => void;
-}
diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/ai.tsx b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/ai.tsx
similarity index 100%
rename from packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/ai.tsx
rename to packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/ai.tsx
diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/delete-leave-workspace/delete/index.tsx b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/delete-leave-workspace/delete/index.tsx
similarity index 100%
rename from packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/delete-leave-workspace/delete/index.tsx
rename to packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/delete-leave-workspace/delete/index.tsx
diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/delete-leave-workspace/delete/style.css.ts b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/delete-leave-workspace/delete/style.css.ts
similarity index 100%
rename from packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/delete-leave-workspace/delete/style.css.ts
rename to packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/delete-leave-workspace/delete/style.css.ts
diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/delete-leave-workspace/index.tsx b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/delete-leave-workspace/index.tsx
similarity index 100%
rename from packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/delete-leave-workspace/index.tsx
rename to packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/delete-leave-workspace/index.tsx
diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/enable-cloud.tsx b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/enable-cloud.tsx
similarity index 100%
rename from packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/enable-cloud.tsx
rename to packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/enable-cloud.tsx
diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/index.tsx b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/index.tsx
new file mode 100644
index 000000000..c492e4e0a
--- /dev/null
+++ b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/index.tsx
@@ -0,0 +1,59 @@
+import {
+  SettingHeader,
+  SettingRow,
+  SettingWrapper,
+} from '@affine/component/setting-components';
+import { useWorkspaceInfo } from '@affine/core/components/hooks/use-workspace-info';
+import { WorkspaceServerService } from '@affine/core/modules/cloud';
+import { WorkspaceService } from '@affine/core/modules/workspace';
+import { UNTITLED_WORKSPACE_NAME } from '@affine/env/constant';
+import { useI18n } from '@affine/i18n';
+import { FrameworkScope, useService } from '@toeverything/infra';
+
+import { DeleteLeaveWorkspace } from './delete-leave-workspace';
+import { EnableCloudPanel } from './enable-cloud';
+import { LabelsPanel } from './labels';
+import { ProfilePanel } from './profile';
+import { SharingPanel } from './sharing';
+import { TemplateDocSetting } from './template';
+import type { WorkspaceSettingDetailProps } from './types';
+
+export const WorkspaceSettingDetail = ({
+  onCloseSetting,
+}: WorkspaceSettingDetailProps) => {
+  const t = useI18n();
+
+  const workspace = useService(WorkspaceService).workspace;
+  const server = workspace?.scope.get(WorkspaceServerService).server;
+
+  const workspaceInfo = useWorkspaceInfo(workspace);
+
+  return (
+    <FrameworkScope scope={server?.scope}>
+      <SettingHeader
+        title={t[`Workspace Settings with name`]({
+          name: workspaceInfo?.name ?? UNTITLED_WORKSPACE_NAME,
+        })}
+        subtitle={t['com.affine.settings.workspace.description']()}
+      />
+      <SettingWrapper title={t['Info']()}>
+        <SettingRow
+          name={t['Workspace Profile']()}
+          desc={t['com.affine.settings.workspace.not-owner']()}
+          spreadCol={false}
+        >
+          <ProfilePanel />
+          <LabelsPanel />
+          {workspace.flavour === 'local' && (
+            <EnableCloudPanel onCloseSetting={onCloseSetting} />
+          )}
+        </SettingRow>
+      </SettingWrapper>
+      <TemplateDocSetting />
+      <SharingPanel />
+      <SettingWrapper>
+        <DeleteLeaveWorkspace onCloseSetting={onCloseSetting} />
+      </SettingWrapper>
+    </FrameworkScope>
+  );
+};
diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/labels.tsx b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/labels.tsx
similarity index 100%
rename from packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/labels.tsx
rename to packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/labels.tsx
diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/profile.tsx b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/profile.tsx
similarity index 100%
rename from packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/profile.tsx
rename to packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/profile.tsx
diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/sharing.tsx b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/sharing.tsx
similarity index 100%
rename from packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/sharing.tsx
rename to packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/sharing.tsx
diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/style.css.ts b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/style.css.ts
similarity index 100%
rename from packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/style.css.ts
rename to packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/style.css.ts
diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/template.css.ts b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/template.css.ts
similarity index 100%
rename from packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/template.css.ts
rename to packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/template.css.ts
diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/template.tsx b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/template.tsx
similarity index 100%
rename from packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/template.tsx
rename to packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/template.tsx
diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/types.ts b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/types.ts
new file mode 100644
index 000000000..15824fb29
--- /dev/null
+++ b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/types.ts
@@ -0,0 +1,3 @@
+export interface WorkspaceSettingDetailProps {
+  onCloseSetting: () => void;
+}
diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/export.tsx b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/storage/export.tsx
similarity index 100%
rename from packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/export.tsx
rename to packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/storage/export.tsx
diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/storage/index.tsx b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/storage/index.tsx
new file mode 100644
index 000000000..3e871a352
--- /dev/null
+++ b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/storage/index.tsx
@@ -0,0 +1,33 @@
+import {
+  SettingHeader,
+  SettingWrapper,
+} from '@affine/component/setting-components';
+import { WorkspaceService } from '@affine/core/modules/workspace';
+import { useI18n } from '@affine/i18n';
+import { useService } from '@toeverything/infra';
+
+import { DesktopExportPanel } from './export';
+import { WorkspaceQuotaPanel } from './workspace-quota';
+
+export const WorkspaceSettingStorage = () => {
+  const t = useI18n();
+  const workspace = useService(WorkspaceService).workspace;
+  return (
+    <>
+      <SettingHeader
+        title={t['Storage']()}
+        subtitle={t['com.affine.settings.workspace.storage.subtitle']()}
+      />
+      {workspace.flavour !== 'local' && (
+        <SettingWrapper>
+          <WorkspaceQuotaPanel />
+        </SettingWrapper>
+      )}
+      {BUILD_CONFIG.isElectron && (
+        <SettingWrapper>
+          <DesktopExportPanel workspace={workspace} />
+        </SettingWrapper>
+      )}
+    </>
+  );
+};
diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/storage/style.css.ts b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/storage/style.css.ts
new file mode 100644
index 000000000..c448e640c
--- /dev/null
+++ b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/storage/style.css.ts
@@ -0,0 +1,30 @@
+import { cssVar } from '@toeverything/theme';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { globalStyle, style } from '@vanilla-extract/css';
+
+export const storageProgressContainer = style({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});
+export const storageProgressWrapper = style({
+  flexGrow: 1,
+});
+globalStyle(`${storageProgressWrapper} .storage-progress-desc`, {
+  fontSize: cssVar('fontXs'),
+  color: cssVarV2('text/secondary'),
+  height: '20px',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  marginBottom: 2,
+});
+globalStyle(`${storageProgressWrapper} .storage-progress-bar-wrapper`, {
+  height: '8px',
+  borderRadius: '4px',
+  backgroundColor: cssVarV2('layer/background/hoverOverlay'),
+  overflow: 'hidden',
+});
+export const storageProgressBar = style({
+  height: '100%',
+});
diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/workspace-quota.tsx b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/storage/workspace-quota.tsx
similarity index 100%
rename from packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/workspace-quota.tsx
rename to packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/storage/workspace-quota.tsx
diff --git a/packages/frontend/core/src/modules/dialogs/constant.ts b/packages/frontend/core/src/modules/dialogs/constant.ts
index 56cf5e6f2..e4238c340 100644
--- a/packages/frontend/core/src/modules/dialogs/constant.ts
+++ b/packages/frontend/core/src/modules/dialogs/constant.ts
@@ -11,7 +11,7 @@ export type SettingTab =
   | 'experimental-features'
   | 'editor'
   | 'account'
-  | `workspace:${'preference' | 'properties' | 'billing' | 'license'}`;
+  | `workspace:${'preference' | 'properties' | 'members' | 'storage' | 'billing' | 'license'}`;
 
 export type GLOBAL_DIALOG_SCHEMA = {
   'create-workspace': (props: { serverId?: string; forcedCloud?: boolean }) => {
diff --git a/packages/frontend/i18n/src/resources/en.json b/packages/frontend/i18n/src/resources/en.json
index ee71ad105..0ac6aed2c 100644
--- a/packages/frontend/i18n/src/resources/en.json
+++ b/packages/frontend/i18n/src/resources/en.json
@@ -1337,7 +1337,7 @@
   "com.affine.settings.workspace.experimental-features.enable-page-block-header.description": "Once enabled, the header of page block will be displayed.",
   "com.affine.settings.workspace.not-owner": "Only an owner can edit the workspace avatar and name. Changes will be shown for everyone.",
   "com.affine.settings.workspace.preferences": "Preference",
-  "com.affine.settings.workspace.billing": "Billing",
+  "com.affine.settings.workspace.billing": "Team's Billing",
   "com.affine.settings.workspace.billing.team-workspace": "Team Workspace",
   "com.affine.settings.workspace.billing.team-workspace.description.free-trail": "Your workspace is in a free trail period.",
   "com.affine.settings.workspace.billing.team-workspace.description.billed.annually": "Your workspace is billed annually.",
@@ -1368,6 +1368,7 @@
   "com.affine.settings.workspace.properties.required-properties": "Required properties",
   "com.affine.settings.workspace.properties.set-as-required": "Set as required property",
   "com.affine.settings.workspace.properties.unused": "Unused",
+  "com.affine.settings.workspace.storage.subtitle": "You can view current workspace's storage and files here.",
   "com.affine.settings.workspace.publish-tooltip": "Enable AFFiNE Cloud to publish this workspace",
   "com.affine.settings.workspace.sharing.title": "Sharing",
   "com.affine.settings.workspace.sharing.url-preview.description": "Allow URL unfurling by Slack & other social apps, even if a doc is only accessible by workspace members.",
diff --git a/tests/affine-cloud/e2e/workspace.spec.ts b/tests/affine-cloud/e2e/workspace.spec.ts
index 86883e920..7d77e4224 100644
--- a/tests/affine-cloud/e2e/workspace.spec.ts
+++ b/tests/affine-cloud/e2e/workspace.spec.ts
@@ -12,10 +12,7 @@ import {
   waitForEditorLoad,
   waitForEmptyEditor,
 } from '@affine-test/kit/utils/page-logic';
-import {
-  openSettingModal,
-  openWorkspaceSettingPanel,
-} from '@affine-test/kit/utils/setting';
+import { openSettingModal } from '@affine-test/kit/utils/setting';
 import { createLocalWorkspace } from '@affine-test/kit/utils/workspace';
 import { expect } from '@playwright/test';
 
@@ -58,7 +55,10 @@ test('should have pagination in member list', async ({ page }) => {
   );
 
   await openSettingModal(page);
-  await openWorkspaceSettingPanel(page);
+  await page
+    .getByTestId('settings-sidebar')
+    .getByTestId('workspace-setting:members')
+    .click();
 
   await page.waitForTimeout(1000);
 
diff --git a/tests/affine-desktop/e2e/workspace.spec.ts b/tests/affine-desktop/e2e/workspace.spec.ts
index f4156f369..56b0fb334 100644
--- a/tests/affine-desktop/e2e/workspace.spec.ts
+++ b/tests/affine-desktop/e2e/workspace.spec.ts
@@ -61,9 +61,9 @@ test('export then add', async ({ page, appInfo, workspace }) => {
     });
   }, tmpPath);
 
+  await page.getByTestId('workspace-setting:storage').click();
   await page.getByTestId('export-affine-backup').click();
   await page.waitForSelector('text="Export success"');
-  await page.waitForTimeout(1000);
   expect(await fs.exists(tmpPath)).toBe(true);
 
   await page.getByTestId('modal-close-button').click();
@@ -84,18 +84,19 @@ test('export then add', async ({ page, appInfo, workspace }) => {
 
   // should show "Added Successfully" dialog
   // await page.waitForSelector('text="Added Successfully"');
-  // await page.getByTestId('create-workspace-continue-button').click();
 
-  // sleep for a while to wait for the workspace to be added :D
-  await page.waitForTimeout(2000);
-  const newWorkspace = await workspace.current();
-  expect(newWorkspace.meta.id).not.toBe(originalId);
+  await expect
+    .poll(async () => {
+      const newWorkspace = await workspace.current();
+      return newWorkspace.meta.id !== originalId;
+    })
+    .toBe(true);
+
   // check its name is correct
   await expect(page.getByTestId('workspace-name')).toHaveText(newWorkspaceName);
 
   // find button which has the title "test1"
-  const test1PageButton = await page.waitForSelector(`text="test1"`);
-  await test1PageButton.click();
+  await page.getByText('test1').click();
 
   const title = page.locator('[data-block-is-title] >> text="test1"');
   await expect(title).toBeVisible();