diff --git a/packages/app/src/components/create-workspace/index.tsx b/packages/app/src/components/create-workspace/index.tsx
index fbc200456..c1abd2cbc 100644
--- a/packages/app/src/components/create-workspace/index.tsx
+++ b/packages/app/src/components/create-workspace/index.tsx
@@ -7,12 +7,10 @@ import { KeyboardEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAppState } from '@/providers/app-state-provider';
 import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
-interface ICloseParams {
-  workspaceId?: string;
-}
+
 interface ModalProps {
   open: boolean;
-  onClose: (opts: ICloseParams) => void;
+  onClose: () => void;
 }
 
 export const CreateWorkspaceModal = ({ open, onClose }: ModalProps) => {
@@ -23,6 +21,7 @@ export const CreateWorkspaceModal = ({ open, onClose }: ModalProps) => {
     const workspace = await createWorkspace(workspaceName);
     if (workspace && workspace.room) {
       await loadWorkspace(workspace.room);
+      onClose();
     } else {
       console.log('create error');
     }
@@ -44,7 +43,7 @@ export const CreateWorkspaceModal = ({ open, onClose }: ModalProps) => {
               top={6}
               right={6}
               onClick={() => {
-                onClose({});
+                onClose();
               }}
             />
           </Header>
diff --git a/packages/app/src/components/workspace-modal/index.tsx b/packages/app/src/components/workspace-modal/index.tsx
index 398a71acc..f223c7b87 100644
--- a/packages/app/src/components/workspace-modal/index.tsx
+++ b/packages/app/src/components/workspace-modal/index.tsx
@@ -24,7 +24,7 @@ interface LoginModalProps {
 export const WorkspaceModal = ({ open, onClose }: LoginModalProps) => {
   const [createWorkspaceOpen, setCreateWorkspaceOpen] = useState(false);
   const { confirm } = useConfirm();
-  const { user, workspaceList } = useAppState();
+  const { user, workspaceList, loadWorkspace } = useAppState();
 
   return (
     <div>
@@ -51,6 +51,8 @@ export const WorkspaceModal = ({ open, onClose }: LoginModalProps) => {
                   <WorkspaceItem
                     onClick={() => {
                       // setActiveWorkspace(item);
+                      console.log(item);
+                      loadWorkspace(item.id);
                       onClose();
                     }}
                     key={index}
@@ -149,7 +151,7 @@ export const WorkspaceModal = ({ open, onClose }: LoginModalProps) => {
           </Footer>
           <CreateWorkspaceModal
             open={createWorkspaceOpen}
-            onClose={({ workspaceId }) => {
+            onClose={() => {
               setCreateWorkspaceOpen(false);
               onClose();
               confirm({
diff --git a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx
index 5dabc24c2..98a875f55 100644
--- a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx
+++ b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx
@@ -3,18 +3,20 @@ import { useEffect, useState } from 'react';
 import { WorkspaceModal } from '@/components/workspace-modal';
 import { WorkspaceAvatar } from '@/components/workspace-avatar';
 import { useTemporaryHelper } from '@/providers/temporary-helper-provider';
+import { useAppState } from '@/providers/app-state-provider';
 export const WorkspaceSelector = () => {
   const [workspaceListShow, setWorkspaceListShow] = useState(false);
-  const { currentWorkspace, workspaceMetaList } = useTemporaryHelper();
+  const { currentWorkspace, workspaceList } = useAppState();
 
   useEffect(() => {
-    if (workspaceMetaList.length === 0) {
+    if (workspaceList.length === 0) {
       setWorkspaceListShow(true);
     }
-  }, [workspaceMetaList]);
+  }, [workspaceList]);
 
   return (
     <>
+      <div>{currentWorkspace.meta.name}</div>
       <SelectorWrapper
         onClick={() => {
           setWorkspaceListShow(true);
@@ -24,7 +26,7 @@ export const WorkspaceSelector = () => {
         <Avatar
           alt="Affine"
           data-testid="workspace-avatar"
-          src={currentWorkspace?.avatar}
+          src={currentWorkspace.meta.avatar}
         >
           <div
             style={{
@@ -33,12 +35,12 @@ export const WorkspaceSelector = () => {
           >
             <WorkspaceAvatar
               size={28}
-              name={currentWorkspace?.name ?? 'AFFiNE'}
+              name={currentWorkspace.meta.name ?? 'AFFiNE'}
             />
           </div>
         </Avatar>
         <WorkspaceName data-testid="workspace-name">
-          {currentWorkspace?.name ?? 'AFFiNE'}
+          {currentWorkspace?.meta.name ?? 'AFFiNE'}
         </WorkspaceName>
       </SelectorWrapper>
       <WorkspaceModal