diff --git a/web/components/headers/project-issues.tsx b/web/components/headers/project-issues.tsx
index 05f88cf75..f1cdef4c0 100644
--- a/web/components/headers/project-issues.tsx
+++ b/web/components/headers/project-issues.tsx
@@ -1,9 +1,9 @@
-import { useCallback, useState, FC } from "react";
+import { useCallback, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-import { ArrowLeft, Plus } from "lucide-react";
-// hooks
+import { ArrowLeft, Circle, ExternalLink, Plus } from "lucide-react";
+// mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
@@ -17,7 +17,7 @@ import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
 // helper
 import { truncateText } from "helpers/string.helper";
 
-export const ProjectIssuesHeader: FC = observer(() => {
+export const ProjectIssuesHeader: React.FC = observer(() => {
   const [analyticsModal, setAnalyticsModal] = useState(false);
 
   const router = useRouter();
@@ -93,6 +93,8 @@ export const ProjectIssuesHeader: FC = observer(() => {
 
   const inboxDetails = projectId ? inboxStore.inboxesList?.[projectId.toString()]?.[0] : undefined;
 
+  const deployUrl = process.env.NEXT_PUBLIC_DEPLOY_URL;
+
   return (
     <>
       <ProjectAnalyticsModal
@@ -125,6 +127,18 @@ export const ProjectIssuesHeader: FC = observer(() => {
               <BreadcrumbItem title={`${truncateText(projectDetails?.name ?? "Project", 32)} Issues`} />
             </Breadcrumbs>
           </div>
+          {projectDetails?.is_deployed && deployUrl && (
+            <a
+              href={`${deployUrl}/${workspaceSlug}/${projectDetails?.id}`}
+              className="group bg-custom-primary-100/20 text-custom-primary-100 px-2.5 py-1 text-xs flex items-center gap-1.5 rounded font-medium"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Circle className="h-1.5 w-1.5 fill-custom-primary-100" strokeWidth={2} />
+              Public
+              <ExternalLink className="h-3 w-3 hidden group-hover:block" strokeWidth={2} />
+            </a>
+          )}
         </div>
         <div className="flex items-center gap-2">
           <LayoutSelection
diff --git a/web/components/issues/issue-layouts/calendar/calendar.tsx b/web/components/issues/issue-layouts/calendar/calendar.tsx
index 9cc95540d..8b31c1eaf 100644
--- a/web/components/issues/issue-layouts/calendar/calendar.tsx
+++ b/web/components/issues/issue-layouts/calendar/calendar.tsx
@@ -40,14 +40,15 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
         <CalendarHeader />
         <CalendarWeekHeader isLoading={!issues} showWeekends={showWeekends} />
         <div className="h-full w-full overflow-y-auto">
-          {layout === "month" ? (
+          {layout === "month" && (
             <div className="h-full w-full grid grid-cols-1 divide-y-[0.5px] divide-custom-border-200">
               {allWeeksOfActiveMonth &&
                 Object.values(allWeeksOfActiveMonth).map((week: ICalendarWeek, weekIndex) => (
                   <CalendarWeekDays key={weekIndex} week={week} issues={issues} quickActions={quickActions} />
                 ))}
             </div>
-          ) : (
+          )}
+          {layout === "week" && (
             <CalendarWeekDays week={calendarStore.allDaysOfActiveWeek} issues={issues} quickActions={quickActions} />
           )}
         </div>
diff --git a/web/components/project/index.ts b/web/components/project/index.ts
index 9191a88bc..ff0213d52 100644
--- a/web/components/project/index.ts
+++ b/web/components/project/index.ts
@@ -15,3 +15,4 @@ export * from "./join-project-modal";
 export * from "./form";
 export * from "./form-loader";
 export * from "./delete-project-section";
+export * from "./publish-project";
diff --git a/web/components/project/publish-project/modal.tsx b/web/components/project/publish-project/modal.tsx
index 85f8c4171..fe31dfe65 100644
--- a/web/components/project/publish-project/modal.tsx
+++ b/web/components/project/publish-project/modal.tsx
@@ -1,27 +1,24 @@
 import React, { useEffect, useState } from "react";
-// next imports
 import { useRouter } from "next/router";
-// react-hook-form
+import { observer } from "mobx-react-lite";
 import { Controller, useForm } from "react-hook-form";
-// headless ui
 import { Dialog, Transition } from "@headlessui/react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // ui components
 import { Button, Loader, ToggleSwitch } from "@plane/ui";
 import { Check, CircleDot, Globe2 } from "lucide-react";
 import { CustomPopover } from "./popover";
-// mobx react lite
-import { observer } from "mobx-react-lite";
-// mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
 import { IProjectPublishSettings, TProjectPublishViews } from "store/project";
 // hooks
 import useToast from "hooks/use-toast";
-import useProjectDetails from "hooks/use-project-details";
-import useUser from "hooks/use-user";
+// types
+import { IProject } from "types";
 
 type Props = {
-  // user: IUser | undefined;
+  isOpen: boolean;
+  project: IProject;
+  onClose: () => void;
 };
 
 type FormData = {
@@ -53,26 +50,24 @@ const viewOptions: {
   // { key: "spreadsheet", label: "Spreadsheet" },
 ];
 
-export const PublishProjectModal: React.FC<Props> = observer(() => {
+export const PublishProjectModal: React.FC<Props> = observer((props) => {
+  const { isOpen, project, onClose } = props;
+
   const [isUnpublishing, setIsUnpublishing] = useState(false);
   const [isUpdateRequired, setIsUpdateRequired] = useState(false);
 
   let plane_deploy_url = process.env.NEXT_PUBLIC_DEPLOY_URL;
 
-  if (typeof window !== "undefined" && !plane_deploy_url) {
+  if (typeof window !== "undefined" && !plane_deploy_url)
     plane_deploy_url = window.location.protocol + "//" + window.location.host + "/spaces";
-  }
-  // router
+
   const router = useRouter();
   const { workspaceSlug } = router.query;
-  // store
-  const store: RootStore = useMobxStore();
-  const { projectPublish } = store;
-  // hooks
-  const { user } = useUser();
-  const { mutateProjectDetails } = useProjectDetails();
+
+  const { projectPublish: projectPublishStore } = useMobxStore();
+
   const { setToastAlert } = useToast();
-  // form info
+
   const {
     control,
     formState: { isSubmitting },
@@ -80,23 +75,27 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
     handleSubmit,
     reset,
     watch,
-  } = useForm<FormData>({
+  } = useForm({
     defaultValues,
   });
 
   const handleClose = () => {
-    projectPublish.handleProjectModal(null);
+    onClose();
+
     setIsUpdateRequired(false);
     reset({ ...defaultValues });
   };
 
   // prefill form with the saved settings if the project is already published
   useEffect(() => {
-    if (projectPublish.projectPublishSettings && projectPublish.projectPublishSettings !== "not-initialized") {
+    if (
+      projectPublishStore.projectPublishSettings &&
+      projectPublishStore.projectPublishSettings !== "not-initialized"
+    ) {
       let userBoards: TProjectPublishViews[] = [];
 
-      if (projectPublish.projectPublishSettings?.views) {
-        const savedViews = projectPublish.projectPublishSettings?.views;
+      if (projectPublishStore.projectPublishSettings?.views) {
+        const savedViews = projectPublishStore.projectPublishSettings?.views;
 
         if (!savedViews) return;
 
@@ -110,61 +109,46 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
       }
 
       const updatedData = {
-        id: projectPublish.projectPublishSettings?.id || null,
-        comments: projectPublish.projectPublishSettings?.comments || false,
-        reactions: projectPublish.projectPublishSettings?.reactions || false,
-        votes: projectPublish.projectPublishSettings?.votes || false,
-        inbox: projectPublish.projectPublishSettings?.inbox || null,
+        id: projectPublishStore.projectPublishSettings?.id || null,
+        comments: projectPublishStore.projectPublishSettings?.comments || false,
+        reactions: projectPublishStore.projectPublishSettings?.reactions || false,
+        votes: projectPublishStore.projectPublishSettings?.votes || false,
+        inbox: projectPublishStore.projectPublishSettings?.inbox || null,
         views: userBoards,
       };
 
       reset({ ...updatedData });
     }
-  }, [reset, projectPublish.projectPublishSettings]);
+  }, [reset, projectPublishStore.projectPublishSettings]);
 
   // fetch publish settings
   useEffect(() => {
-    if (!workspaceSlug) return;
+    if (!workspaceSlug || !isOpen) return;
 
-    if (
-      projectPublish.projectPublishModal &&
-      projectPublish.project_id !== null &&
-      projectPublish?.projectPublishSettings === "not-initialized"
-    ) {
-      projectPublish.getProjectSettingsAsync(workspaceSlug.toString(), projectPublish.project_id, null);
+    if (projectPublishStore.projectPublishSettings === "not-initialized") {
+      projectPublishStore.getProjectSettingsAsync(workspaceSlug.toString(), project.id);
     }
-  }, [workspaceSlug, projectPublish, projectPublish.projectPublishModal]);
+  }, [isOpen, workspaceSlug, project, projectPublishStore]);
 
   const handlePublishProject = async (payload: IProjectPublishSettings) => {
-    if (!workspaceSlug || !user) return;
+    if (!workspaceSlug) return;
 
-    const projectId = projectPublish.project_id;
-
-    return projectPublish
-      .publishProject(workspaceSlug.toString(), projectId?.toString() ?? "", payload, user)
+    return projectPublishStore
+      .publishProject(workspaceSlug.toString(), project.id, payload)
       .then((res) => {
-        mutateProjectDetails();
         handleClose();
-        if (projectId) window.open(`${plane_deploy_url}/${workspaceSlug}/${projectId}`, "_blank");
+        // window.open(`${plane_deploy_url}/${workspaceSlug}/${project.id}`, "_blank");
         return res;
       })
       .catch((err) => err);
   };
 
   const handleUpdatePublishSettings = async (payload: IProjectPublishSettings) => {
-    if (!workspaceSlug || !user) return;
+    if (!workspaceSlug) return;
 
-    await projectPublish
-      .updateProjectSettingsAsync(
-        workspaceSlug.toString(),
-        projectPublish.project_id?.toString() ?? "",
-        payload.id ?? "",
-        payload,
-        user
-      )
+    await projectPublishStore
+      .updateProjectSettingsAsync(workspaceSlug.toString(), project.id, payload.id ?? "", payload)
       .then((res) => {
-        mutateProjectDetails();
-
         setToastAlert({
           type: "success",
           title: "Success!",
@@ -185,15 +169,19 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
 
     setIsUnpublishing(true);
 
-    projectPublish
-      .unPublishProject(workspaceSlug.toString(), projectPublish.project_id as string, publishId, null)
+    await projectPublishStore
+      .unPublishProject(workspaceSlug.toString(), project.id, publishId)
       .then((res) => {
-        mutateProjectDetails();
-
         handleClose();
         return res;
       })
-      .catch((err) => err)
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Something went wrong while unpublishing the project.",
+        })
+      )
       .finally(() => setIsUnpublishing(false));
   };
 
@@ -242,15 +230,16 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
       },
     };
 
-    if (watch("id")) await handleUpdatePublishSettings({ id: watch("id") ?? "", ...payload });
+    if (project.is_deployed) await handleUpdatePublishSettings({ id: watch("id") ?? "", ...payload });
     else await handlePublishProject(payload);
   };
 
   // check if an update is required or not
   const checkIfUpdateIsRequired = () => {
-    if (!projectPublish.projectPublishSettings || projectPublish.projectPublishSettings === "not-initialized") return;
+    if (!projectPublishStore.projectPublishSettings || projectPublishStore.projectPublishSettings === "not-initialized")
+      return;
 
-    const currentSettings = projectPublish.projectPublishSettings as IProjectPublishSettings;
+    const currentSettings = projectPublishStore.projectPublishSettings as IProjectPublishSettings;
     const newSettings = getValues();
 
     if (
@@ -276,7 +265,7 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
   };
 
   return (
-    <Transition.Root show={projectPublish.projectPublishModal} as={React.Fragment}>
+    <Transition.Root show={isOpen} as={React.Fragment}>
       <Dialog as="div" className="relative z-20" onClose={handleClose}>
         <Transition.Child
           as={React.Fragment}
@@ -301,12 +290,12 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="transform rounded-lg bg-custom-background-100 border border-custom-border-100 text-left shadow-xl transition-all w-full sm:w-3/5 lg:w-1/2 xl:w-2/5 ">
+              <Dialog.Panel className="transform rounded-lg bg-custom-background-100 border border-custom-border-100 text-left shadow-xl transition-all w-full sm:w-3/5 lg:w-1/2 xl:w-2/5">
                 <form onSubmit={handleSubmit(handleFormSubmit)} className="space-y-4">
                   {/* heading */}
                   <div className="px-6 pt-4 flex items-center justify-between gap-2">
                     <h5 className="font-semibold text-xl inline-block">Publish</h5>
-                    {projectPublish.projectPublishSettings !== "not-initialized" && (
+                    {project.is_deployed && (
                       <Button
                         variant="danger"
                         onClick={() => handleUnpublishProject(watch("id") ?? "")}
@@ -318,7 +307,7 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
                   </div>
 
                   {/* content */}
-                  {projectPublish.fetchSettingsLoader ? (
+                  {projectPublishStore.fetchSettingsLoader ? (
                     <Loader className="px-6 space-y-4">
                       <Loader.Item height="30px" />
                       <Loader.Item height="30px" />
@@ -327,16 +316,14 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
                     </Loader>
                   ) : (
                     <div className="px-6">
-                      {watch("id") && (
+                      {project.is_deployed && (
                         <>
                           <div className="border border-custom-border-100 bg-custom-background-80 rounded-md px-3 py-2 relative flex gap-2 items-center">
                             <div className="truncate flex-grow text-sm">
-                              {`${plane_deploy_url}/${workspaceSlug}/${projectPublish.project_id}`}
+                              {`${plane_deploy_url}/${workspaceSlug}/${project.id}`}
                             </div>
                             <div className="flex-shrink-0 relative flex items-center gap-1">
-                              <CopyLinkToClipboard
-                                copy_link={`${plane_deploy_url}/${workspaceSlug}/${projectPublish.project_id}`}
-                              />
+                              <CopyLinkToClipboard copy_link={`${plane_deploy_url}/${workspaceSlug}/${project.id}`} />
                             </div>
                           </div>
                           <div className="flex items-center gap-1 text-custom-primary-100 mt-3">
@@ -454,6 +441,7 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
                           />
                         </div>
 
+                        {/* toggle inbox */}
                         {/* <div className="relative flex justify-between items-center gap-2">
                       <div className="text-sm">Allow issue proposals</div>
                       <Controller
@@ -474,12 +462,12 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
                       <Globe2 className="h-4 w-4" />
                       <div className="text-sm">Anyone with the link can access</div>
                     </div>
-                    {!projectPublish.fetchSettingsLoader && (
+                    {!projectPublishStore.fetchSettingsLoader && (
                       <div className="relative flex items-center gap-2">
                         <Button variant="neutral-primary" onClick={handleClose}>
                           Cancel
                         </Button>
-                        {watch("id") ? (
+                        {project.is_deployed ? (
                           <>
                             {isUpdateRequired && (
                               <Button variant="primary" type="submit" loading={isSubmitting}>
diff --git a/web/components/project/sidebar-list-item.tsx b/web/components/project/sidebar-list-item.tsx
index abc115001..b6ba327fe 100644
--- a/web/components/project/sidebar-list-item.tsx
+++ b/web/components/project/sidebar-list-item.tsx
@@ -27,8 +27,7 @@ import { IProject } from "types";
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { CustomMenu, Tooltip, ArchiveIcon, PhotoFilterIcon, DiceIcon, ContrastIcon, LayersIcon } from "@plane/ui";
-import { LeaveProjectModal, DeleteProjectModal } from "components/project";
-import { PublishProjectModal } from "components/project/publish-project";
+import { LeaveProjectModal, DeleteProjectModal, PublishProjectModal } from "components/project";
 
 type Props = {
   project: IProject;
@@ -74,7 +73,7 @@ const navigation = (workspaceSlug: string, projectId: string) => [
 export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
   const { project, provided, snapshot, handleCopyText, shortContextMenu = false } = props;
   // store
-  const { projectPublish, project: projectStore, theme: themeStore } = useMobxStore();
+  const { project: projectStore, theme: themeStore } = useMobxStore();
   // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
@@ -83,6 +82,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
   // states
   const [leaveProjectModalOpen, setLeaveProjectModal] = useState(false);
   const [deleteProjectModalOpen, setDeleteProjectModal] = useState(false);
+  const [publishModalOpen, setPublishModal] = useState(false);
 
   const isAdmin = project.member_role === 20;
   const isViewerOrGuest = project.member_role === 10 || project.member_role === 5;
@@ -132,7 +132,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
 
   return (
     <>
-      <PublishProjectModal />
+      <PublishProjectModal isOpen={publishModalOpen} project={project} onClose={() => setPublishModal(false)} />
       <DeleteProjectModal project={project} isOpen={deleteProjectModalOpen} onClose={handleDeleteProjectModalClose} />
       <LeaveProjectModal project={project} isOpen={leaveProjectModalOpen} onClose={handleLeaveProjectModalClose} />
       <Disclosure key={project.id} defaultOpen={projectId === project.id}>
@@ -239,7 +239,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
 
                   {/* publish project settings */}
                   {isAdmin && (
-                    <CustomMenu.MenuItem onClick={() => projectPublish.handleProjectModal(project?.id)}>
+                    <CustomMenu.MenuItem onClick={() => setPublishModal(true)}>
                       <div className="flex-shrink-0 relative flex items-center justify-start gap-2">
                         <div className="rounded transition-all w-4 h-4 flex justify-center items-center text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 duration-300 cursor-pointer">
                           <Share2 className="h-3.5 w-3.5 stroke-[1.5]" />
diff --git a/web/store/project/project.store.ts b/web/store/project/project.store.ts
index ea94fc35e..3c3678e06 100644
--- a/web/store/project/project.store.ts
+++ b/web/store/project/project.store.ts
@@ -273,9 +273,9 @@ export class ProjectStore implements IProjectStore {
   };
 
   getProjectById = (workspaceSlug: string, projectId: string) => {
-    if (!this.projectId) return null;
     const projects = this.projects?.[workspaceSlug];
     if (!projects) return null;
+
     const projectInfo: IProject | null = projects.find((project) => project.id === projectId) || null;
     return projectInfo;
   };
diff --git a/web/store/project/project_publish.store.ts b/web/store/project/project_publish.store.ts
index 4d089e970..ed427cdbe 100644
--- a/web/store/project/project_publish.store.ts
+++ b/web/store/project/project_publish.store.ts
@@ -25,88 +25,67 @@ export interface IProjectPublishStore {
   fetchSettingsLoader: boolean;
   error: any | null;
 
-  projectPublishModal: boolean;
-  project_id: string | null;
   projectPublishSettings: IProjectPublishSettings | "not-initialized";
 
-  handleProjectModal: (project_id: string | null) => void;
-
-  getProjectSettingsAsync: (workspace_slug: string, project_slug: string, user: any) => Promise<void>;
-  publishProject: (
-    workspace_slug: string,
-    project_slug: string,
-    data: IProjectPublishSettings,
-    user: any
-  ) => Promise<void>;
+  getProjectSettingsAsync: (workspaceSlug: string, projectId: string) => Promise<void>;
+  publishProject: (workspaceSlug: string, projectId: string, data: IProjectPublishSettings) => Promise<void>;
   updateProjectSettingsAsync: (
-    workspace_slug: string,
-    project_slug: string,
-    project_publish_id: string,
-    data: IProjectPublishSettings,
-    user: any
-  ) => Promise<void>;
-  unPublishProject: (
-    workspace_slug: string,
-    project_slug: string,
-    project_publish_id: string,
-    user: any
+    workspaceSlug: string,
+    projectId: string,
+    projectPublishId: string,
+    data: IProjectPublishSettings
   ) => Promise<void>;
+  unPublishProject: (workspaceSlug: string, projectId: string, projectPublishId: string) => Promise<void>;
 }
 
 export class ProjectPublishStore implements IProjectPublishStore {
+  // states
   generalLoader: boolean = false;
   fetchSettingsLoader: boolean = false;
   error: any | null = null;
 
-  projectPublishModal: boolean = false;
+  // actions
   project_id: string | null = null;
   projectPublishSettings: IProjectPublishSettings | "not-initialized" = "not-initialized";
 
   // root store
   rootStore;
-  // service
+
+  // services
   projectPublishService;
 
   constructor(_rootStore: RootStore) {
     makeObservable(this, {
-      // observable
+      // states
       generalLoader: observable,
       fetchSettingsLoader: observable,
       error: observable,
 
-      projectPublishModal: observable,
+      // observables
       project_id: observable,
       projectPublishSettings: observable.ref,
-      // action
-      handleProjectModal: action,
+
+      // actions
       getProjectSettingsAsync: action,
       publishProject: action,
       updateProjectSettingsAsync: action,
       unPublishProject: action,
-      // computed
     });
 
     this.rootStore = _rootStore;
+
+    // services
     this.projectPublishService = new ProjectPublishService();
   }
 
-  handleProjectModal = (project_id: string | null = null) => {
-    if (project_id) {
-      this.projectPublishModal = !this.projectPublishModal;
-      this.project_id = project_id;
-    } else {
-      this.projectPublishModal = !this.projectPublishModal;
-      this.project_id = null;
-      this.projectPublishSettings = "not-initialized";
-    }
-  };
-
-  getProjectSettingsAsync = async (workspace_slug: string, project_slug: string) => {
+  getProjectSettingsAsync = async (workspaceSlug: string, projectId: string) => {
     try {
-      this.fetchSettingsLoader = true;
-      this.error = null;
+      runInAction(() => {
+        this.fetchSettingsLoader = true;
+        this.error = null;
+      });
 
-      const response = await this.projectPublishService.getProjectSettingsAsync(workspace_slug, project_slug);
+      const response = await this.projectPublishService.getProjectSettingsAsync(workspaceSlug, projectId);
 
       if (response && response.length > 0) {
         const _projectPublishSettings: IProjectPublishSettings = {
@@ -131,24 +110,31 @@ export class ProjectPublishStore implements IProjectPublishStore {
           this.error = null;
         });
       } else {
-        this.projectPublishSettings = "not-initialized";
-        this.fetchSettingsLoader = false;
-        this.error = null;
+        runInAction(() => {
+          this.projectPublishSettings = "not-initialized";
+          this.fetchSettingsLoader = false;
+          this.error = null;
+        });
       }
       return response;
     } catch (error) {
-      this.fetchSettingsLoader = false;
-      this.error = error;
+      runInAction(() => {
+        this.fetchSettingsLoader = false;
+        this.error = error;
+      });
+
       return error;
     }
   };
 
-  publishProject = async (workspace_slug: string, project_slug: string, data: IProjectPublishSettings) => {
+  publishProject = async (workspaceSlug: string, projectId: string, data: IProjectPublishSettings) => {
     try {
-      this.generalLoader = true;
-      this.error = null;
+      runInAction(() => {
+        this.generalLoader = true;
+        this.error = null;
+      });
 
-      const response = await this.projectPublishService.createProjectSettingsAsync(workspace_slug, project_slug, data);
+      const response = await this.projectPublishService.createProjectSettingsAsync(workspaceSlug, projectId, data);
 
       if (response) {
         const _projectPublishSettings: IProjectPublishSettings = {
@@ -163,6 +149,20 @@ export class ProjectPublishStore implements IProjectPublishStore {
 
         runInAction(() => {
           this.projectPublishSettings = _projectPublishSettings;
+          this.rootStore.project.projects = {
+            ...this.rootStore.project.projects,
+            [workspaceSlug]: this.rootStore.project.projects[workspaceSlug].map((p) => ({
+              ...p,
+              is_deployed: p.id === projectId ? true : p.is_deployed,
+            })),
+          };
+          this.rootStore.project.project_details = {
+            ...this.rootStore.project.project_details,
+            [projectId]: {
+              ...this.rootStore.project.project_details[projectId],
+              is_deployed: true,
+            },
+          };
           this.generalLoader = false;
           this.error = null;
         });
@@ -170,26 +170,31 @@ export class ProjectPublishStore implements IProjectPublishStore {
         return response;
       }
     } catch (error) {
-      this.generalLoader = false;
-      this.error = error;
+      runInAction(() => {
+        this.generalLoader = false;
+        this.error = error;
+      });
+
       return error;
     }
   };
 
   updateProjectSettingsAsync = async (
-    workspace_slug: string,
-    project_slug: string,
-    project_publish_id: string,
+    workspaceSlug: string,
+    projectId: string,
+    projectPublishId: string,
     data: IProjectPublishSettings
   ) => {
     try {
-      this.generalLoader = true;
-      this.error = null;
+      runInAction(() => {
+        this.generalLoader = true;
+        this.error = null;
+      });
 
       const response = await this.projectPublishService.updateProjectSettingsAsync(
-        workspace_slug,
-        project_slug,
-        project_publish_id,
+        workspaceSlug,
+        projectId,
+        projectPublishId,
         data
       );
 
@@ -213,33 +218,55 @@ export class ProjectPublishStore implements IProjectPublishStore {
         return response;
       }
     } catch (error) {
-      this.generalLoader = false;
-      this.error = error;
+      runInAction(() => {
+        this.generalLoader = false;
+        this.error = error;
+      });
+
       return error;
     }
   };
 
-  unPublishProject = async (workspace_slug: string, project_slug: string, project_publish_id: string) => {
+  unPublishProject = async (workspaceSlug: string, projectId: string, projectPublishId: string) => {
     try {
-      this.generalLoader = true;
-      this.error = null;
+      runInAction(() => {
+        this.generalLoader = true;
+        this.error = null;
+      });
 
       const response = await this.projectPublishService.deleteProjectSettingsAsync(
-        workspace_slug,
-        project_slug,
-        project_publish_id
+        workspaceSlug,
+        projectId,
+        projectPublishId
       );
 
       runInAction(() => {
         this.projectPublishSettings = "not-initialized";
+        this.rootStore.project.projects = {
+          ...this.rootStore.project.projects,
+          [workspaceSlug]: this.rootStore.project.projects[workspaceSlug].map((p) => ({
+            ...p,
+            is_deployed: p.id === projectId ? false : p.is_deployed,
+          })),
+        };
+        this.rootStore.project.project_details = {
+          ...this.rootStore.project.project_details,
+          [projectId]: {
+            ...this.rootStore.project.project_details[projectId],
+            is_deployed: false,
+          },
+        };
         this.generalLoader = false;
         this.error = null;
       });
 
       return response;
     } catch (error) {
-      this.generalLoader = false;
-      this.error = error;
+      runInAction(() => {
+        this.generalLoader = false;
+        this.error = error;
+      });
+
       return error;
     }
   };