diff --git a/packages/app/src/components/enable-workspace/index.tsx b/packages/app/src/components/enable-workspace/index.tsx
new file mode 100644
index 000000000..3cc28b25d
--- /dev/null
+++ b/packages/app/src/components/enable-workspace/index.tsx
@@ -0,0 +1,24 @@
+import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
+import { Button } from '@/ui/button';
+import { useTranslation } from '@affine/i18n';
+import { useState } from 'react';
+
+export const EnableWorkspaceButton = () => {
+  const { t } = useTranslation();
+  const { enableWorkspace } = useWorkspaceHelper();
+  const [loading, setLoading] = useState(false);
+  return (
+    <Button
+      type="primary"
+      shape="circle"
+      loading={loading}
+      onClick={async () => {
+        setLoading(true);
+        await enableWorkspace();
+        setLoading(false);
+      }}
+    >
+      {t('Enable AFFiNE Cloud')}
+    </Button>
+  );
+};
diff --git a/packages/app/src/components/workspace-setting/PublishPage.tsx b/packages/app/src/components/workspace-setting/PublishPage.tsx
index 4ff35d776..3d65ac867 100644
--- a/packages/app/src/components/workspace-setting/PublishPage.tsx
+++ b/packages/app/src/components/workspace-setting/PublishPage.tsx
@@ -16,9 +16,10 @@ import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
 import { useTranslation } from '@affine/i18n';
 import Loading from '@/components/loading';
 import { Wrapper } from '@/ui/layout';
+import { EnableWorkspaceButton } from '../enable-workspace';
 export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
   const shareUrl = window.location.host + '/public-workspace/' + workspace.id;
-  const { publishWorkspace, enableWorkspace } = useWorkspaceHelper();
+  const { publishWorkspace } = useWorkspaceHelper();
   const { t } = useTranslation();
   const [loaded, setLoaded] = useState(true);
   const togglePublic = async (flag: boolean) => {
@@ -30,9 +31,6 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
     toast('Copied url to clipboard');
   };
 
-  const enableAffineCloud = async () => {
-    await enableWorkspace();
-  };
   return (
     <>
       {workspace.provider === 'affine' ? (
@@ -100,17 +98,7 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
             </StyledPublishExplanation>
 
             <StyledPublishCopyContainer>
-              <Button
-                onClick={async () => {
-                  setLoaded(false);
-                  await enableAffineCloud();
-                  setLoaded(true);
-                }}
-                type="primary"
-                shape="circle"
-              >
-                {t('Enable AFFiNE Cloud')}
-              </Button>
+              <EnableWorkspaceButton></EnableWorkspaceButton>
             </StyledPublishCopyContainer>
           </>
         </StyledPublishContent>
diff --git a/packages/app/src/components/workspace-setting/SyncPage.tsx b/packages/app/src/components/workspace-setting/SyncPage.tsx
index f65a24ab7..c9d0523f6 100644
--- a/packages/app/src/components/workspace-setting/SyncPage.tsx
+++ b/packages/app/src/components/workspace-setting/SyncPage.tsx
@@ -9,11 +9,10 @@ import { DownloadIcon } from '@blocksuite/icons';
 import { Button } from '@/ui/button';
 import { Menu, MenuItem } from '@/ui/menu';
 import { WorkspaceUnit } from '@affine/datacenter';
-import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
 import { Trans, useTranslation } from '@affine/i18n';
 import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
+import { EnableWorkspaceButton } from '../enable-workspace';
 export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
-  const { enableWorkspace } = useWorkspaceHelper();
   const { t } = useTranslation();
   return (
     <div>
@@ -36,16 +35,7 @@ export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
               Cloud for this workspace to keep data in sync with the cloud.
             </StyledWorkspaceType>
             <StyledPublishCopyContainer>
-              <Button
-                onClick={async () => {
-                  await enableWorkspace();
-                }}
-                type="primary"
-                shape="circle"
-                style={{ fontWeight: '500' }}
-              >
-                {t('Enable AFFiNE Cloud')}
-              </Button>
+              <EnableWorkspaceButton></EnableWorkspaceButton>
             </StyledPublishCopyContainer>
           </>
         ) : (
diff --git a/packages/app/src/components/workspace-setting/member/MembersPage.tsx b/packages/app/src/components/workspace-setting/member/MembersPage.tsx
index b72d60723..b1b64ffa0 100644
--- a/packages/app/src/components/workspace-setting/member/MembersPage.tsx
+++ b/packages/app/src/components/workspace-setting/member/MembersPage.tsx
@@ -27,14 +27,13 @@ import useMembers from '@/hooks/use-members';
 import Loading from '@/components/loading';
 import { Wrapper } from '@/ui/layout';
 import { useTranslation } from '@affine/i18n';
-import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
+import { EnableWorkspaceButton } from '@/components/enable-workspace';
 
 export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
   const [isInviteModalShow, setIsInviteModalShow] = useState(false);
   const { members, removeMember, loaded } = useMembers();
 
   const { t } = useTranslation();
-  const { enableWorkspace } = useWorkspaceHelper();
   const { confirm } = useConfirm();
 
   if (workspace.provider === 'affine') {
@@ -163,15 +162,7 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
     <StyledMemberWarp>
       {t('Collaboration Description')}
       <StyledPublishExplanation>
-        <Button
-          type="primary"
-          shape="circle"
-          onClick={async () => {
-            await enableWorkspace();
-          }}
-        >
-          {t('Enable AFFiNE Cloud')}
-        </Button>
+        <EnableWorkspaceButton></EnableWorkspaceButton>
       </StyledPublishExplanation>
     </StyledMemberWarp>
   );