diff --git a/web/components/emoji-icon-picker/index.tsx b/web/components/emoji-icon-picker/index.tsx
index ab4eb022e..d1f7fe651 100644
--- a/web/components/emoji-icon-picker/index.tsx
+++ b/web/components/emoji-icon-picker/index.tsx
@@ -25,17 +25,12 @@ const tabOptions = [
   },
 ];
 
-const EmojiIconPicker: React.FC<Props> = ({
-  label,
-  value,
-  onChange,
-  onIconColorChange,
-  disabled = false,
-}) => {
+const EmojiIconPicker: React.FC<Props> = (props) => {
+  const { label, value, onChange, onIconColorChange, disabled = false } = props;
+  // states
   const [isOpen, setIsOpen] = useState(false);
   const [openColorPicker, setOpenColorPicker] = useState(false);
   const [activeColor, setActiveColor] = useState<string>("rgb(var(--color-text-200))");
-
   const [recentEmojis, setRecentEmojis] = useState<string[]>([]);
 
   const emojiPickerRef = useRef<HTMLDivElement>(null);
@@ -52,11 +47,7 @@ const EmojiIconPicker: React.FC<Props> = ({
 
   return (
     <Popover className="relative z-[1]">
-      <Popover.Button
-        onClick={() => setIsOpen((prev) => !prev)}
-        className="outline-none"
-        disabled={disabled}
-      >
+      <Popover.Button onClick={() => setIsOpen((prev) => !prev)} className="outline-none" disabled={disabled}>
         {label}
       </Popover.Button>
       <Transition
@@ -139,15 +130,7 @@ const EmojiIconPicker: React.FC<Props> = ({
                   <Tab.Panel className="flex h-full w-full flex-col justify-center">
                     <div className="relative">
                       <div className="flex items-center justify-between px-1 pb-2">
-                        {[
-                          "#FF6B00",
-                          "#8CC1FF",
-                          "#FCBE1D",
-                          "#18904F",
-                          "#ADF672",
-                          "#05C3FF",
-                          "#000000",
-                        ].map((curCol) => (
+                        {["#FF6B00", "#8CC1FF", "#FCBE1D", "#18904F", "#ADF672", "#05C3FF", "#000000"].map((curCol) => (
                           <span
                             key={curCol}
                             className="h-4 w-4 cursor-pointer rounded-full"
@@ -168,9 +151,7 @@ const EmojiIconPicker: React.FC<Props> = ({
                       </div>
                       <div>
                         <TwitterPicker
-                          className={`!absolute top-4 left-4 z-10 m-2 ${
-                            openColorPicker ? "block" : "hidden"
-                          }`}
+                          className={`!absolute top-4 left-4 z-10 m-2 ${openColorPicker ? "block" : "hidden"}`}
                           color={activeColor}
                           onChange={(color) => {
                             setActiveColor(color.hex);
@@ -193,10 +174,7 @@ const EmojiIconPicker: React.FC<Props> = ({
                             setIsOpen(false);
                           }}
                         >
-                          <span
-                            style={{ color: activeColor }}
-                            className="material-symbols-rounded text-lg"
-                          >
+                          <span style={{ color: activeColor }} className="material-symbols-rounded text-lg">
                             {icon.name}
                           </span>
                         </button>
diff --git a/web/components/project/publish-project/index.tsx b/web/components/project/publish-project/index.tsx
new file mode 100644
index 000000000..6bebc086c
--- /dev/null
+++ b/web/components/project/publish-project/index.tsx
@@ -0,0 +1,2 @@
+export * from "./modal";
+export * from "./popover";
diff --git a/web/components/project/publish-project/modal.tsx b/web/components/project/publish-project/modal.tsx
index b9430285f..51ad8c9aa 100644
--- a/web/components/project/publish-project/modal.tsx
+++ b/web/components/project/publish-project/modal.tsx
@@ -61,19 +61,17 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
   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 { setToastAlert } = useToast();
-
+  // form info
   const {
     control,
     formState: { isSubmitting },
@@ -87,7 +85,6 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
 
   const handleClose = () => {
     projectPublish.handleProjectModal(null);
-
     setIsUpdateRequired(false);
     reset({ ...defaultValues });
   };
diff --git a/web/components/project/sidebar-list-item.tsx b/web/components/project/sidebar-list-item.tsx
index b88e77c44..f769ce4c1 100644
--- a/web/components/project/sidebar-list-item.tsx
+++ b/web/components/project/sidebar-list-item.tsx
@@ -16,11 +16,9 @@ import {
   PhotoFilterOutlined,
   SettingsOutlined,
 } from "@mui/icons-material";
+import { PenSquare } from "lucide-react";
 // hooks
 import useToast from "hooks/use-toast";
-// ui
-import { CustomMenu, Icon, Tooltip } from "components/ui";
-import { PenSquare } from "lucide-react";
 // helpers
 import { renderEmoji } from "helpers/emoji.helper";
 // types
@@ -29,7 +27,9 @@ import { IProject } from "types";
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
 // components
+import { CustomMenu, Icon, Tooltip } from "components/ui";
 import { LeaveProjectModal, DeleteProjectModal } from "components/project";
+import { PublishProjectModal } from "components/project/publish-project";
 
 type Props = {
   project: IProject;
@@ -132,6 +132,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
 
   return (
     <>
+      <PublishProjectModal />
       <DeleteProjectModal project={project} isOpen={deleteProjectModalOpen} onClose={handleDeleteProjectModalClose} />
       <LeaveProjectModal project={project} isOpen={leaveProjectModalOpen} onClose={handleLeaveProjectModalClose} />
       <Disclosure key={project.id} defaultOpen={projectId === project.id}>
diff --git a/web/components/project/sidebar-list.tsx b/web/components/project/sidebar-list.tsx
index ce6d22b88..559de380a 100644
--- a/web/components/project/sidebar-list.tsx
+++ b/web/components/project/sidebar-list.tsx
@@ -1,18 +1,15 @@
 import React, { useState, FC, useRef, useEffect } from "react";
 import { useRouter } from "next/router";
-import useSWR, { mutate } from "swr";
+import useSWR from "swr";
 import { DragDropContext, Draggable, DropResult, Droppable } from "react-beautiful-dnd";
 import { Disclosure, Transition } from "@headlessui/react";
 import { observer } from "mobx-react-lite";
 // hooks
 import useToast from "hooks/use-toast";
 import useUserAuth from "hooks/use-user-auth";
-import useProjects from "hooks/use-projects";
 // components
-import { CreateProjectModal, ProjectSidebarListItem, LeaveProjectModal } from "components/project";
-import { PublishProjectModal } from "components/project/publish-project/modal";
-// services
-import projectService from "services/project.service";
+import { CreateProjectModal, ProjectSidebarListItem } from "components/project";
+
 // icons
 import { Icon } from "components/ui";
 import { PlusIcon } from "@heroicons/react/24/outline";
@@ -21,13 +18,11 @@ import { copyTextToClipboard } from "helpers/string.helper";
 import { orderArrayBy } from "helpers/array.helper";
 // types
 import { IProject } from "types";
-// fetch-keys
-import { PROJECTS_LIST } from "constants/fetch-keys";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 
 export const ProjectSidebarList: FC = observer(() => {
-  const { theme: themeStore, workspace: workspaceStore, project: projectStore } = useMobxStore();
+  const { theme: themeStore, project: projectStore } = useMobxStore();
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
@@ -80,7 +75,7 @@ export const ProjectSidebarList: FC = observer(() => {
 
     projectStore
       .updateProjectView(workspaceSlug.toString(), draggableId, { sort_order: updatedSortOrder })
-      .catch((error) => {
+      .catch(() => {
         setToastAlert({
           type: "error",
           title: "Error!",
@@ -118,8 +113,6 @@ export const ProjectSidebarList: FC = observer(() => {
         setToFavorite={isFavoriteProjectCreate}
         user={user}
       />
-      {/* publish project modal */}
-      <PublishProjectModal />
       <div
         ref={containerRef}
         className={`h-full overflow-y-auto px-4 space-y-3 pt-3 ${