diff --git a/packages/app/src/components/login-modal/index.tsx b/packages/app/src/components/login-modal/index.tsx
index 306935056b..d572190ee9 100644
--- a/packages/app/src/components/login-modal/index.tsx
+++ b/packages/app/src/components/login-modal/index.tsx
@@ -27,6 +27,7 @@ export const LoginModal = ({ open, onClose }: LoginModalProps) => {
           <span
             onClick={async () => {
               await login();
+              onClose();
             }}
           >
             <GoogleLoginButton />
diff --git a/packages/app/src/components/logout-modal/icon.tsx b/packages/app/src/components/logout-modal/icon.tsx
new file mode 100644
index 0000000000..4fb10d74db
--- /dev/null
+++ b/packages/app/src/components/logout-modal/icon.tsx
@@ -0,0 +1,48 @@
+export const Check = () => {
+  return (
+    <span>
+      <svg
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g clip-path="url(#clip0_9266_16831)">
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M5.83301 3.33331C4.4523 3.33331 3.33301 4.4526 3.33301 5.83331V14.1666C3.33301 15.5474 4.4523 16.6666 5.83301 16.6666H14.1663C15.5471 16.6666 16.6663 15.5474 16.6663 14.1666V5.83331C16.6663 4.4526 15.5471 3.33331 14.1663 3.33331H5.83301ZM14.6385 7.97059C14.8984 7.70982 14.8977 7.28771 14.6369 7.02778C14.3762 6.76785 13.9541 6.76852 13.6941 7.02929L8.62861 12.1111L6.30522 9.77929C6.04534 9.51847 5.62323 9.51771 5.36241 9.77759C5.10159 10.0375 5.10083 10.4596 5.36071 10.7204L8.03822 13.4076C8.36386 13.7344 8.89304 13.7344 9.21874 13.4077L14.6385 7.97059Z"
+            fill="#888A9E"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_9266_16831">
+            <rect width="20" height="20" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+    </span>
+  );
+};
+
+export const UnCheck = () => {
+  return (
+    <span>
+      <svg
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M14.1673 4.66665H5.83398C5.18965 4.66665 4.66732 5.18898 4.66732 5.83331V14.1666C4.66732 14.811 5.18965 15.3333 5.83398 15.3333H14.1673C14.8116 15.3333 15.334 14.811 15.334 14.1666V5.83331C15.334 5.18898 14.8116 4.66665 14.1673 4.66665ZM5.83398 3.33331C4.45327 3.33331 3.33398 4.4526 3.33398 5.83331V14.1666C3.33398 15.5474 4.45327 16.6666 5.83398 16.6666H14.1673C15.548 16.6666 16.6673 15.5474 16.6673 14.1666V5.83331C16.6673 4.4526 15.548 3.33331 14.1673 3.33331H5.83398Z"
+          fill="#888A9E"
+        />
+      </svg>
+    </span>
+  );
+};
diff --git a/packages/app/src/components/logout-modal/index.tsx b/packages/app/src/components/logout-modal/index.tsx
new file mode 100644
index 0000000000..91a5641d5b
--- /dev/null
+++ b/packages/app/src/components/logout-modal/index.tsx
@@ -0,0 +1,118 @@
+import { styled } from '@/styles';
+import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
+import { Button } from '@/ui/button';
+import { Check, UnCheck } from './icon';
+import { useState } from 'react';
+interface LoginModalProps {
+  open: boolean;
+  onClose: (wait: boolean) => void;
+}
+
+export const LogoutModal = ({ open, onClose }: LoginModalProps) => {
+  const [localCache, setLocalCache] = useState(false);
+  return (
+    <Modal open={open} onClose={onClose} data-testid="logout-modal">
+      <ModalWrapper width={560} height={292}>
+        <Header>
+          <ModalCloseButton
+            top={6}
+            right={6}
+            onClick={() => {
+              onClose(true);
+            }}
+          />
+        </Header>
+        <Content>
+          <ContentTitle>{'Sign out?'}</ContentTitle>
+          <SignDes>Set up an AFFINE account to sync data</SignDes>
+          <StyleTips>
+            {localCache ? (
+              <StyleCheck
+                onClick={() => {
+                  setLocalCache(false);
+                }}
+              >
+                <Check></Check>
+              </StyleCheck>
+            ) : (
+              <StyleCheck
+                onClick={() => {
+                  setLocalCache(true);
+                }}
+              >
+                <UnCheck></UnCheck>
+              </StyleCheck>
+            )}
+            Retain local cached data
+          </StyleTips>
+          <div>
+            <Button
+              style={{ marginRight: '16px' }}
+              shape="round"
+              onClick={() => {
+                onClose(true);
+              }}
+            >
+              Wait for Sync
+            </Button>
+            <Button
+              type="danger"
+              shape="round"
+              onClick={() => {
+                onClose(false);
+              }}
+            >
+              Force Sign Out
+            </Button>
+          </div>
+        </Content>
+      </ModalWrapper>
+    </Modal>
+  );
+};
+
+const Header = styled('div')({
+  position: 'relative',
+  height: '44px',
+});
+
+const Content = styled('div')({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: '16px',
+});
+
+const ContentTitle = styled('h1')({
+  fontSize: '20px',
+  lineHeight: '28px',
+  fontWeight: 600,
+  textAlign: 'center',
+  paddingBottom: '16px',
+});
+
+const SignDes = styled('div')(({ theme }) => {
+  return {
+    fontWeight: 400,
+    color: theme.colors.textColor,
+    fontSize: '16px',
+  };
+});
+
+const StyleCheck = styled('span')(() => {
+  return {
+    display: 'inline-block',
+    cursor: 'pointer',
+
+    svg: {
+      verticalAlign: 'sub',
+      marginRight: '8px',
+    },
+  };
+});
+
+const StyleTips = styled('span')(() => {
+  return {
+    userSelect: 'none',
+  };
+});
diff --git a/packages/app/src/components/workspace-modal/index.tsx b/packages/app/src/components/workspace-modal/index.tsx
index 104cf5719b..c0dd2a8bd3 100644
--- a/packages/app/src/components/workspace-modal/index.tsx
+++ b/packages/app/src/components/workspace-modal/index.tsx
@@ -11,19 +11,18 @@ import {
   PublishIcon,
   CloseIcon,
 } from '@blocksuite/icons';
-import { toast } from '@/ui/toast';
 import {
   WorkspaceAvatar,
   WorkspaceUnitAvatar,
 } from '@/components/workspace-avatar';
 import { useAppState } from '@/providers/app-state-provider';
 import { useRouter } from 'next/router';
-import { useConfirm } from '@/providers/ConfirmProvider';
 import { useTranslation } from '@affine/i18n';
 import { LanguageMenu } from './languageMenu';
 
 import { CloudIcon, LineIcon, LocalIcon, OfflineIcon } from './icons';
 import { LoginModal } from '../login-modal';
+import { LogoutModal } from '../logout-modal';
 interface WorkspaceModalProps {
   open: boolean;
   onClose: () => void;
@@ -31,12 +30,12 @@ interface WorkspaceModalProps {
 
 export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
   const [createWorkspaceOpen, setCreateWorkspaceOpen] = useState(false);
-  const { confirm } = useConfirm();
   const { workspaceList, currentWorkspace, user, logout, isOwner } =
     useAppState();
   const router = useRouter();
   const { t } = useTranslation();
   const [loginOpen, setLoginOpen] = useState(false);
+  const [logoutOpen, setLogoutOpen] = useState(false);
   return (
     <div>
       <Modal open={open} onClose={onClose}>
@@ -184,20 +183,21 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
                 <div style={{ paddingTop: '25px' }}>
                   <IconButton
                     onClick={() => {
-                      confirm({
-                        title: 'Sign out?',
-                        content: `All data has been stored in the cloud. `,
-                        confirmText: 'Sign out',
-                        cancelText: 'Cancel',
-                      }).then(async confirm => {
-                        if (confirm) {
-                          if (user) {
-                            await logout();
-                            router.replace(`/workspace`);
-                            toast('Enabled success');
-                          }
-                        }
-                      });
+                      setLogoutOpen(true);
+                      // confirm({
+                      //   title: 'Sign out?',
+                      //   content: `All data has been stored in the cloud. `,
+                      //   confirmText: 'Sign out',
+                      //   cancelText: 'Cancel',
+                      // }).then(async confirm => {
+                      //   // if (confirm) {
+                      //   //   if (user) {
+                      //   //     await logout();
+                      //   //     router.replace(`/workspace`);
+                      //   //     toast('Enabled success');
+                      //   //   }
+                      //   // }
+                      // });
                     }}
                   >
                     <LogOutIcon></LogOutIcon>
@@ -212,6 +212,16 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
               setCreateWorkspaceOpen(false);
             }}
           ></CreateWorkspaceModal>
+          <LogoutModal
+            open={logoutOpen}
+            onClose={async wait => {
+              if (!wait) {
+                await logout();
+                router.replace(`/workspace`);
+              }
+              setLogoutOpen(false);
+            }}
+          ></LogoutModal>
         </ModalWrapper>
       </Modal>
     </div>