diff --git a/packages/app/src/components/workspace-setting/workspace-setting.tsx b/packages/app/src/components/workspace-setting/workspace-setting.tsx
index 220d157c70..c315972d0d 100644
--- a/packages/app/src/components/workspace-setting/workspace-setting.tsx
+++ b/packages/app/src/components/workspace-setting/workspace-setting.tsx
@@ -1,4 +1,4 @@
-import Modal from '@/ui/modal';
+import Modal, { ModalCloseButton } from '@/ui/modal';
 import {
   StyledAvatarUploadBtn,
   StyledCopyButtonContainer,
@@ -35,7 +35,7 @@ import {
   PublishIcon,
   MoreVerticalIcon,
 } from '@blocksuite/icons';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Button } from '@/ui/button';
 import Input from '@/ui/input';
 
@@ -50,6 +50,11 @@ type SettingTabProps = {
   onTabChange?: (tab: ActiveTab) => void;
 };
 
+type WorkspaceSettingProps = {
+  isShow: boolean;
+  onClose?: () => void;
+};
+
 const WorkspaceSettingTab = ({ activeTab, onTabChange }: SettingTabProps) => {
   return (
     <StyledSettingTabContainer>
@@ -90,14 +95,27 @@ const WorkspaceSettingTab = ({ activeTab, onTabChange }: SettingTabProps) => {
   );
 };
 
-export const WorkspaceSetting = () => {
+export const WorkspaceSetting = ({
+  isShow,
+  onClose,
+}: WorkspaceSettingProps) => {
   const [activeTab, setActiveTab] = useState<ActiveTab>(ActiveTab.general);
   const handleTabChange = (tab: ActiveTab) => {
     setActiveTab(tab);
   };
+  const handleClickClose = () => {
+    onClose && onClose();
+  };
+  useEffect(() => {
+    // reset tab when modal is closed
+    if (!isShow) {
+      setActiveTab(ActiveTab.general);
+    }
+  }, [isShow]);
   return (
-    <Modal open={true}>
+    <Modal open={isShow}>
       <StyledSettingContainer>
+        <ModalCloseButton onClick={handleClickClose} />
         <StyledSettingSidebar>
           <StyledSettingSidebarHeader>
             Workspace Settings
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 6a5a8a9305..e22c48a520 100644
--- a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/SelectorPopperContent.tsx
+++ b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/SelectorPopperContent.tsx
@@ -10,9 +10,20 @@ import {
   ListItem,
   LoginItem,
 } from './WorkspaceItem';
+import { WorkspaceSetting } from '@/components/workspace-setting';
+import { useState } from 'react';
 
 export const SelectorPopperContent = () => {
   const { user, workspacesMeta } = useAppState();
+  const [settingWorkspaceId, setSettingWorkspaceId] = useState<string | null>(
+    null
+  );
+  const handleClickSettingWorkspace = (workspaceId: string) => {
+    setSettingWorkspaceId(workspaceId);
+  };
+  const handleCloseWorkSpace = () => {
+    setSettingWorkspaceId(null);
+  };
   return !user ? (
     <SelectorPopperContainer placement="bottom-start">
       <LoginItem />
@@ -36,12 +47,16 @@ export const SelectorPopperContent = () => {
               id={workspace.id}
               name={`workspace-${workspace.id}`}
               icon={''}
+              onClick={handleClickSettingWorkspace}
             />
           );
         })}
       </WorkspaceWrapper>
-
       <CreateWorkspaceItem />
+      <WorkspaceSetting
+        isShow={Boolean(settingWorkspaceId)}
+        onClose={handleCloseWorkSpace}
+      />
       <StyledDivider />
       <ListItem
         icon={<InformationIcon />}
diff --git a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/WorkspaceItem/FooterSetting.tsx b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/WorkspaceItem/FooterSetting.tsx
index 346b50ebac..8dbb7dc3a4 100644
--- a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/WorkspaceItem/FooterSetting.tsx
+++ b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/WorkspaceItem/FooterSetting.tsx
@@ -2,9 +2,16 @@ import { SettingsIcon } from '@blocksuite/icons';
 import { styled } from '@/styles';
 import { IconButton } from '@/ui/button';
 
-export const FooterSetting = () => {
+type SettingProps = {
+  onClick?: () => void;
+};
+
+export const FooterSetting = ({ onClick }: SettingProps) => {
+  const handleClick = () => {
+    onClick && onClick();
+  };
   return (
-    <Wrapper className="footer-setting">
+    <Wrapper className="footer-setting" onClick={handleClick}>
       <SettingsIcon />
     </Wrapper>
   );
diff --git a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/WorkspaceItem/WorkspaceItem.tsx b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/WorkspaceItem/WorkspaceItem.tsx
index 717bd2919c..06aecce600 100644
--- a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/WorkspaceItem/WorkspaceItem.tsx
+++ b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/WorkspaceItem/WorkspaceItem.tsx
@@ -12,11 +12,21 @@ interface WorkspaceItemProps {
   id: string;
   name: string;
   icon: string;
+  onClick?: (workspaceId: string) => void;
 }
 
-export const WorkspaceItem = ({ id, name, icon }: WorkspaceItemProps) => {
+export const WorkspaceItem = ({
+  id,
+  name,
+  icon,
+  onClick,
+}: WorkspaceItemProps) => {
   const router = useRouter();
 
+  const handleClickSetting = async () => {
+    onClick && onClick(id);
+  };
+
   return (
     <StyledWrapper
       onClick={() => {
@@ -31,7 +41,7 @@ export const WorkspaceItem = ({ id, name, icon }: WorkspaceItemProps) => {
       </WorkspaceItemContent>
       <Footer>
         <FooterUsers />
-        <FooterSetting />
+        <FooterSetting onClick={handleClickSetting} />
       </Footer>
     </StyledWrapper>
   );