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 385cac1600..9d6bba463a 100644
--- a/packages/app/src/components/workspace-setting/general/delete/delete.tsx
+++ b/packages/app/src/components/workspace-setting/general/delete/delete.tsx
@@ -13,6 +13,7 @@ import { ModalCloseButton } from '@/ui/modal';
 import { Button } from '@/ui/button';
 import { deleteWorkspace } from '@pathfinder/data-services';
 import { useRouter } from 'next/router';
+import { useAppState } from '@/providers/app-state-provider';
 
 interface WorkspaceDeleteProps {
   open: boolean;
@@ -31,6 +32,7 @@ export const WorkspaceDelete = ({
 }: WorkspaceDeleteProps) => {
   const [deleteStr, setDeleteStr] = useState<string>('');
   const router = useRouter();
+  const { refreshWorkspacesMeta } = useAppState();
 
   const handlerInputChange = (workspaceName: string) => {
     setDeleteStr(workspaceName);
@@ -39,6 +41,7 @@ export const WorkspaceDelete = ({
   const handleDelete = async () => {
     await deleteWorkspace({ id: workspaceId });
     router.push(`/workspace/${nextWorkSpaceId}`);
+    refreshWorkspacesMeta();
     onClose();
   };
 
diff --git a/packages/app/src/components/workspace-setting/workspace-setting.tsx b/packages/app/src/components/workspace-setting/workspace-setting.tsx
index d04885b131..b479b6144a 100644
--- a/packages/app/src/components/workspace-setting/workspace-setting.tsx
+++ b/packages/app/src/components/workspace-setting/workspace-setting.tsx
@@ -42,6 +42,7 @@ import {
   Workspace,
   Member,
   removeMember,
+  updateWorkspace,
 } from '@pathfinder/data-services';
 import { Avatar } from '@mui/material';
 import { Menu, MenuItem } from '@/ui/menu';
@@ -158,7 +159,9 @@ export const WorkspaceSetting = ({
           {activeTab === ActiveTab.members && workspace && (
             <MembersPage workspace={workspace} />
           )}
-          {activeTab === ActiveTab.publish && <PublishPage />}
+          {activeTab === ActiveTab.publish && (
+            <PublishPage workspace={workspace} />
+          )}
         </StyledSettingContent>
       </StyledSettingContainer>
     </Modal>
@@ -286,31 +289,69 @@ const MembersPage = ({ workspace }: { workspace: Workspace }) => {
   );
 };
 
-const PublishPage = () => {
+const PublishPage = ({ workspace }: { workspace: Workspace }) => {
+  const { refreshWorkspacesMeta } = useAppState();
+  const shareUrl = window.location.host + '/workspace/' + workspace.id;
+  const togglePublic = (flag: boolean) => {
+    updateWorkspace({
+      id: workspace.id,
+      public: flag,
+    }).then(data => {
+      refreshWorkspacesMeta();
+      toast('Updated');
+    });
+  };
+  const copyUrl = () => {
+    navigator.clipboard.writeText(shareUrl);
+    toast('Copied');
+  };
   return (
     <div>
       <StyledPublishContent>
-        <StyledPublishExplanation>
-          After publishing to the web, everyone can view the content of this
-          workspace through the link.
-        </StyledPublishExplanation>
-        <StyledSettingH2 marginTop={48}>Share with link</StyledSettingH2>
-        <StyledPublishCopyContainer>
-          <Input
-            width={500}
-            value={'www.baidu.com/asdsadas/asdsadasd'}
-            disabled
-          ></Input>
-          <StyledCopyButtonContainer>
-            <Button type="primary" shape="circle">
-              Copy Link
-            </Button>
-          </StyledCopyButtonContainer>
-        </StyledPublishCopyContainer>
+        {workspace.public ? (
+          <StyledPublishExplanation>
+            After publishing to the web, everyone can view the content of this
+            workspace through the link.
+          </StyledPublishExplanation>
+        ) : (
+          <>
+            <StyledPublishExplanation>
+              The current workspace has been published to the web, everyone can
+              view the contents of this workspace through the link.
+            </StyledPublishExplanation>
+            <StyledSettingH2 marginTop={48}>Share with link</StyledSettingH2>
+            <StyledPublishCopyContainer>
+              <Input width={500} value={shareUrl} disabled={true}></Input>
+              <StyledCopyButtonContainer>
+                <Button onClick={copyUrl} type="primary" shape="circle">
+                  Copy Link
+                </Button>
+              </StyledCopyButtonContainer>
+            </StyledPublishCopyContainer>
+          </>
+        )}
       </StyledPublishContent>
-      <Button type="primary" shape="circle">
-        Publish to web
-      </Button>
+      {!workspace.public ? (
+        <Button
+          onClick={() => {
+            togglePublic(true);
+          }}
+          type="primary"
+          shape="circle"
+        >
+          Publish to web
+        </Button>
+      ) : (
+        <Button
+          onClick={() => {
+            togglePublic(false);
+          }}
+          type="primary"
+          shape="circle"
+        >
+          Stop publishing
+        </Button>
+      )}
     </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 28ef05047a..98e4a60f84 100644
--- a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/SelectorPopperContent.tsx
+++ b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/SelectorPopperContent.tsx
@@ -103,10 +103,8 @@ export const SelectorPopperContent = ({
       workspaces[id] = workspace;
     });
 
-    console.log('workspaces', workspaces);
-
     setWorkspaces(workspaces);
-  }, []);
+  }, [workspacesMeta]);
 
   useEffect(() => {
     if (isShow) {
@@ -144,7 +142,7 @@ export const SelectorPopperContent = ({
                 workspaces[workspace.id]?.meta.name ||
                 (workspace.type === WorkspaceType.Private
                   ? user.name
-                  : `workspace-${workspace.id}`)
+                  : `loading...`) // workspace-${workspace.id}
               }
               memberCount={workSpaceDetails[workspace.id]?.memberCount || 1}
             />
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 44afbdfea9..835c3ec5e2 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
@@ -17,6 +17,7 @@ import {
 import { useState } from 'react';
 import { ModalCloseButton } from '@/ui/modal';
 import router from 'next/router';
+import { useAppState } from '@/providers/app-state-provider';
 
 interface WorkspaceCreateProps {
   open: boolean;
@@ -34,6 +35,7 @@ const DefaultHeadImgColors = [
 export const WorkspaceCreate = ({ open, onClose }: WorkspaceCreateProps) => {
   const [workspaceName, setWorkspaceId] = useState<string>('');
   const [canCreate, setCanCreate] = useState<boolean>(false);
+  const { refreshWorkspacesMeta } = useAppState();
   const handlerInputChange = (workspaceName: string) => {
     setWorkspaceId(workspaceName);
   };
@@ -74,6 +76,7 @@ export const WorkspaceCreate = ({ open, onClose }: WorkspaceCreateProps) => {
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         router.push(`/workspace/${data.created_at}`);
+        refreshWorkspacesMeta();
         onClose();
       })
       .catch(err => {
diff --git a/packages/app/src/pages/invite/[invite_code].tsx b/packages/app/src/pages/invite/[invite_code].tsx
index 3a2248c93f..2665681e71 100644
--- a/packages/app/src/pages/invite/[invite_code].tsx
+++ b/packages/app/src/pages/invite/[invite_code].tsx
@@ -21,10 +21,12 @@ const User = ({ name, avatar }: { name: string; avatar?: string }) => {
 export default function DevPage() {
   const router = useRouter();
   const [successInvited, setSuccessInvited] = useState<boolean>(false);
+  const [inviteData, setInviteData] = useState<any>(null);
   useEffect(() => {
     acceptInviting({ invitingCode: router.query.invite_code as string })
       .then(data => {
         setSuccessInvited(true);
+        setInviteData(data);
       })
       .catch(err => {
         console.log('err: ', err);
@@ -35,9 +37,13 @@ export default function DevPage() {
     <Invited>
       <div>
         <Empty width={310} height={310}></Empty>
+
         <Content>
-          <User name={'Svaney'}></User> invited you to join
-          <User name={'Dev Space'}></User>
+          <User name={inviteData?.name ? inviteData.name : '-'}></User> invited
+          you to join
+          <User
+            name={inviteData?.workspaceName ? inviteData.workspaceName : '-'}
+          ></User>
           {successInvited ? (
             <Status>
               <svg
diff --git a/packages/app/src/providers/app-state-provider/context.ts b/packages/app/src/providers/app-state-provider/context.ts
index 406a2be566..77e62140ac 100644
--- a/packages/app/src/providers/app-state-provider/context.ts
+++ b/packages/app/src/providers/app-state-provider/context.ts
@@ -23,6 +23,7 @@ export interface AppStateValue {
 
   editor: EditorContainer | null;
   synced: boolean;
+  refreshWorkspacesMeta: () => void;
 }
 
 export interface AppStateContext extends AppStateValue {
@@ -55,7 +56,7 @@ export const AppState = createContext<AppStateContext>({
   loadPage: () => Promise.resolve(null),
   createPage: () => Promise.resolve(null),
   synced: false,
-  // workspaces: {},
+  refreshWorkspacesMeta: () => {},
 });
 
 export const useAppState = () => {
diff --git a/packages/app/src/providers/app-state-provider/provider.tsx b/packages/app/src/providers/app-state-provider/provider.tsx
index f43c5e4006..aad9502b89 100644
--- a/packages/app/src/providers/app-state-provider/provider.tsx
+++ b/packages/app/src/providers/app-state-provider/provider.tsx
@@ -19,6 +19,13 @@ const DynamicBlocksuite = dynamic(() => import('./dynamic-blocksuite'), {
 });
 
 export const AppStateProvider = ({ children }: { children?: ReactNode }) => {
+  const refreshWorkspacesMeta = useCallback(async () => {
+    const workspacesMeta = await getWorkspaces().catch(() => {
+      return [];
+    });
+    setState(state => ({ ...state, workspacesMeta }));
+  }, []);
+
   const [state, setState] = useState<AppStateValue>({
     user: null,
     workspacesMeta: [],
@@ -29,6 +36,7 @@ export const AppStateProvider = ({ children }: { children?: ReactNode }) => {
     // Synced is used to ensure that the provider has synced with the server,
     // So after Synced set to true, the other state is sure to be set.
     synced: false,
+    refreshWorkspacesMeta,
   });
 
   const [loadWorkspaceHandler, _setLoadWorkspaceHandler] =
diff --git a/packages/data-services/src/sdks/workspace.ts b/packages/data-services/src/sdks/workspace.ts
index 4b362709a6..17aa3f4e39 100644
--- a/packages/data-services/src/sdks/workspace.ts
+++ b/packages/data-services/src/sdks/workspace.ts
@@ -1,4 +1,4 @@
-import { client } from '../request';
+import { client, bareClient } from '../request';
 import { User } from './user';
 
 export interface GetWorkspaceDetailParams {
@@ -142,7 +142,7 @@ export interface AcceptInvitingParams {
 export async function acceptInviting(
   params: AcceptInvitingParams
 ): Promise<void> {
-  await client.post(`/api/invitation/${params.invitingCode}`);
+  await bareClient.post(`/api/invitation/${params.invitingCode}`);
 }
 
 export interface DownloadWOrkspaceParams {
@@ -155,7 +155,7 @@ export async function downloadWorkspace(
 }
 
 export async function uploadBlob(params: { blob: Blob }): Promise<string> {
-  return client.post('/api/blob', { body: params.blob }).text();
+  return client.put('/api/blob', { body: params.blob }).text();
 }
 
 export async function getBlob(params: {