diff --git a/packages/app/src/components/workspace-setting/index.ts b/packages/app/src/components/workspace-setting/index.ts
new file mode 100644
index 0000000000..eda9c6aebd
--- /dev/null
+++ b/packages/app/src/components/workspace-setting/index.ts
@@ -0,0 +1 @@
+export * from './workspace-setting';
diff --git a/packages/app/src/components/workspace-setting/style.ts b/packages/app/src/components/workspace-setting/style.ts
new file mode 100644
index 0000000000..22c1d6e344
--- /dev/null
+++ b/packages/app/src/components/workspace-setting/style.ts
@@ -0,0 +1,136 @@
+import { styled } from '@/styles';
+import { Button } from '@/ui/button';
+import MuiAvatar from '@mui/material/Avatar';
+
+export const StyledSettingContainer = styled('div')(({ theme }) => {
+  return {
+    position: 'relative',
+    display: 'flex',
+    padding: '0px',
+    width: '961px',
+    background: theme.colors.popoverBackground,
+    borderRadius: '12px',
+    overflow: 'hidden',
+  };
+});
+
+export const StyledSettingSidebar = styled('div')(({ theme }) => {
+  {
+    return {
+      width: '236px',
+      height: '620px',
+      background: theme.mode === 'dark' ? '#272727' : '#FBFBFC',
+    };
+  }
+});
+
+export const StyledSettingContent = styled('div')(({ theme }) => {
+  return {
+    paddingLeft: '48px',
+  };
+});
+
+export const StyledSetting = styled('div')(({ theme }) => {
+  {
+    return {
+      width: '236px',
+      height: '620px',
+      background: theme.mode === 'dark' ? '#272727' : '#FBFBFC',
+    };
+  }
+});
+
+export const StyledSettingSidebarHeader = styled('div')(({ theme }) => {
+  {
+    return {
+      fontWeight: '500',
+      fontSize: '18px',
+      lineHeight: '26px',
+      textAlign: 'center',
+      marginTop: '37px',
+    };
+  }
+});
+
+export const StyledSettingTabContainer = styled('ul')(({ theme }) => {
+  {
+    return {
+      display: 'flex',
+      flexDirection: 'column',
+      marginTop: '25px',
+    };
+  }
+});
+
+export const WorkspaceSettingTagItem = styled('li')<{ isActive?: boolean }>(
+  ({ theme, isActive }) => {
+    {
+      return {
+        display: 'flex',
+        marginBottom: '12px',
+        padding: '0 24px',
+        height: '32px',
+        color: isActive ? theme.colors.primaryColor : theme.colors.textColor,
+        fontWeight: '400',
+        fontSize: '16px',
+        lineHeight: '32px',
+        cursor: 'pointer',
+      };
+    }
+  }
+);
+
+export const StyledSettingTagIconContainer = styled('div')(({ theme }) => {
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    marginRight: '14.64px',
+    width: '14.47px',
+    fontSize: '14.47px',
+  };
+});
+
+export const StyledSettingH2 = styled('h2')<{ marginTop?: number }>(
+  ({ marginTop, theme }) => {
+    return {
+      fontWeight: '500',
+      fontSize: '18px',
+      lineHeight: '26px',
+      marginTop: marginTop ? `${marginTop}px` : '0px',
+    };
+  }
+);
+
+export const StyledSettingAvatarContent = styled('div')(({ theme }) => {
+  return {
+    marginTop: '12px',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: '72px',
+  };
+});
+
+export const StyledSettingAvatar = styled(MuiAvatar)(({ theme }) => {
+  return { height: '72px', width: '72px' };
+});
+
+export const StyledAvatarUploadBtn = styled(Button)(({ theme }) => {
+  return {
+    backgroundColor: theme.colors.hoverBackground,
+    color: theme.colors.primaryColor,
+    margin: '0 12px 0 24px',
+  };
+});
+
+export const StyledSettingInputContainer = styled('div')(({ theme }) => {
+  return {
+    marginTop: '12px',
+  };
+});
+
+export const StyledDeleteButtonContainer = styled('div')(({ theme }) => {
+  return {
+    marginTop: '158px',
+  };
+});
diff --git a/packages/app/src/components/workspace-setting/workspace-setting.tsx b/packages/app/src/components/workspace-setting/workspace-setting.tsx
new file mode 100644
index 0000000000..d405510491
--- /dev/null
+++ b/packages/app/src/components/workspace-setting/workspace-setting.tsx
@@ -0,0 +1,122 @@
+import Modal from '@/ui/modal';
+import {
+  StyledAvatarUploadBtn,
+  StyledDeleteButtonContainer,
+  StyledSettingAvatar,
+  StyledSettingAvatarContent,
+  StyledSettingContainer,
+  StyledSettingContent,
+  StyledSettingH2,
+  StyledSettingInputContainer,
+  StyledSettingSidebar,
+  StyledSettingSidebarHeader,
+  StyledSettingTabContainer,
+  StyledSettingTagIconContainer,
+  WorkspaceSettingTagItem,
+} from './style';
+import { EditIcon, UsersIcon, PublishIcon } from '@blocksuite/icons';
+import { useState } from 'react';
+import { Button } from '@/ui/button';
+import Input from '@/ui/input';
+
+enum ActiveTab {
+  'general' = 'general',
+  'members' = 'members',
+  'publish' = 'publish',
+}
+
+type SettingTabProps = {
+  activeTab: ActiveTab;
+  onTabChange?: (tab: ActiveTab) => void;
+};
+
+const WorkspaceSettingTab = ({ activeTab, onTabChange }: SettingTabProps) => {
+  return (
+    <StyledSettingTabContainer>
+      <WorkspaceSettingTagItem
+        isActive={activeTab === ActiveTab.general}
+        onClick={() => {
+          onTabChange && onTabChange(ActiveTab.general);
+        }}
+      >
+        <StyledSettingTagIconContainer>
+          <EditIcon />
+        </StyledSettingTagIconContainer>
+        General
+      </WorkspaceSettingTagItem>
+      <WorkspaceSettingTagItem
+        isActive={activeTab === ActiveTab.members}
+        onClick={() => {
+          onTabChange && onTabChange(ActiveTab.members);
+        }}
+      >
+        <StyledSettingTagIconContainer>
+          <UsersIcon />
+        </StyledSettingTagIconContainer>
+        Members
+      </WorkspaceSettingTagItem>
+      <WorkspaceSettingTagItem
+        isActive={activeTab === ActiveTab.publish}
+        onClick={() => {
+          onTabChange && onTabChange(ActiveTab.publish);
+        }}
+      >
+        <StyledSettingTagIconContainer>
+          <PublishIcon />
+        </StyledSettingTagIconContainer>
+        Publish
+      </WorkspaceSettingTagItem>
+    </StyledSettingTabContainer>
+  );
+};
+
+export const WorkspaceSetting = () => {
+  const [activeTab, setActiveTab] = useState<ActiveTab>(ActiveTab.general);
+  const handleTabChange = (tab: ActiveTab) => {
+    setActiveTab(tab);
+  };
+  return (
+    <Modal open={true}>
+      <StyledSettingContainer>
+        <StyledSettingSidebar>
+          <StyledSettingSidebarHeader>
+            Workspace Settings
+          </StyledSettingSidebarHeader>
+          <WorkspaceSettingTab
+            activeTab={activeTab}
+            onTabChange={handleTabChange}
+          />
+        </StyledSettingSidebar>
+        <StyledSettingContent>
+          {activeTab === ActiveTab.general && <GeneralPage />}
+        </StyledSettingContent>
+      </StyledSettingContainer>
+    </Modal>
+  );
+};
+
+const GeneralPage = () => {
+  return (
+    <div>
+      <StyledSettingH2 marginTop={56}>Workspace Avatar</StyledSettingH2>
+      <StyledSettingAvatarContent>
+        <StyledSettingAvatar alt="workspace avatar">W</StyledSettingAvatar>
+        <StyledAvatarUploadBtn shape="round">upload</StyledAvatarUploadBtn>
+        <Button shape="round">remove</Button>
+      </StyledSettingAvatarContent>
+      <StyledSettingH2 marginTop={36}>Workspace Name</StyledSettingH2>
+      <StyledSettingInputContainer>
+        <Input width={327} placeholder="Workspace Name"></Input>
+      </StyledSettingInputContainer>
+      <StyledSettingH2 marginTop={36}>Workspace Owner</StyledSettingH2>
+      <StyledSettingInputContainer>
+        <Input width={327} placeholder="Workspace Owner"></Input>
+      </StyledSettingInputContainer>
+      <StyledDeleteButtonContainer>
+        <Button type="danger" shape="circle">
+          Delete Workspace
+        </Button>
+      </StyledDeleteButtonContainer>
+    </div>
+  );
+};
diff --git a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/SelectorPopperContent.tsx b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/SelectorPopperContent.tsx
index b94815f666..30b7c8d162 100644
--- a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/SelectorPopperContent.tsx
+++ b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/SelectorPopperContent.tsx
@@ -27,7 +27,7 @@ const workspaces = [
 ];
 
 export const SelectorPopperContent = () => {
-  const { user, workspaces } = useAppState();
+  const { user, workspacesMeta } = useAppState();
   return !user ? (
     <SelectorPopperContainer placement="bottom-start">
       <LoginItem />
@@ -43,7 +43,7 @@ export const SelectorPopperContent = () => {
       <PrivateWorkspaceItem />
       <StyledDivider />
       <WorkspaceGroupTitle>Workspace</WorkspaceGroupTitle>
-      {workspaces.map(workspace => {
+      {workspacesMeta.map(workspace => {
         return (
           <WorkspaceItem
             key={workspace.id}
diff --git a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/CreateWorkspaceItem/workspace-create/workspace-create.tsx b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/CreateWorkspaceItem/workspace-create/workspace-create.tsx
index b9f649f20f..63bf1f5d9c 100644
--- a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/CreateWorkspaceItem/workspace-create/workspace-create.tsx
+++ b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/CreateWorkspaceItem/workspace-create/workspace-create.tsx
@@ -23,7 +23,6 @@ export const WorkspaceCreate = ({ open, onClose }: WorkspaceCreateProps) => {
   const handlerInputChange = (workspaceName: string) => {
     setWorkspaceId(workspaceName);
   };
-  console.log('workspaceName', workspaceName);
   return (
     <Modal open={open} onClose={onClose}>
       <StyledModalWrapper>
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 94e4514fce..d06ed53f75 100644
--- a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx
+++ b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx
@@ -8,7 +8,7 @@ export const WorkspaceSelector = () => {
       content={<SelectorPopperContent />}
       zIndex={1000}
       placement="bottom-start"
-      trigger="hover"
+      trigger="click"
     >
       <SelectorWrapper>
         <Avatar alt="Affine" />
diff --git a/packages/app/src/components/workspace-slider-bar/style.ts b/packages/app/src/components/workspace-slider-bar/style.ts
index e32c01e86d..3f8fa216ac 100644
--- a/packages/app/src/components/workspace-slider-bar/style.ts
+++ b/packages/app/src/components/workspace-slider-bar/style.ts
@@ -57,7 +57,10 @@ export const StyledListItem = styled.button<{
     borderRadius: '5px',
     ...displayFlex('flex-start', 'center'),
     ...(disabled
-      ? { cursor: 'not-allowed', color: theme.colors.borderColor }
+      ? {
+          cursor: 'not-allowed',
+          color: theme.colors.borderColor,
+        }
       : {}),
 
     '>svg': {
diff --git a/packages/app/src/providers/app-state-provider.tsx b/packages/app/src/providers/app-state-provider.tsx
index 28967ee5cc..8627d9d41b 100644
--- a/packages/app/src/providers/app-state-provider.tsx
+++ b/packages/app/src/providers/app-state-provider.tsx
@@ -9,7 +9,7 @@ import type { Workspace } from '@pathfinder/data-services';
 
 interface AppStateValue {
   user: AccessTokenMessage | null;
-  workspaces: Workspace[];
+  workspacesMeta: Workspace[];
 }
 
 interface AppStateContext extends AppStateValue {
@@ -18,14 +18,14 @@ interface AppStateContext extends AppStateValue {
 
 const AppState = createContext<AppStateContext>({
   user: null,
-  workspaces: [],
+  workspacesMeta: [],
   setState: () => {},
 });
 
 export const AppStateProvider = ({ children }: { children?: ReactNode }) => {
   const [state, setState] = useState<AppStateValue>({
     user: null,
-    workspaces: [],
+    workspacesMeta: [],
   });
 
   useEffect(() => {
diff --git a/packages/app/src/ui/button/styles.ts b/packages/app/src/ui/button/styles.ts
index efa6d2edda..106826804b 100644
--- a/packages/app/src/ui/button/styles.ts
+++ b/packages/app/src/ui/button/styles.ts
@@ -44,7 +44,7 @@ export const StyledIconButton = styled('button', {
       color: theme.colors.iconColor,
       ...displayInlineFlex('center', 'center'),
       position: 'relative',
-      ...(disabled ? { cursor: 'not-allowed' } : {}),
+      ...(disabled ? { cursor: 'not-allowed', pointerEvents: 'none' } : {}),
       transition: 'background .15s',
 
       // TODO: we need to add @emotion/babel-plugin
@@ -123,7 +123,7 @@ export const StyledTextButton = styled('button', {
       paddingRight: padding,
       ...displayInlineFlex('flex-start', 'center'),
       position: 'relative',
-      ...(disabled ? { cursor: 'not-allowed' } : {}),
+      ...(disabled ? { cursor: 'not-allowed', pointerEvents: 'none' } : {}),
       transition: 'background .15s',
       // TODO: Implement circle shape
       borderRadius: shape === 'default' ? borderRadius : height / 2,
@@ -180,7 +180,11 @@ export const StyledButton = styled('button', {
       position: 'relative',
       // TODO: disabled color is not decided
       ...(disabled
-        ? { cursor: 'not-allowed', color: theme.colors.borderColor }
+        ? {
+            cursor: 'not-allowed',
+            pointerEvents: 'none',
+            color: theme.colors.borderColor,
+          }
         : {}),
       transition: 'background .15s',
       // TODO: Implement circle shape