diff --git a/packages/app/src/components/workspace-avatar/index.tsx b/packages/app/src/components/workspace-avatar/index.tsx
index ebce8a9f13..8300f1563c 100644
--- a/packages/app/src/components/workspace-avatar/index.tsx
+++ b/packages/app/src/components/workspace-avatar/index.tsx
@@ -11,21 +11,10 @@ interface IWorkspaceAvatar {
 export const WorkspaceAvatar = (props: IWorkspaceAvatar) => {
   const size = props.size || 20;
   const sizeStr = size + 'px';
-  const { dataCenter, currentWorkspace } = useAppState();
-  dataCenter.getBlob(currentWorkspace, props.avatar).then(res => {
-    setAvatar(res ?? '');
-  });
-  const [avatar, setAvatar] = useState<string>(props.avatar);
-
-  useEffect(() => {
-    dataCenter.getBlob(currentWorkspace, props.avatar).then(res => {
-      setAvatar(res ?? '');
-    });
-  }, [props.avatar]);
 
   return (
     <>
-      {avatar ? (
+      {props.avatar ? (
         <div
           style={{
             width: sizeStr,
@@ -36,7 +25,7 @@ export const WorkspaceAvatar = (props: IWorkspaceAvatar) => {
             overflow: 'hidden',
           }}
         >
-          <img src={avatar} alt="" />
+          <img src={props.avatar} alt="" />
         </div>
       ) : (
         <div
diff --git a/packages/app/src/components/workspace-setting/SyncPage.tsx b/packages/app/src/components/workspace-setting/SyncPage.tsx
index f2ffbeafec..a93074a8ee 100644
--- a/packages/app/src/components/workspace-setting/SyncPage.tsx
+++ b/packages/app/src/components/workspace-setting/SyncPage.tsx
@@ -7,9 +7,17 @@ import { DownloadIcon } from '@blocksuite/icons';
 import { Button } from '@/ui/button';
 import { Menu, MenuItem } from '@/ui/menu';
 import { WorkspaceInfo } from '@affine/datacenter';
+import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
+import { useAppState } from '@/providers/app-state-provider';
+import { useConfirm } from '@/providers/ConfirmProvider';
+import { toast } from '@/ui/toast';
+import { useUserHelper } from '@/hooks/use-user-helper';
 export const SyncPage = ({ workspace }: { workspace: WorkspaceInfo }) => {
-  console.log('workspace: ', workspace);
-
+  // console.log('workspace: ', workspace);
+  const { enableWorkspace } = useWorkspaceHelper();
+  const { currentWorkspace } = useAppState();
+  const { confirm } = useConfirm();
+  const { user, login } = useUserHelper();
   return (
     <div>
       <StyledPublishContent>
@@ -24,9 +32,20 @@ export const SyncPage = ({ workspace }: { workspace: WorkspaceInfo }) => {
             <StyledPublishCopyContainer>
               <Button
                 onClick={() => {
-                  // updateWorkspaceMeta(currentWorkspace.id, {
-                  //   type: 'cloud',
-                  // });
+                  confirm({
+                    title: 'Enable AFFiNE Cloud?',
+                    content: `If enabled, the data in this workspace will be backed up and synchronized via AFFiNE Cloud.`,
+                    confirmText: user ? 'Enable' : 'Sign in and Enable',
+                    cancelText: 'Skip',
+                  }).then(async confirm => {
+                    if (confirm) {
+                      // if (user) {
+                      //   await login();
+                      // }
+                      await enableWorkspace(currentWorkspace);
+                      toast('Enabled success');
+                    }
+                  });
                 }}
                 type="primary"
                 shape="circle"
diff --git a/packages/app/src/components/workspace-setting/general/General.tsx b/packages/app/src/components/workspace-setting/general/General.tsx
index f33f3e3ebd..116b5863ea 100644
--- a/packages/app/src/components/workspace-setting/general/General.tsx
+++ b/packages/app/src/components/workspace-setting/general/General.tsx
@@ -47,8 +47,9 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceInfo }) => {
 
   const fileChange = async (file: File) => {
     // console.log('file: ', file);
-    setUploading(true);
+    // setUploading(true);
     const blob = new Blob([file], { type: file.type });
+    updateWorkspace({ avatarBlob: blob }, currentWorkspace);
   };
 
   return workspace ? (
diff --git a/packages/app/src/hooks/use-workspace-helper.ts b/packages/app/src/hooks/use-workspace-helper.ts
index f22f8cd4aa..bb227f43d4 100644
--- a/packages/app/src/hooks/use-workspace-helper.ts
+++ b/packages/app/src/hooks/use-workspace-helper.ts
@@ -24,16 +24,21 @@ export const useWorkspaceHelper = () => {
     workspace: Workspace
   ) => {
     if (name) {
-      dataCenter.updateWorkspaceMeta({ name }, workspace);
+      await dataCenter.updateWorkspaceMeta({ name }, workspace);
     }
     if (avatarBlob) {
       const blobId = await dataCenter.setBlob(workspace, avatarBlob);
-      dataCenter.updateWorkspaceMeta({ avatar: blobId }, workspace);
+      await dataCenter.updateWorkspaceMeta({ avatar: blobId }, workspace);
     }
   };
+
+  const enableWorkspace = async (workspace: Workspace) => {
+    dataCenter.enableWorkspaceCloud(workspace);
+  };
   return {
     createWorkspace,
     publishWorkspace,
     updateWorkspace,
+    enableWorkspace,
   };
 };