diff --git a/packages/app/src/components/workspace-avatar/index.tsx b/packages/app/src/components/workspace-avatar/index.tsx
index 8300f1563..22f5fdd04 100644
--- a/packages/app/src/components/workspace-avatar/index.tsx
+++ b/packages/app/src/components/workspace-avatar/index.tsx
@@ -1,7 +1,4 @@
-import { useAppState } from '@/providers/app-state-provider';
 import { stringToColour } from '@/utils';
-import { useEffect, useState } from 'react';
-
 interface IWorkspaceAvatar {
   size: number;
   name: string;
@@ -25,7 +22,9 @@ export const WorkspaceAvatar = (props: IWorkspaceAvatar) => {
             overflow: 'hidden',
           }}
         >
-          <img src={props.avatar} alt="" />
+          <picture>
+            <img src={props.avatar} alt="" />
+          </picture>
         </div>
       ) : (
         <div
diff --git a/packages/app/src/components/workspace-setting/SyncPage.tsx b/packages/app/src/components/workspace-setting/SyncPage.tsx
index b6884910b..37ba8ab3f 100644
--- a/packages/app/src/components/workspace-setting/SyncPage.tsx
+++ b/packages/app/src/components/workspace-setting/SyncPage.tsx
@@ -43,7 +43,7 @@ export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
                       //   await login();
                       // }
                       const id = await enableWorkspace(currentWorkspace);
-                      router.push(`/workspace/${id}`);
+                      router.push(`/workspace/${id}/setting`);
                       toast('Enabled success');
                     }
                   });
diff --git a/packages/app/src/components/workspace-setting/general/General.tsx b/packages/app/src/components/workspace-setting/general/General.tsx
index ec541b9f1..0b0194147 100644
--- a/packages/app/src/components/workspace-setting/general/General.tsx
+++ b/packages/app/src/components/workspace-setting/general/General.tsx
@@ -48,9 +48,11 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
 
   const fileChange = async (file: File) => {
     // console.log('file: ', file);
-    // setUploading(true);
+    setUploading(true);
     const blob = new Blob([file], { type: file.type });
-    currentWorkspace && updateWorkspace({ avatarBlob: blob }, currentWorkspace);
+    currentWorkspace &&
+      (await updateWorkspace({ avatarBlob: blob }, currentWorkspace));
+    setUploading(false);
   };
 
   return workspace ? (
diff --git a/packages/app/src/components/workspace-setting/style.ts b/packages/app/src/components/workspace-setting/style.ts
index a6b162fab..f750ef859 100644
--- a/packages/app/src/components/workspace-setting/style.ts
+++ b/packages/app/src/components/workspace-setting/style.ts
@@ -2,7 +2,7 @@ import { styled } from '@/styles';
 import { Button } from '@/ui/button';
 import MuiAvatar from '@mui/material/Avatar';
 
-export const StyledSettingContainer = styled('div')(({ theme }) => {
+export const StyledSettingContainer = styled('div')(() => {
   return {
     display: 'flex',
     padding: '50px',
@@ -12,7 +12,7 @@ export const StyledSettingContainer = styled('div')(({ theme }) => {
   };
 });
 
-export const StyledSettingSidebar = styled('div')(({ theme }) => {
+export const StyledSettingSidebar = styled('div')(() => {
   {
     return {
       flexShrink: 0,
diff --git a/packages/app/src/hooks/use-ensure-workspace.ts b/packages/app/src/hooks/use-ensure-workspace.ts
index a59f73881..0ef15580a 100644
--- a/packages/app/src/hooks/use-ensure-workspace.ts
+++ b/packages/app/src/hooks/use-ensure-workspace.ts
@@ -18,7 +18,8 @@ export const useEnsureWorkspace = () => {
     // If workspaceList is empty, we need to create a default workspace but not jump to 404
     if (
       workspaceList.length &&
-      router.query.workspaceId &&
+      // FIXME: router is not ready when this hook is called
+      location.pathname.startsWith(`/workspace/${router.query.workspaceId}`) &&
       workspaceList.findIndex(
         meta => meta.id.toString() === router.query.workspaceId
       ) === -1
@@ -35,14 +36,13 @@ export const useEnsureWorkspace = () => {
     //   router.push('/404');
     //   return;
     // }
-
     const workspaceId =
       (router.query.workspaceId as string) || workspaceList[0]?.id;
     loadWorkspace(workspaceId).finally(() => {
       setWorkspaceLoaded(true);
       setActiveWorkspaceId(activeWorkspaceId);
     });
-  }, [loadWorkspace, router, user, workspaceList]);
+  }, [loadWorkspace, router, user, workspaceList, activeWorkspaceId]);
 
   return {
     workspaceLoaded,
diff --git a/packages/app/src/pages/workspace/[workspaceId]/index.tsx b/packages/app/src/pages/workspace/[workspaceId]/index.tsx
index d0a9e086d..cdfd343af 100644
--- a/packages/app/src/pages/workspace/[workspaceId]/index.tsx
+++ b/packages/app/src/pages/workspace/[workspaceId]/index.tsx
@@ -16,9 +16,7 @@ const WorkspaceIndex = () => {
       if (!workspaceLoaded) {
         return;
       }
-
       const savedPageId = currentWorkspace?.meta.pageMetas[0]?.id;
-
       if (savedPageId) {
         router.replace(`/workspace/${activeWorkspaceId}/${savedPageId}`);
         return;
@@ -34,6 +32,7 @@ const WorkspaceIndex = () => {
     createPage,
     router,
     workspaceLoaded,
+    activeWorkspaceId,
   ]);
 
   return <PageLoading />;
diff --git a/packages/app/src/providers/app-state-provider/Provider.tsx b/packages/app/src/providers/app-state-provider/Provider.tsx
index 9c2afcf75..619b7fc2c 100644
--- a/packages/app/src/providers/app-state-provider/Provider.tsx
+++ b/packages/app/src/providers/app-state-provider/Provider.tsx
@@ -100,7 +100,6 @@ export const AppStateProvider = ({
     if (workspaceId === currentWorkspaceId) {
       return currentWorkspace;
     }
-
     const workspace = await dataCenter.loadWorkspace(workspaceId);
     const currentMetaWorkSpace = dataCenter.workspaces.find(
       (item: WorkspaceUnit) => {
diff --git a/packages/app/src/providers/app-state-provider/utils.ts b/packages/app/src/providers/app-state-provider/utils.ts
index 066ef7a2c..6dc3c8cca 100644
--- a/packages/app/src/providers/app-state-provider/utils.ts
+++ b/packages/app/src/providers/app-state-provider/utils.ts
@@ -4,7 +4,6 @@ const DEFAULT_WORKSPACE_NAME = 'affine';
 
 export const createDefaultWorkspace = async (dataCenter: DataCenter) => {
   return dataCenter.createWorkspace({
-    avatar: 'test',
     name: DEFAULT_WORKSPACE_NAME,
   });
 };
diff --git a/packages/data-center/src/datacenter.ts b/packages/data-center/src/datacenter.ts
index 8e70718c3..76499b11e 100644
--- a/packages/data-center/src/datacenter.ts
+++ b/packages/data-center/src/datacenter.ts
@@ -43,8 +43,8 @@ export class DataCenter {
       };
     };
     // TODO: switch different provider
-    dc.registerProvider(new LocalProvider(getInitParams()));
-    dc.registerProvider(new AffineProvider(getInitParams()));
+    await dc.registerProvider(new LocalProvider(getInitParams()));
+    await dc.registerProvider(new AffineProvider(getInitParams()));
 
     for (const provider of dc.providerMap.values()) {
       await provider.loadWorkspaces();
@@ -57,12 +57,12 @@ export class DataCenter {
    * Register provider.
    * We will automatically set the first provider to default provider.
    */
-  registerProvider(provider: BaseProvider) {
+  async registerProvider(provider: BaseProvider) {
     if (!this._mainProvider) {
       this._mainProvider = provider;
     }
 
-    provider.init();
+    await provider.init();
     this.providerMap.set(provider.id, provider);
   }
 
@@ -123,7 +123,7 @@ export class DataCenter {
     const workspaceInfo = this._workspaceUnitCollection.find(workspaceId);
     assert(workspaceInfo, 'Workspace not found');
     return (
-      this._workspaceInstances.get(workspaceId) ||
+      // this._workspaceInstances.get(workspaceId) ||
       createBlocksuiteWorkspace(workspaceId)
     );
   }
diff --git a/packages/data-center/src/provider/affine/affine.ts b/packages/data-center/src/provider/affine/affine.ts
index 890fc6dc0..1ba3524fe 100644
--- a/packages/data-center/src/provider/affine/affine.ts
+++ b/packages/data-center/src/provider/affine/affine.ts
@@ -212,6 +212,7 @@ export class AffineProvider extends BaseProvider {
   }
 
   public override async getUserInfo(): Promise<User | undefined> {
+    await this.init();
     const user = this._apis.token.user;
     return user
       ? {
diff --git a/packages/data-center/src/provider/affine/apis/workspace.ts b/packages/data-center/src/provider/affine/apis/workspace.ts
index 8bdc25b21..29a729ae6 100644
--- a/packages/data-center/src/provider/affine/apis/workspace.ts
+++ b/packages/data-center/src/provider/affine/apis/workspace.ts
@@ -84,7 +84,10 @@ export interface CreateWorkspaceParams {
 export async function createWorkspace(
   params: CreateWorkspaceParams
 ): Promise<{ id: string }> {
-  return client.post('api/workspace', { json: params }).json();
+  // FIXME: avatar should be optional
+  return client
+    .post('api/workspace', { json: { ...params, avatar: '123' } })
+    .json();
 }
 
 export interface UpdateWorkspaceParams {