diff --git a/packages/app/src/components/workspace-setting/general/delete/delete.tsx b/packages/app/src/components/workspace-setting/general/delete/delete.tsx
index 6d530b9126..7608faea36 100644
--- a/packages/app/src/components/workspace-setting/general/delete/delete.tsx
+++ b/packages/app/src/components/workspace-setting/general/delete/delete.tsx
@@ -31,8 +31,8 @@ export const WorkspaceDelete = ({
   nextWorkSpaceId,
 }: WorkspaceDeleteProps) => {
   const [deleteStr, setDeleteStr] = useState<string>('');
-  const router = useRouter();
   const { refreshWorkspacesMeta } = useAppState();
+  const router = useRouter();
 
   const handlerInputChange = (workspaceName: string) => {
     setDeleteStr(workspaceName);
diff --git a/packages/app/src/components/workspace-setting/general/general.tsx b/packages/app/src/components/workspace-setting/general/general.tsx
index e2b4dcbb62..7abe5dd90c 100644
--- a/packages/app/src/components/workspace-setting/general/general.tsx
+++ b/packages/app/src/components/workspace-setting/general/general.tsx
@@ -15,6 +15,7 @@ import { WorkspaceDetails } from '@/components/workspace-slider-bar/WorkspaceSel
 import { WorkspaceDelete } from './delete';
 import { Workspace as StoreWorkspace } from '@blocksuite/store';
 import { debounce } from '@/utils';
+import { WorkspaceLeave } from './leave';
 
 export const GeneralPage = ({
   workspace,
@@ -32,6 +33,7 @@ export const GeneralPage = ({
     refreshWorkspacesMeta,
   } = useAppState();
   const [showDelete, setShowDelete] = useState<boolean>(false);
+  const [showLeave, setShowLeave] = useState<boolean>(false);
   const [workspaceName, setWorkspaceName] = useState<string>(
     workspaces[workspace.id]?.meta.name ||
       (workspace.type === WorkspaceType.Private && user ? user.name : '')
@@ -53,21 +55,22 @@ export const GeneralPage = ({
     currentWorkspaceIndex > workspacesMeta.length - 1
       ? workspacesMeta[currentWorkspaceIndex - 1]?.id
       : workspacesMeta[currentWorkspaceIndex + 1]?.id;
-  const handleCloseDelete = () => {
-    setShowDelete(false);
-  };
   const handleClickDelete = () => {
     setShowDelete(true);
   };
+  const handleCloseDelete = () => {
+    setShowDelete(false);
+  };
+
+  const handleClickLeave = () => {
+    setShowLeave(true);
+  };
+  const handleCloseLeave = () => {
+    setShowLeave(false);
+  };
+
   return workspace ? (
     <div>
-      <WorkspaceDelete
-        open={showDelete}
-        onClose={handleCloseDelete}
-        workspaceName={workspaceName}
-        workspaceId={workspace.id}
-        nextWorkSpaceId={nextWorkSpaceId}
-      ></WorkspaceDelete>
       <StyledSettingH2 marginTop={56}>Workspace Avatar</StyledSettingH2>
       <StyledSettingAvatarContent>
         <StyledSettingAvatar
@@ -104,9 +107,33 @@ export const GeneralPage = ({
         ></Input>
       </StyledSettingInputContainer>
       <StyledDeleteButtonContainer>
-        <Button type="danger" shape="circle" onClick={handleClickDelete}>
-          Delete Workspace
-        </Button>
+        {isOwner ? (
+          <>
+            <Button type="danger" shape="circle" onClick={handleClickDelete}>
+              Delete Workspace
+            </Button>
+            <WorkspaceDelete
+              open={showDelete}
+              onClose={handleCloseDelete}
+              workspaceName={workspaceName}
+              workspaceId={workspace.id}
+              nextWorkSpaceId={nextWorkSpaceId}
+            />
+          </>
+        ) : (
+          <>
+            <Button type="danger" shape="circle" onClick={handleClickLeave}>
+              Leave Workspace
+            </Button>
+            <WorkspaceLeave
+              open={showLeave}
+              onClose={handleCloseLeave}
+              workspaceName={workspaceName}
+              workspaceId={workspace.id}
+              nextWorkSpaceId={nextWorkSpaceId}
+            />
+          </>
+        )}
       </StyledDeleteButtonContainer>
     </div>
   ) : null;
diff --git a/packages/app/src/components/workspace-setting/general/leave/leave.tsx b/packages/app/src/components/workspace-setting/general/leave/leave.tsx
index 52d9c9aa59..04f21f4a82 100644
--- a/packages/app/src/components/workspace-setting/general/leave/leave.tsx
+++ b/packages/app/src/components/workspace-setting/general/leave/leave.tsx
@@ -7,6 +7,9 @@ import {
 } from './style';
 import { ModalCloseButton } from '@/ui/modal';
 import { Button } from '@/ui/button';
+import { leaveWorkspace } from '@pathfinder/data-services';
+import { Router, useRouter } from 'next/router';
+import { useAppState } from '@/providers/app-state-provider';
 
 interface WorkspaceDeleteProps {
   open: boolean;
@@ -16,9 +19,19 @@ interface WorkspaceDeleteProps {
   nextWorkSpaceId: string;
 }
 
-export const WorkspaceDelete = ({ open, onClose }: WorkspaceDeleteProps) => {
+export const WorkspaceLeave = ({
+  open,
+  onClose,
+  nextWorkSpaceId,
+  workspaceId,
+}: WorkspaceDeleteProps) => {
+  const router = useRouter();
+  const { refreshWorkspacesMeta } = useAppState();
   const handleLeave = async () => {
-    // TODO
+    await leaveWorkspace({ id: workspaceId });
+    router.push(`/workspace/${nextWorkSpaceId}`);
+    refreshWorkspacesMeta();
+    onClose();
   };
 
   return (
@@ -48,4 +61,4 @@ export const WorkspaceDelete = ({ open, onClose }: WorkspaceDeleteProps) => {
   );
 };
 
-export default WorkspaceDelete;
+export default WorkspaceLeave;
diff --git a/packages/data-services/src/sdks/workspace.ts b/packages/data-services/src/sdks/workspace.ts
index 17aa3f4e39..4b2c0b9aa7 100644
--- a/packages/data-services/src/sdks/workspace.ts
+++ b/packages/data-services/src/sdks/workspace.ts
@@ -163,3 +163,10 @@ export async function getBlob(params: {
 }): Promise<ArrayBuffer> {
   return client.get(`/api/blob/${params.blobId}`).arrayBuffer();
 }
+
+export interface LeaveWorkspaceParams {
+  id: number | string;
+}
+export async function leaveWorkspace({ id }: LeaveWorkspaceParams) {
+  await client.delete(`/api/workspace/${id}/permission`).json();
+}