diff --git a/packages/app/src/components/workspace-setting/MembersPage.tsx b/packages/app/src/components/workspace-setting/MembersPage.tsx
index 08b2640c97..fd65f47df8 100644
--- a/packages/app/src/components/workspace-setting/MembersPage.tsx
+++ b/packages/app/src/components/workspace-setting/MembersPage.tsx
@@ -28,13 +28,22 @@ import { WorkspaceUnit } from '@affine/datacenter';
 import { useTemporaryHelper } from '@/providers/temporary-helper-provider';
 import { StyledMemberWarp } from './general/style';
 import { useConfirm } from '@/providers/ConfirmProvider';
+import { useAppState } from '@/providers/app-state-provider';
 
 // import { useAppState } from '@/providers/app-state-provider';
 export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
   const [isInviteModalShow, setIsInviteModalShow] = useState(false);
-  const [members, setMembers] = useState<[{ name: string; email: string }]>([
-    { name: 'affine', email: 'tttt' },
-  ]);
+
+  const { currentMetaWorkSpace, currentWorkspace, dataCenter } = useAppState();
+
+  const [members, setMembers] = useState<[{ name: string; email: string }?]>(
+    []
+  );
+
+  // const getMembers = async () =>{
+  //   const members = await dataCenter.
+  // }
+
   console.log('setMembers: ', setMembers);
   const { user, login, updateWorkspaceMeta } = useTemporaryHelper();
   const { confirm } = useConfirm();
@@ -83,9 +92,9 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
                       </StyledMemberAvatar>
 
                       <StyledMemberInfo>
-                        <StyledMemberName>{member.name}</StyledMemberName>
+                        <StyledMemberName>{member?.name}</StyledMemberName>
 
-                        <StyledMemberEmail>{member.email}</StyledMemberEmail>
+                        <StyledMemberEmail>{member?.email}</StyledMemberEmail>
                       </StyledMemberInfo>
                     </StyledMemberNameContainer>
                     <StyledMemberRoleContainer>
diff --git a/packages/app/src/hooks/use-workspace-helper.ts b/packages/app/src/hooks/use-workspace-helper.ts
index fd96f7f2e2..cf2271a5ee 100644
--- a/packages/app/src/hooks/use-workspace-helper.ts
+++ b/packages/app/src/hooks/use-workspace-helper.ts
@@ -6,7 +6,8 @@ import router from 'next/router';
 
 export const useWorkspaceHelper = () => {
   const { confirm } = useConfirm();
-  const { dataCenter, currentWorkspace, user, login } = useAppState();
+  const { dataCenter, currentWorkspace, user, login, currentMetaWorkSpace } =
+    useAppState();
   const createWorkspace = async (name: string) => {
     const workspaceInfo = await dataCenter.createWorkspace({
       name: name,
@@ -56,6 +57,11 @@ export const useWorkspaceHelper = () => {
     });
   };
 
+  const inviteMember = async (email: string) => {
+    currentMetaWorkSpace &&
+      (await dataCenter.inviteMember(currentMetaWorkSpace?.id, email));
+  };
+
   return {
     createWorkspace,
     publishWorkspace,
diff --git a/packages/data-center/src/datacenter.ts b/packages/data-center/src/datacenter.ts
index 76499b11e5..1221b114f3 100644
--- a/packages/data-center/src/datacenter.ts
+++ b/packages/data-center/src/datacenter.ts
@@ -384,6 +384,20 @@ export class DataCenter {
     return (await blobStorage?.set(blob)) || '';
   }
 
+  /**
+   * get members of a workspace
+   * @param workspaceId
+   */
+  async getMembers(workspaceId: string) {
+    const workspaceInfo = this._workspaceUnitCollection.find(workspaceId);
+    assert(workspaceInfo, 'Workspace not found');
+    const provider = this.providerMap.get(workspaceInfo.provider);
+    if (provider) {
+      return await provider.getWorkspaceMembers(workspaceId);
+    }
+    return [];
+  }
+
   onMessage(cb: (message: Message) => void) {
     return this._messageCenter.onMessage(cb);
   }
diff --git a/packages/data-center/src/provider/affine/affine.ts b/packages/data-center/src/provider/affine/affine.ts
index 2b1c73ae53..3b0161743d 100644
--- a/packages/data-center/src/provider/affine/affine.ts
+++ b/packages/data-center/src/provider/affine/affine.ts
@@ -12,11 +12,11 @@ import { storage } from './storage.js';
 import assert from 'assert';
 import { WebsocketProvider } from './sync.js';
 // import { IndexedDBProvider } from '../local/indexeddb';
-import { getApis } from './apis/index.js';
+import { getApis, Member } from './apis/index.js';
 import type { Apis, WorkspaceDetail, Callback } from './apis';
 import { setDefaultAvatar } from '../utils.js';
 import { MessageCode } from '../../message';
-import { blob } from 'stream/consumers';
+import { token } from './apis/token.js';
 
 export interface AffineProviderConstructorParams
   extends ProviderConstructorParams {
@@ -215,6 +215,7 @@ export class AffineProvider extends BaseProvider {
   public override async getUserInfo(): Promise<User | undefined> {
     await this.init();
     const user = this._apis.token.user;
+    await this.init;
     return user
       ? {
           id: user.id,
@@ -361,4 +362,13 @@ export class AffineProvider extends BaseProvider {
     });
     return to;
   }
+
+  public override async logout(): Promise<void> {
+    token.clear();
+    storage.removeItem('token');
+  }
+
+  public override async getWorkspaceMembers(id: string) {
+    return this._apis.getWorkspaceMembers({ id });
+  }
 }
diff --git a/packages/data-center/src/provider/affine/apis/token.ts b/packages/data-center/src/provider/affine/apis/token.ts
index 62da8def94..4df48b3075 100644
--- a/packages/data-center/src/provider/affine/apis/token.ts
+++ b/packages/data-center/src/provider/affine/apis/token.ts
@@ -140,6 +140,10 @@ class Token {
       this.callbacks.splice(index, 1);
     }
   }
+
+  clear() {
+    this._setToken();
+  }
 }
 
 export const token = new Token();
diff --git a/packages/data-center/src/provider/base.ts b/packages/data-center/src/provider/base.ts
index 6542b279f1..17834abf34 100644
--- a/packages/data-center/src/provider/base.ts
+++ b/packages/data-center/src/provider/base.ts
@@ -3,6 +3,7 @@ import { MessageCenter } from '../message';
 import { Logger, User } from '../types';
 import type { WorkspaceUnitCollectionScope } from '../workspace-unit-collection';
 import type { WorkspaceUnitCtorParams } from '../workspace-unit';
+import { Member } from './affine/apis';
 
 const defaultLogger = () => {
   return;
@@ -213,4 +214,14 @@ export class BaseProvider {
     from;
     return to;
   }
+
+  /**
+   * get workspace members
+   * @param {string} workspaceId
+   * @returns
+   */
+  public getWorkspaceMembers(workspaceId: string): Promise<Member[]> {
+    workspaceId;
+    return Promise.resolve([]);
+  }
 }
diff --git a/packages/data-center/src/workspace-unit-collection.spec.ts b/packages/data-center/src/workspace-unit-collection.spec.ts
index 06eee95bd0..f010c31d12 100644
--- a/packages/data-center/src/workspace-unit-collection.spec.ts
+++ b/packages/data-center/src/workspace-unit-collection.spec.ts
@@ -11,7 +11,7 @@ test.describe.serial('workspace meta collection observable', () => {
     workspaceUnitCollection.once(
       'change',
       (event: WorkspaceUnitCollectionChangeEvent) => {
-        expect(event.added?.id).toEqual('123');
+        expect(event.added?.[0]?.id).toEqual('123');
       }
     );
     scope.add({