diff --git a/packages/app/src/components/enable-workspace/EnableWorkspaceModal.tsx b/packages/app/src/components/enable-workspace/EnableWorkspaceModal.tsx
new file mode 100644
index 0000000000..a4552085d0
--- /dev/null
+++ b/packages/app/src/components/enable-workspace/EnableWorkspaceModal.tsx
@@ -0,0 +1,108 @@
+import { styled } from '@/styles';
+import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
+import { Button } from '@/ui/button';
+import { useTranslation } from '@affine/i18n';
+import { useAppState } from '@/providers/app-state-provider';
+import { useState } from 'react';
+import router from 'next/router';
+import { toast } from '@/ui/toast';
+interface EnableWorkspaceModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export const EnableWorkspaceModal = ({
+  open,
+  onClose,
+}: EnableWorkspaceModalProps) => {
+  const { t } = useTranslation();
+  const { user, dataCenter, login, currentWorkspace } = useAppState();
+  const [loading, setLoading] = useState(false);
+  return (
+    <Modal open={open} onClose={onClose} data-testid="logout-modal">
+      <ModalWrapper width={560} height={292}>
+        <Header>
+          <ModalCloseButton
+            onClick={() => {
+              onClose();
+            }}
+          />
+        </Header>
+        <Content>
+          <ContentTitle>{t('Enable AFFiNE Cloud')}?</ContentTitle>
+          <StyleTips>{t('Enable AFFiNE Cloud Description')}</StyleTips>
+          {/* <StyleTips>{t('Retain local cached data')}</StyleTips> */}
+          <div>
+            <StyleButton
+              shape="round"
+              type="primary"
+              loading={loading}
+              onClick={async () => {
+                setLoading(true);
+                if (!user) {
+                  await login();
+                }
+                if (currentWorkspace) {
+                  const workspace = await dataCenter.enableWorkspaceCloud(
+                    currentWorkspace
+                  );
+                  workspace &&
+                    router.push(`/workspace/${workspace.id}/setting`);
+                  toast(t('Enabled success'));
+                }
+              }}
+            >
+              {user ? t('Enable') : t('Sign in and Enable')}
+            </StyleButton>
+            <StyleButton
+              shape="round"
+              onClick={() => {
+                onClose();
+              }}
+            >
+              {t('Skip')}
+            </StyleButton>
+          </div>
+        </Content>
+      </ModalWrapper>
+    </Modal>
+  );
+};
+
+const Header = styled('div')({
+  height: '44px',
+  display: 'flex',
+  flexDirection: 'row-reverse',
+  paddingRight: '10px',
+  paddingTop: '10px',
+});
+
+const Content = styled('div')({
+  textAlign: 'center',
+});
+
+const ContentTitle = styled('h1')({
+  fontSize: '20px',
+  lineHeight: '28px',
+  fontWeight: 600,
+  textAlign: 'center',
+  paddingBottom: '16px',
+});
+
+const StyleTips = styled('div')(() => {
+  return {
+    userSelect: 'none',
+    width: '400px',
+    marginBottom: '32px',
+    marginTop: '16px',
+  };
+});
+
+const StyleButton = styled(Button)(() => {
+  return {
+    width: '284px',
+    display: 'block',
+    margin: 'auto',
+    marginTop: '16px',
+  };
+});
diff --git a/packages/app/src/components/enable-workspace/index.tsx b/packages/app/src/components/enable-workspace/index.tsx
index 3cc28b25d4..ec63f21d9a 100644
--- a/packages/app/src/components/enable-workspace/index.tsx
+++ b/packages/app/src/components/enable-workspace/index.tsx
@@ -1,24 +1,28 @@
-import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
 import { Button } from '@/ui/button';
 import { useTranslation } from '@affine/i18n';
 import { useState } from 'react';
+import { EnableWorkspaceModal } from './EnableWorkspaceModal';
 
 export const EnableWorkspaceButton = () => {
   const { t } = useTranslation();
-  const { enableWorkspace } = useWorkspaceHelper();
-  const [loading, setLoading] = useState(false);
+  const [enableModalOpen, setEnableModalOpen] = useState(false);
   return (
-    <Button
-      type="primary"
-      shape="circle"
-      loading={loading}
-      onClick={async () => {
-        setLoading(true);
-        await enableWorkspace();
-        setLoading(false);
-      }}
-    >
-      {t('Enable AFFiNE Cloud')}
-    </Button>
+    <>
+      <Button
+        type="primary"
+        shape="circle"
+        onClick={async () => {
+          setEnableModalOpen(true);
+        }}
+      >
+        {t('Enable AFFiNE Cloud')}
+      </Button>
+      <EnableWorkspaceModal
+        open={enableModalOpen}
+        onClose={() => {
+          setEnableModalOpen(false);
+        }}
+      ></EnableWorkspaceModal>
+    </>
   );
 };
diff --git a/packages/app/src/hooks/use-workspace-helper.ts b/packages/app/src/hooks/use-workspace-helper.ts
index ec990feb30..46ce5cafae 100644
--- a/packages/app/src/hooks/use-workspace-helper.ts
+++ b/packages/app/src/hooks/use-workspace-helper.ts
@@ -1,14 +1,8 @@
 import { useAppState } from '@/providers/app-state-provider';
-import { useConfirm } from '@/providers/ConfirmProvider';
-import { toast } from '@/ui/toast';
 import { WorkspaceUnit } from '@affine/datacenter';
-import router from 'next/router';
-import { useTranslation } from '@affine/i18n';
 
 export const useWorkspaceHelper = () => {
-  const { confirm } = useConfirm();
-  const { t } = useTranslation();
-  const { dataCenter, currentWorkspace, user, login } = useAppState();
+  const { dataCenter, currentWorkspace } = useAppState();
   const createWorkspace = async (name: string) => {
     const workspaceInfo = await dataCenter.createWorkspace({
       name: name,
@@ -38,28 +32,6 @@ export const useWorkspaceHelper = () => {
     }
   };
 
-  const enableWorkspace = async () => {
-    confirm({
-      title: `${t('Enable AFFiNE Cloud')}?`,
-      content: t('Enable AFFiNE Cloud Description'),
-      confirmText: user ? t('Enable') : t('Sign in and Enable'),
-      cancelText: t('Skip'),
-      confirmType: 'primary',
-      buttonDirection: 'column',
-    }).then(async confirm => {
-      if (confirm && currentWorkspace) {
-        if (!user) {
-          await login();
-        }
-        const workspace = await dataCenter.enableWorkspaceCloud(
-          currentWorkspace
-        );
-        workspace && router.push(`/workspace/${workspace.id}/setting`);
-        toast(t('Enabled success'));
-      }
-    });
-  };
-
   const deleteWorkSpace = async () => {
     currentWorkspace && (await dataCenter.deleteWorkspace(currentWorkspace.id));
   };
@@ -79,7 +51,6 @@ export const useWorkspaceHelper = () => {
     createWorkspace,
     publishWorkspace,
     updateWorkspace,
-    enableWorkspace,
     deleteWorkSpace,
     leaveWorkSpace,
     acceptInvite,