diff --git a/web/components/command-palette/command-pallette.tsx b/web/components/command-palette/command-pallette.tsx
index e926c7474..a4f5279a2 100644
--- a/web/components/command-palette/command-pallette.tsx
+++ b/web/components/command-palette/command-pallette.tsx
@@ -55,6 +55,8 @@ export const CommandPalette: FC = observer(() => {
     toggleBulkDeleteIssueModal,
     isDeleteIssueModalOpen,
     toggleDeleteIssueModal,
+
+    createIssueStoreType,
   } = commandPalette;
 
   const isAnyModalOpen = Boolean(
@@ -224,6 +226,7 @@ export const CommandPalette: FC = observer(() => {
         prePopulateData={
           cycleId ? { cycle: cycleId.toString() } : moduleId ? { module: moduleId.toString() } : undefined
         }
+        currentStore={createIssueStoreType}
       />
 
       {issueId && issueDetails && (
diff --git a/web/components/headers/cycle-issues.tsx b/web/components/headers/cycle-issues.tsx
index 5353adbbe..5ee80d68c 100644
--- a/web/components/headers/cycle-issues.tsx
+++ b/web/components/headers/cycle-issues.tsx
@@ -20,6 +20,7 @@ import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOption
 // constants
 import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
 import { EFilterType } from "store/issues/types";
+import { EProjectStore } from "store/command-palette.store";
 
 export const CycleIssuesHeader: React.FC = observer(() => {
   const [analyticsModal, setAnalyticsModal] = useState(false);
@@ -33,7 +34,6 @@ export const CycleIssuesHeader: React.FC = observer(() => {
 
   const {
     cycle: cycleStore,
-    cycleIssueFilters: cycleIssueFiltersStore,
     projectIssuesFilter: projectIssueFiltersStore,
     project: { currentProjectDetails },
     projectMember: { projectMembers },
@@ -190,11 +190,14 @@ export const CycleIssuesHeader: React.FC = observer(() => {
           <Button onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
             Analytics
           </Button>
-          <Button onClick={() => {
-            setTrackElement("CYCLE_PAGE_HEADER")
-            commandPaletteStore.toggleCreateIssueModal(true)
-          }
-          } size="sm" prependIcon={<Plus />}>
+          <Button
+            onClick={() => {
+              setTrackElement("CYCLE_PAGE_HEADER");
+              commandPaletteStore.toggleCreateIssueModal(true, EProjectStore.CYCLE);
+            }}
+            size="sm"
+            prependIcon={<Plus />}
+          >
             Add Issue
           </Button>
           <button
diff --git a/web/components/headers/module-issues.tsx b/web/components/headers/module-issues.tsx
index c488d7fdf..e1f0e1184 100644
--- a/web/components/headers/module-issues.tsx
+++ b/web/components/headers/module-issues.tsx
@@ -20,6 +20,7 @@ import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOption
 // constants
 import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
 import { EFilterType } from "store/issues/types";
+import { EProjectStore } from "store/command-palette.store";
 
 export const ModuleIssuesHeader: React.FC = observer(() => {
   const [analyticsModal, setAnalyticsModal] = useState(false);
@@ -33,7 +34,6 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
 
   const {
     module: moduleStore,
-    projectIssuesFilter: projectIssueFiltersStore,
     project: projectStore,
     projectMember: { projectMembers },
     projectState: projectStateStore,
@@ -191,11 +191,14 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
           <Button onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
             Analytics
           </Button>
-          <Button onClick={() => {
-            setTrackElement("MODULE_PAGE_HEADER")
-            commandPaletteStore.toggleCreateIssueModal(true)
-          }
-          } size="sm" prependIcon={<Plus />}>
+          <Button
+            onClick={() => {
+              setTrackElement("MODULE_PAGE_HEADER");
+              commandPaletteStore.toggleCreateIssueModal(true, EProjectStore.MODULE);
+            }}
+            size="sm"
+            prependIcon={<Plus />}
+          >
             Add Issue
           </Button>
           <button
diff --git a/web/components/headers/project-draft-issues.tsx b/web/components/headers/project-draft-issues.tsx
index 11c5d01ab..8e135e9e4 100644
--- a/web/components/headers/project-draft-issues.tsx
+++ b/web/components/headers/project-draft-issues.tsx
@@ -1,20 +1,74 @@
-import { FC } from "react";
+import { FC, useCallback } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 // hooks
 import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
 // ui
 import { Breadcrumbs, LayersIcon } from "@plane/ui";
 // helper
 import { renderEmoji } from "helpers/emoji.helper";
+import { EFilterType } from "store/issues/types";
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "types";
+import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
 
 export const ProjectDraftIssueHeader: FC = observer(() => {
   const router = useRouter();
-  const { workspaceSlug } = router.query;
+  const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
 
-  const { project: projectStore } = useMobxStore();
-  const { currentProjectDetails } = projectStore;
+  const {
+    project: { currentProjectDetails },
+    projectLabel: { projectLabels },
+    projectMember: { projectMembers },
+    projectState: projectStateStore,
+    projectDraftIssuesFilter: { issueFilters, updateFilters },
+  } = useMobxStore();
 
+  const activeLayout = issueFilters?.displayFilters?.layout;
+
+  const handleFiltersUpdate = useCallback(
+    (key: keyof IIssueFilterOptions, value: string | string[]) => {
+      if (!workspaceSlug || !projectId) return;
+      const newValues = issueFilters?.filters?.[key] ?? [];
+
+      if (Array.isArray(value)) {
+        value.forEach((val) => {
+          if (!newValues.includes(val)) newValues.push(val);
+        });
+      } else {
+        if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+        else newValues.push(value);
+      }
+
+      updateFilters(workspaceSlug, projectId, EFilterType.FILTERS, { [key]: newValues });
+    },
+    [workspaceSlug, projectId, issueFilters, updateFilters]
+  );
+
+  const handleLayoutChange = useCallback(
+    (layout: TIssueLayouts) => {
+      if (!workspaceSlug || !projectId) return;
+      updateFilters(workspaceSlug, projectId, EFilterType.DISPLAY_FILTERS, { layout: layout });
+    },
+    [workspaceSlug, projectId, updateFilters]
+  );
+
+  const handleDisplayFilters = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!workspaceSlug || !projectId) return;
+      updateFilters(workspaceSlug, projectId, EFilterType.DISPLAY_FILTERS, updatedDisplayFilter);
+    },
+    [workspaceSlug, projectId, updateFilters]
+  );
+
+  const handleDisplayProperties = useCallback(
+    (property: Partial<IIssueDisplayProperties>) => {
+      if (!workspaceSlug || !projectId) return;
+      updateFilters(workspaceSlug, projectId, EFilterType.DISPLAY_PROPERTIES, property);
+    },
+    [workspaceSlug, projectId, updateFilters]
+  );
   return (
     <div className="relative flex w-full flex-shrink-0 flex-row z-10 h-[3.75rem] items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
       <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
@@ -44,6 +98,37 @@ export const ProjectDraftIssueHeader: FC = observer(() => {
             />
           </Breadcrumbs>
         </div>
+
+        <div className="ml-auto flex items-center gap-2">
+          <LayoutSelection
+            layouts={["list", "kanban"]}
+            onChange={(layout) => handleLayoutChange(layout)}
+            selectedLayout={activeLayout}
+          />
+          <FiltersDropdown title="Filters" placement="bottom-end">
+            <FilterSelection
+              filters={issueFilters?.filters ?? {}}
+              handleFiltersUpdate={handleFiltersUpdate}
+              layoutDisplayFiltersOptions={
+                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+              }
+              labels={projectLabels ?? undefined}
+              members={projectMembers?.map((m) => m.member)}
+              states={projectStateStore.states?.[projectId ?? ""] ?? undefined}
+            />
+          </FiltersDropdown>
+          <FiltersDropdown title="Display" placement="bottom-end">
+            <DisplayFiltersSelection
+              layoutDisplayFiltersOptions={
+                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+              }
+              displayFilters={issueFilters?.displayFilters ?? {}}
+              handleDisplayFiltersUpdate={handleDisplayFilters}
+              displayProperties={issueFilters?.displayProperties ?? {}}
+              handleDisplayPropertiesUpdate={handleDisplayProperties}
+            />
+          </FiltersDropdown>
+        </div>
       </div>
     </div>
   );
diff --git a/web/components/headers/project-issues.tsx b/web/components/headers/project-issues.tsx
index d817b7d2b..65d13a58d 100644
--- a/web/components/headers/project-issues.tsx
+++ b/web/components/headers/project-issues.tsx
@@ -17,6 +17,7 @@ import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
 // helper
 import { renderEmoji } from "helpers/emoji.helper";
 import { EFilterType } from "store/issues/types";
+import { EProjectStore } from "store/command-palette.store";
 
 export const ProjectIssuesHeader: React.FC = observer(() => {
   const [analyticsModal, setAnalyticsModal] = useState(false);
@@ -199,11 +200,14 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
           <Button onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
             Analytics
           </Button>
-          <Button onClick={() => {
-            setTrackElement("PROJECT_PAGE_HEADER");
-            commandPaletteStore.toggleCreateIssueModal(true)
-          }
-          } size="sm" prependIcon={<Plus />}>
+          <Button
+            onClick={() => {
+              setTrackElement("PROJECT_PAGE_HEADER");
+              commandPaletteStore.toggleCreateIssueModal(true, EProjectStore.PROJECT);
+            }}
+            size="sm"
+            prependIcon={<Plus />}
+          >
             Add Issue
           </Button>
         </div>
diff --git a/web/components/issues/delete-issue-modal.tsx b/web/components/issues/delete-issue-modal.tsx
index 3cf0105f3..86d31d5eb 100644
--- a/web/components/issues/delete-issue-modal.tsx
+++ b/web/components/issues/delete-issue-modal.tsx
@@ -72,7 +72,7 @@ export const DeleteIssueModal: React.FC<Props> = (props) => {
                     <p className="text-sm text-custom-text-200">
                       Are you sure you want to delete issue{" "}
                       <span className="break-words font-medium text-custom-text-100">
-                        {data?.project_detail.identifier}-{data?.sequence_id}
+                        {data?.project_detail?.identifier}-{data?.sequence_id}
                       </span>
                       {""}? All of the data related to the issue will be permanently removed. This action cannot be
                       undone.
diff --git a/web/components/issues/form.tsx b/web/components/issues/form.tsx
index 86972a024..eff3b6193 100644
--- a/web/components/issues/form.tsx
+++ b/web/components/issues/form.tsx
@@ -228,7 +228,7 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
       ...defaultValues,
       ...initialData,
     });
-  }, [setFocus, initialData, reset]);
+  }, [setFocus, reset]);
 
   // update projectId in form when projectId changes
   useEffect(() => {
diff --git a/web/components/issues/issue-layouts/calendar/base-calendar-root.tsx b/web/components/issues/issue-layouts/calendar/base-calendar-root.tsx
index 756a8489b..d2b93910c 100644
--- a/web/components/issues/issue-layouts/calendar/base-calendar-root.tsx
+++ b/web/components/issues/issue-layouts/calendar/base-calendar-root.tsx
@@ -7,14 +7,28 @@ import { useMobxStore } from "lib/mobx/store-provider";
 import { CalendarChart } from "components/issues";
 // types
 import { IIssue } from "types";
-import { ICycleIssuesStore, IModuleIssuesStore, IProjectIssuesStore, IViewIssuesStore } from "store/issues";
-import { IIssueCalendarViewStore, IssueStore } from "store/issue";
+import {
+  ICycleIssuesFilterStore,
+  ICycleIssuesStore,
+  IModuleIssuesFilterStore,
+  IModuleIssuesStore,
+  IProjectIssuesFilterStore,
+  IProjectIssuesStore,
+  IViewIssuesFilterStore,
+  IViewIssuesStore,
+} from "store/issues";
+import { IIssueCalendarViewStore } from "store/issue";
 import { IQuickActionProps } from "../list/list-view-types";
 import { EIssueActions } from "../types";
 import { IGroupedIssues } from "store/issues/types";
 
 interface IBaseCalendarRoot {
   issueStore: IProjectIssuesStore | IModuleIssuesStore | ICycleIssuesStore | IViewIssuesStore;
+  issuesFilterStore:
+    | IProjectIssuesFilterStore
+    | IModuleIssuesFilterStore
+    | ICycleIssuesFilterStore
+    | IViewIssuesFilterStore;
   calendarViewStore: IIssueCalendarViewStore;
   QuickActions: FC<IQuickActionProps>;
   issueActions: {
@@ -26,10 +40,9 @@ interface IBaseCalendarRoot {
 }
 
 export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
-  const { issueStore, calendarViewStore, QuickActions, issueActions, viewId } = props;
-  const { projectIssuesFilter: issueFilterStore } = useMobxStore();
+  const { issueStore, issuesFilterStore, calendarViewStore, QuickActions, issueActions, viewId } = props;
 
-  const displayFilters = issueFilterStore.issueFilters?.displayFilters;
+  const displayFilters = issuesFilterStore.issueFilters?.displayFilters;
 
   const issues = issueStore.getIssues;
   const groupedIssueIds = (issueStore.getIssuesIds ?? {}) as IGroupedIssues;
@@ -75,7 +88,7 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
               }
               handleRemoveFromView={
                 issueActions[EIssueActions.REMOVE]
-                  ? async () => handleIssues(issue.target_date ?? "", issue, EIssueActions.UPDATE)
+                  ? async () => handleIssues(issue.target_date ?? "", issue, EIssueActions.REMOVE)
                   : undefined
               }
             />
diff --git a/web/components/issues/issue-layouts/calendar/roots/cycle-root.tsx b/web/components/issues/issue-layouts/calendar/roots/cycle-root.tsx
index 7dff4533e..60339acf8 100644
--- a/web/components/issues/issue-layouts/calendar/roots/cycle-root.tsx
+++ b/web/components/issues/issue-layouts/calendar/roots/cycle-root.tsx
@@ -10,7 +10,11 @@ import { EIssueActions } from "../../types";
 import { BaseCalendarRoot } from "../base-calendar-root";
 
 export const CycleCalendarLayout: React.FC = observer(() => {
-  const { cycleIssues: cycleIssueStore, cycleIssueCalendarView: cycleIssueCalendarViewStore } = useMobxStore();
+  const {
+    cycleIssues: cycleIssueStore,
+    cycleIssuesFilter: cycleIssueFilterStore,
+    cycleIssueCalendarView: cycleIssueCalendarViewStore,
+  } = useMobxStore();
 
   const router = useRouter();
   const { workspaceSlug, cycleId } = router.query as { workspaceSlug: string; cycleId: string };
@@ -34,6 +38,7 @@ export const CycleCalendarLayout: React.FC = observer(() => {
   return (
     <BaseCalendarRoot
       issueStore={cycleIssueStore}
+      issuesFilterStore={cycleIssueFilterStore}
       calendarViewStore={cycleIssueCalendarViewStore}
       QuickActions={CycleIssueQuickActions}
       issueActions={issueActions}
diff --git a/web/components/issues/issue-layouts/calendar/roots/module-root.tsx b/web/components/issues/issue-layouts/calendar/roots/module-root.tsx
index 7ca238088..b6f6079aa 100644
--- a/web/components/issues/issue-layouts/calendar/roots/module-root.tsx
+++ b/web/components/issues/issue-layouts/calendar/roots/module-root.tsx
@@ -10,7 +10,11 @@ import { EIssueActions } from "../../types";
 import { BaseCalendarRoot } from "../base-calendar-root";
 
 export const ModuleCalendarLayout: React.FC = observer(() => {
-  const { moduleIssues: moduleIssueStore, moduleIssueCalendarView: moduleIssueCalendarViewStore } = useMobxStore();
+  const {
+    moduleIssues: moduleIssueStore,
+    moduleIssuesFilter: moduleIssueFilterStore,
+    moduleIssueCalendarView: moduleIssueCalendarViewStore,
+  } = useMobxStore();
 
   const router = useRouter();
   const { workspaceSlug, moduleId } = router.query as { workspaceSlug: string; moduleId: string };
@@ -33,6 +37,7 @@ export const ModuleCalendarLayout: React.FC = observer(() => {
   return (
     <BaseCalendarRoot
       issueStore={moduleIssueStore}
+      issuesFilterStore={moduleIssueFilterStore}
       calendarViewStore={moduleIssueCalendarViewStore}
       QuickActions={ModuleIssueQuickActions}
       issueActions={issueActions}
diff --git a/web/components/issues/issue-layouts/calendar/roots/project-root.tsx b/web/components/issues/issue-layouts/calendar/roots/project-root.tsx
index 4e6dcff20..e8b4e3282 100644
--- a/web/components/issues/issue-layouts/calendar/roots/project-root.tsx
+++ b/web/components/issues/issue-layouts/calendar/roots/project-root.tsx
@@ -15,25 +15,26 @@ export const CalendarLayout: React.FC = observer(() => {
   const {
     projectIssues: issueStore,
     issueCalendarView: issueCalendarViewStore,
-    issueDetail: issueDetailStore,
+    projectIssuesFilter: projectIssueFiltersStore,
   } = useMobxStore();
 
   const issueActions = {
     [EIssueActions.UPDATE]: async (issue: IIssue) => {
       if (!workspaceSlug) return;
 
-      issueDetailStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
+      issueStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
     },
     [EIssueActions.DELETE]: async (issue: IIssue) => {
       if (!workspaceSlug) return;
 
-      issueDetailStore.deleteIssue(workspaceSlug.toString(), issue.project, issue.id);
+      issueStore.removeIssue(workspaceSlug.toString(), issue.project, issue.id);
     },
   };
 
   return (
     <BaseCalendarRoot
       issueStore={issueStore}
+      issuesFilterStore={projectIssueFiltersStore}
       calendarViewStore={issueCalendarViewStore}
       QuickActions={ProjectIssueQuickActions}
       issueActions={issueActions}
diff --git a/web/components/issues/issue-layouts/calendar/roots/project-view-root.tsx b/web/components/issues/issue-layouts/calendar/roots/project-view-root.tsx
index fe65b9586..dc100c5bc 100644
--- a/web/components/issues/issue-layouts/calendar/roots/project-view-root.tsx
+++ b/web/components/issues/issue-layouts/calendar/roots/project-view-root.tsx
@@ -1,11 +1,9 @@
-import { useCallback } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-import { DragDropContext, DropResult } from "@hello-pangea/dnd";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
-import { CalendarChart, ProjectIssueQuickActions } from "components/issues";
+import { ProjectIssueQuickActions } from "components/issues";
 // types
 import { IIssue } from "types";
 import { EIssueActions } from "../../types";
@@ -14,7 +12,7 @@ import { BaseCalendarRoot } from "../base-calendar-root";
 export const ProjectViewCalendarLayout: React.FC = observer(() => {
   const {
     viewIssues: projectViewIssuesStore,
-    issueDetail: issueDetailStore,
+    viewIssuesFilter: projectIssueViewFiltersStore,
     projectViewIssueCalendarView: projectViewIssueCalendarViewStore,
   } = useMobxStore();
 
@@ -25,18 +23,19 @@ export const ProjectViewCalendarLayout: React.FC = observer(() => {
     [EIssueActions.UPDATE]: async (issue: IIssue) => {
       if (!workspaceSlug) return;
 
-      issueDetailStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
+      projectViewIssuesStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
     },
     [EIssueActions.DELETE]: async (issue: IIssue) => {
       if (!workspaceSlug) return;
 
-      issueDetailStore.deleteIssue(workspaceSlug.toString(), issue.project, issue.id);
+      projectViewIssuesStore.removeIssue(workspaceSlug.toString(), issue.project, issue.id);
     },
   };
 
   return (
     <BaseCalendarRoot
       issueStore={projectViewIssuesStore}
+      issuesFilterStore={projectIssueViewFiltersStore}
       calendarViewStore={projectViewIssueCalendarViewStore}
       QuickActions={ProjectIssueQuickActions}
       issueActions={issueActions}
diff --git a/web/components/issues/issue-layouts/empty-states/cycle.tsx b/web/components/issues/issue-layouts/empty-states/cycle.tsx
index 76bcd4f71..97e4dad8d 100644
--- a/web/components/issues/issue-layouts/empty-states/cycle.tsx
+++ b/web/components/issues/issue-layouts/empty-states/cycle.tsx
@@ -14,6 +14,7 @@ import { Button } from "@plane/ui";
 import emptyIssue from "public/empty-state/issue.svg";
 // types
 import { ISearchIssueResponse } from "types";
+import { EProjectStore } from "store/command-palette.store";
 
 type Props = {
   workspaceSlug: string | undefined;
@@ -26,7 +27,11 @@ export const CycleEmptyState: React.FC<Props> = observer((props) => {
   // states
   const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false);
 
-  const { cycleIssue: cycleIssueStore, commandPalette: commandPaletteStore, trackEvent: { setTrackElement } } = useMobxStore();
+  const {
+    cycleIssue: cycleIssueStore,
+    commandPalette: commandPaletteStore,
+    trackEvent: { setTrackElement },
+  } = useMobxStore();
 
   const { setToastAlert } = useToast();
 
@@ -63,9 +68,9 @@ export const CycleEmptyState: React.FC<Props> = observer((props) => {
             text: "New issue",
             icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
             onClick: () => {
-              setTrackElement("CYCLE_EMPTY_STATE")
-              commandPaletteStore.toggleCreateIssueModal(true)
-            }
+              setTrackElement("CYCLE_EMPTY_STATE");
+              commandPaletteStore.toggleCreateIssueModal(true, EProjectStore.CYCLE);
+            },
           }}
           secondaryButton={
             <Button
diff --git a/web/components/issues/issue-layouts/empty-states/project-view.tsx b/web/components/issues/issue-layouts/empty-states/project-view.tsx
index cd1a4710c..33f105674 100644
--- a/web/components/issues/issue-layouts/empty-states/project-view.tsx
+++ b/web/components/issues/issue-layouts/empty-states/project-view.tsx
@@ -6,9 +6,17 @@ import { useMobxStore } from "lib/mobx/store-provider";
 import { EmptyState } from "components/common";
 // assets
 import emptyIssue from "public/empty-state/issue.svg";
+import { EProjectStore } from "store/command-palette.store";
+import { useRouter } from "next/router";
 
 export const ProjectViewEmptyState: React.FC = observer(() => {
-  const { commandPalette: commandPaletteStore, trackEvent: { setTrackElement } } = useMobxStore();
+  const router = useRouter();
+  const { viewId } = router.query as { viewId: string };
+
+  const {
+    commandPalette: commandPaletteStore,
+    trackEvent: { setTrackElement },
+  } = useMobxStore();
 
   return (
     <div className="h-full w-full grid place-items-center">
@@ -21,8 +29,8 @@ export const ProjectViewEmptyState: React.FC = observer(() => {
           icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
           onClick: () => {
             setTrackElement("VIEW_EMPTY_STATE");
-            commandPaletteStore.toggleCreateIssueModal(true)
-          }
+            commandPaletteStore.toggleCreateIssueModal(true, EProjectStore.PROJECT_VIEW);
+          },
         }}
       />
     </div>
diff --git a/web/components/issues/issue-layouts/empty-states/project.tsx b/web/components/issues/issue-layouts/empty-states/project.tsx
index 5cd9a6f27..ba41cbf80 100644
--- a/web/components/issues/issue-layouts/empty-states/project.tsx
+++ b/web/components/issues/issue-layouts/empty-states/project.tsx
@@ -6,9 +6,13 @@ import { useMobxStore } from "lib/mobx/store-provider";
 import { EmptyState } from "components/common";
 // assets
 import emptyIssue from "public/empty-state/issue.svg";
+import { EProjectStore } from "store/command-palette.store";
 
 export const ProjectEmptyState: React.FC = observer(() => {
-  const { commandPalette: commandPaletteStore, trackEvent: { setTrackElement } } = useMobxStore();
+  const {
+    commandPalette: commandPaletteStore,
+    trackEvent: { setTrackElement },
+  } = useMobxStore();
 
   return (
     <div className="h-full w-full grid place-items-center">
@@ -21,8 +25,8 @@ export const ProjectEmptyState: React.FC = observer(() => {
           icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
           onClick: () => {
             setTrackElement("PROJECT_EMPTY_STATE");
-            commandPaletteStore.toggleCreateIssueModal(true)
-          }
+            commandPaletteStore.toggleCreateIssueModal(true, EProjectStore.PROJECT);
+          },
         }}
       />
     </div>
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/archived-issue.tsx b/web/components/issues/issue-layouts/filters/applied-filters/roots/archived-issue.tsx
index f733d3a87..c34ebc41f 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/roots/archived-issue.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/archived-issue.tsx
@@ -7,23 +7,24 @@ import { useMobxStore } from "lib/mobx/store-provider";
 import { AppliedFiltersList } from "components/issues";
 // types
 import { IIssueFilterOptions } from "types";
+import { EFilterType } from "store/issues/types";
 
 export const ArchivedIssueAppliedFiltersRoot: React.FC = observer(() => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
   const {
-    archivedIssueFilters: archivedIssueFiltersStore,
+    projectArchivedIssuesFilter: { issueFilters, updateFilters },
     projectLabel: { projectLabels },
     projectMember: { projectMembers },
     projectState: projectStateStore,
   } = useMobxStore();
 
-  const userFilters = archivedIssueFiltersStore.userFilters;
+  const userFilters = issueFilters?.filters;
 
   // filters whose value not null or empty array
   const appliedFilters: IIssueFilterOptions = {};
-  Object.entries(userFilters).forEach(([key, value]) => {
+  Object.entries(userFilters ?? {}).forEach(([key, value]) => {
     if (!value) return;
 
     if (Array.isArray(value) && value.length === 0) return;
@@ -36,22 +37,18 @@ export const ArchivedIssueAppliedFiltersRoot: React.FC = observer(() => {
 
     // remove all values of the key if value is null
     if (!value) {
-      archivedIssueFiltersStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
-        filters: {
-          [key]: null,
-        },
+      updateFilters(workspaceSlug.toString(), projectId.toString(), EFilterType.FILTERS, {
+        [key]: null,
       });
       return;
     }
 
     // remove the passed value from the key
-    let newValues = archivedIssueFiltersStore.userFilters?.[key] ?? [];
+    let newValues = issueFilters?.filters?.[key] ?? [];
     newValues = newValues.filter((val) => val !== value);
 
-    archivedIssueFiltersStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
-      filters: {
-        [key]: newValues,
-      },
+    updateFilters(workspaceSlug.toString(), projectId.toString(), EFilterType.FILTERS, {
+      [key]: newValues,
     });
   };
 
@@ -59,12 +56,12 @@ export const ArchivedIssueAppliedFiltersRoot: React.FC = observer(() => {
     if (!workspaceSlug || !projectId) return;
 
     const newFilters: IIssueFilterOptions = {};
-    Object.keys(userFilters).forEach((key) => {
+    Object.keys(userFilters ?? {}).forEach((key) => {
       newFilters[key as keyof IIssueFilterOptions] = null;
     });
 
-    archivedIssueFiltersStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
-      filters: { ...newFilters },
+    updateFilters(workspaceSlug.toString(), projectId.toString(), EFilterType.FILTERS, {
+      ...newFilters,
     });
   };
 
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/draft-issue.tsx b/web/components/issues/issue-layouts/filters/applied-filters/roots/draft-issue.tsx
new file mode 100644
index 000000000..b2f4cf426
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/draft-issue.tsx
@@ -0,0 +1,80 @@
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { AppliedFiltersList } from "components/issues";
+// types
+import { IIssueFilterOptions } from "types";
+import { EFilterType } from "store/issues/types";
+
+export const DraftIssueAppliedFiltersRoot: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const {
+    projectDraftIssuesFilter: { issueFilters, updateFilters },
+    projectLabel: { projectLabels },
+    projectMember: { projectMembers },
+    projectState: projectStateStore,
+  } = useMobxStore();
+
+  const userFilters = issueFilters?.filters;
+  // filters whose value not null or empty array
+  const appliedFilters: IIssueFilterOptions = {};
+  Object.entries(userFilters ?? {}).forEach(([key, value]) => {
+    if (!value) return;
+
+    if (Array.isArray(value) && value.length === 0) return;
+
+    appliedFilters[key as keyof IIssueFilterOptions] = value;
+  });
+
+  const handleRemoveFilter = (key: keyof IIssueFilterOptions, value: string | null) => {
+    if (!workspaceSlug || !projectId) return;
+
+    // remove all values of the key if value is null
+    if (!value) {
+      updateFilters(workspaceSlug.toString(), projectId.toString(), EFilterType.FILTERS, {
+        [key]: null,
+      });
+      return;
+    }
+
+    // remove the passed value from the key
+    let newValues = issueFilters?.filters?.[key] ?? [];
+    newValues = newValues.filter((val) => val !== value);
+
+    updateFilters(workspaceSlug.toString(), projectId.toString(), EFilterType.FILTERS, {
+      [key]: newValues,
+    });
+  };
+
+  const handleClearAllFilters = () => {
+    if (!workspaceSlug || !projectId) return;
+
+    const newFilters: IIssueFilterOptions = {};
+    Object.keys(userFilters ?? {}).forEach((key) => {
+      newFilters[key as keyof IIssueFilterOptions] = null;
+    });
+
+    updateFilters(workspaceSlug.toString(), projectId.toString(), EFilterType.FILTERS, { ...newFilters });
+  };
+
+  // return if no filters are applied
+  if (Object.keys(appliedFilters).length === 0) return null;
+
+  return (
+    <div className="p-4">
+      <AppliedFiltersList
+        appliedFilters={appliedFilters}
+        handleClearAllFilters={handleClearAllFilters}
+        handleRemoveFilter={handleRemoveFilter}
+        labels={projectLabels ?? []}
+        members={projectMembers?.map((m) => m.member)}
+        states={projectStateStore.states?.[projectId?.toString() ?? ""]}
+      />
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/index.ts b/web/components/issues/issue-layouts/filters/applied-filters/roots/index.ts
index e5030d7c4..6e14c24bc 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/roots/index.ts
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/index.ts
@@ -4,3 +4,4 @@ export * from "./module-root";
 export * from "./project-view-root";
 export * from "./project-root";
 export * from "./archived-issue";
+export * from "./profile-issues-root";
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/profile-issues-root.tsx b/web/components/issues/issue-layouts/filters/applied-filters/roots/profile-issues-root.tsx
new file mode 100644
index 000000000..80354b749
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/profile-issues-root.tsx
@@ -0,0 +1,72 @@
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { AppliedFiltersList } from "components/issues";
+// types
+import { IIssueFilterOptions } from "types";
+import { EFilterType } from "store/issues/types";
+
+export const ProfileIssuesAppliedFiltersRoot: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query as {
+    workspaceSlug: string;
+  };
+
+  const {
+    workspace: { workspaceLabels },
+    workspaceProfileIssuesFilter: { issueFilters, updateFilters },
+  } = useMobxStore();
+
+  const userFilters = issueFilters?.filters;
+
+  // filters whose value not null or empty array
+  const appliedFilters: IIssueFilterOptions = {};
+  Object.entries(userFilters ?? {}).forEach(([key, value]) => {
+    if (!value) return;
+    if (Array.isArray(value) && value.length === 0) return;
+    appliedFilters[key as keyof IIssueFilterOptions] = value;
+  });
+
+  const handleRemoveFilter = (key: keyof IIssueFilterOptions, value: string | null) => {
+    if (!workspaceSlug) return;
+    if (!value) {
+      updateFilters(workspaceSlug, EFilterType.FILTERS, { [key]: null });
+      return;
+    }
+
+    let newValues = issueFilters?.filters?.[key] ?? [];
+    newValues = newValues.filter((val) => val !== value);
+
+    updateFilters(workspaceSlug, EFilterType.FILTERS, {
+      [key]: newValues,
+    });
+  };
+
+  const handleClearAllFilters = () => {
+    if (!workspaceSlug) return;
+    const newFilters: IIssueFilterOptions = {};
+    Object.keys(userFilters ?? {}).forEach((key) => {
+      newFilters[key as keyof IIssueFilterOptions] = null;
+    });
+    updateFilters(workspaceSlug, EFilterType.FILTERS, { ...newFilters });
+  };
+
+  // return if no filters are applied
+  if (Object.keys(appliedFilters).length === 0) return null;
+
+  return (
+    <div className="p-4">
+      <AppliedFiltersList
+        appliedFilters={appliedFilters}
+        handleClearAllFilters={handleClearAllFilters}
+        handleRemoveFilter={handleRemoveFilter}
+        labels={workspaceLabels ?? []}
+        members={[]}
+        states={[]}
+      />
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/gantt/base-gantt-root.tsx b/web/components/issues/issue-layouts/gantt/base-gantt-root.tsx
index 74c3db7f8..afb5b3b6b 100644
--- a/web/components/issues/issue-layouts/gantt/base-gantt-root.tsx
+++ b/web/components/issues/issue-layouts/gantt/base-gantt-root.tsx
@@ -57,10 +57,16 @@ export const BaseGanttRoot: React.FC<IBaseGanttRoot> = observer((props: IBaseGan
     if (!workspaceSlug) return;
 
     //Todo fix sort order in the structure
-    issueStore.updateIssue(workspaceSlug, issue.project, issue.id, {
-      start_date: payload.start_date,
-      target_date: payload.target_date,
-    });
+    issueStore.updateIssue(
+      workspaceSlug,
+      issue.project,
+      issue.id,
+      {
+        start_date: payload.start_date,
+        target_date: payload.target_date,
+      },
+      viewId
+    );
   };
 
   const isAllowed = (projectDetails?.member_role || 0) >= EUserWorkspaceRoles.MEMBER;
diff --git a/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx b/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
index eedce7313..279978fc8 100644
--- a/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
@@ -1,5 +1,4 @@
 import { FC, useCallback, useState } from "react";
-import { useRouter } from "next/router";
 import { DragDropContext } from "@hello-pangea/dnd";
 import { observer } from "mobx-react-lite";
 // mobx store
@@ -9,7 +8,19 @@ import { Spinner } from "@plane/ui";
 // types
 import { IIssue } from "types";
 import { EIssueActions } from "../types";
-import { ICycleIssuesStore, IModuleIssuesStore, IProjectIssuesStore, IViewIssuesStore } from "store/issues";
+import {
+  ICycleIssuesFilterStore,
+  ICycleIssuesStore,
+  IModuleIssuesFilterStore,
+  IModuleIssuesStore,
+  IProfileIssuesFilterStore,
+  IProfileIssuesStore,
+  IProjectDraftIssuesStore,
+  IProjectIssuesFilterStore,
+  IProjectIssuesStore,
+  IViewIssuesFilterStore,
+  IViewIssuesStore,
+} from "store/issues";
 import { IQuickActionProps } from "../list/list-view-types";
 import { IIssueKanBanViewStore } from "store/issue";
 // constants
@@ -17,9 +28,22 @@ import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
 //components
 import { KanBan } from "./default";
 import { KanBanSwimLanes } from "./swimlanes";
+import { EProjectStore } from "store/command-palette.store";
 
 export interface IBaseKanBanLayout {
-  issueStore: IProjectIssuesStore | IModuleIssuesStore | ICycleIssuesStore | IViewIssuesStore;
+  issueStore:
+    | IProjectIssuesStore
+    | IModuleIssuesStore
+    | ICycleIssuesStore
+    | IViewIssuesStore
+    | IProjectDraftIssuesStore
+    | IProfileIssuesStore;
+  issuesFilterStore:
+    | IProjectIssuesFilterStore
+    | IModuleIssuesFilterStore
+    | ICycleIssuesFilterStore
+    | IViewIssuesFilterStore
+    | IProfileIssuesFilterStore;
   kanbanViewStore: IIssueKanBanViewStore;
   QuickActions: FC<IQuickActionProps>;
   issueActions: {
@@ -29,24 +53,33 @@ export interface IBaseKanBanLayout {
   };
   showLoader?: boolean;
   viewId?: string;
+  currentStore?: EProjectStore;
 }
 
 export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBaseKanBanLayout) => {
-  const { issueStore, kanbanViewStore, QuickActions, issueActions, showLoader, viewId } = props;
+  const {
+    issueStore,
+    issuesFilterStore,
+    kanbanViewStore,
+    QuickActions,
+    issueActions,
+    showLoader,
+    viewId,
+    currentStore,
+  } = props;
 
   const {
     project: { workspaceProjects },
     projectLabel: { projectLabels },
     projectMember: { projectMembers },
     projectState: projectStateStore,
-    projectIssuesFilter: issueFilterStore,
   } = useMobxStore();
 
   const issues = issueStore?.getIssues || {};
   const issueIds = issueStore?.getIssuesIds || [];
 
-  const displayFilters = issueFilterStore?.issueFilters?.displayFilters;
-  const displayProperties = issueFilterStore?.issueFilters?.displayProperties || null;
+  const displayFilters = issuesFilterStore?.issueFilters?.displayFilters;
+  const displayProperties = issuesFilterStore?.issueFilters?.displayProperties || null;
 
   const sub_group_by: string | null = displayFilters?.sub_group_by || null;
 
@@ -60,6 +93,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
 
   const [isDragStarted, setIsDragStarted] = useState<boolean>(false);
 
+  const { enableInlineEditing, enableQuickAdd, enableIssueCreation } = issueStore?.viewFlags || {};
   const onDragStart = () => {
     setIsDragStarted(true);
   };
@@ -103,7 +137,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
 
   return (
     <>
-      {showLoader && issueStore?.loader === "mutation" && (
+      {showLoader && issueStore?.loader === "init-loader" && (
         <div className="fixed top-16 right-2 z-30 bg-custom-background-80 shadow-custom-shadow-sm w-10 h-10 rounded flex justify-center items-center">
           <Spinner className="w-5 h-5" />
         </div>
@@ -144,11 +178,14 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
               labels={projectLabels}
               members={projectMembers?.map((m) => m.member) ?? null}
               projects={workspaceProjects}
-              enableQuickIssueCreate
+              enableQuickIssueCreate={enableQuickAdd}
               showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
               isDragStarted={isDragStarted}
-              quickAddCallback={issueStore.quickAddIssue}
+              quickAddCallback={issueStore?.quickAddIssue}
               viewId={viewId}
+              disableIssueCreation={!enableIssueCreation}
+              isReadOnly={!enableInlineEditing}
+              currentStore={currentStore}
             />
           ) : (
             <KanBanSwimLanes
@@ -185,6 +222,10 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
               projects={workspaceProjects}
               showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
               isDragStarted={isDragStarted}
+              disableIssueCreation={true}
+              enableQuickIssueCreate={enableQuickAdd}
+              isReadOnly={!enableInlineEditing}
+              currentStore={currentStore}
             />
           )}
         </DragDropContext>
diff --git a/web/components/issues/issue-layouts/kanban/block.tsx b/web/components/issues/issue-layouts/kanban/block.tsx
index 94f497b43..91cb7d57e 100644
--- a/web/components/issues/issue-layouts/kanban/block.tsx
+++ b/web/components/issues/issue-layouts/kanban/block.tsx
@@ -17,6 +17,7 @@ interface IssueBlockProps {
   handleIssues: (sub_group_by: string | null, group_by: string | null, issue: IIssue, action: EIssueActions) => void;
   quickActions: (sub_group_by: string | null, group_by: string | null, issue: IIssue) => React.ReactNode;
   displayProperties: IIssueDisplayProperties | null;
+  isReadOnly: boolean;
 }
 
 export const KanbanIssueBlock: React.FC<IssueBlockProps> = (props) => {
@@ -30,6 +31,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = (props) => {
     handleIssues,
     quickActions,
     displayProperties,
+    isReadOnly,
   } = props;
 
   const updateIssue = (sub_group_by: string | null, group_by: string | null, issueToUpdate: IIssue) => {
@@ -91,6 +93,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = (props) => {
                   handleIssues={updateIssue}
                   displayProperties={displayProperties}
                   showEmptyGroup={showEmptyGroup}
+                  isReadOnly={isReadOnly}
                 />
               </div>
             </div>
diff --git a/web/components/issues/issue-layouts/kanban/blocks-list.tsx b/web/components/issues/issue-layouts/kanban/blocks-list.tsx
index 26e2555b4..3ef4f4468 100644
--- a/web/components/issues/issue-layouts/kanban/blocks-list.tsx
+++ b/web/components/issues/issue-layouts/kanban/blocks-list.tsx
@@ -14,6 +14,7 @@ interface IssueBlocksListProps {
   handleIssues: (sub_group_by: string | null, group_by: string | null, issue: IIssue, action: EIssueActions) => void;
   quickActions: (sub_group_by: string | null, group_by: string | null, issue: IIssue) => React.ReactNode;
   displayProperties: IIssueDisplayProperties | null;
+  isReadOnly: boolean;
 }
 
 export const KanbanIssueBlocksList: React.FC<IssueBlocksListProps> = (props) => {
@@ -27,6 +28,7 @@ export const KanbanIssueBlocksList: React.FC<IssueBlocksListProps> = (props) =>
     handleIssues,
     quickActions,
     displayProperties,
+    isReadOnly,
   } = props;
 
   return (
@@ -50,6 +52,7 @@ export const KanbanIssueBlocksList: React.FC<IssueBlocksListProps> = (props) =>
                 columnId={columnId}
                 sub_group_id={sub_group_id}
                 isDragDisabled={isDragDisabled}
+                isReadOnly={isReadOnly}
               />
             );
           })}
diff --git a/web/components/issues/issue-layouts/kanban/default.tsx b/web/components/issues/issue-layouts/kanban/default.tsx
index 203979edf..c5ab4750f 100644
--- a/web/components/issues/issue-layouts/kanban/default.tsx
+++ b/web/components/issues/issue-layouts/kanban/default.tsx
@@ -13,6 +13,7 @@ import { getValueFromObject } from "constants/issue";
 import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
 import { EIssueActions } from "../types";
 import { IIssueResponse, IGroupedIssues, ISubGroupedIssues, TUnGroupedIssues } from "store/issues/types";
+import { EProjectStore } from "store/command-palette.store";
 
 export interface IGroupByKanBan {
   issues: IIssueResponse;
@@ -40,6 +41,9 @@ export interface IGroupByKanBan {
     viewId?: string
   ) => Promise<IIssue | undefined>;
   viewId?: string;
+  disableIssueCreation?: boolean;
+  currentStore?: EProjectStore;
+  isReadOnly: boolean;
 }
 
 const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
@@ -63,6 +67,9 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
     isDragStarted,
     quickAddCallback,
     viewId,
+    disableIssueCreation,
+    isReadOnly,
+    currentStore,
   } = props;
 
   const verticalAlignPosition = (_list: any) =>
@@ -86,6 +93,8 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
                   issues_count={issueIds?.[getValueFromObject(_list, listKey) as string]?.length || 0}
                   kanBanToggle={kanBanToggle}
                   handleKanBanToggle={handleKanBanToggle}
+                  disableIssueCreation={disableIssueCreation}
+                  currentStore={currentStore}
                 />
               </div>
             )}
@@ -95,10 +104,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
                 verticalAlignPosition(_list) ? `w-[0px] overflow-hidden` : `w-full transition-all`
               }`}
             >
-              <Droppable
-                droppableId={`${getValueFromObject(_list, listKey) as string}__${sub_group_id}`}
-                isDropDisabled={isDragDisabled}
-              >
+              <Droppable droppableId={`${getValueFromObject(_list, listKey) as string}__${sub_group_id}`}>
                 {(provided: any, snapshot: any) => (
                   <div
                     className={`w-full h-full relative transition-all ${
@@ -118,6 +124,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
                         handleIssues={handleIssues}
                         quickActions={quickActions}
                         displayProperties={displayProperties}
+                        isReadOnly={isReadOnly}
                       />
                     ) : (
                       isDragDisabled && (
@@ -149,7 +156,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
               )}
             </div>
 
-            {isDragStarted && isDragDisabled && (
+            {/* {isDragStarted && isDragDisabled && (
               <div className="invisible group-hover:visible transition-all text-sm absolute top-12 bottom-10 left-0 right-0 bg-custom-background-100/40 text-center">
                 <div className="rounded inline-flex mt-80 h-8 px-3 justify-center items-center bg-custom-background-80 text-custom-text-100 font-medium">
                   {`This board is ordered by "${replaceUnderscoreIfSnakeCase(
@@ -157,7 +164,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
                   )}"`}
                 </div>
               </div>
-            )}
+            )} */}
           </div>
         ))}
     </div>
@@ -192,6 +199,9 @@ export interface IKanBan {
     viewId?: string
   ) => Promise<IIssue | undefined>;
   viewId?: string;
+  disableIssueCreation?: boolean;
+  currentStore?: EProjectStore;
+  isReadOnly: boolean;
 }
 
 export const KanBan: React.FC<IKanBan> = observer((props) => {
@@ -218,6 +228,9 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
     isDragStarted,
     quickAddCallback,
     viewId,
+    disableIssueCreation,
+    isReadOnly,
+    currentStore,
   } = props;
 
   const { issueKanBanView: issueKanBanViewStore } = useMobxStore();
@@ -246,6 +259,9 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
           isDragStarted={isDragStarted}
           quickAddCallback={quickAddCallback}
           viewId={viewId}
+          disableIssueCreation={disableIssueCreation}
+          isReadOnly={isReadOnly}
+          currentStore={currentStore}
         />
       )}
 
@@ -271,6 +287,9 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
           isDragStarted={isDragStarted}
           quickAddCallback={quickAddCallback}
           viewId={viewId}
+          disableIssueCreation={disableIssueCreation}
+          isReadOnly={isReadOnly}
+          currentStore={currentStore}
         />
       )}
 
@@ -296,6 +315,9 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
           isDragStarted={isDragStarted}
           quickAddCallback={quickAddCallback}
           viewId={viewId}
+          disableIssueCreation={disableIssueCreation}
+          isReadOnly={isReadOnly}
+          currentStore={currentStore}
         />
       )}
 
@@ -321,6 +343,9 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
           isDragStarted={isDragStarted}
           quickAddCallback={quickAddCallback}
           viewId={viewId}
+          disableIssueCreation={disableIssueCreation}
+          isReadOnly={isReadOnly}
+          currentStore={currentStore}
         />
       )}
 
@@ -346,6 +371,9 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
           isDragStarted={isDragStarted}
           quickAddCallback={quickAddCallback}
           viewId={viewId}
+          disableIssueCreation={disableIssueCreation}
+          isReadOnly={isReadOnly}
+          currentStore={currentStore}
         />
       )}
 
@@ -371,6 +399,9 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
           isDragStarted={isDragStarted}
           quickAddCallback={quickAddCallback}
           viewId={viewId}
+          disableIssueCreation={disableIssueCreation}
+          isReadOnly={isReadOnly}
+          currentStore={currentStore}
         />
       )}
 
@@ -396,6 +427,9 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
           isDragStarted={isDragStarted}
           quickAddCallback={quickAddCallback}
           viewId={viewId}
+          disableIssueCreation={disableIssueCreation}
+          isReadOnly={isReadOnly}
+          currentStore={currentStore}
         />
       )}
     </div>
diff --git a/web/components/issues/issue-layouts/kanban/headers/assignee.tsx b/web/components/issues/issue-layouts/kanban/headers/assignee.tsx
index d350ca90b..eaf93aa7b 100644
--- a/web/components/issues/issue-layouts/kanban/headers/assignee.tsx
+++ b/web/components/issues/issue-layouts/kanban/headers/assignee.tsx
@@ -5,6 +5,7 @@ import { HeaderGroupByCard } from "./group-by-card";
 import { HeaderSubGroupByCard } from "./sub-group-by-card";
 // ui
 import { Avatar } from "@plane/ui";
+import { EProjectStore } from "store/command-palette.store";
 
 export interface IAssigneesHeader {
   column_id: string;
@@ -15,6 +16,8 @@ export interface IAssigneesHeader {
   issues_count: number;
   kanBanToggle: any;
   handleKanBanToggle: any;
+  disableIssueCreation?: boolean;
+  currentStore?: EProjectStore;
 }
 
 export const Icon = ({ user }: any) => <Avatar name={user.display_name} src={user.avatar} size="base" />;
@@ -29,6 +32,8 @@ export const AssigneesHeader: FC<IAssigneesHeader> = observer((props) => {
     issues_count,
     kanBanToggle,
     handleKanBanToggle,
+    disableIssueCreation,
+    currentStore,
   } = props;
 
   const assignee = column_value ?? null;
@@ -56,6 +61,8 @@ export const AssigneesHeader: FC<IAssigneesHeader> = observer((props) => {
             kanBanToggle={kanBanToggle}
             handleKanBanToggle={handleKanBanToggle}
             issuePayload={{ assignees: [assignee?.id] }}
+            disableIssueCreation={disableIssueCreation}
+            currentStore={currentStore}
           />
         ))}
     </>
diff --git a/web/components/issues/issue-layouts/kanban/headers/created_by.tsx b/web/components/issues/issue-layouts/kanban/headers/created_by.tsx
index dde2059a9..0df36702d 100644
--- a/web/components/issues/issue-layouts/kanban/headers/created_by.tsx
+++ b/web/components/issues/issue-layouts/kanban/headers/created_by.tsx
@@ -4,6 +4,7 @@ import { observer } from "mobx-react-lite";
 import { HeaderGroupByCard } from "./group-by-card";
 import { HeaderSubGroupByCard } from "./sub-group-by-card";
 import { Icon } from "./assignee";
+import { EProjectStore } from "store/command-palette.store";
 
 export interface ICreatedByHeader {
   column_id: string;
@@ -14,6 +15,8 @@ export interface ICreatedByHeader {
   issues_count: number;
   kanBanToggle: any;
   handleKanBanToggle: any;
+  disableIssueCreation?: boolean;
+  currentStore?: EProjectStore;
 }
 
 export const CreatedByHeader: FC<ICreatedByHeader> = observer((props) => {
@@ -26,6 +29,8 @@ export const CreatedByHeader: FC<ICreatedByHeader> = observer((props) => {
     issues_count,
     kanBanToggle,
     handleKanBanToggle,
+    disableIssueCreation,
+    currentStore,
   } = props;
 
   const createdBy = column_value ?? null;
@@ -53,6 +58,8 @@ export const CreatedByHeader: FC<ICreatedByHeader> = observer((props) => {
             kanBanToggle={kanBanToggle}
             handleKanBanToggle={handleKanBanToggle}
             issuePayload={{ created_by: createdBy?.id }}
+            disableIssueCreation={disableIssueCreation}
+            currentStore={currentStore}
           />
         ))}
     </>
diff --git a/web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx b/web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
index a336106d3..4a68ae7f0 100644
--- a/web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
+++ b/web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
@@ -15,6 +15,7 @@ import useToast from "hooks/use-toast";
 import { observer } from "mobx-react-lite";
 // types
 import { IIssue, ISearchIssueResponse } from "types";
+import { EProjectStore } from "store/command-palette.store";
 
 interface IHeaderGroupByCard {
   sub_group_by: string | null;
@@ -26,13 +27,26 @@ interface IHeaderGroupByCard {
   kanBanToggle: any;
   handleKanBanToggle: any;
   issuePayload: Partial<IIssue>;
+  disableIssueCreation?: boolean;
+  currentStore?: EProjectStore;
 }
 
 const moduleService = new ModuleService();
 const issueService = new IssueService();
 
 export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
-  const { sub_group_by, column_id, icon, title, count, kanBanToggle, handleKanBanToggle, issuePayload } = props;
+  const {
+    sub_group_by,
+    column_id,
+    icon,
+    title,
+    count,
+    kanBanToggle,
+    handleKanBanToggle,
+    issuePayload,
+    disableIssueCreation,
+    currentStore,
+  } = props;
   const verticalAlignPosition = kanBanToggle?.groupByHeaderMinMax.includes(column_id);
 
   const [isOpen, setIsOpen] = React.useState(false);
@@ -84,7 +98,12 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
 
   return (
     <>
-      <CreateUpdateIssueModal isOpen={isOpen} handleClose={() => setIsOpen(false)} prePopulateData={issuePayload} />
+      <CreateUpdateIssueModal
+        isOpen={isOpen}
+        handleClose={() => setIsOpen(false)}
+        prePopulateData={issuePayload}
+        currentStore={currentStore}
+      />
       {renderExistingIssueModal && (
         <ExistingIssuesListModal
           isOpen={openExistingIssueListModal}
@@ -126,30 +145,31 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
           </div>
         )}
 
-        {renderExistingIssueModal ? (
-          <CustomMenu
-            width="auto"
-            customButton={
-              <span className="flex-shrink-0 w-[20px] h-[20px] rounded-sm overflow-hidden flex justify-center items-center hover:bg-custom-background-80 cursor-pointer transition-all">
-                <Plus height={14} width={14} strokeWidth={2} />
-              </span>
-            }
-          >
-            <CustomMenu.MenuItem onClick={() => setIsOpen(true)}>
-              <span className="flex items-center justify-start gap-2">Create issue</span>
-            </CustomMenu.MenuItem>
-            <CustomMenu.MenuItem onClick={() => setOpenExistingIssueListModal(true)}>
-              <span className="flex items-center justify-start gap-2">Add an existing issue</span>
-            </CustomMenu.MenuItem>
-          </CustomMenu>
-        ) : (
-          <div
-            className="flex-shrink-0 w-[20px] h-[20px] rounded-sm overflow-hidden flex justify-center items-center hover:bg-custom-background-80 cursor-pointer transition-all"
-            onClick={() => setIsOpen(true)}
-          >
-            <Plus width={14} strokeWidth={2} />
-          </div>
-        )}
+        {!disableIssueCreation &&
+          (renderExistingIssueModal ? (
+            <CustomMenu
+              width="auto"
+              customButton={
+                <span className="flex-shrink-0 w-[20px] h-[20px] rounded-sm overflow-hidden flex justify-center items-center hover:bg-custom-background-80 cursor-pointer transition-all">
+                  <Plus height={14} width={14} strokeWidth={2} />
+                </span>
+              }
+            >
+              <CustomMenu.MenuItem onClick={() => setIsOpen(true)}>
+                <span className="flex items-center justify-start gap-2">Create issue</span>
+              </CustomMenu.MenuItem>
+              <CustomMenu.MenuItem onClick={() => setOpenExistingIssueListModal(true)}>
+                <span className="flex items-center justify-start gap-2">Add an existing issue</span>
+              </CustomMenu.MenuItem>
+            </CustomMenu>
+          ) : (
+            <div
+              className="flex-shrink-0 w-[20px] h-[20px] rounded-sm overflow-hidden flex justify-center items-center hover:bg-custom-background-80 cursor-pointer transition-all"
+              onClick={() => setIsOpen(true)}
+            >
+              <Plus width={14} strokeWidth={2} />
+            </div>
+          ))}
       </div>
     </>
   );
diff --git a/web/components/issues/issue-layouts/kanban/headers/group-by-root.tsx b/web/components/issues/issue-layouts/kanban/headers/group-by-root.tsx
index 01e7ac8b5..e322bfd86 100644
--- a/web/components/issues/issue-layouts/kanban/headers/group-by-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/headers/group-by-root.tsx
@@ -8,6 +8,7 @@ import { LabelHeader } from "./label";
 import { CreatedByHeader } from "./created_by";
 // mobx
 import { observer } from "mobx-react-lite";
+import { EProjectStore } from "store/command-palette.store";
 
 export interface IKanBanGroupByHeaderRoot {
   column_id: string;
@@ -17,10 +18,22 @@ export interface IKanBanGroupByHeaderRoot {
   issues_count: number;
   kanBanToggle: any;
   handleKanBanToggle: any;
+  disableIssueCreation?: boolean;
+  currentStore?: EProjectStore;
 }
 
 export const KanBanGroupByHeaderRoot: React.FC<IKanBanGroupByHeaderRoot> = observer(
-  ({ column_id, column_value, sub_group_by, group_by, issues_count, kanBanToggle, handleKanBanToggle }) => (
+  ({
+    column_id,
+    column_value,
+    sub_group_by,
+    group_by,
+    issues_count,
+    kanBanToggle,
+    disableIssueCreation,
+    handleKanBanToggle,
+    currentStore,
+  }) => (
     <>
       {group_by && group_by === "project" && (
         <ProjectHeader
@@ -32,6 +45,8 @@ export const KanBanGroupByHeaderRoot: React.FC<IKanBanGroupByHeaderRoot> = obser
           issues_count={issues_count}
           kanBanToggle={kanBanToggle}
           handleKanBanToggle={handleKanBanToggle}
+          disableIssueCreation={disableIssueCreation}
+          currentStore={currentStore}
         />
       )}
 
@@ -45,6 +60,8 @@ export const KanBanGroupByHeaderRoot: React.FC<IKanBanGroupByHeaderRoot> = obser
           issues_count={issues_count}
           kanBanToggle={kanBanToggle}
           handleKanBanToggle={handleKanBanToggle}
+          disableIssueCreation={disableIssueCreation}
+          currentStore={currentStore}
         />
       )}
       {group_by && group_by === "state_detail.group" && (
@@ -57,6 +74,8 @@ export const KanBanGroupByHeaderRoot: React.FC<IKanBanGroupByHeaderRoot> = obser
           issues_count={issues_count}
           kanBanToggle={kanBanToggle}
           handleKanBanToggle={handleKanBanToggle}
+          disableIssueCreation={disableIssueCreation}
+          currentStore={currentStore}
         />
       )}
       {group_by && group_by === "priority" && (
@@ -69,6 +88,8 @@ export const KanBanGroupByHeaderRoot: React.FC<IKanBanGroupByHeaderRoot> = obser
           issues_count={issues_count}
           kanBanToggle={kanBanToggle}
           handleKanBanToggle={handleKanBanToggle}
+          disableIssueCreation={disableIssueCreation}
+          currentStore={currentStore}
         />
       )}
       {group_by && group_by === "labels" && (
@@ -81,6 +102,8 @@ export const KanBanGroupByHeaderRoot: React.FC<IKanBanGroupByHeaderRoot> = obser
           issues_count={issues_count}
           kanBanToggle={kanBanToggle}
           handleKanBanToggle={handleKanBanToggle}
+          disableIssueCreation={disableIssueCreation}
+          currentStore={currentStore}
         />
       )}
       {group_by && group_by === "assignees" && (
@@ -93,6 +116,8 @@ export const KanBanGroupByHeaderRoot: React.FC<IKanBanGroupByHeaderRoot> = obser
           issues_count={issues_count}
           kanBanToggle={kanBanToggle}
           handleKanBanToggle={handleKanBanToggle}
+          disableIssueCreation={disableIssueCreation}
+          currentStore={currentStore}
         />
       )}
       {group_by && group_by === "created_by" && (
@@ -105,6 +130,8 @@ export const KanBanGroupByHeaderRoot: React.FC<IKanBanGroupByHeaderRoot> = obser
           issues_count={issues_count}
           kanBanToggle={kanBanToggle}
           handleKanBanToggle={handleKanBanToggle}
+          disableIssueCreation={disableIssueCreation}
+          currentStore={currentStore}
         />
       )}
     </>
diff --git a/web/components/issues/issue-layouts/kanban/headers/label.tsx b/web/components/issues/issue-layouts/kanban/headers/label.tsx
index 1b6fb864c..711db522e 100644
--- a/web/components/issues/issue-layouts/kanban/headers/label.tsx
+++ b/web/components/issues/issue-layouts/kanban/headers/label.tsx
@@ -3,6 +3,7 @@ import { observer } from "mobx-react-lite";
 // components
 import { HeaderGroupByCard } from "./group-by-card";
 import { HeaderSubGroupByCard } from "./sub-group-by-card";
+import { EProjectStore } from "store/command-palette.store";
 
 export interface ILabelHeader {
   column_id: string;
@@ -13,6 +14,8 @@ export interface ILabelHeader {
   issues_count: number;
   kanBanToggle: any;
   handleKanBanToggle: any;
+  disableIssueCreation?: boolean;
+  currentStore?: EProjectStore;
 }
 
 const Icon = ({ color }: any) => (
@@ -29,6 +32,8 @@ export const LabelHeader: FC<ILabelHeader> = observer((props) => {
     issues_count,
     kanBanToggle,
     handleKanBanToggle,
+    disableIssueCreation,
+    currentStore,
   } = props;
 
   const label = column_value ?? null;
@@ -56,6 +61,8 @@ export const LabelHeader: FC<ILabelHeader> = observer((props) => {
             kanBanToggle={kanBanToggle}
             handleKanBanToggle={handleKanBanToggle}
             issuePayload={{ labels: [label?.id] }}
+            disableIssueCreation={disableIssueCreation}
+            currentStore={currentStore}
           />
         ))}
     </>
diff --git a/web/components/issues/issue-layouts/kanban/headers/priority.tsx b/web/components/issues/issue-layouts/kanban/headers/priority.tsx
index fea41dbeb..806269d97 100644
--- a/web/components/issues/issue-layouts/kanban/headers/priority.tsx
+++ b/web/components/issues/issue-layouts/kanban/headers/priority.tsx
@@ -7,6 +7,7 @@ import { HeaderSubGroupByCard } from "./sub-group-by-card";
 
 // Icons
 import { PriorityIcon } from "@plane/ui";
+import { EProjectStore } from "store/command-palette.store";
 
 export interface IPriorityHeader {
   column_id: string;
@@ -17,6 +18,8 @@ export interface IPriorityHeader {
   issues_count: number;
   kanBanToggle: any;
   handleKanBanToggle: any;
+  disableIssueCreation?: boolean;
+  currentStore?: EProjectStore;
 }
 
 export const PriorityHeader: FC<IPriorityHeader> = observer((props) => {
@@ -29,6 +32,8 @@ export const PriorityHeader: FC<IPriorityHeader> = observer((props) => {
     issues_count,
     kanBanToggle,
     handleKanBanToggle,
+    disableIssueCreation,
+    currentStore,
   } = props;
 
   const priority = column_value || null;
@@ -56,6 +61,8 @@ export const PriorityHeader: FC<IPriorityHeader> = observer((props) => {
             kanBanToggle={kanBanToggle}
             handleKanBanToggle={handleKanBanToggle}
             issuePayload={{ priority: priority?.key }}
+            disableIssueCreation={disableIssueCreation}
+            currentStore={currentStore}
           />
         ))}
     </>
diff --git a/web/components/issues/issue-layouts/kanban/headers/project.tsx b/web/components/issues/issue-layouts/kanban/headers/project.tsx
index 5e4a05207..1072fa703 100644
--- a/web/components/issues/issue-layouts/kanban/headers/project.tsx
+++ b/web/components/issues/issue-layouts/kanban/headers/project.tsx
@@ -5,6 +5,7 @@ import { HeaderGroupByCard } from "./group-by-card";
 import { HeaderSubGroupByCard } from "./sub-group-by-card";
 // emoji helper
 import { renderEmoji } from "helpers/emoji.helper";
+import { EProjectStore } from "store/command-palette.store";
 
 export interface IProjectHeader {
   column_id: string;
@@ -15,6 +16,8 @@ export interface IProjectHeader {
   issues_count: number;
   kanBanToggle: any;
   handleKanBanToggle: any;
+  disableIssueCreation?: boolean;
+  currentStore?: EProjectStore;
 }
 
 const Icon = ({ emoji }: any) => <div className="w-6 h-6">{renderEmoji(emoji)}</div>;
@@ -29,6 +32,8 @@ export const ProjectHeader: FC<IProjectHeader> = observer((props) => {
     issues_count,
     kanBanToggle,
     handleKanBanToggle,
+    disableIssueCreation,
+    currentStore,
   } = props;
 
   const project = column_value ?? null;
@@ -56,6 +61,8 @@ export const ProjectHeader: FC<IProjectHeader> = observer((props) => {
             kanBanToggle={kanBanToggle}
             handleKanBanToggle={handleKanBanToggle}
             issuePayload={{ project: project?.id }}
+            disableIssueCreation={disableIssueCreation}
+            currentStore={currentStore}
           />
         ))}
     </>
diff --git a/web/components/issues/issue-layouts/kanban/headers/state-group.tsx b/web/components/issues/issue-layouts/kanban/headers/state-group.tsx
index 47d258c36..8e7ba0fe6 100644
--- a/web/components/issues/issue-layouts/kanban/headers/state-group.tsx
+++ b/web/components/issues/issue-layouts/kanban/headers/state-group.tsx
@@ -4,6 +4,7 @@ import { observer } from "mobx-react-lite";
 import { HeaderGroupByCard } from "./group-by-card";
 import { HeaderSubGroupByCard } from "./sub-group-by-card";
 import { StateGroupIcon } from "@plane/ui";
+import { EProjectStore } from "store/command-palette.store";
 
 export interface IStateGroupHeader {
   column_id: string;
@@ -14,6 +15,8 @@ export interface IStateGroupHeader {
   issues_count: number;
   kanBanToggle: any;
   handleKanBanToggle: any;
+  disableIssueCreation?: boolean;
+  currentStore?: EProjectStore;
 }
 
 export const Icon = ({ stateGroup, color }: { stateGroup: any; color?: any }) => (
@@ -32,6 +35,8 @@ export const StateGroupHeader: FC<IStateGroupHeader> = observer((props) => {
     issues_count,
     kanBanToggle,
     handleKanBanToggle,
+    disableIssueCreation,
+    currentStore,
   } = props;
 
   const stateGroup = column_value || null;
@@ -59,6 +64,8 @@ export const StateGroupHeader: FC<IStateGroupHeader> = observer((props) => {
             kanBanToggle={kanBanToggle}
             handleKanBanToggle={handleKanBanToggle}
             issuePayload={{}}
+            disableIssueCreation={disableIssueCreation}
+            currentStore={currentStore}
           />
         ))}
     </>
diff --git a/web/components/issues/issue-layouts/kanban/headers/state.tsx b/web/components/issues/issue-layouts/kanban/headers/state.tsx
index 18a064214..51b409b99 100644
--- a/web/components/issues/issue-layouts/kanban/headers/state.tsx
+++ b/web/components/issues/issue-layouts/kanban/headers/state.tsx
@@ -4,6 +4,7 @@ import { observer } from "mobx-react-lite";
 import { HeaderGroupByCard } from "./group-by-card";
 import { HeaderSubGroupByCard } from "./sub-group-by-card";
 import { Icon } from "./state-group";
+import { EProjectStore } from "store/command-palette.store";
 
 export interface IStateHeader {
   column_id: string;
@@ -14,6 +15,8 @@ export interface IStateHeader {
   issues_count: number;
   kanBanToggle: any;
   handleKanBanToggle: any;
+  disableIssueCreation?: boolean;
+  currentStore?: EProjectStore;
 }
 
 export const StateHeader: FC<IStateHeader> = observer((props) => {
@@ -26,6 +29,8 @@ export const StateHeader: FC<IStateHeader> = observer((props) => {
     issues_count,
     kanBanToggle,
     handleKanBanToggle,
+    disableIssueCreation,
+    currentStore,
   } = props;
 
   const state = column_value ?? null;
@@ -53,6 +58,8 @@ export const StateHeader: FC<IStateHeader> = observer((props) => {
             kanBanToggle={kanBanToggle}
             handleKanBanToggle={handleKanBanToggle}
             issuePayload={{ state: state?.id }}
+            disableIssueCreation={disableIssueCreation}
+            currentStore={currentStore}
           />
         ))}
     </>
diff --git a/web/components/issues/issue-layouts/kanban/headers/sub-group-by-root.tsx b/web/components/issues/issue-layouts/kanban/headers/sub-group-by-root.tsx
index 3546e73d5..c429ccf5f 100644
--- a/web/components/issues/issue-layouts/kanban/headers/sub-group-by-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/headers/sub-group-by-root.tsx
@@ -7,6 +7,7 @@ import { AssigneesHeader } from "./assignee";
 import { PriorityHeader } from "./priority";
 import { LabelHeader } from "./label";
 import { CreatedByHeader } from "./created_by";
+import { EProjectStore } from "store/command-palette.store";
 
 export interface IKanBanSubGroupByHeaderRoot {
   column_id: string;
@@ -16,10 +17,22 @@ export interface IKanBanSubGroupByHeaderRoot {
   issues_count: number;
   kanBanToggle: any;
   handleKanBanToggle: any;
+  disableIssueCreation?: boolean;
+  currentStore?: EProjectStore;
 }
 
 export const KanBanSubGroupByHeaderRoot: React.FC<IKanBanSubGroupByHeaderRoot> = observer((props) => {
-  const { column_id, column_value, sub_group_by, group_by, issues_count, kanBanToggle, handleKanBanToggle } = props;
+  const {
+    column_id,
+    column_value,
+    sub_group_by,
+    group_by,
+    issues_count,
+    kanBanToggle,
+    handleKanBanToggle,
+    disableIssueCreation,
+    currentStore,
+  } = props;
 
   return (
     <>
@@ -33,6 +46,8 @@ export const KanBanSubGroupByHeaderRoot: React.FC<IKanBanSubGroupByHeaderRoot> =
           issues_count={issues_count}
           kanBanToggle={kanBanToggle}
           handleKanBanToggle={handleKanBanToggle}
+          disableIssueCreation={disableIssueCreation}
+          currentStore={currentStore}
         />
       )}
       {sub_group_by && sub_group_by === "state_detail.group" && (
@@ -45,6 +60,8 @@ export const KanBanSubGroupByHeaderRoot: React.FC<IKanBanSubGroupByHeaderRoot> =
           issues_count={issues_count}
           kanBanToggle={kanBanToggle}
           handleKanBanToggle={handleKanBanToggle}
+          disableIssueCreation={disableIssueCreation}
+          currentStore={currentStore}
         />
       )}
       {sub_group_by && sub_group_by === "priority" && (
@@ -57,6 +74,8 @@ export const KanBanSubGroupByHeaderRoot: React.FC<IKanBanSubGroupByHeaderRoot> =
           issues_count={issues_count}
           kanBanToggle={kanBanToggle}
           handleKanBanToggle={handleKanBanToggle}
+          disableIssueCreation={disableIssueCreation}
+          currentStore={currentStore}
         />
       )}
       {sub_group_by && sub_group_by === "labels" && (
@@ -69,6 +88,8 @@ export const KanBanSubGroupByHeaderRoot: React.FC<IKanBanSubGroupByHeaderRoot> =
           issues_count={issues_count}
           kanBanToggle={kanBanToggle}
           handleKanBanToggle={handleKanBanToggle}
+          disableIssueCreation={disableIssueCreation}
+          currentStore={currentStore}
         />
       )}
       {sub_group_by && sub_group_by === "assignees" && (
@@ -81,6 +102,8 @@ export const KanBanSubGroupByHeaderRoot: React.FC<IKanBanSubGroupByHeaderRoot> =
           issues_count={issues_count}
           kanBanToggle={kanBanToggle}
           handleKanBanToggle={handleKanBanToggle}
+          disableIssueCreation={disableIssueCreation}
+          currentStore={currentStore}
         />
       )}
       {sub_group_by && sub_group_by === "created_by" && (
@@ -93,6 +116,8 @@ export const KanBanSubGroupByHeaderRoot: React.FC<IKanBanSubGroupByHeaderRoot> =
           issues_count={issues_count}
           kanBanToggle={kanBanToggle}
           handleKanBanToggle={handleKanBanToggle}
+          disableIssueCreation={disableIssueCreation}
+          currentStore={currentStore}
         />
       )}
     </>
diff --git a/web/components/issues/issue-layouts/kanban/properties.tsx b/web/components/issues/issue-layouts/kanban/properties.tsx
index a0285cb9d..c3c677208 100644
--- a/web/components/issues/issue-layouts/kanban/properties.tsx
+++ b/web/components/issues/issue-layouts/kanban/properties.tsx
@@ -19,10 +19,11 @@ export interface IKanBanProperties {
   handleIssues: (sub_group_by: string | null, group_by: string | null, issue: IIssue) => void;
   displayProperties: IIssueDisplayProperties | null;
   showEmptyGroup: boolean;
+  isReadOnly: boolean;
 }
 
 export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) => {
-  const { sub_group_id, columnId: group_id, issue, handleIssues, displayProperties, showEmptyGroup } = props;
+  const { sub_group_id, columnId: group_id, issue, handleIssues, displayProperties, isReadOnly } = props;
 
   const handleState = (state: IState) => {
     handleIssues(
@@ -89,7 +90,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
           projectId={issue?.project_detail?.id || null}
           value={issue?.state || null}
           onChange={handleState}
-          disabled={false}
+          disabled={isReadOnly}
           hideDropdownArrow
         />
       )}
@@ -99,7 +100,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
         <IssuePropertyPriority
           value={issue?.priority || null}
           onChange={handlePriority}
-          disabled={false}
+          disabled={isReadOnly}
           hideDropdownArrow
         />
       )}
@@ -110,7 +111,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
           projectId={issue?.project_detail?.id || null}
           value={issue?.labels || null}
           onChange={handleLabel}
-          disabled={false}
+          disabled={isReadOnly}
           hideDropdownArrow
         />
       )}
@@ -120,7 +121,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
         <IssuePropertyDate
           value={issue?.start_date || null}
           onChange={(date: string) => handleStartDate(date)}
-          disabled={false}
+          disabled={isReadOnly}
           placeHolder="Start date"
         />
       )}
@@ -130,7 +131,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
         <IssuePropertyDate
           value={issue?.target_date || null}
           onChange={(date: string) => handleTargetDate(date)}
-          disabled={false}
+          disabled={isReadOnly}
           placeHolder="Target date"
         />
       )}
@@ -142,7 +143,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
           value={issue?.assignees || null}
           hideDropdownArrow
           onChange={handleAssignee}
-          disabled={false}
+          disabled={isReadOnly}
           multiple
         />
       )}
@@ -153,7 +154,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
           projectId={issue?.project_detail?.id || null}
           value={issue?.estimate_point || null}
           onChange={handleEstimate}
-          disabled={false}
+          disabled={isReadOnly}
           hideDropdownArrow
         />
       )}
diff --git a/web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx b/web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx
index 1300ea17f..41bda5f91 100644
--- a/web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx
@@ -10,6 +10,7 @@ import { IIssue } from "types";
 import { EIssueActions } from "../../types";
 // components
 import { BaseKanBanRoot } from "../base-kanban-root";
+import { EProjectStore } from "store/command-palette.store";
 
 export interface ICycleKanBanLayout {}
 
@@ -18,7 +19,11 @@ export const CycleKanBanLayout: React.FC = observer(() => {
   const { workspaceSlug, cycleId } = router.query as { workspaceSlug: string; cycleId: string };
 
   // store
-  const { cycleIssues: cycleIssueStore, cycleIssueKanBanView: cycleIssueKanBanViewStore } = useMobxStore();
+  const {
+    cycleIssues: cycleIssueStore,
+    cycleIssuesFilter: cycleIssueFilterStore,
+    cycleIssueKanBanView: cycleIssueKanBanViewStore,
+  } = useMobxStore();
 
   const issueActions = {
     [EIssueActions.UPDATE]: async (issue: IIssue) => {
@@ -39,10 +44,12 @@ export const CycleKanBanLayout: React.FC = observer(() => {
     <BaseKanBanRoot
       issueActions={issueActions}
       issueStore={cycleIssueStore}
+      issuesFilterStore={cycleIssueFilterStore}
       kanbanViewStore={cycleIssueKanBanViewStore}
       showLoader={true}
       QuickActions={CycleIssueQuickActions}
       viewId={cycleId}
+      currentStore={EProjectStore.CYCLE}
     />
   );
 });
diff --git a/web/components/issues/issue-layouts/kanban/roots/draft-issue-root.tsx b/web/components/issues/issue-layouts/kanban/roots/draft-issue-root.tsx
new file mode 100644
index 000000000..434de6259
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/roots/draft-issue-root.tsx
@@ -0,0 +1,48 @@
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { ProjectIssueQuickActions } from "components/issues";
+// types
+import { IIssue } from "types";
+// constants
+import { EIssueActions } from "../../types";
+import { BaseKanBanRoot } from "../base-kanban-root";
+
+export interface IKanBanLayout {}
+
+export const DraftKanBanLayout: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query as { workspaceSlug: string };
+
+  const {
+    projectDraftIssues: issueStore,
+    projectDraftIssuesFilter: projectIssuesFilterStore,
+    issueKanBanView: issueKanBanViewStore,
+  } = useMobxStore();
+
+  const issueActions = {
+    [EIssueActions.UPDATE]: async (issue: IIssue) => {
+      if (!workspaceSlug) return;
+
+      await issueStore.updateIssue(workspaceSlug, issue.project, issue.id, issue);
+    },
+    [EIssueActions.DELETE]: async (issue: IIssue) => {
+      if (!workspaceSlug) return;
+
+      await issueStore.removeIssue(workspaceSlug, issue.project, issue.id);
+    },
+  };
+
+  return (
+    <BaseKanBanRoot
+      issueActions={issueActions}
+      issuesFilterStore={projectIssuesFilterStore}
+      issueStore={issueStore}
+      kanbanViewStore={issueKanBanViewStore}
+      showLoader={true}
+      QuickActions={ProjectIssueQuickActions}
+    />
+  );
+});
diff --git a/web/components/issues/issue-layouts/kanban/roots/module-root.tsx b/web/components/issues/issue-layouts/kanban/roots/module-root.tsx
index 59bfa7e36..15141ecc7 100644
--- a/web/components/issues/issue-layouts/kanban/roots/module-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/roots/module-root.tsx
@@ -10,6 +10,7 @@ import { IIssue } from "types";
 // constants
 import { EIssueActions } from "../../types";
 import { BaseKanBanRoot } from "../base-kanban-root";
+import { EProjectStore } from "store/command-palette.store";
 
 export interface IModuleKanBanLayout {}
 
@@ -20,8 +21,8 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
   // store
   const {
     moduleIssues: moduleIssueStore,
+    moduleIssuesFilter: moduleIssueFilterStore,
     moduleIssueKanBanView: moduleIssueKanBanViewStore,
-    issueDetail: issueDetailStore,
   } = useMobxStore();
 
   // const handleIssues = useCallback(
@@ -58,17 +59,19 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
     },
     [EIssueActions.REMOVE]: async (issue: IIssue) => {
       if (!workspaceSlug || !moduleId || !issue.bridge_id) return;
-      moduleIssueStore.removeIssueFromModule(workspaceSlug, issue.project, issue.id, moduleId, issue.bridge_id);
+      moduleIssueStore.removeIssueFromModule(workspaceSlug, issue.project, moduleId, issue.id, issue.bridge_id);
     },
   };
   return (
     <BaseKanBanRoot
       issueActions={issueActions}
       issueStore={moduleIssueStore}
+      issuesFilterStore={moduleIssueFilterStore}
       kanbanViewStore={moduleIssueKanBanViewStore}
       showLoader={true}
       QuickActions={ModuleIssueQuickActions}
       viewId={moduleId}
+      currentStore={EProjectStore.MODULE}
     />
   );
 });
diff --git a/web/components/issues/issue-layouts/kanban/roots/profile-issues-root.tsx b/web/components/issues/issue-layouts/kanban/roots/profile-issues-root.tsx
index 5c5388afb..6b8c9c2d0 100644
--- a/web/components/issues/issue-layouts/kanban/roots/profile-issues-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/roots/profile-issues-root.tsx
@@ -1,166 +1,48 @@
-import { FC, useCallback, useState } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-import { DragDropContext } from "@hello-pangea/dnd";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
-import { KanBanSwimLanes } from "../swimlanes";
-import { KanBan } from "../default";
 import { ProjectIssueQuickActions } from "components/issues";
-import { Spinner } from "@plane/ui";
-// constants
-import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
 // types
 import { IIssue } from "types";
+// constants
 import { EIssueActions } from "../../types";
+import { BaseKanBanRoot } from "../base-kanban-root";
+import { EProjectStore } from "store/command-palette.store";
 
-export interface IProfileIssuesKanBanLayout {}
+export const ProfileIssuesKanBanLayout: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, userId } = router.query as { workspaceSlug: string; userId: string };
 
-export const ProfileIssuesKanBanLayout: FC = observer(() => {
   const {
-    workspace: workspaceStore,
-    project: projectStore,
-    projectMember: { projectMembers },
-    projectState: projectStateStore,
-    profileIssues: profileIssuesStore,
-    profileIssueFilters: profileIssueFiltersStore,
+    workspaceProfileIssues: profileIssuesStore,
+    workspaceProfileIssuesFilter: profileIssueFiltersStore,
     issueKanBanView: issueKanBanViewStore,
-    issueDetail: issueDetailStore,
   } = useMobxStore();
 
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
+  const issueActions = {
+    [EIssueActions.UPDATE]: async (issue: IIssue) => {
+      if (!workspaceSlug || !userId) return;
 
-  const issues = profileIssuesStore?.getIssues;
-
-  const sub_group_by: string | null = profileIssueFiltersStore?.userDisplayFilters?.sub_group_by || null;
-
-  const group_by: string | null = profileIssueFiltersStore?.userDisplayFilters?.group_by || null;
-
-  const order_by: string | null = profileIssueFiltersStore?.userDisplayFilters?.order_by || null;
-
-  const userDisplayFilters = profileIssueFiltersStore?.userDisplayFilters || null;
-
-  const displayProperties = profileIssueFiltersStore?.userDisplayProperties || null;
-
-  const currentKanBanView: "swimlanes" | "default" = profileIssueFiltersStore?.userDisplayFilters?.sub_group_by
-    ? "swimlanes"
-    : "default";
-
-  const [isDragStarted, setIsDragStarted] = useState<boolean>(false);
-
-  // const onDragStart = () => {
-  //   setIsDragStarted(true);
-  // };
-
-  const onDragEnd = (result: any) => {
-    setIsDragStarted(false);
-    if (!result) return;
-
-    if (
-      result.destination &&
-      result.source &&
-      result.destination.droppableId === result.source.droppableId &&
-      result.destination.index === result.source.index
-    )
-      return;
-
-    currentKanBanView === "default"
-      ? issueKanBanViewStore?.handleDragDrop(result.source, result.destination)
-      : issueKanBanViewStore?.handleSwimlaneDragDrop(result.source, result.destination);
-  };
-
-  const handleIssues = useCallback(
-    (sub_group_by: string | null, group_by: string | null, issue: IIssue, action: EIssueActions) => {
-      if (!workspaceSlug) return;
-
-      if (action === EIssueActions.UPDATE) {
-        profileIssuesStore.updateIssueStructure(group_by, sub_group_by, issue);
-        issueDetailStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
-      }
-      if (action === EIssueActions.DELETE) profileIssuesStore.deleteIssue(group_by, sub_group_by, issue);
+      await profileIssuesStore.updateIssue(workspaceSlug, userId, issue.id, issue);
     },
-    [profileIssuesStore, issueDetailStore, workspaceSlug]
-  );
+    [EIssueActions.DELETE]: async (issue: IIssue) => {
+      if (!workspaceSlug || !userId) return;
 
-  const handleKanBanToggle = (toggle: "groupByHeaderMinMax" | "subgroupByIssuesVisibility", value: string) => {
-    issueKanBanViewStore.handleKanBanToggle(toggle, value);
+      await profileIssuesStore.removeIssue(workspaceSlug, userId, issue.project, issue.id);
+    },
   };
 
-  const states = projectStateStore?.projectStates || null;
-  const priorities = ISSUE_PRIORITIES || null;
-  const labels = workspaceStore.workspaceLabels || null;
-  const stateGroups = ISSUE_STATE_GROUPS || null;
-  const projects = projectStore?.workspaceProjects || null;
-
   return (
-    <>
-      {profileIssuesStore.loader ? (
-        <div className="w-full h-full flex justify-center items-center">
-          <Spinner />
-        </div>
-      ) : (
-        <div className={`relative min-w-full w-max min-h-full h-max bg-custom-background-90 px-3`}>
-          <DragDropContext onDragEnd={onDragEnd}>
-            {currentKanBanView === "default" ? (
-              <KanBan
-                issues={{}}
-                issueIds={[]}
-                sub_group_by={sub_group_by}
-                group_by={group_by}
-                order_by={order_by}
-                handleIssues={handleIssues}
-                quickActions={(sub_group_by, group_by, issue) => (
-                  <ProjectIssueQuickActions
-                    issue={issue}
-                    handleDelete={async () => handleIssues(sub_group_by, group_by, issue, EIssueActions.DELETE)}
-                    handleUpdate={async (data) => handleIssues(sub_group_by, group_by, data, EIssueActions.UPDATE)}
-                  />
-                )}
-                displayProperties={displayProperties}
-                kanBanToggle={issueKanBanViewStore?.kanBanToggle}
-                handleKanBanToggle={handleKanBanToggle}
-                states={states}
-                stateGroups={stateGroups}
-                priorities={priorities}
-                labels={labels}
-                members={projectMembers?.map((m) => m.member) ?? null}
-                projects={projects}
-                showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
-                isDragStarted={isDragStarted}
-              />
-            ) : (
-              <KanBanSwimLanes
-                issues={{}}
-                issueIds={[]}
-                sub_group_by={sub_group_by}
-                group_by={group_by}
-                order_by={order_by}
-                handleIssues={handleIssues}
-                quickActions={(sub_group_by, group_by, issue) => (
-                  <ProjectIssueQuickActions
-                    issue={issue}
-                    handleDelete={async () => handleIssues(sub_group_by, group_by, issue, EIssueActions.DELETE)}
-                    handleUpdate={async (data) => handleIssues(sub_group_by, group_by, data, EIssueActions.UPDATE)}
-                  />
-                )}
-                displayProperties={displayProperties}
-                kanBanToggle={issueKanBanViewStore?.kanBanToggle}
-                handleKanBanToggle={handleKanBanToggle}
-                states={states}
-                stateGroups={stateGroups}
-                priorities={priorities}
-                labels={labels}
-                members={projectMembers?.map((m) => m.member) ?? null}
-                projects={projects}
-                showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
-                isDragStarted={isDragStarted}
-              />
-            )}
-          </DragDropContext>
-        </div>
-      )}
-    </>
+    <BaseKanBanRoot
+      issueActions={issueActions}
+      issuesFilterStore={profileIssueFiltersStore}
+      issueStore={profileIssuesStore}
+      kanbanViewStore={issueKanBanViewStore}
+      showLoader={true}
+      QuickActions={ProjectIssueQuickActions}
+      currentStore={EProjectStore.PROFILE}
+    />
   );
 });
diff --git a/web/components/issues/issue-layouts/kanban/roots/project-root.tsx b/web/components/issues/issue-layouts/kanban/roots/project-root.tsx
index e38c0a9ea..bd50d6824 100644
--- a/web/components/issues/issue-layouts/kanban/roots/project-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/roots/project-root.tsx
@@ -9,6 +9,7 @@ import { IIssue } from "types";
 // constants
 import { EIssueActions } from "../../types";
 import { BaseKanBanRoot } from "../base-kanban-root";
+import { EProjectStore } from "store/command-palette.store";
 
 export interface IKanBanLayout {}
 
@@ -18,30 +19,32 @@ export const KanBanLayout: React.FC = observer(() => {
 
   const {
     projectIssues: issueStore,
+    projectIssuesFilter: issuesFilterStore,
     issueKanBanView: issueKanBanViewStore,
-    issueDetail: issueDetailStore,
   } = useMobxStore();
 
   const issueActions = {
     [EIssueActions.UPDATE]: async (issue: IIssue) => {
       if (!workspaceSlug) return;
 
-      await issueDetailStore.updateIssue(workspaceSlug, issue.project, issue.id, issue);
+      await issueStore.updateIssue(workspaceSlug, issue.project, issue.id, issue);
     },
     [EIssueActions.DELETE]: async (issue: IIssue) => {
       if (!workspaceSlug) return;
 
-      await issueDetailStore.deleteIssue(workspaceSlug, issue.project, issue.id);
+      await issueStore.removeIssue(workspaceSlug, issue.project, issue.id);
     },
   };
 
   return (
     <BaseKanBanRoot
       issueActions={issueActions}
+      issuesFilterStore={issuesFilterStore}
       issueStore={issueStore}
       kanbanViewStore={issueKanBanViewStore}
       showLoader={true}
       QuickActions={ProjectIssueQuickActions}
+      currentStore={EProjectStore.PROJECT}
     />
   );
 });
diff --git a/web/components/issues/issue-layouts/kanban/roots/project-view-root.tsx b/web/components/issues/issue-layouts/kanban/roots/project-view-root.tsx
index c5cb3a03a..625d2720f 100644
--- a/web/components/issues/issue-layouts/kanban/roots/project-view-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/roots/project-view-root.tsx
@@ -9,6 +9,7 @@ import { EIssueActions } from "../../types";
 import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
 // components
 import { BaseKanBanRoot } from "../base-kanban-root";
+import { EProjectStore } from "store/command-palette.store";
 
 export interface IViewKanBanLayout {}
 
@@ -18,30 +19,32 @@ export const ProjectViewKanBanLayout: React.FC = observer(() => {
 
   const {
     viewIssues: projectViewIssuesStore,
+    viewIssuesFilter: projectIssueViewFiltersStore,
     issueKanBanView: projectViewIssueKanBanViewStore,
-    issueDetail: issueDetailStore,
   } = useMobxStore();
 
   const issueActions = {
     [EIssueActions.UPDATE]: async (issue: IIssue) => {
       if (!workspaceSlug) return;
 
-      await issueDetailStore.updateIssue(workspaceSlug, issue.project, issue.id, issue);
+      await projectViewIssuesStore.updateIssue(workspaceSlug, issue.project, issue.id, issue);
     },
     [EIssueActions.DELETE]: async (issue: IIssue) => {
       if (!workspaceSlug) return;
 
-      await issueDetailStore.deleteIssue(workspaceSlug, issue.project, issue.id);
+      await projectViewIssuesStore.removeIssue(workspaceSlug, issue.project, issue.id);
     },
   };
 
   return (
     <BaseKanBanRoot
       issueActions={issueActions}
+      issuesFilterStore={projectIssueViewFiltersStore}
       issueStore={projectViewIssuesStore}
       kanbanViewStore={projectViewIssueKanBanViewStore}
       showLoader={true}
       QuickActions={ProjectIssueQuickActions}
+      currentStore={EProjectStore.PROJECT_VIEW}
     />
   );
 });
diff --git a/web/components/issues/issue-layouts/kanban/swimlanes.tsx b/web/components/issues/issue-layouts/kanban/swimlanes.tsx
index efd8e1759..e489b5c5f 100644
--- a/web/components/issues/issue-layouts/kanban/swimlanes.tsx
+++ b/web/components/issues/issue-layouts/kanban/swimlanes.tsx
@@ -10,6 +10,7 @@ import { IIssueResponse, IGroupedIssues, ISubGroupedIssues, TUnGroupedIssues } f
 // constants
 import { getValueFromObject } from "constants/issue";
 import { EIssueActions } from "../types";
+import { EProjectStore } from "store/command-palette.store";
 
 interface ISubGroupSwimlaneHeader {
   issues: IIssueResponse;
@@ -20,9 +21,10 @@ interface ISubGroupSwimlaneHeader {
   listKey: string;
   kanBanToggle: any;
   handleKanBanToggle: any;
+  disableIssueCreation?: boolean;
+  currentStore?: EProjectStore;
 }
 const SubGroupSwimlaneHeader: React.FC<ISubGroupSwimlaneHeader> = ({
-  issues,
   issueIds,
   sub_group_by,
   group_by,
@@ -30,6 +32,8 @@ const SubGroupSwimlaneHeader: React.FC<ISubGroupSwimlaneHeader> = ({
   listKey,
   kanBanToggle,
   handleKanBanToggle,
+  disableIssueCreation,
+  currentStore,
 }) => {
   const calculateIssueCount = (column_id: string) => {
     let issueCount = 0;
@@ -54,6 +58,8 @@ const SubGroupSwimlaneHeader: React.FC<ISubGroupSwimlaneHeader> = ({
               issues_count={calculateIssueCount(getValueFromObject(_list, listKey) as string)}
               kanBanToggle={kanBanToggle}
               handleKanBanToggle={handleKanBanToggle}
+              disableIssueCreation={disableIssueCreation}
+              currentStore={currentStore}
             />
           </div>
         ))}
@@ -78,6 +84,10 @@ interface ISubGroupSwimlane extends ISubGroupSwimlaneHeader {
   kanBanToggle: any;
   handleKanBanToggle: any;
   isDragStarted?: boolean;
+  disableIssueCreation?: boolean;
+  currentStore?: EProjectStore;
+  enableQuickIssueCreate: boolean;
+  isReadOnly: boolean;
 }
 const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
   const {
@@ -101,6 +111,9 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
     members,
     projects,
     isDragStarted,
+    disableIssueCreation,
+    enableQuickIssueCreate,
+    isReadOnly,
   } = props;
 
   const calculateIssueCount = (column_id: string) => {
@@ -128,6 +141,7 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
                   issues_count={calculateIssueCount(getValueFromObject(_list, listKey) as string)}
                   kanBanToggle={kanBanToggle}
                   handleKanBanToggle={handleKanBanToggle}
+                  disableIssueCreation={disableIssueCreation}
                 />
               </div>
               <div className="w-full border-b border-custom-border-400 border-dashed" />
@@ -153,8 +167,9 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
                   labels={labels}
                   members={members}
                   projects={projects}
-                  enableQuickIssueCreate
+                  enableQuickIssueCreate={enableQuickIssueCreate}
                   isDragStarted={isDragStarted}
+                  isReadOnly={isReadOnly}
                 />
               </div>
             )}
@@ -183,6 +198,10 @@ export interface IKanBanSwimLanes {
   members: IUserLite[] | null;
   projects: IProject[] | null;
   isDragStarted?: boolean;
+  disableIssueCreation?: boolean;
+  currentStore?: EProjectStore;
+  enableQuickIssueCreate: boolean;
+  isReadOnly: boolean;
 }
 
 export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
@@ -205,6 +224,10 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
     members,
     projects,
     isDragStarted,
+    disableIssueCreation,
+    enableQuickIssueCreate,
+    isReadOnly,
+    currentStore,
   } = props;
 
   return (
@@ -220,6 +243,8 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
             listKey={`id`}
             kanBanToggle={kanBanToggle}
             handleKanBanToggle={handleKanBanToggle}
+            disableIssueCreation={disableIssueCreation}
+            currentStore={currentStore}
           />
         )}
 
@@ -233,6 +258,8 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
             listKey={`id`}
             kanBanToggle={kanBanToggle}
             handleKanBanToggle={handleKanBanToggle}
+            disableIssueCreation={disableIssueCreation}
+            currentStore={currentStore}
           />
         )}
 
@@ -246,6 +273,8 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
             listKey={`key`}
             kanBanToggle={kanBanToggle}
             handleKanBanToggle={handleKanBanToggle}
+            disableIssueCreation={disableIssueCreation}
+            currentStore={currentStore}
           />
         )}
 
@@ -259,6 +288,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
             listKey={`key`}
             kanBanToggle={kanBanToggle}
             handleKanBanToggle={handleKanBanToggle}
+            currentStore={currentStore}
           />
         )}
 
@@ -272,6 +302,8 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
             listKey={`id`}
             kanBanToggle={kanBanToggle}
             handleKanBanToggle={handleKanBanToggle}
+            disableIssueCreation={disableIssueCreation}
+            currentStore={currentStore}
           />
         )}
 
@@ -285,6 +317,8 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
             listKey={`id`}
             kanBanToggle={kanBanToggle}
             handleKanBanToggle={handleKanBanToggle}
+            disableIssueCreation={disableIssueCreation}
+            currentStore={currentStore}
           />
         )}
 
@@ -298,6 +332,8 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
             listKey={`id`}
             kanBanToggle={kanBanToggle}
             handleKanBanToggle={handleKanBanToggle}
+            disableIssueCreation={disableIssueCreation}
+            currentStore={currentStore}
           />
         )}
       </div>
@@ -324,6 +360,9 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
           members={members}
           projects={projects}
           isDragStarted={isDragStarted}
+          disableIssueCreation={disableIssueCreation}
+          enableQuickIssueCreate={enableQuickIssueCreate}
+          isReadOnly={isReadOnly}
         />
       )}
 
@@ -349,6 +388,9 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
           members={members}
           projects={projects}
           isDragStarted={isDragStarted}
+          disableIssueCreation={disableIssueCreation}
+          enableQuickIssueCreate={enableQuickIssueCreate}
+          isReadOnly={isReadOnly}
         />
       )}
 
@@ -374,6 +416,9 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
           members={members}
           projects={projects}
           isDragStarted={isDragStarted}
+          disableIssueCreation={disableIssueCreation}
+          enableQuickIssueCreate={enableQuickIssueCreate}
+          isReadOnly={isReadOnly}
         />
       )}
 
@@ -399,6 +444,9 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
           members={members}
           projects={projects}
           isDragStarted={isDragStarted}
+          disableIssueCreation={disableIssueCreation}
+          enableQuickIssueCreate={enableQuickIssueCreate}
+          isReadOnly={isReadOnly}
         />
       )}
 
@@ -424,6 +472,9 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
           members={members}
           projects={projects}
           isDragStarted={isDragStarted}
+          disableIssueCreation={disableIssueCreation}
+          enableQuickIssueCreate={enableQuickIssueCreate}
+          isReadOnly={isReadOnly}
         />
       )}
 
@@ -449,6 +500,9 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
           members={members}
           projects={projects}
           isDragStarted={isDragStarted}
+          disableIssueCreation={disableIssueCreation}
+          enableQuickIssueCreate={enableQuickIssueCreate}
+          isReadOnly={isReadOnly}
         />
       )}
 
@@ -474,6 +528,9 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
           members={members}
           projects={projects}
           isDragStarted={isDragStarted}
+          disableIssueCreation={disableIssueCreation}
+          enableQuickIssueCreate={enableQuickIssueCreate}
+          isReadOnly={isReadOnly}
         />
       )}
 
@@ -499,6 +556,9 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
           members={members}
           projects={projects}
           isDragStarted={isDragStarted}
+          disableIssueCreation={disableIssueCreation}
+          enableQuickIssueCreate={enableQuickIssueCreate}
+          isReadOnly={isReadOnly}
         />
       )}
     </div>
diff --git a/web/components/issues/issue-layouts/list/base-list-root.tsx b/web/components/issues/issue-layouts/list/base-list-root.tsx
index 92bf7a36e..54995e559 100644
--- a/web/components/issues/issue-layouts/list/base-list-root.tsx
+++ b/web/components/issues/issue-layouts/list/base-list-root.tsx
@@ -11,6 +11,10 @@ import {
   ICycleIssuesStore,
   IModuleIssuesFilterStore,
   IModuleIssuesStore,
+  IProfileIssuesFilterStore,
+  IProfileIssuesStore,
+  IProjectArchivedIssuesStore,
+  IProjectDraftIssuesStore,
   IProjectIssuesFilterStore,
   IProjectIssuesStore,
   IViewIssuesFilterStore,
@@ -18,6 +22,7 @@ import {
 } from "store/issues";
 import { observer } from "mobx-react-lite";
 import { IIssueResponse } from "store/issues/types";
+import { EProjectStore } from "store/command-palette.store";
 
 enum EIssueActions {
   UPDATE = "update",
@@ -30,8 +35,16 @@ interface IBaseListRoot {
     | IProjectIssuesFilterStore
     | IModuleIssuesFilterStore
     | ICycleIssuesFilterStore
-    | IViewIssuesFilterStore;
-  issueStore: IProjectIssuesStore | IModuleIssuesStore | ICycleIssuesStore | IViewIssuesStore;
+    | IViewIssuesFilterStore
+    | IProfileIssuesFilterStore;
+  issueStore:
+    | IProjectIssuesStore
+    | IModuleIssuesStore
+    | ICycleIssuesStore
+    | IViewIssuesStore
+    | IProjectArchivedIssuesStore
+    | IProjectDraftIssuesStore
+    | IProfileIssuesStore;
   QuickActions: FC<IQuickActionProps>;
   issueActions: {
     [EIssueActions.DELETE]: (group_by: string | null, issue: IIssue) => void;
@@ -40,10 +53,11 @@ interface IBaseListRoot {
   };
   getProjects: (projectStore: IProjectStore) => IProject[] | null;
   viewId?: string;
+  currentStore: EProjectStore;
 }
 
 export const BaseListRoot = observer((props: IBaseListRoot) => {
-  const { issueFilterStore, issueStore, QuickActions, issueActions, getProjects, viewId } = props;
+  const { issueFilterStore, issueStore, QuickActions, issueActions, getProjects, viewId, currentStore } = props;
 
   const {
     project: projectStore,
@@ -52,8 +66,10 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
     projectLabel: { projectLabels },
   } = useMobxStore();
 
-  const issueIds = issueStore.getIssuesIds || [];
-  const issues = issueStore.getIssues;
+  const issueIds = issueStore?.getIssuesIds || [];
+  const issues = issueStore?.getIssues;
+
+  const { enableInlineEditing, enableQuickAdd, enableIssueCreation } = issueStore?.viewFlags || {};
 
   const displayFilters = issueFilterStore?.issueFilters?.displayFilters;
   const group_by = displayFilters?.group_by || null;
@@ -75,7 +91,7 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
 
   return (
     <>
-      {issueStore.loader === "mutation" ? (
+      {issueStore?.loader === "init-loader" ? (
         <div className="w-full h-full flex justify-center items-center">
           <Spinner />
         </div>
@@ -108,10 +124,12 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
             projects={projects}
             issueIds={issueIds}
             showEmptyGroup={showEmptyGroup}
-            enableIssueQuickAdd={true}
-            isReadonly={false}
-            quickAddCallback={issueStore.quickAddIssue}
             viewId={viewId}
+            quickAddCallback={issueStore?.quickAddIssue}
+            enableIssueQuickAdd={!!enableQuickAdd}
+            isReadonly={!enableInlineEditing}
+            disableIssueCreation={!enableIssueCreation}
+            currentStore={currentStore}
           />
         </div>
       )}
diff --git a/web/components/issues/issue-layouts/list/default.tsx b/web/components/issues/issue-layouts/list/default.tsx
index 6727c387a..0900f6021 100644
--- a/web/components/issues/issue-layouts/list/default.tsx
+++ b/web/components/issues/issue-layouts/list/default.tsx
@@ -4,10 +4,11 @@ import { ListGroupByHeaderRoot } from "./headers/group-by-root";
 import { IssueBlocksList, ListQuickAddIssueForm } from "components/issues";
 // types
 import { IIssue, IIssueDisplayProperties, IIssueLabel, IProject, IState, IUserLite } from "types";
-import { IIssueResponse, IGroupedIssues, TUnGroupedIssues } from "store/issues/types";
+import { IIssueResponse, IGroupedIssues, TUnGroupedIssues, ViewFlags } from "store/issues/types";
 import { EIssueActions } from "../types";
 // constants
 import { getValueFromObject } from "constants/issue";
+import { EProjectStore } from "store/command-palette.store";
 
 export interface IGroupByList {
   issueIds: IGroupedIssues | TUnGroupedIssues | any;
@@ -29,6 +30,8 @@ export interface IGroupByList {
     data: IIssue,
     viewId?: string
   ) => Promise<IIssue | undefined>;
+  disableIssueCreation?: boolean;
+  currentStore: EProjectStore;
   viewId?: string;
 }
 
@@ -49,6 +52,8 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
     isReadonly,
     quickAddCallback,
     viewId,
+    disableIssueCreation,
+    currentStore,
   } = props;
 
   const prePopulateQuickAddData = (groupByKey: string | null, value: any) => {
@@ -84,6 +89,8 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
                         ? issueIds?.length || 0
                         : issueIds?.[getValueFromObject(_list, listKey) as string]?.length || 0
                     }
+                    disableIssueCreation={disableIssueCreation}
+                    currentStore={currentStore}
                   />
                 </div>
 
@@ -138,6 +145,8 @@ export interface IList {
     viewId?: string
   ) => Promise<IIssue | undefined>;
   viewId?: string;
+  disableIssueCreation?: boolean;
+  currentStore: EProjectStore;
 }
 
 export const List: React.FC<IList> = (props) => {
@@ -153,13 +162,14 @@ export const List: React.FC<IList> = (props) => {
     showEmptyGroup,
     enableIssueQuickAdd,
     isReadonly,
-
+    disableIssueCreation,
     states,
     stateGroups,
     priorities,
     labels,
     members,
     projects,
+    currentStore,
   } = props;
 
   return (
@@ -181,6 +191,8 @@ export const List: React.FC<IList> = (props) => {
           isReadonly={isReadonly}
           quickAddCallback={quickAddCallback}
           viewId={viewId}
+          disableIssueCreation={disableIssueCreation}
+          currentStore={currentStore}
         />
       )}
 
@@ -200,6 +212,8 @@ export const List: React.FC<IList> = (props) => {
           isReadonly={isReadonly}
           quickAddCallback={quickAddCallback}
           viewId={viewId}
+          disableIssueCreation={disableIssueCreation}
+          currentStore={currentStore}
         />
       )}
 
@@ -219,6 +233,8 @@ export const List: React.FC<IList> = (props) => {
           isReadonly={isReadonly}
           quickAddCallback={quickAddCallback}
           viewId={viewId}
+          disableIssueCreation={disableIssueCreation}
+          currentStore={currentStore}
         />
       )}
 
@@ -238,6 +254,8 @@ export const List: React.FC<IList> = (props) => {
           isReadonly={isReadonly}
           quickAddCallback={quickAddCallback}
           viewId={viewId}
+          disableIssueCreation={disableIssueCreation}
+          currentStore={currentStore}
         />
       )}
 
@@ -257,6 +275,8 @@ export const List: React.FC<IList> = (props) => {
           isReadonly={isReadonly}
           quickAddCallback={quickAddCallback}
           viewId={viewId}
+          disableIssueCreation={disableIssueCreation}
+          currentStore={currentStore}
         />
       )}
 
@@ -276,6 +296,8 @@ export const List: React.FC<IList> = (props) => {
           isReadonly={isReadonly}
           quickAddCallback={quickAddCallback}
           viewId={viewId}
+          disableIssueCreation={disableIssueCreation}
+          currentStore={currentStore}
         />
       )}
 
@@ -295,6 +317,8 @@ export const List: React.FC<IList> = (props) => {
           isReadonly={isReadonly}
           quickAddCallback={quickAddCallback}
           viewId={viewId}
+          disableIssueCreation={disableIssueCreation}
+          currentStore={currentStore}
         />
       )}
 
@@ -314,6 +338,8 @@ export const List: React.FC<IList> = (props) => {
           isReadonly={isReadonly}
           quickAddCallback={quickAddCallback}
           viewId={viewId}
+          disableIssueCreation={disableIssueCreation}
+          currentStore={currentStore}
         />
       )}
     </div>
diff --git a/web/components/issues/issue-layouts/list/headers/assignee.tsx b/web/components/issues/issue-layouts/list/headers/assignee.tsx
index edc74d9cc..8590a449a 100644
--- a/web/components/issues/issue-layouts/list/headers/assignee.tsx
+++ b/web/components/issues/issue-layouts/list/headers/assignee.tsx
@@ -4,17 +4,20 @@ import { observer } from "mobx-react-lite";
 import { HeaderGroupByCard } from "./group-by-card";
 // ui
 import { Avatar } from "@plane/ui";
+import { EProjectStore } from "store/command-palette.store";
 
 export interface IAssigneesHeader {
   column_id: string;
   column_value: any;
   issues_count: number;
+  disableIssueCreation?: boolean;
+  currentStore: EProjectStore;
 }
 
 export const Icon = ({ user }: any) => <Avatar name={user.display_name} src={user.avatar} size="md" />;
 
 export const AssigneesHeader: FC<IAssigneesHeader> = observer((props) => {
-  const { column_id, column_value, issues_count } = props;
+  const { column_value, issues_count, disableIssueCreation, currentStore } = props;
 
   const assignee = column_value ?? null;
 
@@ -26,6 +29,8 @@ export const AssigneesHeader: FC<IAssigneesHeader> = observer((props) => {
           title={assignee?.display_name || ""}
           count={issues_count}
           issuePayload={{ assignees: [assignee?.member?.id] }}
+          disableIssueCreation={disableIssueCreation}
+          currentStore={currentStore}
         />
       )}
     </>
diff --git a/web/components/issues/issue-layouts/list/headers/created-by.tsx b/web/components/issues/issue-layouts/list/headers/created-by.tsx
index 0814fdbe5..a74b2f216 100644
--- a/web/components/issues/issue-layouts/list/headers/created-by.tsx
+++ b/web/components/issues/issue-layouts/list/headers/created-by.tsx
@@ -3,15 +3,18 @@ import { observer } from "mobx-react-lite";
 // components
 import { HeaderGroupByCard } from "./group-by-card";
 import { Icon } from "./assignee";
+import { EProjectStore } from "store/command-palette.store";
 
 export interface ICreatedByHeader {
   column_id: string;
   column_value: any;
   issues_count: number;
+  disableIssueCreation?: boolean;
+  currentStore: EProjectStore;
 }
 
 export const CreatedByHeader: FC<ICreatedByHeader> = observer((props) => {
-  const { column_id, column_value, issues_count } = props;
+  const { column_value, issues_count, disableIssueCreation, currentStore } = props;
 
   const createdBy = column_value ?? null;
 
@@ -23,6 +26,8 @@ export const CreatedByHeader: FC<ICreatedByHeader> = observer((props) => {
           title={createdBy?.display_name || ""}
           count={issues_count}
           issuePayload={{ created_by: createdBy?.member?.id }}
+          disableIssueCreation={disableIssueCreation}
+          currentStore={currentStore}
         />
       )}
     </>
diff --git a/web/components/issues/issue-layouts/list/headers/empty-group.tsx b/web/components/issues/issue-layouts/list/headers/empty-group.tsx
index 59840cde6..424df80af 100644
--- a/web/components/issues/issue-layouts/list/headers/empty-group.tsx
+++ b/web/components/issues/issue-layouts/list/headers/empty-group.tsx
@@ -1,15 +1,26 @@
 import { observer } from "mobx-react-lite";
 // components
 import { HeaderGroupByCard } from "./group-by-card";
+import { EProjectStore } from "store/command-palette.store";
 
 export interface IEmptyHeader {
   column_id: string;
   column_value: any;
   issues_count: number;
+  disableIssueCreation?: boolean;
+  currentStore: EProjectStore;
 }
 
 export const EmptyHeader: React.FC<IEmptyHeader> = observer((props) => {
-  const { column_id, column_value, issues_count } = props;
+  const { column_id, column_value, issues_count, disableIssueCreation, currentStore } = props;
 
-  return <HeaderGroupByCard title={column_value?.title || "All Issues"} count={issues_count} issuePayload={{}} />;
+  return (
+    <HeaderGroupByCard
+      title={column_value?.title || "All Issues"}
+      count={issues_count}
+      issuePayload={{}}
+      disableIssueCreation={disableIssueCreation}
+      currentStore={currentStore}
+    />
+  );
 });
diff --git a/web/components/issues/issue-layouts/list/headers/group-by-card.tsx b/web/components/issues/issue-layouts/list/headers/group-by-card.tsx
index 0833fffdc..991ea94c3 100644
--- a/web/components/issues/issue-layouts/list/headers/group-by-card.tsx
+++ b/web/components/issues/issue-layouts/list/headers/group-by-card.tsx
@@ -6,125 +6,124 @@ import { CircleDashed, Plus } from "lucide-react";
 import { CreateUpdateIssueModal } from "components/issues/modal";
 import { ExistingIssuesListModal } from "components/core";
 import { CustomMenu } from "@plane/ui";
-// hooks
-import useToast from "hooks/use-toast";
 // mobx
 import { observer } from "mobx-react-lite";
 // types
 import { IIssue, ISearchIssueResponse } from "types";
+import { EProjectStore } from "store/command-palette.store";
 
 interface IHeaderGroupByCard {
   icon?: React.ReactNode;
   title: string;
   count: number;
   issuePayload: Partial<IIssue>;
+  disableIssueCreation?: boolean;
+  currentStore: EProjectStore;
 }
 
-export const HeaderGroupByCard = observer(({ icon, title, count, issuePayload }: IHeaderGroupByCard) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId, moduleId, cycleId } = router.query;
+export const HeaderGroupByCard = observer(
+  ({ icon, title, count, issuePayload, disableIssueCreation, currentStore }: IHeaderGroupByCard) => {
+    const router = useRouter();
+    const { workspaceSlug, projectId, moduleId, cycleId } = router.query;
 
-  const { setToastAlert } = useToast();
+    const [isOpen, setIsOpen] = React.useState(false);
 
-  const [isOpen, setIsOpen] = React.useState(false);
+    const [openExistingIssueListModal, setOpenExistingIssueListModal] = React.useState(false);
 
-  const [openExistingIssueListModal, setOpenExistingIssueListModal] = React.useState(false);
+    const renderExistingIssueModal = moduleId || cycleId;
+    const ExistingIssuesListModalPayload = moduleId ? { module: true } : { cycle: true };
 
-  const renderExistingIssueModal = moduleId || cycleId;
-  const ExistingIssuesListModalPayload = moduleId ? { module: true } : { cycle: true };
+    const handleAddIssuesToModule = async (data: ISearchIssueResponse[]) => {
+      if (!workspaceSlug || !projectId) return;
 
-  const handleAddIssuesToModule = async (data: ISearchIssueResponse[]) => {
-    if (!workspaceSlug || !projectId) return;
+      const payload = {
+        issues: data.map((i) => i.id),
+      };
 
-    const payload = {
-      issues: data.map((i) => i.id),
+      // await moduleService
+      //   .addIssuesToModule(workspaceSlug as string, projectId as string, moduleId as string, payload, user)
+      //   .catch(() =>
+      //     setToastAlert({
+      //       type: "error",
+      //       title: "Error!",
+      //       message: "Selected issues could not be added to the module. Please try again.",
+      //     })
+      //   );
     };
 
-    // await moduleService
-    //   .addIssuesToModule(workspaceSlug as string, projectId as string, moduleId as string, payload, user)
-    //   .catch(() =>
-    //     setToastAlert({
-    //       type: "error",
-    //       title: "Error!",
-    //       message: "Selected issues could not be added to the module. Please try again.",
-    //     })
-    //   );
-  };
+    const handleAddIssuesToCycle = async (data: ISearchIssueResponse[]) => {
+      if (!workspaceSlug || !projectId) return;
 
-  const handleAddIssuesToCycle = async (data: ISearchIssueResponse[]) => {
-    if (!workspaceSlug || !projectId) return;
+      const payload = {
+        issues: data.map((i) => i.id),
+      };
 
-    const payload = {
-      issues: data.map((i) => i.id),
+      // await issueService
+      //   .addIssueToCycle(workspaceSlug as string, projectId as string, cycleId as string, payload, user)
+      //   .catch(() => {
+      //     setToastAlert({
+      //       type: "error",
+      //       title: "Error!",
+      //       message: "Selected issues could not be added to the cycle. Please try again.",
+      //     });
+      //   });
     };
 
-    // await issueService
-    //   .addIssueToCycle(workspaceSlug as string, projectId as string, cycleId as string, payload, user)
-    //   .catch(() => {
-    //     setToastAlert({
-    //       type: "error",
-    //       title: "Error!",
-    //       message: "Selected issues could not be added to the cycle. Please try again.",
-    //     });
-    //   });
-  };
-
-  return (
-    <>
-      <div className="flex-shrink-0 relative flex gap-2 py-1.5 flex-row items-center w-full">
-        <div className="flex-shrink-0 w-5 h-5 rounded-sm overflow-hidden flex justify-center items-center">
-          {icon ? icon : <CircleDashed className="h-3.5 w-3.5" strokeWidth={2} />}
-        </div>
-
-        <div className="flex items-center gap-1 flex-row w-full">
-          <div className="font-medium line-clamp-1 text-custom-text-100">{title}</div>
-          <div className="text-sm font-medium text-custom-text-300 pl-2">{count || 0}</div>
-        </div>
-
-        {renderExistingIssueModal ? (
-          <CustomMenu
-            width="auto"
-            customButton={
-              <span className="flex-shrink-0 w-5 h-5 rounded-sm overflow-hidden flex justify-center items-center hover:bg-custom-background-80 cursor-pointer transition-all">
-                <Plus className="h-3.5 w-3.5" strokeWidth={2} />
-              </span>
-            }
-          >
-            <CustomMenu.MenuItem onClick={() => setIsOpen(true)}>
-              <span className="flex items-center justify-start gap-2">Create issue</span>
-            </CustomMenu.MenuItem>
-            <CustomMenu.MenuItem onClick={() => setOpenExistingIssueListModal(true)}>
-              <span className="flex items-center justify-start gap-2">Add an existing issue</span>
-            </CustomMenu.MenuItem>
-          </CustomMenu>
-        ) : (
-          <div
-            className="flex-shrink-0 w-5 h-5 rounded-sm overflow-hidden flex justify-center items-center hover:bg-custom-background-80 cursor-pointer transition-all"
-            onClick={() => setIsOpen(true)}
-          >
-            <Plus width={14} strokeWidth={2} />
+    return (
+      <>
+        <div className="flex-shrink-0 relative flex gap-2 py-1.5 flex-row items-center w-full">
+          <div className="flex-shrink-0 w-5 h-5 rounded-sm overflow-hidden flex justify-center items-center">
+            {icon ? icon : <CircleDashed className="h-3.5 w-3.5" strokeWidth={2} />}
           </div>
-        )}
 
-        <CreateUpdateIssueModal
-          isOpen={isOpen}
-          handleClose={() => setIsOpen(false)}
-          handleSubmit={(data: Partial<IIssue>) => {
-            console.log(data);
-            return Promise.resolve();
-          }}
-          prePopulateData={issuePayload}
-        />
+          <div className="flex items-center gap-1 flex-row w-full">
+            <div className="font-medium line-clamp-1 text-custom-text-100">{title}</div>
+            <div className="text-sm font-medium text-custom-text-300 pl-2">{count || 0}</div>
+          </div>
 
-        {renderExistingIssueModal && (
-          <ExistingIssuesListModal
-            isOpen={openExistingIssueListModal}
-            handleClose={() => setOpenExistingIssueListModal(false)}
-            searchParams={ExistingIssuesListModalPayload}
-            handleOnSubmit={moduleId ? handleAddIssuesToModule : handleAddIssuesToCycle}
+          {!disableIssueCreation &&
+            (renderExistingIssueModal ? (
+              <CustomMenu
+                width="auto"
+                customButton={
+                  <span className="flex-shrink-0 w-5 h-5 rounded-sm overflow-hidden flex justify-center items-center hover:bg-custom-background-80 cursor-pointer transition-all">
+                    <Plus className="h-3.5 w-3.5" strokeWidth={2} />
+                  </span>
+                }
+              >
+                <CustomMenu.MenuItem onClick={() => setIsOpen(true)}>
+                  <span className="flex items-center justify-start gap-2">Create issue</span>
+                </CustomMenu.MenuItem>
+                <CustomMenu.MenuItem onClick={() => setOpenExistingIssueListModal(true)}>
+                  <span className="flex items-center justify-start gap-2">Add an existing issue</span>
+                </CustomMenu.MenuItem>
+              </CustomMenu>
+            ) : (
+              <div
+                className="flex-shrink-0 w-5 h-5 rounded-sm overflow-hidden flex justify-center items-center hover:bg-custom-background-80 cursor-pointer transition-all"
+                onClick={() => setIsOpen(true)}
+              >
+                <Plus width={14} strokeWidth={2} />
+              </div>
+            ))}
+
+          <CreateUpdateIssueModal
+            isOpen={isOpen}
+            handleClose={() => setIsOpen(false)}
+            currentStore={currentStore}
+            prePopulateData={issuePayload}
           />
-        )}
-      </div>
-    </>
-  );
-});
+
+          {renderExistingIssueModal && (
+            <ExistingIssuesListModal
+              isOpen={openExistingIssueListModal}
+              handleClose={() => setOpenExistingIssueListModal(false)}
+              searchParams={ExistingIssuesListModalPayload}
+              handleOnSubmit={moduleId ? handleAddIssuesToModule : handleAddIssuesToCycle}
+            />
+          )}
+        </div>
+      </>
+    );
+  }
+);
diff --git a/web/components/issues/issue-layouts/list/headers/group-by-root.tsx b/web/components/issues/issue-layouts/list/headers/group-by-root.tsx
index 5a724a8d4..0a61dcef8 100644
--- a/web/components/issues/issue-layouts/list/headers/group-by-root.tsx
+++ b/web/components/issues/issue-layouts/list/headers/group-by-root.tsx
@@ -9,43 +9,94 @@ import { LabelHeader } from "./label";
 import { CreatedByHeader } from "./created-by";
 // mobx
 import { observer } from "mobx-react-lite";
+import { EProjectStore } from "store/command-palette.store";
 
 export interface IListGroupByHeaderRoot {
   column_id: string;
   column_value: any;
   group_by: string | null;
   issues_count: number;
+  disableIssueCreation?: boolean;
+  currentStore: EProjectStore;
 }
 
 export const ListGroupByHeaderRoot: React.FC<IListGroupByHeaderRoot> = observer((props) => {
-  const { column_id, column_value, group_by, issues_count } = props;
+  const { column_id, column_value, group_by, issues_count, disableIssueCreation, currentStore } = props;
 
   return (
     <>
       {!group_by && group_by === null && (
-        <EmptyHeader column_id={column_id} column_value={column_value} issues_count={issues_count} />
+        <EmptyHeader
+          column_id={column_id}
+          column_value={column_value}
+          issues_count={issues_count}
+          disableIssueCreation={disableIssueCreation}
+          currentStore={currentStore}
+        />
       )}
       {group_by && group_by === "project" && (
-        <ProjectHeader column_id={column_id} column_value={column_value} issues_count={issues_count} />
+        <ProjectHeader
+          column_id={column_id}
+          column_value={column_value}
+          issues_count={issues_count}
+          disableIssueCreation={disableIssueCreation}
+          currentStore={currentStore}
+        />
       )}
 
       {group_by && group_by === "state" && (
-        <StateHeader column_id={column_id} column_value={column_value} issues_count={issues_count} />
+        <StateHeader
+          column_id={column_id}
+          column_value={column_value}
+          issues_count={issues_count}
+          disableIssueCreation={disableIssueCreation}
+          currentStore={currentStore}
+        />
       )}
       {group_by && group_by === "state_detail.group" && (
-        <StateGroupHeader column_id={column_id} column_value={column_value} issues_count={issues_count} />
+        <StateGroupHeader
+          column_id={column_id}
+          column_value={column_value}
+          issues_count={issues_count}
+          disableIssueCreation={disableIssueCreation}
+          currentStore={currentStore}
+        />
       )}
       {group_by && group_by === "priority" && (
-        <PriorityHeader column_id={column_id} column_value={column_value} issues_count={issues_count} />
+        <PriorityHeader
+          column_id={column_id}
+          column_value={column_value}
+          issues_count={issues_count}
+          disableIssueCreation={disableIssueCreation}
+          currentStore={currentStore}
+        />
       )}
       {group_by && group_by === "labels" && (
-        <LabelHeader column_id={column_id} column_value={column_value} issues_count={issues_count} />
+        <LabelHeader
+          column_id={column_id}
+          column_value={column_value}
+          issues_count={issues_count}
+          disableIssueCreation={disableIssueCreation}
+          currentStore={currentStore}
+        />
       )}
       {group_by && group_by === "assignees" && (
-        <AssigneesHeader column_id={column_id} column_value={column_value} issues_count={issues_count} />
+        <AssigneesHeader
+          column_id={column_id}
+          column_value={column_value}
+          issues_count={issues_count}
+          disableIssueCreation={disableIssueCreation}
+          currentStore={currentStore}
+        />
       )}
       {group_by && group_by === "created_by" && (
-        <CreatedByHeader column_id={column_id} column_value={column_value} issues_count={issues_count} />
+        <CreatedByHeader
+          column_id={column_id}
+          column_value={column_value}
+          issues_count={issues_count}
+          disableIssueCreation={disableIssueCreation}
+          currentStore={currentStore}
+        />
       )}
     </>
   );
diff --git a/web/components/issues/issue-layouts/list/headers/label.tsx b/web/components/issues/issue-layouts/list/headers/label.tsx
index 2abe186f3..beaad65e9 100644
--- a/web/components/issues/issue-layouts/list/headers/label.tsx
+++ b/web/components/issues/issue-layouts/list/headers/label.tsx
@@ -2,11 +2,14 @@ import { FC } from "react";
 import { observer } from "mobx-react-lite";
 // components
 import { HeaderGroupByCard } from "./group-by-card";
+import { EProjectStore } from "store/command-palette.store";
 
 export interface ILabelHeader {
   column_id: string;
   column_value: any;
   issues_count: number;
+  disableIssueCreation?: boolean;
+  currentStore: EProjectStore;
 }
 
 const Icon = ({ color }: any) => (
@@ -14,7 +17,7 @@ const Icon = ({ color }: any) => (
 );
 
 export const LabelHeader: FC<ILabelHeader> = observer((props) => {
-  const { column_id, column_value, issues_count } = props;
+  const { column_value, issues_count, disableIssueCreation, currentStore } = props;
 
   const label = column_value ?? null;
 
@@ -26,6 +29,8 @@ export const LabelHeader: FC<ILabelHeader> = observer((props) => {
           title={column_value?.name || ""}
           count={issues_count}
           issuePayload={{ labels: [label.id] }}
+          disableIssueCreation={disableIssueCreation}
+          currentStore={currentStore}
         />
       )}
     </>
diff --git a/web/components/issues/issue-layouts/list/headers/priority.tsx b/web/components/issues/issue-layouts/list/headers/priority.tsx
index 72f71b13f..788d931fd 100644
--- a/web/components/issues/issue-layouts/list/headers/priority.tsx
+++ b/web/components/issues/issue-layouts/list/headers/priority.tsx
@@ -3,11 +3,14 @@ import { observer } from "mobx-react-lite";
 import { AlertCircle, SignalHigh, SignalMedium, SignalLow, Ban } from "lucide-react";
 // components
 import { HeaderGroupByCard } from "./group-by-card";
+import { EProjectStore } from "store/command-palette.store";
 
 export interface IPriorityHeader {
   column_id: string;
   column_value: any;
   issues_count: number;
+  disableIssueCreation?: boolean;
+  currentStore: EProjectStore;
 }
 
 const Icon = ({ priority }: any) => (
@@ -37,7 +40,7 @@ const Icon = ({ priority }: any) => (
 );
 
 export const PriorityHeader: FC<IPriorityHeader> = observer((props) => {
-  const { column_id, column_value, issues_count } = props;
+  const { column_id, column_value, issues_count, disableIssueCreation, currentStore } = props;
 
   const priority = column_value ?? null;
 
@@ -49,6 +52,8 @@ export const PriorityHeader: FC<IPriorityHeader> = observer((props) => {
           title={priority?.title || ""}
           count={issues_count}
           issuePayload={{ priority: priority?.key }}
+          disableIssueCreation={disableIssueCreation}
+          currentStore={currentStore}
         />
       )}
     </>
diff --git a/web/components/issues/issue-layouts/list/headers/project.tsx b/web/components/issues/issue-layouts/list/headers/project.tsx
index 880892af2..0ef767d54 100644
--- a/web/components/issues/issue-layouts/list/headers/project.tsx
+++ b/web/components/issues/issue-layouts/list/headers/project.tsx
@@ -4,17 +4,20 @@ import { observer } from "mobx-react-lite";
 import { HeaderGroupByCard } from "./group-by-card";
 // emoji helper
 import { renderEmoji } from "helpers/emoji.helper";
+import { EProjectStore } from "store/command-palette.store";
 
 export interface IProjectHeader {
   column_id: string;
   column_value: any;
   issues_count: number;
+  disableIssueCreation?: boolean;
+  currentStore: EProjectStore;
 }
 
 const Icon = ({ emoji }: any) => <div className="w-6 h-6">{renderEmoji(emoji)}</div>;
 
 export const ProjectHeader: FC<IProjectHeader> = observer((props) => {
-  const { column_id, column_value, issues_count } = props;
+  const { column_value, issues_count, disableIssueCreation, currentStore } = props;
 
   const project = column_value ?? null;
 
@@ -26,6 +29,8 @@ export const ProjectHeader: FC<IProjectHeader> = observer((props) => {
           title={project?.name || ""}
           count={issues_count}
           issuePayload={{ project: project?.id ?? "" }}
+          disableIssueCreation={disableIssueCreation}
+          currentStore={currentStore}
         />
       )}
     </>
diff --git a/web/components/issues/issue-layouts/list/headers/state-group.tsx b/web/components/issues/issue-layouts/list/headers/state-group.tsx
index c6da02543..791236b8c 100644
--- a/web/components/issues/issue-layouts/list/headers/state-group.tsx
+++ b/web/components/issues/issue-layouts/list/headers/state-group.tsx
@@ -6,11 +6,14 @@ import { HeaderGroupByCard } from "./group-by-card";
 import { StateGroupIcon } from "@plane/ui";
 // helpers
 import { capitalizeFirstLetter } from "helpers/string.helper";
+import { EProjectStore } from "store/command-palette.store";
 
 export interface IStateGroupHeader {
   column_id: string;
   column_value: any;
   issues_count: number;
+  disableIssueCreation?: boolean;
+  currentStore: EProjectStore;
 }
 
 export const Icon = ({ stateGroup, color }: { stateGroup: any; color?: any }) => (
@@ -20,7 +23,7 @@ export const Icon = ({ stateGroup, color }: { stateGroup: any; color?: any }) =>
 );
 
 export const StateGroupHeader: FC<IStateGroupHeader> = observer((props) => {
-  const { column_id, column_value, issues_count } = props;
+  const { column_value, issues_count, disableIssueCreation, currentStore } = props;
 
   const stateGroup = column_value ?? null;
 
@@ -32,6 +35,8 @@ export const StateGroupHeader: FC<IStateGroupHeader> = observer((props) => {
           title={capitalizeFirstLetter(stateGroup?.key) || ""}
           count={issues_count}
           issuePayload={{}}
+          disableIssueCreation={disableIssueCreation}
+          currentStore={currentStore}
         />
       )}
     </>
diff --git a/web/components/issues/issue-layouts/list/headers/state.tsx b/web/components/issues/issue-layouts/list/headers/state.tsx
index e169d0fbb..65f798480 100644
--- a/web/components/issues/issue-layouts/list/headers/state.tsx
+++ b/web/components/issues/issue-layouts/list/headers/state.tsx
@@ -3,15 +3,18 @@ import { observer } from "mobx-react-lite";
 // components
 import { HeaderGroupByCard } from "./group-by-card";
 import { Icon } from "./state-group";
+import { EProjectStore } from "store/command-palette.store";
 
 export interface IStateHeader {
   column_id: string;
   column_value: any;
   issues_count: number;
+  disableIssueCreation?: boolean;
+  currentStore: EProjectStore;
 }
 
 export const StateHeader: FC<IStateHeader> = observer((props) => {
-  const { column_id, column_value, issues_count } = props;
+  const { column_value, issues_count, disableIssueCreation, currentStore } = props;
 
   const state = column_value ?? null;
 
@@ -23,6 +26,8 @@ export const StateHeader: FC<IStateHeader> = observer((props) => {
           title={state?.name || ""}
           count={issues_count}
           issuePayload={{ state: state?.id }}
+          disableIssueCreation={disableIssueCreation}
+          currentStore={currentStore}
         />
       )}
     </>
diff --git a/web/components/issues/issue-layouts/list/roots/archived-issue-root.tsx b/web/components/issues/issue-layouts/list/roots/archived-issue-root.tsx
index 9aab9e871..6cd66a0e8 100644
--- a/web/components/issues/issue-layouts/list/roots/archived-issue-root.tsx
+++ b/web/components/issues/issue-layouts/list/roots/archived-issue-root.tsx
@@ -11,18 +11,20 @@ import { IIssue } from "types";
 import { BaseListRoot } from "../base-list-root";
 import { IProjectStore } from "store/project";
 import { EIssueActions } from "../../types";
+import { EProjectStore } from "store/command-palette.store";
 
 export const ArchivedIssueListLayout: FC = observer(() => {
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
+  const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
 
-  const { archivedIssues: archivedIssueStore, archivedIssueFilters: archivedIssueFiltersStore } = useMobxStore();
+  const { projectArchivedIssues: archivedIssueStore, projectArchivedIssuesFilter: archivedIssueFiltersStore } =
+    useMobxStore();
 
   const issueActions = {
     [EIssueActions.DELETE]: (group_by: string | null, issue: IIssue) => {
       if (!workspaceSlug || !projectId) return;
 
-      archivedIssueStore.deleteArchivedIssue(group_by, null, issue);
+      archivedIssueStore.removeIssue(workspaceSlug, projectId, issue.id);
     },
   };
 
@@ -31,15 +33,14 @@ export const ArchivedIssueListLayout: FC = observer(() => {
     return projectStore?.projects[workspaceSlug.toString()] || null;
   };
 
-  return null;
-
-  // return (
-  //   <BaseListRoot
-  //     issueFilterStore={archivedIssueFiltersStore}
-  //     issueStore={archivedIssueStore}
-  //     QuickActions={ArchivedIssueQuickActions}
-  //     issueActions={issueActions}
-  //     getProjects={getProjects}
-  //   />
-  // );
+  return (
+    <BaseListRoot
+      issueFilterStore={archivedIssueFiltersStore}
+      issueStore={archivedIssueStore}
+      QuickActions={ArchivedIssueQuickActions}
+      issueActions={issueActions}
+      getProjects={getProjects}
+      currentStore={EProjectStore.PROJECT}
+    />
+  );
 });
diff --git a/web/components/issues/issue-layouts/list/roots/cycle-root.tsx b/web/components/issues/issue-layouts/list/roots/cycle-root.tsx
index 6ba49827d..5ad3bbdd7 100644
--- a/web/components/issues/issue-layouts/list/roots/cycle-root.tsx
+++ b/web/components/issues/issue-layouts/list/roots/cycle-root.tsx
@@ -11,6 +11,7 @@ import { IIssue } from "types";
 import { BaseListRoot } from "../base-list-root";
 import { IProjectStore } from "store/project";
 import { EIssueActions } from "../../types";
+import { EProjectStore } from "store/command-palette.store";
 
 export interface ICycleListLayout {}
 
@@ -47,6 +48,7 @@ export const CycleListLayout: React.FC = observer(() => {
       issueActions={issueActions}
       getProjects={getProjects}
       viewId={cycleId}
+      currentStore={EProjectStore.CYCLE}
     />
   );
 });
diff --git a/web/components/issues/issue-layouts/list/roots/draft-issue-root.tsx b/web/components/issues/issue-layouts/list/roots/draft-issue-root.tsx
new file mode 100644
index 000000000..24b4cf324
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/roots/draft-issue-root.tsx
@@ -0,0 +1,48 @@
+import { FC } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { ProjectIssueQuickActions } from "components/issues";
+// types
+import { IIssue } from "types";
+import { EIssueActions } from "../../types";
+// constants
+import { BaseListRoot } from "../base-list-root";
+import { IProjectStore } from "store/project";
+import { EProjectStore } from "store/command-palette.store";
+
+export const DraftIssueListLayout: FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
+
+  if (!workspaceSlug || !projectId) return null;
+
+  // store
+  const { projectDraftIssuesFilter: projectIssuesFilterStore, projectDraftIssues: projectIssuesStore } = useMobxStore();
+
+  const issueActions = {
+    [EIssueActions.UPDATE]: (group_by: string | null, issue: IIssue) => {
+      if (!workspaceSlug || !projectId) return;
+      projectIssuesStore.updateIssue(workspaceSlug, projectId, issue.id, issue);
+    },
+    [EIssueActions.DELETE]: (group_by: string | null, issue: IIssue) => {
+      if (!workspaceSlug || !projectId) return;
+      projectIssuesStore.removeIssue(workspaceSlug, projectId, issue.id);
+    },
+  };
+
+  const getProjects = (projectStore: IProjectStore) => projectStore.workspaceProjects;
+
+  return (
+    <BaseListRoot
+      issueFilterStore={projectIssuesFilterStore}
+      issueStore={projectIssuesStore}
+      QuickActions={ProjectIssueQuickActions}
+      issueActions={issueActions}
+      getProjects={getProjects}
+      currentStore={EProjectStore.PROJECT}
+    />
+  );
+});
diff --git a/web/components/issues/issue-layouts/list/roots/module-root.tsx b/web/components/issues/issue-layouts/list/roots/module-root.tsx
index fd08e246e..3f1ffe9fb 100644
--- a/web/components/issues/issue-layouts/list/roots/module-root.tsx
+++ b/web/components/issues/issue-layouts/list/roots/module-root.tsx
@@ -11,6 +11,7 @@ import { EIssueActions } from "../../types";
 // constants
 import { BaseListRoot } from "../base-list-root";
 import { IProjectStore } from "store/project";
+import { EProjectStore } from "store/command-palette.store";
 
 export interface IModuleListLayout {}
 
@@ -48,6 +49,7 @@ export const ModuleListLayout: React.FC = observer(() => {
       issueActions={issueActions}
       getProjects={getProjects}
       viewId={moduleId}
+      currentStore={EProjectStore.MODULE}
     />
   );
 });
diff --git a/web/components/issues/issue-layouts/list/roots/profile-issues-root.tsx b/web/components/issues/issue-layouts/list/roots/profile-issues-root.tsx
index 1d37ff007..0a1e9ff6f 100644
--- a/web/components/issues/issue-layouts/list/roots/profile-issues-root.tsx
+++ b/web/components/issues/issue-layouts/list/roots/profile-issues-root.tsx
@@ -1,50 +1,49 @@
 import { FC } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-// mobx store
+// hooks
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { ProjectIssueQuickActions } from "components/issues";
 // types
 import { IIssue } from "types";
 import { EIssueActions } from "../../types";
-import { IProjectStore } from "store/project";
-//components
+// constants
 import { BaseListRoot } from "../base-list-root";
+import { IProjectStore } from "store/project";
+import { EProjectStore } from "store/command-palette.store";
 
 export const ProfileIssuesListLayout: FC = observer(() => {
-  const {
-    profileIssueFilters: profileIssueFiltersStore,
-    profileIssues: profileIssuesStore,
-    issueDetail: issueDetailStore,
-  } = useMobxStore();
-
   const router = useRouter();
-  const { workspaceSlug } = router.query;
+  const { workspaceSlug, userId } = router.query as { workspaceSlug: string; userId: string };
+
+  // store
+  const { workspaceProfileIssuesFilter: profileIssueFiltersStore, workspaceProfileIssues: profileIssuesStore } =
+    useMobxStore();
 
   const issueActions = {
-    [EIssueActions.UPDATE]: (group_by: string | null, issue: IIssue) => {
-      if (!workspaceSlug) return;
+    [EIssueActions.UPDATE]: async (group_by: string | null, issue: IIssue) => {
+      if (!workspaceSlug || !userId) return;
 
-      profileIssuesStore.updateIssueStructure(group_by, null, issue);
-      issueDetailStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
+      await profileIssuesStore.updateIssue(workspaceSlug, userId, issue.id, issue);
     },
-    [EIssueActions.DELETE]: (group_by: string | null, issue: IIssue) => {
-      profileIssuesStore.deleteIssue(group_by, null, issue);
+    [EIssueActions.DELETE]: async (group_by: string | null, issue: IIssue) => {
+      if (!workspaceSlug || !userId) return;
+
+      await profileIssuesStore.removeIssue(workspaceSlug, userId, issue.project, issue.id);
     },
   };
 
-  const getProjects = (projectStore: IProjectStore) => projectStore?.workspaceProjects || null;
+  const getProjects = (projectStore: IProjectStore) => projectStore.workspaceProjects;
 
-  return null;
-
-  // return (
-  //   <BaseListRoot
-  //     issueFilterStore={profileIssueFiltersStore}
-  //     issueStore={profileIssuesStore}
-  //     QuickActions={ProjectIssueQuickActions}
-  //     issueActions={issueActions}
-  //     getProjects={getProjects}
-  //   />
-  // );
+  return (
+    <BaseListRoot
+      issueFilterStore={profileIssueFiltersStore}
+      issueStore={profileIssuesStore}
+      QuickActions={ProjectIssueQuickActions}
+      issueActions={issueActions}
+      getProjects={getProjects}
+      currentStore={EProjectStore.PROFILE}
+    />
+  );
 });
diff --git a/web/components/issues/issue-layouts/list/roots/project-root.tsx b/web/components/issues/issue-layouts/list/roots/project-root.tsx
index f22a71546..a7023c62d 100644
--- a/web/components/issues/issue-layouts/list/roots/project-root.tsx
+++ b/web/components/issues/issue-layouts/list/roots/project-root.tsx
@@ -11,6 +11,7 @@ import { EIssueActions } from "../../types";
 // constants
 import { BaseListRoot } from "../base-list-root";
 import { IProjectStore } from "store/project";
+import { EProjectStore } from "store/command-palette.store";
 
 export const ListLayout: FC = observer(() => {
   const router = useRouter();
@@ -41,6 +42,7 @@ export const ListLayout: FC = observer(() => {
       QuickActions={ProjectIssueQuickActions}
       issueActions={issueActions}
       getProjects={getProjects}
+      currentStore={EProjectStore.PROJECT}
     />
   );
 });
diff --git a/web/components/issues/issue-layouts/list/roots/project-view-root.tsx b/web/components/issues/issue-layouts/list/roots/project-view-root.tsx
index ad53f32b1..713f839aa 100644
--- a/web/components/issues/issue-layouts/list/roots/project-view-root.tsx
+++ b/web/components/issues/issue-layouts/list/roots/project-view-root.tsx
@@ -12,6 +12,7 @@ import { IIssue } from "types";
 // components
 import { BaseListRoot } from "../base-list-root";
 import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
+import { EProjectStore } from "store/command-palette.store";
 
 export interface IViewListLayout {}
 
@@ -44,6 +45,7 @@ export const ProjectViewListLayout: React.FC = observer(() => {
       QuickActions={ProjectIssueQuickActions}
       issueActions={issueActions}
       getProjects={getProjects}
+      currentStore={EProjectStore.PROJECT_VIEW}
     />
   );
 });
diff --git a/web/components/issues/issue-layouts/properties/date.tsx b/web/components/issues/issue-layouts/properties/date.tsx
index 1ba4dbaaa..98fd09726 100644
--- a/web/components/issues/issue-layouts/properties/date.tsx
+++ b/web/components/issues/issue-layouts/properties/date.tsx
@@ -43,7 +43,9 @@ export const IssuePropertyDate: React.FC<IIssuePropertyDate> = observer((props)
             <Popover.Button
               ref={dropdownBtn}
               className={`px-2.5 py-1 h-5 flex items-center rounded border-[0.5px] border-custom-border-300 duration-300 outline-none w-full ${
-                disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+                disabled
+                  ? "cursor-not-allowed text-custom-text-200 pointer-events-none"
+                  : "cursor-pointer hover:bg-custom-background-80"
               }`}
             >
               <div className="overflow-hidden flex justify-center items-center gap-2">
diff --git a/web/components/issues/issue-layouts/properties/labels.tsx b/web/components/issues/issue-layouts/properties/labels.tsx
index 2d1411196..763904ada 100644
--- a/web/components/issues/issue-layouts/properties/labels.tsx
+++ b/web/components/issues/issue-layouts/properties/labels.tsx
@@ -59,6 +59,8 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
     if (workspaceSlug && projectId) fetchProjectLabels(workspaceSlug, projectId).then(() => setIsLoading(false));
   };
 
+  if (!value) return null;
+
   const options = (projectLabels ? projectLabels : []).map((label) => ({
     value: label.id,
     query: label.name,
diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
index 907ca3608..6df87e023 100644
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
@@ -11,6 +11,7 @@ import { copyUrlToClipboard } from "helpers/string.helper";
 // types
 import { IIssue } from "types";
 import { IQuickActionProps } from "../list/list-view-types";
+import { EProjectStore } from "store/command-palette.store";
 
 export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
   const { issue, handleDelete, handleUpdate, handleRemoveFromView } = props;
@@ -55,6 +56,7 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
         onSubmit={async (data) => {
           if (issueToEdit && handleUpdate) handleUpdate({ ...issueToEdit, ...data });
         }}
+        currentStore={EProjectStore.CYCLE}
       />
       <CustomMenu placement="bottom-start" ellipsis>
         <CustomMenu.MenuItem
diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
index 01ddfac3b..54f24ca3f 100644
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
@@ -11,6 +11,7 @@ import { copyUrlToClipboard } from "helpers/string.helper";
 // types
 import { IIssue } from "types";
 import { IQuickActionProps } from "../list/list-view-types";
+import { EProjectStore } from "store/command-palette.store";
 
 export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
   const { issue, handleDelete, handleUpdate, handleRemoveFromView } = props;
@@ -55,6 +56,7 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
         onSubmit={async (data) => {
           if (issueToEdit && handleUpdate) handleUpdate({ ...issueToEdit, ...data });
         }}
+        currentStore={EProjectStore.MODULE}
       />
       <CustomMenu placement="bottom-start" ellipsis>
         <CustomMenu.MenuItem
diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
index 057dbf3cd..f6a384461 100644
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
@@ -11,6 +11,7 @@ import { copyUrlToClipboard } from "helpers/string.helper";
 // types
 import { IIssue } from "types";
 import { IQuickActionProps } from "../list/list-view-types";
+import { EProjectStore } from "store/command-palette.store";
 
 export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
   const { issue, handleDelete, handleUpdate } = props;
@@ -55,6 +56,7 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
         onSubmit={async (data) => {
           if (issueToEdit && handleUpdate) handleUpdate({ ...issueToEdit, ...data });
         }}
+        currentStore={EProjectStore.PROJECT}
       />
       <CustomMenu placement="bottom-start" ellipsis>
         <CustomMenu.MenuItem
diff --git a/web/components/issues/issue-layouts/roots/archived-issue-layout-root.tsx b/web/components/issues/issue-layouts/roots/archived-issue-layout-root.tsx
index 2906de3f1..07c0bcec7 100644
--- a/web/components/issues/issue-layouts/roots/archived-issue-layout-root.tsx
+++ b/web/components/issues/issue-layouts/roots/archived-issue-layout-root.tsx
@@ -9,14 +9,17 @@ import { ArchivedIssueListLayout, ArchivedIssueAppliedFiltersRoot } from "compon
 
 export const ArchivedIssueLayoutRoot: React.FC = observer(() => {
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
+  const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
 
-  const { archivedIssueFilters: archivedIssueFiltersStore, archivedIssues: archivedIssueStore } = useMobxStore();
+  const {
+    projectArchivedIssues: { getIssues, fetchIssues },
+    projectArchivedIssuesFilter: { fetchFilters },
+  } = useMobxStore();
 
   useSWR(workspaceSlug && projectId ? `ARCHIVED_FILTERS_AND_ISSUES_${projectId.toString()}` : null, async () => {
     if (workspaceSlug && projectId) {
-      await archivedIssueFiltersStore.fetchUserProjectFilters(workspaceSlug.toString(), projectId.toString());
-      await archivedIssueStore.fetchIssues(workspaceSlug.toString(), projectId.toString());
+      await fetchFilters(workspaceSlug, projectId);
+      await fetchIssues(workspaceSlug, projectId, getIssues ? "mutation" : "init-loader");
     }
   });
 
diff --git a/web/components/issues/issue-layouts/roots/draft-issue-layout-root.tsx b/web/components/issues/issue-layouts/roots/draft-issue-layout-root.tsx
new file mode 100644
index 000000000..083eae9db
--- /dev/null
+++ b/web/components/issues/issue-layouts/roots/draft-issue-layout-root.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+import { DraftIssueAppliedFiltersRoot } from "../filters/applied-filters/roots/draft-issue";
+import { DraftIssueListLayout } from "../list/roots/draft-issue-root";
+import { Spinner } from "@plane/ui";
+import { DraftKanBanLayout } from "../kanban/roots/draft-issue-root";
+
+export const DraftIssueLayoutRoot: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
+
+  const {
+    projectDraftIssuesFilter: { issueFilters, fetchFilters },
+    projectDraftIssues: { loader, getIssues, fetchIssues },
+  } = useMobxStore();
+
+  useSWR(workspaceSlug && projectId ? `DRAFT_FILTERS_AND_ISSUES_${projectId.toString()}` : null, async () => {
+    if (workspaceSlug && projectId) {
+      await fetchFilters(workspaceSlug, projectId);
+      await fetchIssues(workspaceSlug, projectId, getIssues ? "mutation" : "init-loader");
+    }
+  });
+
+  const activeLayout = issueFilters?.displayFilters?.layout || undefined;
+
+  return (
+    <div className="relative w-full h-full flex flex-col overflow-hidden">
+      <DraftIssueAppliedFiltersRoot />
+
+      {loader === "init-loader" ? (
+        <div className="w-full h-full flex justify-center items-center">
+          <Spinner />
+        </div>
+      ) : (
+        <>
+          <div className="w-full h-full relative overflow-auto">
+            {activeLayout === "list" ? (
+              <DraftIssueListLayout />
+            ) : activeLayout === "kanban" ? (
+              <DraftKanBanLayout />
+            ) : null}
+          </div>
+        </>
+      )}
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/roots/global-view-layout-root.tsx b/web/components/issues/issue-layouts/roots/global-view-layout-root.tsx
index c151127c3..cb4118ddc 100644
--- a/web/components/issues/issue-layouts/roots/global-view-layout-root.tsx
+++ b/web/components/issues/issue-layouts/roots/global-view-layout-root.tsx
@@ -102,17 +102,15 @@ export const GlobalViewLayoutRoot: React.FC<Props> = observer((props) => {
         <GlobalViewEmptyState />
       ) : (
         <div className="h-full w-full overflow-auto">
-          <SpreadsheetView
+          {/* <SpreadsheetView
             displayProperties={workspaceFilterStore.workspaceDisplayProperties}
             displayFilters={workspaceFilterStore.workspaceDisplayFilters}
             handleDisplayFilterUpdate={handleDisplayFiltersUpdate}
             issues={issues}
             members={workspaceMembers?.map((m) => m.member)}
             labels={workspaceStore.workspaceLabels ? workspaceStore.workspaceLabels : undefined}
-            handleIssueAction={() => {}}
-            handleUpdateIssue={handleUpdateIssue}
             disableUserActions={false}
-          />
+          /> */}
         </div>
       )}
     </div>
diff --git a/web/components/issues/issue-layouts/roots/project-layout-root.tsx b/web/components/issues/issue-layouts/roots/project-layout-root.tsx
index ab7556c70..4460fa7de 100644
--- a/web/components/issues/issue-layouts/roots/project-layout-root.tsx
+++ b/web/components/issues/issue-layouts/roots/project-layout-root.tsx
@@ -26,12 +26,20 @@ export const ProjectLayoutRoot: React.FC = observer(() => {
     projectIssuesFilter: { issueFilters, fetchFilters },
   } = useMobxStore();
 
-  useSWR(workspaceSlug && projectId ? `PROJECT_ISSUES_V3_${workspaceSlug}_${projectId}` : null, async () => {
-    if (workspaceSlug && projectId) {
-      await fetchFilters(workspaceSlug, projectId);
-      await fetchIssues(workspaceSlug, projectId, getIssues ? "mutation" : "init-loader");
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_ISSUES_V3_${workspaceSlug}_${projectId}` : null,
+    async () => {
+      if (workspaceSlug && projectId) {
+        await fetchFilters(workspaceSlug, projectId);
+        await fetchIssues(workspaceSlug, projectId, getIssues ? "mutation" : "init-loader");
+      }
+    },
+    {
+      onErrorRetry: (error) => {
+        if (error.status === 404) return;
+      },
     }
-  });
+  );
 
   const activeLayout = issueFilters?.displayFilters?.layout;
 
diff --git a/web/components/issues/issue-layouts/roots/project-view-layout-root.tsx b/web/components/issues/issue-layouts/roots/project-view-layout-root.tsx
index 47b0700a5..cf3ec37c0 100644
--- a/web/components/issues/issue-layouts/roots/project-view-layout-root.tsx
+++ b/web/components/issues/issue-layouts/roots/project-view-layout-root.tsx
@@ -7,12 +7,11 @@ import useSWR from "swr";
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import {
-  ModuleKanBanLayout,
-  ModuleListLayout,
   ProjectViewAppliedFiltersRoot,
   ProjectViewCalendarLayout,
-  ProjectViewEmptyState,
   ProjectViewGanttLayout,
+  ProjectViewKanBanLayout,
+  ProjectViewListLayout,
   ProjectViewSpreadsheetLayout,
 } from "components/issues";
 import { Spinner } from "@plane/ui";
@@ -33,7 +32,7 @@ export const ProjectViewLayoutRoot: React.FC = observer(() => {
   useSWR(workspaceSlug && projectId && viewId ? `PROJECT_ISSUES_V3_${workspaceSlug}_${projectId}` : null, async () => {
     if (workspaceSlug && projectId && viewId) {
       await fetchFilters(workspaceSlug, projectId, viewId);
-      // await fetchIssues(workspaceSlug, projectId, getIssues ? "mutation" : "init-loader");
+      await fetchIssues(workspaceSlug, projectId, getIssues ? "mutation" : "init-loader");
     }
   });
 
@@ -49,12 +48,11 @@ export const ProjectViewLayoutRoot: React.FC = observer(() => {
         </div>
       ) : (
         <>
-          {/* {(activeLayout === "list" || activeLayout === "spreadsheet") && issueCount === 0 && <ProjectViewEmptyState />} */}
           <div className="w-full h-full relative overflow-auto">
             {activeLayout === "list" ? (
-              <ModuleListLayout />
+              <ProjectViewListLayout />
             ) : activeLayout === "kanban" ? (
-              <ModuleKanBanLayout />
+              <ProjectViewKanBanLayout />
             ) : activeLayout === "calendar" ? (
               <ProjectViewCalendarLayout />
             ) : activeLayout === "gantt_chart" ? (
diff --git a/web/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx b/web/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx
index cc7ba1602..36d2e05a9 100644
--- a/web/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx
@@ -1,6 +1,6 @@
 import { IIssueUnGroupedStructure } from "store/issue";
 import { SpreadsheetView } from "./spreadsheet-view";
-import { useCallback } from "react";
+import { FC, useCallback } from "react";
 import { IIssue, IIssueDisplayFilterOptions } from "types";
 import { useRouter } from "next/router";
 import { useMobxStore } from "lib/mobx/store-provider";
@@ -16,6 +16,8 @@ import {
 } from "store/issues";
 import { observer } from "mobx-react-lite";
 import { EFilterType, TUnGroupedIssues } from "store/issues/types";
+import { EIssueActions } from "../types";
+import { IQuickActionProps } from "../list/list-view-types";
 
 interface IBaseSpreadsheetRoot {
   issueFiltersStore:
@@ -25,16 +27,21 @@ interface IBaseSpreadsheetRoot {
     | IProjectIssuesFilterStore;
   issueStore: IProjectIssuesStore | IModuleIssuesStore | ICycleIssuesStore | IViewIssuesStore;
   viewId?: string;
+  QuickActions: FC<IQuickActionProps>;
+  issueActions: {
+    [EIssueActions.DELETE]: (issue: IIssue) => void;
+    [EIssueActions.UPDATE]?: (issue: IIssue) => void;
+    [EIssueActions.REMOVE]?: (issue: IIssue) => void;
+  };
 }
 
 export const BaseSpreadsheetRoot = observer((props: IBaseSpreadsheetRoot) => {
-  const { issueFiltersStore, issueStore, viewId } = props;
+  const { issueFiltersStore, issueStore, viewId, QuickActions, issueActions } = props;
 
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
 
   const {
-    issueDetail: issueDetailStore,
     projectMember: { projectMembers },
     projectState: projectStateStore,
     projectLabel: { projectLabels },
@@ -46,19 +53,16 @@ export const BaseSpreadsheetRoot = observer((props: IBaseSpreadsheetRoot) => {
   const issuesResponse = issueStore.getIssues;
   const issueIds = (issueStore.getIssuesIds ?? []) as TUnGroupedIssues;
 
-  const issues = issueIds?.map((id) => issuesResponse?.[id]);
+  const issues = issueIds?.filter((id) => id && issuesResponse?.[id]).map((id) => issuesResponse?.[id]);
 
-  const handleIssueAction = async (issue: IIssue, action: "copy" | "delete" | "edit") => {
-    if (!workspaceSlug || !projectId || !user) return;
-
-    if (action === "delete") {
-      issueDetailStore.deleteIssue(workspaceSlug.toString(), projectId.toString(), issue.id);
-      // issueStore.removeIssueFromStructure(null, null, issue);
-    } else if (action === "edit") {
-      issueDetailStore.updateIssue(workspaceSlug.toString(), projectId.toString(), issue.id, issue);
-      // issueStore.updateIssueStructure(null, null, issue);
-    }
-  };
+  const handleIssues = useCallback(
+    async (issue: IIssue, action: EIssueActions) => {
+      if (issueActions[action]) {
+        issueActions[action]!(issue);
+      }
+    },
+    [issueStore]
+  );
 
   const handleDisplayFiltersUpdate = useCallback(
     (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
@@ -77,33 +81,28 @@ export const BaseSpreadsheetRoot = observer((props: IBaseSpreadsheetRoot) => {
     [issueFiltersStore, projectId, workspaceSlug]
   );
 
-  const handleUpdateIssue = useCallback(
-    (issue: IIssue, data: Partial<IIssue>) => {
-      if (!workspaceSlug || !projectId || !user) return;
-
-      const payload = {
-        ...issue,
-        ...data,
-      };
-
-      // TODO: add update logic from the new store
-      // issueStore.updateIssueStructure(null, null, payload);
-      issueDetailStore.updateIssue(workspaceSlug.toString(), projectId.toString(), issue.id, data);
-    },
-    [issueDetailStore, projectId, user, workspaceSlug]
-  );
-
   return (
     <SpreadsheetView
       displayProperties={issueFiltersStore.issueFilters?.displayProperties ?? {}}
       displayFilters={issueFiltersStore.issueFilters?.displayFilters ?? {}}
       handleDisplayFilterUpdate={handleDisplayFiltersUpdate}
       issues={issues as IIssueUnGroupedStructure}
+      quickActions={(issue) => (
+        <QuickActions
+          issue={issue}
+          handleDelete={async () => handleIssues(issue, EIssueActions.DELETE)}
+          handleUpdate={
+            issueActions[EIssueActions.UPDATE] ? async (data) => handleIssues(data, EIssueActions.UPDATE) : undefined
+          }
+          handleRemoveFromView={
+            issueActions[EIssueActions.REMOVE] ? async () => handleIssues(issue, EIssueActions.REMOVE) : undefined
+          }
+        />
+      )}
       members={projectMembers?.map((m) => m.member)}
       labels={projectLabels || undefined}
       states={projectId ? projectStateStore.states?.[projectId.toString()] : undefined}
-      handleIssueAction={handleIssueAction}
-      handleUpdateIssue={handleUpdateIssue}
+      handleIssues={handleIssues}
       disableUserActions={false}
       quickAddCallback={issueStore.quickAddIssue}
       viewId={viewId}
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
index 4cd19fdd1..7c72bc26a 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
@@ -18,12 +18,12 @@ type Props = {
 export const SpreadsheetAssigneeColumn: React.FC<Props> = ({ issue, members, onChange, expandedIssues, disabled }) => {
   const isExpanded = expandedIssues.indexOf(issue.id) > -1;
 
-  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail?.id, issue.id, isExpanded);
 
   return (
     <>
       <IssuePropertyAssignee
-        projectId={issue.project_detail.id ?? null}
+        projectId={issue.project_detail?.id ?? null}
         value={issue.assignees}
         onChange={(data) => onChange({ assignees: data })}
         className="h-full w-full"
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx
index e9da93eae..229aaba2b 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx
@@ -14,7 +14,7 @@ export const SpreadsheetAttachmentColumn: React.FC<Props> = (props) => {
 
   const isExpanded = expandedIssues.indexOf(issue.id) > -1;
 
-  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail?.id, issue.id, isExpanded);
 
   return (
     <>
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
index 97cb2191a..cbc6088da 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
@@ -17,7 +17,7 @@ type Props = {
 export const SpreadsheetDueDateColumn: React.FC<Props> = ({ issue, onChange, expandedIssues, disabled }) => {
   const isExpanded = expandedIssues.indexOf(issue.id) > -1;
 
-  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail?.id, issue.id, isExpanded);
 
   return (
     <>
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
index c70c7e318..1f2b0e169 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
@@ -17,12 +17,12 @@ export const SpreadsheetEstimateColumn: React.FC<Props> = (props) => {
 
   const isExpanded = expandedIssues.indexOf(issue.id) > -1;
 
-  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail?.id, issue.id, isExpanded);
 
   return (
     <>
       <IssuePropertyEstimates
-        projectId={issue.project_detail.id ?? null}
+        projectId={issue.project_detail?.id ?? null}
         value={issue.estimate_point}
         onChange={(data) => onChange({ estimate_point: data })}
         className="h-full w-full"
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/issue/issue-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/issue/issue-column.tsx
index 952a8cce9..c0ea4f0c5 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/issue/issue-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/issue/issue-column.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import { useRouter } from "next/router";
-import { Popover2 } from "@blueprintjs/popover2";
-import { MoreHorizontal, Pencil, Trash2, ChevronRight, Link } from "lucide-react";
+import { ChevronRight } from "lucide-react";
 // hooks
 import useToast from "hooks/use-toast";
 // components
@@ -16,8 +15,7 @@ type Props = {
   expanded: boolean;
   handleToggleExpand: (issueId: string) => void;
   properties: IIssueDisplayProperties;
-  handleEditIssue: (issue: IIssue) => void;
-  handleDeleteIssue: (issue: IIssue) => void;
+  quickActions: (issue: IIssue) => React.ReactNode;
   setIssuePeekOverView: React.Dispatch<
     React.SetStateAction<{
       workspaceSlug: string;
@@ -35,8 +33,7 @@ export const IssueColumn: React.FC<Props> = ({
   handleToggleExpand,
   setIssuePeekOverView,
   properties,
-  handleEditIssue,
-  handleDeleteIssue,
+  quickActions,
   disableUserActions,
   nestingLevel,
 }) => {
@@ -75,7 +72,7 @@ export const IssueColumn: React.FC<Props> = ({
 
   return (
     <>
-      <div className="group flex items-center w-[28rem] text-sm h-11 sticky top-0 bg-custom-background-100 truncate border-b border-custom-border-100">
+      <div className="group flex items-center w-[28rem] text-sm h-11 top-0 bg-custom-background-100 truncate border-b border-custom-border-100">
         {properties.key && (
           <div
             className="flex gap-1.5 px-4 pr-0 py-2.5 items-center min-w-min"
@@ -87,61 +84,7 @@ export const IssueColumn: React.FC<Props> = ({
               </span>
 
               {!disableUserActions && (
-                <div className="absolute top-0 left-2.5 opacity-0 group-hover:opacity-100">
-                  <Popover2
-                    isOpen={isOpen}
-                    canEscapeKeyClose
-                    onInteraction={(nextOpenState) => setIsOpen(nextOpenState)}
-                    content={
-                      <div className="flex flex-col whitespace-nowrap rounded-md border border-custom-border-100 p-1 text-xs shadow-lg focus:outline-none min-w-full bg-custom-background-100 space-y-0.5">
-                        <button
-                          type="button"
-                          className="hover:text-custom-text-200 w-full select-none gap-2 rounded p-1 text-left text-custom-text-200 hover:bg-custom-background-80"
-                          onClick={() => {
-                            handleCopyText();
-                            setIsOpen(false);
-                          }}
-                        >
-                          <div className="flex items-center gap-2">
-                            <Link className="h-3 w-3" />
-                            <span>Copy link</span>
-                          </div>
-                        </button>
-
-                        <button
-                          type="button"
-                          className="hover:text-custom-text-200 w-full select-none gap-2 rounded p-1 text-left text-custom-text-200 hover:bg-custom-background-80"
-                          onClick={() => {
-                            handleEditIssue(issue);
-                            setIsOpen(false);
-                          }}
-                        >
-                          <div className="flex items-center gap-2">
-                            <Pencil className="h-3 w-3" />
-                            <span>Edit issue</span>
-                          </div>
-                        </button>
-
-                        <button
-                          type="button"
-                          className="w-full select-none gap-2 rounded p-1 text-left text-red-500 hover:bg-custom-background-80"
-                          onClick={() => {
-                            handleDeleteIssue(issue);
-                            setIsOpen(false);
-                          }}
-                        >
-                          <div className="flex items-center gap-2">
-                            <Trash2 className="h-3 w-3" />
-                            <span>Delete issue</span>
-                          </div>
-                        </button>
-                      </div>
-                    }
-                    placement="bottom-start"
-                  >
-                    <MoreHorizontal className="h-5 w-5 text-custom-text-200" />
-                  </Popover2>
-                </div>
+                <div className="absolute top-0 left-2.5 opacity-0 group-hover:opacity-100">{quickActions(issue)}</div>
               )}
             </div>
 
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/issue/spreadsheet-issue-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/issue/spreadsheet-issue-column.tsx
index 703174de5..e401d2850 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/issue/spreadsheet-issue-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/issue/spreadsheet-issue-column.tsx
@@ -6,13 +6,14 @@ import { IssueColumn } from "components/issues";
 import useSubIssue from "hooks/use-sub-issue";
 // types
 import { IIssue, IIssueDisplayProperties } from "types";
+import { EIssueActions } from "components/issues/issue-layouts/types";
 
 type Props = {
   issue: IIssue;
   expandedIssues: string[];
   setExpandedIssues: React.Dispatch<React.SetStateAction<string[]>>;
   properties: IIssueDisplayProperties;
-  handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void;
+  quickActions: (issue: IIssue) => React.ReactNode;
   setIssuePeekOverView: React.Dispatch<
     React.SetStateAction<{
       workspaceSlug: string;
@@ -30,7 +31,7 @@ export const SpreadsheetIssuesColumn: React.FC<Props> = ({
   setExpandedIssues,
   setIssuePeekOverView,
   properties,
-  handleIssueAction,
+  quickActions,
   disableUserActions,
   nestingLevel = 0,
 }) => {
@@ -48,7 +49,7 @@ export const SpreadsheetIssuesColumn: React.FC<Props> = ({
 
   const isExpanded = expandedIssues.indexOf(issue.id) > -1;
 
-  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail?.id, issue.id, isExpanded);
 
   return (
     <>
@@ -57,11 +58,10 @@ export const SpreadsheetIssuesColumn: React.FC<Props> = ({
         expanded={isExpanded}
         handleToggleExpand={handleToggleExpand}
         properties={properties}
-        handleEditIssue={() => handleIssueAction(issue, "edit")}
-        handleDeleteIssue={() => handleIssueAction(issue, "delete")}
         setIssuePeekOverView={setIssuePeekOverView}
         disableUserActions={disableUserActions}
         nestingLevel={nestingLevel}
+        quickActions={quickActions}
       />
 
       {isExpanded &&
@@ -75,7 +75,7 @@ export const SpreadsheetIssuesColumn: React.FC<Props> = ({
             expandedIssues={expandedIssues}
             setExpandedIssues={setExpandedIssues}
             properties={properties}
-            handleIssueAction={handleIssueAction}
+            quickActions={quickActions}
             setIssuePeekOverView={setIssuePeekOverView}
             disableUserActions={disableUserActions}
             nestingLevel={nestingLevel + 1}
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
index 1c3443f74..274890620 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
@@ -20,12 +20,12 @@ export const SpreadsheetLabelColumn: React.FC<Props> = (props) => {
 
   const isExpanded = expandedIssues.indexOf(issue.id) > -1;
 
-  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail?.id, issue.id, isExpanded);
 
   return (
     <>
       <IssuePropertyLabels
-        projectId={issue.project_detail.id ?? null}
+        projectId={issue.project_detail?.id ?? null}
         value={issue.labels}
         onChange={(data) => onChange({ labels: data })}
         className="h-full w-full"
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx
index e0dc67a10..ebaa915b2 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx
@@ -14,7 +14,7 @@ export const SpreadsheetLinkColumn: React.FC<Props> = (props) => {
 
   const isExpanded = expandedIssues.indexOf(issue.id) > -1;
 
-  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail?.id, issue.id, isExpanded);
 
   return (
     <>
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
index 388755cd3..f69e6cfae 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
@@ -17,7 +17,7 @@ type Props = {
 export const SpreadsheetPriorityColumn: React.FC<Props> = ({ issue, onChange, expandedIssues, disabled }) => {
   const isExpanded = expandedIssues.indexOf(issue.id) > -1;
 
-  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail?.id, issue.id, isExpanded);
 
   return (
     <>
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
index 01e38c474..aaa8e7379 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
@@ -17,7 +17,7 @@ type Props = {
 export const SpreadsheetStartDateColumn: React.FC<Props> = ({ issue, onChange, expandedIssues, disabled }) => {
   const isExpanded = expandedIssues.indexOf(issue.id) > -1;
 
-  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail?.id, issue.id, isExpanded);
 
   return (
     <>
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
index 44b9a217f..c2824646b 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
@@ -20,12 +20,12 @@ export const SpreadsheetStateColumn: React.FC<Props> = (props) => {
 
   const isExpanded = expandedIssues.indexOf(issue.id) > -1;
 
-  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail?.id, issue.id, isExpanded);
 
   return (
     <>
       <IssuePropertyState
-        projectId={issue.project_detail.id ?? null}
+        projectId={issue.project_detail?.id ?? null}
         value={issue.state_detail}
         onChange={(data) => onChange({ state: data.id, state_detail: data })}
         className="h-full w-full"
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx
index 53a3973ad..8950f6919 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx
@@ -14,7 +14,7 @@ export const SpreadsheetSubIssueColumn: React.FC<Props> = (props) => {
 
   const isExpanded = expandedIssues.indexOf(issue.id) > -1;
 
-  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail?.id, issue.id, isExpanded);
 
   return (
     <>
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
index dba684c84..3f44828c9 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
@@ -17,7 +17,7 @@ export const SpreadsheetUpdatedOnColumn: React.FC<Props> = (props) => {
 
   const isExpanded = expandedIssues.indexOf(issue.id) > -1;
 
-  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail?.id, issue.id, isExpanded);
 
   return (
     <>
diff --git a/web/components/issues/issue-layouts/spreadsheet/roots/cycle-root.tsx b/web/components/issues/issue-layouts/spreadsheet/roots/cycle-root.tsx
index fffc89552..0edefc4e7 100644
--- a/web/components/issues/issue-layouts/spreadsheet/roots/cycle-root.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/roots/cycle-root.tsx
@@ -5,14 +5,39 @@ import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { BaseSpreadsheetRoot } from "../base-spreadsheet-root";
 import { useRouter } from "next/router";
+import { EIssueActions } from "../../types";
+import { IIssue } from "types";
+import { CycleIssueQuickActions } from "../../quick-action-dropdowns";
 
 export const CycleSpreadsheetLayout: React.FC = observer(() => {
   const router = useRouter();
-  const { cycleId } = router.query as { cycleId: string };
+  const { workspaceSlug, cycleId } = router.query as { workspaceSlug: string; cycleId: string };
 
   const { cycleIssues: cycleIssueStore, cycleIssuesFilter: cycleIssueFilterStore } = useMobxStore();
 
+  const issueActions = {
+    [EIssueActions.UPDATE]: async (issue: IIssue) => {
+      if (!workspaceSlug || !cycleId) return;
+
+      cycleIssueStore.updateIssue(workspaceSlug, issue.project, issue.id, issue, cycleId);
+    },
+    [EIssueActions.DELETE]: async (issue: IIssue) => {
+      if (!workspaceSlug || !cycleId) return;
+      cycleIssueStore.removeIssue(workspaceSlug, issue.project, issue.id, cycleId);
+    },
+    [EIssueActions.REMOVE]: async (issue: IIssue) => {
+      if (!workspaceSlug || !cycleId || !issue.bridge_id) return;
+      cycleIssueStore.removeIssueFromCycle(workspaceSlug, issue.project, cycleId, issue.id, issue.bridge_id);
+    },
+  };
+
   return (
-    <BaseSpreadsheetRoot issueStore={cycleIssueStore} issueFiltersStore={cycleIssueFilterStore} viewId={cycleId} />
+    <BaseSpreadsheetRoot
+      issueStore={cycleIssueStore}
+      issueFiltersStore={cycleIssueFilterStore}
+      viewId={cycleId}
+      issueActions={issueActions}
+      QuickActions={CycleIssueQuickActions}
+    />
   );
 });
diff --git a/web/components/issues/issue-layouts/spreadsheet/roots/module-root.tsx b/web/components/issues/issue-layouts/spreadsheet/roots/module-root.tsx
index 4135e3112..eb118a0cc 100644
--- a/web/components/issues/issue-layouts/spreadsheet/roots/module-root.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/roots/module-root.tsx
@@ -6,13 +6,39 @@ import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { BaseSpreadsheetRoot } from "../base-spreadsheet-root";
 import { useRouter } from "next/router";
+import { EIssueActions } from "../../types";
+import { IIssue } from "types";
+import { ModuleIssueQuickActions } from "../../quick-action-dropdowns";
 
 export const ModuleSpreadsheetLayout: React.FC = observer(() => {
   const router = useRouter();
-  const { moduleId } = router.query as { moduleId: string };
+  const { workspaceSlug, moduleId } = router.query as { workspaceSlug: string; moduleId: string };
 
   const { moduleIssues: moduleIssueStore, moduleIssuesFilter: moduleIssueFilterStore } = useMobxStore();
+
+  const issueActions = {
+    [EIssueActions.UPDATE]: async (issue: IIssue) => {
+      if (!workspaceSlug || !moduleId) return;
+
+      moduleIssueStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue, moduleId);
+    },
+    [EIssueActions.DELETE]: async (issue: IIssue) => {
+      if (!workspaceSlug || !moduleId) return;
+      moduleIssueStore.removeIssue(workspaceSlug, issue.project, issue.id, moduleId);
+    },
+    [EIssueActions.REMOVE]: async (issue: IIssue) => {
+      if (!workspaceSlug || !moduleId || !issue.bridge_id) return;
+      moduleIssueStore.removeIssueFromModule(workspaceSlug, issue.project, moduleId, issue.id, issue.bridge_id);
+    },
+  };
+
   return (
-    <BaseSpreadsheetRoot issueStore={moduleIssueStore} issueFiltersStore={moduleIssueFilterStore} viewId={moduleId} />
+    <BaseSpreadsheetRoot
+      issueStore={moduleIssueStore}
+      issueFiltersStore={moduleIssueFilterStore}
+      viewId={moduleId}
+      issueActions={issueActions}
+      QuickActions={ModuleIssueQuickActions}
+    />
   );
 });
diff --git a/web/components/issues/issue-layouts/spreadsheet/roots/project-root.tsx b/web/components/issues/issue-layouts/spreadsheet/roots/project-root.tsx
index a3a67f5f9..abcd56821 100644
--- a/web/components/issues/issue-layouts/spreadsheet/roots/project-root.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/roots/project-root.tsx
@@ -4,8 +4,36 @@ import { observer } from "mobx-react-lite";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 import { BaseSpreadsheetRoot } from "../base-spreadsheet-root";
+import { EIssueActions } from "../../types";
+import { IIssue } from "types";
+import { useRouter } from "next/router";
+import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
 
 export const ProjectSpreadsheetLayout: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query as { workspaceSlug: string };
+
   const { projectIssues: projectIssuesStore, projectIssuesFilter: projectIssueFiltersStore } = useMobxStore();
-  return <BaseSpreadsheetRoot issueStore={projectIssuesStore} issueFiltersStore={projectIssueFiltersStore} />;
+
+  const issueActions = {
+    [EIssueActions.UPDATE]: async (issue: IIssue) => {
+      if (!workspaceSlug) return;
+
+      await projectIssuesStore.updateIssue(workspaceSlug, issue.project, issue.id, issue);
+    },
+    [EIssueActions.DELETE]: async (issue: IIssue) => {
+      if (!workspaceSlug) return;
+
+      await projectIssuesStore.removeIssue(workspaceSlug, issue.project, issue.id);
+    },
+  };
+
+  return (
+    <BaseSpreadsheetRoot
+      issueStore={projectIssuesStore}
+      issueFiltersStore={projectIssueFiltersStore}
+      issueActions={issueActions}
+      QuickActions={ProjectIssueQuickActions}
+    />
+  );
 });
diff --git a/web/components/issues/issue-layouts/spreadsheet/roots/project-view-root.tsx b/web/components/issues/issue-layouts/spreadsheet/roots/project-view-root.tsx
index 92975f7ff..c3fe9f0b7 100644
--- a/web/components/issues/issue-layouts/spreadsheet/roots/project-view-root.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/roots/project-view-root.tsx
@@ -4,8 +4,36 @@ import { observer } from "mobx-react-lite";
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { BaseSpreadsheetRoot } from "../base-spreadsheet-root";
+import { EIssueActions } from "../../types";
+import { IIssue } from "types";
+import { useRouter } from "next/router";
+import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
 
 export const ProjectViewSpreadsheetLayout: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query as { workspaceSlug: string };
+
   const { viewIssues: projectViewIssuesStore, viewIssuesFilter: projectViewIssueFiltersStore } = useMobxStore();
-  return <BaseSpreadsheetRoot issueStore={projectViewIssuesStore} issueFiltersStore={projectViewIssueFiltersStore} />;
+
+  const issueActions = {
+    [EIssueActions.UPDATE]: async (issue: IIssue) => {
+      if (!workspaceSlug) return;
+
+      await projectViewIssuesStore.updateIssue(workspaceSlug, issue.project, issue.id, issue);
+    },
+    [EIssueActions.DELETE]: async (issue: IIssue) => {
+      if (!workspaceSlug) return;
+
+      await projectViewIssuesStore.removeIssue(workspaceSlug, issue.project, issue.id);
+    },
+  };
+
+  return (
+    <BaseSpreadsheetRoot
+      issueStore={projectViewIssuesStore}
+      issueFiltersStore={projectViewIssueFiltersStore}
+      issueActions={issueActions}
+      QuickActions={ProjectIssueQuickActions}
+    />
+  );
 });
diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
index 6f603967a..4b2a13a3a 100644
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
@@ -7,6 +7,7 @@ import { IssuePeekOverview } from "components/issues/issue-peek-overview";
 import { Spinner } from "@plane/ui";
 // types
 import { IIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueLabel, IState, IUserLite } from "types";
+import { EIssueActions } from "../types";
 
 type Props = {
   displayProperties: IIssueDisplayProperties;
@@ -16,8 +17,8 @@ type Props = {
   members?: IUserLite[] | undefined;
   labels?: IIssueLabel[] | undefined;
   states?: IState[] | undefined;
-  handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void;
-  handleUpdateIssue: (issue: IIssue, data: Partial<IIssue>) => void;
+  quickActions: (issue: IIssue) => React.ReactNode;
+  handleIssues: (issue: IIssue, action: EIssueActions) => void;
   openIssuesListModal?: (() => void) | null;
   quickAddCallback?: (
     workspaceSlug: string,
@@ -39,8 +40,8 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
     members,
     labels,
     states,
-    handleIssueAction,
-    handleUpdateIssue,
+    quickActions,
+    handleIssues,
     quickAddCallback,
     viewId,
     disableUserActions,
@@ -80,6 +81,8 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
     };
   }, []);
 
+  console.log("spreadsheet issues", issues);
+
   return (
     <div className="relative flex h-full w-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-200">
       <div className="h-full w-full flex flex-col">
@@ -103,18 +106,20 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
                     <span className="flex items-center justify-center px-4 py-2.5 h-full w-full flex-grow">Issue</span>
                   </div>
 
-                  {issues.map((issue, index) => (
-                    <SpreadsheetIssuesColumn
-                      key={`${issue.id}_${index}`}
-                      issue={issue}
-                      expandedIssues={expandedIssues}
-                      setExpandedIssues={setExpandedIssues}
-                      properties={displayProperties}
-                      handleIssueAction={handleIssueAction}
-                      disableUserActions={disableUserActions}
-                      setIssuePeekOverView={setIssuePeekOverView}
-                    />
-                  ))}
+                  {issues.map((issue, index) =>
+                    issue ? (
+                      <SpreadsheetIssuesColumn
+                        key={`${issue?.id}_${index}`}
+                        issue={issue}
+                        expandedIssues={expandedIssues}
+                        setExpandedIssues={setExpandedIssues}
+                        properties={displayProperties}
+                        quickActions={quickActions}
+                        disableUserActions={disableUserActions}
+                        setIssuePeekOverView={setIssuePeekOverView}
+                      />
+                    ) : null
+                  )}
                 </div>
               </div>
 
@@ -124,7 +129,7 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
                 disableUserActions={disableUserActions}
                 expandedIssues={expandedIssues}
                 handleDisplayFilterUpdate={handleDisplayFilterUpdate}
-                handleUpdateIssue={handleUpdateIssue}
+                handleUpdateIssue={(issue, data) => handleIssues({ ...issue, ...data }, EIssueActions.UPDATE)}
                 issues={issues}
                 members={members}
                 labels={labels}
@@ -185,7 +190,7 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
           workspaceSlug={issuePeekOverview?.workspaceSlug}
           projectId={issuePeekOverview?.projectId}
           issueId={issuePeekOverview?.issueId}
-          handleIssue={(issueToUpdate: any) => handleUpdateIssue(issueToUpdate as IIssue, issueToUpdate)}
+          handleIssue={(issueToUpdate: any) => handleIssues(issueToUpdate, EIssueActions.UPDATE)}
         />
       )}
     </div>
diff --git a/web/components/issues/modal.tsx b/web/components/issues/modal.tsx
index 0ad008153..6bb6b81a1 100644
--- a/web/components/issues/modal.tsx
+++ b/web/components/issues/modal.tsx
@@ -16,6 +16,7 @@ import { IssueForm, ConfirmIssueDiscard } from "components/issues";
 import type { IIssue } from "types";
 // fetch-keys
 import { USER_ISSUE, SUB_ISSUES } from "constants/fetch-keys";
+import { EProjectStore } from "store/command-palette.store";
 
 export interface IssuesModalProps {
   data?: IIssue | null;
@@ -40,6 +41,7 @@ export interface IssuesModalProps {
   )[];
   onSubmit?: (data: Partial<IIssue>) => Promise<void>;
   handleSubmit?: (data: Partial<IIssue>) => Promise<void>;
+  currentStore?: EProjectStore;
 }
 
 const issueDraftService = new IssueDraftService();
@@ -53,6 +55,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
     fieldsToShow = ["all"],
     onSubmit,
     handleSubmit,
+    currentStore = EProjectStore.PROJECT,
   } = props;
 
   // states
@@ -63,20 +66,56 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
   const [prePopulateData, setPreloadedData] = useState<Partial<IIssue>>({});
 
   const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
+  const { workspaceSlug, projectId, cycleId, moduleId } = router.query as {
+    workspaceSlug: string;
+    projectId: string | undefined;
+    cycleId: string | undefined;
+    moduleId: string | undefined;
+  };
 
   const {
     project: projectStore,
-    issue: issueStore,
-    issueDetail: issueDetailStore,
-    cycleIssue: cycleIssueStore,
-    moduleIssue: moduleIssueStore,
+    projectIssues: projectIssueStore,
+    viewIssues: projectViewIssueStore,
+    workspaceProfileIssues: profileIssueStore,
+    cycleIssues: cycleIssueStore,
+    moduleIssues: moduleIssueStore,
     user: userStore,
-    trackEvent: { postHogEventTracker }
+    trackEvent: { postHogEventTracker },
   } = useMobxStore();
 
   const user = userStore.currentUser;
 
+  const issueStores = {
+    [EProjectStore.PROJECT]: {
+      store: projectIssueStore,
+      dataIdToUpdate: activeProject,
+      viewId: undefined,
+    },
+    [EProjectStore.PROJECT_VIEW]: {
+      store: projectViewIssueStore,
+      dataIdToUpdate: activeProject,
+      viewId: undefined,
+    },
+    [EProjectStore.PROFILE]: {
+      store: profileIssueStore,
+      dataIdToUpdate: user?.id || undefined,
+      viewId: undefined,
+    },
+    [EProjectStore.CYCLE]: {
+      store: cycleIssueStore,
+      dataIdToUpdate: activeProject,
+      viewId: cycleId,
+    },
+    [EProjectStore.MODULE]: {
+      store: moduleIssueStore,
+      dataIdToUpdate: activeProject,
+      viewId: moduleId,
+    },
+  };
+
+  const { store: currentIssueStore, viewId, dataIdToUpdate } = issueStores[currentStore];
+
   const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined;
 
   const { setValue: setValueInLocalStorage, clearValue: clearLocalStorageValue } = useLocalStorage<any>(
@@ -176,60 +215,57 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
     // in the url. This has the least priority.
     if (projects && projects.length > 0 && !activeProject)
       setActiveProject(projects?.find((p) => p.id === projectId)?.id ?? projects?.[0].id ?? null);
-  }, [activeProject, data, projectId, projects, isOpen]);
+  }, [data, projectId, projects, isOpen]);
 
-  const addIssueToCycle = async (issueId: string, cycleId: string) => {
+  const addIssueToCycle = async (issue: IIssue, cycleId: string) => {
     if (!workspaceSlug || !activeProject) return;
 
-    cycleIssueStore.addIssueToCycle(workspaceSlug.toString(), activeProject, cycleId, [issueId]);
+    cycleIssueStore.addIssueToCycle(workspaceSlug, activeProject, cycleId, issue);
   };
 
-  const addIssueToModule = async (issueId: string, moduleId: string) => {
+  const addIssueToModule = async (issue: IIssue, moduleId: string) => {
     if (!workspaceSlug || !activeProject) return;
 
-    moduleIssueStore.addIssueToModule(workspaceSlug.toString(), activeProject, moduleId, [issueId]);
+    moduleIssueStore.addIssueToModule(workspaceSlug, activeProject, moduleId, issue);
   };
 
   const createIssue = async (payload: Partial<IIssue>) => {
-    if (!workspaceSlug || !activeProject) return;
+    if (!workspaceSlug || !dataIdToUpdate) return;
 
-    await issueDetailStore
-      .createIssue(workspaceSlug.toString(), activeProject, payload)
+    await currentIssueStore
+      .createIssue(workspaceSlug, dataIdToUpdate, payload, viewId)
       .then(async (res) => {
+        if (!res) throw new Error();
+
         if (handleSubmit) {
           await handleSubmit(res);
         } else {
-          issueStore.fetchIssues(workspaceSlug.toString(), activeProject);
+          currentIssueStore.fetchIssues(workspaceSlug, dataIdToUpdate, "mutation");
 
-          if (payload.cycle && payload.cycle !== "") await addIssueToCycle(res.id, payload.cycle);
-          if (payload.module && payload.module !== "") await addIssueToModule(res.id, payload.module);
+          if (payload.cycle && payload.cycle !== "") await addIssueToCycle(res, payload.cycle);
+          if (payload.module && payload.module !== "") await addIssueToModule(res, payload.module);
 
           setToastAlert({
             type: "success",
             title: "Success!",
             message: "Issue created successfully.",
           });
-          postHogEventTracker(
-            "ISSUE_CREATE",
-            {
-              ...res,
-              state: "SUCCESS"
-            }
-          );
+          postHogEventTracker("ISSUE_CREATE", {
+            ...res,
+            state: "SUCCESS",
+          });
           if (payload.parent && payload.parent !== "") mutate(SUB_ISSUES(payload.parent));
         }
-      }).catch(() => {
+      })
+      .catch(() => {
         setToastAlert({
           type: "error",
           title: "Error!",
           message: "Issue could not be created. Please try again.",
         });
-        postHogEventTracker(
-          "ISSUE_CREATE",
-          {
-            state: "FAILED"
-          }
-        );
+        postHogEventTracker("ISSUE_CREATE", {
+          state: "FAILED",
+        });
       });
 
     if (!createMore) onFormSubmitClose();
@@ -269,10 +305,10 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
   };
 
   const updateIssue = async (payload: Partial<IIssue>) => {
-    if (!workspaceSlug || !activeProject || !data) return;
+    if (!workspaceSlug || !dataIdToUpdate || !data) return;
 
-    await issueDetailStore
-      .updateIssue(workspaceSlug.toString(), activeProject, data.id, payload)
+    await currentIssueStore
+      .updateIssue(workspaceSlug, dataIdToUpdate, data.id, payload, viewId)
       .then((res) => {
         if (!createMore) onFormSubmitClose();
 
@@ -281,13 +317,10 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
           title: "Success!",
           message: "Issue updated successfully.",
         });
-        postHogEventTracker(
-          "ISSUE_UPDATE",
-          {
-            ...res,
-            state: "SUCCESS"
-          }
-        );
+        postHogEventTracker("ISSUE_UPDATE", {
+          ...res,
+          state: "SUCCESS",
+        });
       })
       .catch(() => {
         setToastAlert({
@@ -295,17 +328,14 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
           title: "Error!",
           message: "Issue could not be updated. Please try again.",
         });
-        postHogEventTracker(
-          "ISSUE_UPDATE",
-          {
-            state: "FAILED"
-          }
-        );
+        postHogEventTracker("ISSUE_UPDATE", {
+          state: "FAILED",
+        });
       });
   };
 
   const handleFormSubmit = async (formData: Partial<IIssue>) => {
-    if (!workspaceSlug || !activeProject) return;
+    if (!workspaceSlug || !dataIdToUpdate || !currentStore) return;
 
     const payload: Partial<IIssue> = {
       ...formData,
diff --git a/web/components/profile/profile-issues-filter.tsx b/web/components/profile/profile-issues-filter.tsx
index 28bc2259d..0478cc94f 100644
--- a/web/components/profile/profile-issues-filter.tsx
+++ b/web/components/profile/profile-issues-filter.tsx
@@ -1,4 +1,6 @@
+import { useCallback } from "react";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 // components
 import { DisplayFiltersSelection, FilterSelection, FiltersDropdown, LayoutSelection } from "components/issues";
 // hooks
@@ -6,40 +8,68 @@ import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
 // constants
 import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
+import { EFilterType } from "store/issues/types";
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "types";
 
 export const ProfileIssuesFilter = observer(() => {
-  const { workspace: workspaceStore, profileIssueFilters: profileIssueFiltersStore }: RootStore = useMobxStore();
-
-  const handleLayoutChange = (_layout: string) => {
-    const payload = {
-      layout: _layout,
-      group_by: profileIssueFiltersStore.userDisplayFilters.group_by
-        ? profileIssueFiltersStore.userDisplayFilters.group_by
-        : "state_detail.group",
-    };
-
-    profileIssueFiltersStore.handleIssueFilters("userDisplayFilters", payload);
+  const router = useRouter();
+  const { workspaceSlug } = router.query as {
+    workspaceSlug: string;
   };
 
-  const handleFilters = (key: any, value: any) => {
-    let updatesFilters: any = profileIssueFiltersStore?.userFilters;
-    updatesFilters = updatesFilters[key] || [];
-    if (updatesFilters && updatesFilters.length > 0 && updatesFilters.includes(value))
-      updatesFilters = updatesFilters.filter((item: any) => item !== value);
-    else updatesFilters.push(value);
-    profileIssueFiltersStore.handleIssueFilters("userFilters", { [key]: updatesFilters });
-  };
-
-  const handleDisplayFilters = (value: any) => profileIssueFiltersStore.handleIssueFilters("userDisplayFilters", value);
-
-  const handleDisplayProperties = (value: any) =>
-    profileIssueFiltersStore.handleIssueFilters("userDisplayProperties", value);
+  const {
+    workspace: workspaceStore,
+    workspaceProfileIssuesFilter: { issueFilters, updateFilters },
+  }: RootStore = useMobxStore();
 
   const states = undefined;
   const labels = workspaceStore.workspaceLabels || undefined;
   const members = undefined;
 
-  const activeLayout = profileIssueFiltersStore?.userDisplayFilters?.layout;
+  const activeLayout = issueFilters?.displayFilters?.layout;
+
+  const handleLayoutChange = useCallback(
+    (layout: TIssueLayouts) => {
+      if (!workspaceSlug) return;
+      updateFilters(workspaceSlug, EFilterType.DISPLAY_FILTERS, { layout: layout });
+    },
+    [workspaceSlug, updateFilters]
+  );
+
+  const handleFiltersUpdate = useCallback(
+    (key: keyof IIssueFilterOptions, value: string | string[]) => {
+      if (!workspaceSlug) return;
+      const newValues = issueFilters?.filters?.[key] ?? [];
+
+      if (Array.isArray(value)) {
+        value.forEach((val) => {
+          if (!newValues.includes(val)) newValues.push(val);
+        });
+      } else {
+        if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+        else newValues.push(value);
+      }
+
+      updateFilters(workspaceSlug, EFilterType.FILTERS, { [key]: newValues });
+    },
+    [workspaceSlug, issueFilters, updateFilters]
+  );
+
+  const handleDisplayFilters = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!workspaceSlug) return;
+      updateFilters(workspaceSlug, EFilterType.DISPLAY_FILTERS, updatedDisplayFilter);
+    },
+    [workspaceSlug, updateFilters]
+  );
+
+  const handleDisplayProperties = useCallback(
+    (property: Partial<IIssueDisplayProperties>) => {
+      if (!workspaceSlug) return;
+      updateFilters(workspaceSlug, EFilterType.DISPLAY_PROPERTIES, property);
+    },
+    [workspaceSlug, updateFilters]
+  );
 
   return (
     <div className="relative flex items-center justify-end gap-2">
@@ -51,11 +81,11 @@ export const ProfileIssuesFilter = observer(() => {
 
       <FiltersDropdown title="Filters" placement="bottom-end">
         <FilterSelection
-          filters={profileIssueFiltersStore.userFilters}
-          handleFiltersUpdate={handleFilters}
           layoutDisplayFiltersOptions={
             activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.profile_issues[activeLayout] : undefined
           }
+          filters={issueFilters?.filters ?? {}}
+          handleFiltersUpdate={handleFiltersUpdate}
           states={states}
           labels={labels}
           members={members}
@@ -64,13 +94,13 @@ export const ProfileIssuesFilter = observer(() => {
 
       <FiltersDropdown title="Display" placement="bottom-end">
         <DisplayFiltersSelection
-          displayFilters={profileIssueFiltersStore.userDisplayFilters}
-          displayProperties={profileIssueFiltersStore.userDisplayProperties}
-          handleDisplayFiltersUpdate={handleDisplayFilters}
-          handleDisplayPropertiesUpdate={handleDisplayProperties}
           layoutDisplayFiltersOptions={
             activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.profile_issues[activeLayout] : undefined
           }
+          displayFilters={issueFilters?.displayFilters ?? {}}
+          handleDisplayFiltersUpdate={handleDisplayFilters}
+          displayProperties={issueFilters?.displayProperties ?? {}}
+          handleDisplayPropertiesUpdate={handleDisplayProperties}
         />
       </FiltersDropdown>
     </div>
diff --git a/web/components/profile/profile-issues.tsx b/web/components/profile/profile-issues.tsx
new file mode 100644
index 000000000..e63f5714d
--- /dev/null
+++ b/web/components/profile/profile-issues.tsx
@@ -0,0 +1,63 @@
+import React, { ReactElement } from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+import { observer } from "mobx-react-lite";
+// layouts
+import { AppLayout } from "layouts/app-layout";
+import { ProfileAuthWrapper } from "layouts/user-profile-layout";
+// components
+import { UserProfileHeader } from "components/headers";
+import { ProfileIssuesListLayout } from "components/issues/issue-layouts/list/roots/profile-issues-root";
+import { ProfileIssuesKanBanLayout } from "components/issues/issue-layouts/kanban/roots/profile-issues-root";
+import { ProfileIssuesAppliedFiltersRoot } from "components/issues";
+import { Spinner } from "@plane/ui";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+interface IProfileIssuesPage {
+  type: "assigned" | "subscribed" | "created";
+}
+
+export const ProfileIssuesPage = observer((props: IProfileIssuesPage) => {
+  const router = useRouter();
+  const { workspaceSlug, userId } = router.query as {
+    workspaceSlug: string;
+    userId: string;
+  };
+
+  const {
+    workspaceProfileIssues: { loader, getIssues, fetchIssues },
+    workspaceProfileIssuesFilter: { issueFilters, fetchFilters },
+  }: RootStore = useMobxStore();
+
+  useSWR(workspaceSlug && userId ? `CURRENT_WORKSPACE_PROFILE_ISSUES_${workspaceSlug}_${userId}` : null, async () => {
+    if (workspaceSlug && userId) {
+      await fetchFilters(workspaceSlug);
+      await fetchIssues(workspaceSlug, userId, getIssues ? "mutation" : "init-loader", props.type);
+    }
+  });
+
+  const activeLayout = issueFilters?.displayFilters?.layout || undefined;
+
+  return (
+    <>
+      {loader === "init-loader" ? (
+        <div className="flex justify-center items-center w-full h-full">
+          <Spinner />
+        </div>
+      ) : (
+        <>
+          <ProfileIssuesAppliedFiltersRoot />
+          <div className="w-full h-full relative overflow-auto -z-1">
+            {activeLayout === "list" ? (
+              <ProfileIssuesListLayout />
+            ) : activeLayout === "kanban" ? (
+              <ProfileIssuesKanBanLayout />
+            ) : null}
+          </div>
+        </>
+      )}
+    </>
+  );
+});
diff --git a/web/components/workspace/sidebar-quick-action.tsx b/web/components/workspace/sidebar-quick-action.tsx
index 1f16ad4c5..37bce9c3d 100644
--- a/web/components/workspace/sidebar-quick-action.tsx
+++ b/web/components/workspace/sidebar-quick-action.tsx
@@ -9,12 +9,17 @@ import { CreateUpdateDraftIssueModal } from "components/issues";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 import { observer } from "mobx-react-lite";
+import { EProjectStore } from "store/command-palette.store";
 
 export const WorkspaceSidebarQuickAction = observer(() => {
   // states
   const [isDraftIssueModalOpen, setIsDraftIssueModalOpen] = useState(false);
 
-  const { theme: themeStore, commandPalette: commandPaletteStore, trackEvent: { setTrackElement } } = useMobxStore();
+  const {
+    theme: themeStore,
+    commandPalette: commandPaletteStore,
+    trackEvent: { setTrackElement },
+  } = useMobxStore();
 
   const { storedValue, clearValue } = useLocalStorage<any>("draftedIssue", JSON.stringify({}));
 
@@ -34,24 +39,26 @@ export const WorkspaceSidebarQuickAction = observer(() => {
       />
 
       <div
-        className={`flex items-center justify-between w-full cursor-pointer px-4 mt-4 ${isSidebarCollapsed ? "flex-col gap-1" : "gap-2"
-          }`}
+        className={`flex items-center justify-between w-full cursor-pointer px-4 mt-4 ${
+          isSidebarCollapsed ? "flex-col gap-1" : "gap-2"
+        }`}
       >
         <div
-          className={`relative flex items-center justify-between w-full rounded cursor-pointer px-2 gap-1 group ${isSidebarCollapsed
-            ? "px-2 hover:bg-custom-sidebar-background-80"
-            : "px-3 shadow-custom-sidebar-shadow-2xs border-[0.5px] border-custom-border-200"
-            }`}
+          className={`relative flex items-center justify-between w-full rounded cursor-pointer px-2 gap-1 group ${
+            isSidebarCollapsed
+              ? "px-2 hover:bg-custom-sidebar-background-80"
+              : "px-3 shadow-custom-sidebar-shadow-2xs border-[0.5px] border-custom-border-200"
+          }`}
         >
           <button
             type="button"
-            className={`relative flex items-center gap-2 flex-grow rounded flex-shrink-0 py-1.5 outline-none ${isSidebarCollapsed ? "justify-center" : ""
-              }`}
+            className={`relative flex items-center gap-2 flex-grow rounded flex-shrink-0 py-1.5 outline-none ${
+              isSidebarCollapsed ? "justify-center" : ""
+            }`}
             onClick={() => {
               setTrackElement("APP_SIDEBAR_QUICK_ACTIONS");
-              commandPaletteStore.toggleCreateIssueModal(true);
-            }
-            }
+              commandPaletteStore.toggleCreateIssueModal(true, EProjectStore.PROJECT);
+            }}
           >
             <PenSquare className="h-4 w-4 text-custom-sidebar-text-300" />
             {!isSidebarCollapsed && <span className="text-sm font-medium">New Issue</span>}
@@ -63,8 +70,9 @@ export const WorkspaceSidebarQuickAction = observer(() => {
 
               <button
                 type="button"
-                className={`flex items-center justify-center rounded flex-shrink-0 py-1.5 ml-1.5 ${isSidebarCollapsed ? "hidden" : "block"
-                  }`}
+                className={`flex items-center justify-center rounded flex-shrink-0 py-1.5 ml-1.5 ${
+                  isSidebarCollapsed ? "hidden" : "block"
+                }`}
               >
                 <ChevronDown
                   size={16}
@@ -73,8 +81,9 @@ export const WorkspaceSidebarQuickAction = observer(() => {
               </button>
 
               <div
-                className={`fixed h-10 pt-2 w-[203px] left-4 opacity-0 group-hover:opacity-100 mt-0 pointer-events-none group-hover:pointer-events-auto ${isSidebarCollapsed ? "top-[5.5rem]" : "top-24"
-                  }`}
+                className={`fixed h-10 pt-2 w-[203px] left-4 opacity-0 group-hover:opacity-100 mt-0 pointer-events-none group-hover:pointer-events-auto ${
+                  isSidebarCollapsed ? "top-[5.5rem]" : "top-24"
+                }`}
               >
                 <div className="w-full h-full">
                   <button
@@ -91,10 +100,11 @@ export const WorkspaceSidebarQuickAction = observer(() => {
         </div>
 
         <button
-          className={`flex items-center justify-center rounded flex-shrink-0 p-2 outline-none ${isSidebarCollapsed
-            ? "hover:bg-custom-sidebar-background-80"
-            : "shadow-custom-sidebar-shadow-2xs border-[0.5px] border-custom-border-200"
-            }`}
+          className={`flex items-center justify-center rounded flex-shrink-0 p-2 outline-none ${
+            isSidebarCollapsed
+              ? "hover:bg-custom-sidebar-background-80"
+              : "shadow-custom-sidebar-shadow-2xs border-[0.5px] border-custom-border-200"
+          }`}
           onClick={() => commandPaletteStore.toggleCommandPaletteModal(true)}
         >
           <Search className="h-4 w-4 text-custom-sidebar-text-300" />
diff --git a/web/pages/[workspaceSlug]/profile/[userId]/assigned.tsx b/web/pages/[workspaceSlug]/profile/[userId]/assigned.tsx
index 2d1bb5534..a2c09dd98 100644
--- a/web/pages/[workspaceSlug]/profile/[userId]/assigned.tsx
+++ b/web/pages/[workspaceSlug]/profile/[userId]/assigned.tsx
@@ -1,67 +1,15 @@
 import React, { ReactElement } from "react";
-import { useRouter } from "next/router";
-import useSWR from "swr";
 import { observer } from "mobx-react-lite";
 // layouts
 import { AppLayout } from "layouts/app-layout";
 import { ProfileAuthWrapper } from "layouts/user-profile-layout";
 // components
 import { UserProfileHeader } from "components/headers";
-import { ProfileIssuesListLayout } from "components/issues/issue-layouts/list/roots/profile-issues-root";
-import { ProfileIssuesKanBanLayout } from "components/issues/issue-layouts/kanban/roots/profile-issues-root";
-import { Spinner } from "@plane/ui";
-// hooks
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
 // types
 import { NextPageWithLayout } from "types/app";
+import { ProfileIssuesPage } from "components/profile/profile-issues";
 
-const ProfileAssignedIssuesPage: NextPageWithLayout = observer(() => {
-  const {
-    workspace: workspaceStore,
-    project: projectStore,
-    profileIssueFilters: profileIssueFiltersStore,
-    profileIssues: profileIssuesStore,
-  }: RootStore = useMobxStore();
-
-  const router = useRouter();
-  const { workspaceSlug, userId } = router.query as {
-    workspaceSlug: string;
-    userId: string;
-  };
-
-  const { isLoading } = useSWR(`PROFILE_ISSUES_${workspaceSlug}_${userId}`, async () => {
-    if (workspaceSlug && userId) {
-      // workspace labels
-      workspaceStore.setWorkspaceSlug(workspaceSlug);
-      await workspaceStore.fetchWorkspaceLabels(workspaceSlug);
-      await projectStore.fetchProjects(workspaceSlug);
-
-      //profile issues
-      await profileIssuesStore.fetchIssues(workspaceSlug, userId, "assigned");
-    }
-  });
-
-  const activeLayout = profileIssueFiltersStore.userDisplayFilters.layout;
-
-  return (
-    <>
-      {isLoading ? (
-        <div className="flex justify-center items-center w-full h-full">
-          <Spinner />
-        </div>
-      ) : (
-        <div className="w-full h-full relative overflow-auto -z-1">
-          {activeLayout === "list" ? (
-            <ProfileIssuesListLayout />
-          ) : activeLayout === "kanban" ? (
-            <ProfileIssuesKanBanLayout />
-          ) : null}
-        </div>
-      )}
-    </>
-  );
-});
+const ProfileAssignedIssuesPage: NextPageWithLayout = observer(() => <ProfileIssuesPage type="assigned" />);
 
 ProfileAssignedIssuesPage.getLayout = function getLayout(page: ReactElement) {
   return (
diff --git a/web/pages/[workspaceSlug]/profile/[userId]/created.tsx b/web/pages/[workspaceSlug]/profile/[userId]/created.tsx
index a6bbd8521..020c3499f 100644
--- a/web/pages/[workspaceSlug]/profile/[userId]/created.tsx
+++ b/web/pages/[workspaceSlug]/profile/[userId]/created.tsx
@@ -1,63 +1,16 @@
 import { ReactElement } from "react";
-import { useRouter } from "next/router";
-import useSWR from "swr";
 // store
 import { observer } from "mobx-react-lite";
-import { useMobxStore } from "lib/mobx/store-provider";
 // layouts
 import { AppLayout } from "layouts/app-layout";
 import { ProfileAuthWrapper } from "layouts/user-profile-layout";
 // components
 import { UserProfileHeader } from "components/headers";
-import { ProfileIssuesListLayout } from "components/issues/issue-layouts/list/roots/profile-issues-root";
-import { ProfileIssuesKanBanLayout } from "components/issues/issue-layouts/kanban/roots/profile-issues-root";
-import { Spinner } from "@plane/ui";
 // types
 import { NextPageWithLayout } from "types/app";
+import { ProfileIssuesPage } from "components/profile/profile-issues";
 
-const ProfileCreatedIssuesPage: NextPageWithLayout = () => {
-  const {
-    workspace: workspaceStore,
-    project: projectStore,
-    profileIssueFilters: profileIssueFiltersStore,
-    profileIssues: profileIssuesStore,
-  } = useMobxStore();
-
-  const router = useRouter();
-  const { workspaceSlug, userId } = router.query;
-
-  const { isLoading } = useSWR(`PROFILE_ISSUES_CREATED_${workspaceSlug}_${userId}`, async () => {
-    if (workspaceSlug && userId) {
-      // workspace labels
-      workspaceStore.setWorkspaceSlug(workspaceSlug.toString());
-      await workspaceStore.fetchWorkspaceLabels(workspaceSlug.toString());
-      await projectStore.fetchProjects(workspaceSlug.toString());
-
-      //profile issues
-      await profileIssuesStore.fetchIssues(workspaceSlug.toString(), userId.toString(), "created");
-    }
-  });
-
-  const activeLayout = profileIssueFiltersStore.userDisplayFilters.layout;
-
-  return (
-    <>
-      {isLoading ? (
-        <div className="flex justify-center items-center w-full h-full">
-          <Spinner />
-        </div>
-      ) : (
-        <div className="w-full h-full relative overflow-auto -z-1">
-          {activeLayout === "list" ? (
-            <ProfileIssuesListLayout />
-          ) : activeLayout === "kanban" ? (
-            <ProfileIssuesKanBanLayout />
-          ) : null}
-        </div>
-      )}
-    </>
-  );
-};
+const ProfileCreatedIssuesPage: NextPageWithLayout = () => <ProfileIssuesPage type="created" />;
 
 ProfileCreatedIssuesPage.getLayout = function getLayout(page: ReactElement) {
   return (
diff --git a/web/pages/[workspaceSlug]/profile/[userId]/subscribed.tsx b/web/pages/[workspaceSlug]/profile/[userId]/subscribed.tsx
index bcc9c66a5..fcfac02c3 100644
--- a/web/pages/[workspaceSlug]/profile/[userId]/subscribed.tsx
+++ b/web/pages/[workspaceSlug]/profile/[userId]/subscribed.tsx
@@ -1,63 +1,16 @@
 import { ReactElement } from "react";
-import { useRouter } from "next/router";
-import useSWR from "swr";
 // store
 import { observer } from "mobx-react-lite";
-import { useMobxStore } from "lib/mobx/store-provider";
 // layouts
 import { AppLayout } from "layouts/app-layout";
 import { ProfileAuthWrapper } from "layouts/user-profile-layout";
 // components
 import { UserProfileHeader } from "components/headers";
-import { ProfileIssuesListLayout } from "components/issues/issue-layouts/list/roots/profile-issues-root";
-import { ProfileIssuesKanBanLayout } from "components/issues/issue-layouts/kanban/roots/profile-issues-root";
-import { Spinner } from "@plane/ui";
 // types
 import { NextPageWithLayout } from "types/app";
+import { ProfileIssuesPage } from "components/profile/profile-issues";
 
-const ProfileSubscribedIssuesPage: NextPageWithLayout = () => {
-  const {
-    workspace: workspaceStore,
-    project: projectStore,
-    profileIssueFilters: profileIssueFiltersStore,
-    profileIssues: profileIssuesStore,
-  } = useMobxStore();
-
-  const router = useRouter();
-  const { workspaceSlug, userId } = router.query;
-
-  const { isLoading } = useSWR(`PROFILE_ISSUES_SUBSCRIBED_${workspaceSlug}_${userId}`, async () => {
-    if (workspaceSlug && userId) {
-      // workspace labels
-      workspaceStore.setWorkspaceSlug(workspaceSlug.toString());
-      await workspaceStore.fetchWorkspaceLabels(workspaceSlug.toString());
-      await projectStore.fetchProjects(workspaceSlug.toString());
-
-      //profile issues
-      await profileIssuesStore.fetchIssues(workspaceSlug.toString(), userId.toString(), "subscribed");
-    }
-  });
-
-  const activeLayout = profileIssueFiltersStore.userDisplayFilters.layout;
-
-  return (
-    <>
-      {isLoading ? (
-        <div className="flex justify-center items-center w-full h-full">
-          <Spinner />
-        </div>
-      ) : (
-        <div className="w-full h-full relative overflow-auto -z-1">
-          {activeLayout === "list" ? (
-            <ProfileIssuesListLayout />
-          ) : activeLayout === "kanban" ? (
-            <ProfileIssuesKanBanLayout />
-          ) : null}
-        </div>
-      )}
-    </>
-  );
-};
+const ProfileSubscribedIssuesPage: NextPageWithLayout = () => <ProfileIssuesPage type="subscribed" />;
 
 ProfileSubscribedIssuesPage.getLayout = function getLayout(page: ReactElement) {
   return (
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/draft-issues/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/draft-issues/index.tsx
index fcde49524..9fbab4f48 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/draft-issues/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/draft-issues/index.tsx
@@ -10,6 +10,7 @@ import { ProjectDraftIssueHeader } from "components/headers";
 import { X, PenSquare } from "lucide-react";
 // types
 import { NextPageWithLayout } from "types/app";
+import { DraftIssueLayoutRoot } from "components/issues/issue-layouts/roots/draft-issue-layout-root";
 
 const ProjectDraftIssuesPage: NextPageWithLayout = () => {
   const router = useRouter();
@@ -21,14 +22,14 @@ const ProjectDraftIssuesPage: NextPageWithLayout = () => {
         <button
           type="button"
           onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/issues/`)}
-          className="flex items-center gap-1.5 rounded border border-custom-border-200 px-3 py-1.5 text-xs"
+          className="flex items-center gap-1.5 rounded-full border border-custom-border-200 px-3 py-1.5 text-xs"
         >
-          <PenSquare className="h-3 w-3 text-custom-text-300" />
+          <PenSquare className="h-4 w-4" />
           <span>Draft Issues</span>
-
           <X className="h-3 w-3" />
         </button>
       </div>
+      <DraftIssueLayoutRoot />
     </div>
   );
 };
diff --git a/web/services/issue/issue_archive.service.ts b/web/services/issue/issue_archive.service.ts
index 7adc045ec..a21a98fbc 100644
--- a/web/services/issue/issue_archive.service.ts
+++ b/web/services/issue/issue_archive.service.ts
@@ -18,8 +18,8 @@ export class IssueArchiveService extends APIService {
   }
 
   async getV3ArchivedIssues(workspaceSlug: string, projectId: string, queries?: any): Promise<any> {
-    return this.get(`/api/v3/workspaces/${workspaceSlug}/projects/${projectId}/archived-issues/`, {
-      params: queries,
+    return this.get(`/api/v3/workspaces/${workspaceSlug}/projects/${projectId}/issues/`, {
+      params: { ...queries, archived: true },
     })
       .then((response) => response?.data)
       .catch((error) => {
diff --git a/web/services/issue/issue_draft.service.tsx b/web/services/issue/issue_draft.service.tsx
index 8d8ddecb3..5634e3bfe 100644
--- a/web/services/issue/issue_draft.service.tsx
+++ b/web/services/issue/issue_draft.service.tsx
@@ -17,13 +17,13 @@ export class IssueDraftService extends APIService {
       });
   }
 
-  async getV3DraftIssues(workspaceSlug: string, projectId: string, params?: any): Promise<any> {
-    return this.get(`/api/v3/workspaces/${workspaceSlug}/projects/${projectId}/issue-drafts/`, {
-      params,
+  async getV3DraftIssues(workspaceSlug: string, projectId: string, query?: any): Promise<any> {
+    return this.get(`/api/v3/workspaces/${workspaceSlug}/projects/${projectId}/issues/?draft=true`, {
+      params: { ...query },
     })
       .then((response) => response?.data)
       .catch((error) => {
-        throw error?.response;
+        throw error?.response?.data;
       });
   }
 
diff --git a/web/services/user.service.ts b/web/services/user.service.ts
index 7d7175153..c3dbdfd9c 100644
--- a/web/services/user.service.ts
+++ b/web/services/user.service.ts
@@ -13,6 +13,7 @@ import type {
 } from "types";
 // helpers
 import { API_BASE_URL } from "helpers/common.helper";
+import { IIssueResponse } from "store/issues/types";
 
 export class UserService extends APIService {
   constructor() {
@@ -193,6 +194,16 @@ export class UserService extends APIService {
       });
   }
 
+  async getV3UserProfileIssues(workspaceSlug: string, userId: string, params: any): Promise<IIssueResponse> {
+    return this.get(`/api/v3/workspaces/${workspaceSlug}/user-issues/${userId}/`, {
+      params,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
   async deactivateAccount() {
     return this.delete(`/api/users/me/`)
       .then((response) => response?.data)
diff --git a/web/store/command-palette.store.ts b/web/store/command-palette.store.ts
index 7bed73bfe..1c9fc785d 100644
--- a/web/store/command-palette.store.ts
+++ b/web/store/command-palette.store.ts
@@ -5,6 +5,19 @@ import { RootStore } from "./root";
 import { ProjectService } from "services/project";
 import { PageService } from "services/page.service";
 
+export enum EProjectStore {
+  PROJECT = "ProjectStore",
+  PROJECT_VIEW = "ProjectViewStore",
+  PROFILE = "ProfileStore",
+  MODULE = "ModuleStore",
+  CYCLE = "CycleStore",
+}
+
+export interface ModalData {
+  store: EProjectStore;
+  viewId: string;
+}
+
 export interface ICommandPaletteStore {
   isCommandPaletteOpen: boolean;
   isShortcutModalOpen: boolean;
@@ -23,10 +36,12 @@ export interface ICommandPaletteStore {
   toggleCreateCycleModal: (value?: boolean) => void;
   toggleCreateViewModal: (value?: boolean) => void;
   toggleCreatePageModal: (value?: boolean) => void;
-  toggleCreateIssueModal: (value?: boolean) => void;
+  toggleCreateIssueModal: (value?: boolean, storeType?: EProjectStore) => void;
   toggleCreateModuleModal: (value?: boolean) => void;
   toggleDeleteIssueModal: (value?: boolean) => void;
   toggleBulkDeleteIssueModal: (value?: boolean) => void;
+
+  createIssueStoreType: EProjectStore;
 }
 
 class CommandPaletteStore implements ICommandPaletteStore {
@@ -46,6 +61,8 @@ class CommandPaletteStore implements ICommandPaletteStore {
   projectService;
   pageService;
 
+  createIssueStoreType: EProjectStore = EProjectStore.PROJECT;
+
   constructor(_rootStore: RootStore) {
     makeObservable(this, {
       // observable
@@ -127,11 +144,13 @@ class CommandPaletteStore implements ICommandPaletteStore {
     }
   };
 
-  toggleCreateIssueModal = (value?: boolean) => {
+  toggleCreateIssueModal = (value?: boolean, storeType?: EProjectStore) => {
     if (value) {
       this.isCreateIssueModalOpen = value;
+      this.createIssueStoreType = storeType || EProjectStore.PROJECT;
     } else {
       this.isCreateIssueModalOpen = !this.isCreateIssueModalOpen;
+      this.createIssueStoreType = EProjectStore.PROJECT;
     }
   };
 
diff --git a/web/store/issues/global/filter.store.ts b/web/store/issues/global/filter.store.ts
new file mode 100644
index 000000000..a2304f36d
--- /dev/null
+++ b/web/store/issues/global/filter.store.ts
@@ -0,0 +1,327 @@
+import { action, makeObservable, observable, runInAction } from "mobx";
+// types
+import { RootStore } from "store/root";
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueParams } from "types";
+import { EFilterType } from "store/issues/types";
+import { handleIssueQueryParamsByLayout } from "helpers/issue.helper";
+import { IssueFilterBaseStore } from "../project-issues/base-issue-filter.store";
+
+interface IProjectIssuesFiltersOptions {
+  filters: IIssueFilterOptions;
+  displayFilters: IIssueDisplayFilterOptions;
+}
+
+interface IProjectIssuesDisplayOptions {
+  filters: IIssueFilterOptions;
+  displayFilters: IIssueDisplayFilterOptions;
+  displayProperties: IIssueDisplayProperties;
+}
+
+interface IProjectIssuesFilters {
+  filters: IIssueFilterOptions | undefined;
+  displayFilters: IIssueDisplayFilterOptions | undefined;
+  displayProperties: IIssueDisplayProperties | undefined;
+}
+
+export interface IGlobalIssuesFilterStore {
+  // observables
+  projectIssueFilters: { [workspaceId: string]: IProjectIssuesDisplayOptions } | undefined;
+  // computed
+  issueFilters: IProjectIssuesFilters | undefined;
+  appliedFilters: TIssueParams[] | undefined;
+  // helpers
+  issueDisplayFilters: (workspaceId: string) => IProjectIssuesDisplayOptions | undefined;
+  // actions
+  fetchDisplayFilters: (workspaceSlug: string) => Promise<IProjectIssuesFiltersOptions>;
+  updateDisplayFilters: (
+    workspaceSlug: string,
+    type: EFilterType,
+    filters: IIssueFilterOptions | IIssueDisplayFilterOptions
+  ) => Promise<IProjectIssuesFiltersOptions>;
+  fetchDisplayProperties: (workspaceSlug: string) => Promise<IIssueDisplayProperties>;
+  updateDisplayProperties: (
+    workspaceSlug: string,
+    properties: IIssueDisplayProperties
+  ) => Promise<IIssueDisplayProperties>;
+  fetchFilters: (workspaceSlug: string) => Promise<void>;
+  updateFilters: (
+    workspaceSlug: string,
+    filterType: EFilterType,
+    filters: IIssueFilterOptions | IIssueDisplayFilterOptions | IIssueDisplayProperties
+  ) => Promise<void>;
+}
+
+export class GlobalIssuesFilterStore extends IssueFilterBaseStore implements IGlobalIssuesFilterStore {
+  // observables
+  projectIssueFilters: { [projectId: string]: IProjectIssuesDisplayOptions } | undefined = undefined;
+  // root store
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    super(_rootStore);
+
+    makeObservable(this, {
+      // observables
+      projectIssueFilters: observable.ref,
+      // computed
+      // actions
+      fetchDisplayFilters: action,
+      updateDisplayFilters: action,
+      fetchDisplayProperties: action,
+      updateDisplayProperties: action,
+    });
+    // root store
+    this.rootStore = _rootStore;
+  }
+
+  // computed
+
+  // helpers
+  issueDisplayFilters = (workspaceId: string) => {
+    if (!workspaceId) return undefined;
+    return this.projectIssueFilters?.[workspaceId] || undefined;
+  };
+
+  // actions
+  fetchDisplayFilters = async (workspaceSlug: string) => {
+    try {
+      const filters: IIssueFilterOptions = {
+        assignees: null,
+        mentions: null,
+        created_by: null,
+        labels: null,
+        priority: null,
+        project: null,
+        start_date: null,
+        state: null,
+        state_group: null,
+        subscriber: null,
+        target_date: null,
+      };
+
+      const displayFilters: IIssueDisplayFilterOptions = {
+        calendar: {
+          show_weekends: false,
+          layout: "month",
+        },
+        group_by: "state_detail.group",
+        sub_group_by: null,
+        layout: "list",
+        order_by: "-created_at",
+        show_empty_groups: false,
+        start_target_date: false,
+        sub_issue: false,
+        type: null,
+      };
+
+      const issueFilters: IProjectIssuesFiltersOptions = {
+        filters: filters,
+        displayFilters: displayFilters,
+      };
+
+      let _projectIssueFilters = this.projectIssueFilters;
+      if (!_projectIssueFilters) _projectIssueFilters = {};
+      if (!_projectIssueFilters[workspaceSlug])
+        _projectIssueFilters[workspaceSlug] = { filters: {}, displayFilters: {}, displayProperties: {} };
+      _projectIssueFilters[workspaceSlug] = {
+        ..._projectIssueFilters[workspaceSlug],
+        ...issueFilters,
+      };
+
+      runInAction(() => {
+        this.projectIssueFilters = _projectIssueFilters;
+      });
+
+      return issueFilters;
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  updateDisplayFilters = async (
+    workspaceSlug: string,
+    type: EFilterType,
+    filters: IIssueFilterOptions | IIssueDisplayFilterOptions
+  ) => {
+    try {
+      let _projectIssueFilters = { ...this.projectIssueFilters };
+      if (!_projectIssueFilters) _projectIssueFilters = {};
+      if (!_projectIssueFilters[workspaceSlug])
+        _projectIssueFilters[workspaceSlug] = { filters: {}, displayFilters: {}, displayProperties: {} };
+
+      const _filters = {
+        filters: { ..._projectIssueFilters[workspaceSlug].filters },
+        displayFilters: { ..._projectIssueFilters[workspaceSlug].displayFilters },
+      };
+
+      if (type === EFilterType.FILTERS) _filters.filters = { ..._filters.filters, ...filters };
+      else if (type === EFilterType.DISPLAY_FILTERS)
+        _filters.displayFilters = { ..._filters.displayFilters, ...filters };
+
+      // set sub_group_by to null if group_by is set to null
+      if (_filters.displayFilters.group_by === null) _filters.displayFilters.sub_group_by = null;
+
+      // set sub_group_by to null if layout is switched to kanban group_by and sub_group_by are same
+      if (
+        _filters.displayFilters.layout === "kanban" &&
+        _filters.displayFilters.group_by === _filters.displayFilters.sub_group_by
+      )
+        _filters.displayFilters.sub_group_by = null;
+
+      // set group_by to state if layout is switched to kanban and group_by is null
+      if (_filters.displayFilters.layout === "kanban" && _filters.displayFilters.group_by === null)
+        _filters.displayFilters.group_by = "state";
+
+      _projectIssueFilters[workspaceSlug] = {
+        filters: _filters.filters,
+        displayFilters: _filters.displayFilters,
+        displayProperties: _projectIssueFilters[workspaceSlug].displayProperties,
+      };
+
+      runInAction(() => {
+        this.projectIssueFilters = _projectIssueFilters;
+      });
+
+      return _filters;
+    } catch (error) {
+      this.fetchDisplayFilters(workspaceSlug);
+      throw error;
+    }
+  };
+
+  fetchDisplayProperties = async (workspaceSlug: string) => {
+    try {
+      const displayProperties: IIssueDisplayProperties = {
+        assignee: false,
+        start_date: false,
+        due_date: false,
+        labels: false,
+        key: false,
+        priority: false,
+        state: false,
+        sub_issue_count: false,
+        link: false,
+        attachment_count: false,
+        estimate: false,
+        created_on: false,
+        updated_on: false,
+      };
+
+      let _projectIssueFilters = { ...this.projectIssueFilters };
+      if (!_projectIssueFilters) _projectIssueFilters = {};
+      if (!_projectIssueFilters[workspaceSlug])
+        _projectIssueFilters[workspaceSlug] = { filters: {}, displayFilters: {}, displayProperties: {} };
+      _projectIssueFilters[workspaceSlug] = {
+        ..._projectIssueFilters[workspaceSlug],
+        displayProperties: displayProperties,
+      };
+
+      runInAction(() => {
+        this.projectIssueFilters = _projectIssueFilters;
+      });
+
+      return displayProperties;
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  updateDisplayProperties = async (workspaceSlug: string, properties: IIssueDisplayProperties) => {
+    try {
+      let _issueFilters = { ...this.projectIssueFilters };
+      if (!_issueFilters) _issueFilters = {};
+      if (!_issueFilters[workspaceSlug])
+        _issueFilters[workspaceSlug] = { filters: {}, displayFilters: {}, displayProperties: {} };
+
+      const updatedDisplayProperties = { ..._issueFilters[workspaceSlug].displayProperties, ...properties };
+      _issueFilters[workspaceSlug] = { ..._issueFilters[workspaceSlug], displayProperties: updatedDisplayProperties };
+
+      runInAction(() => {
+        this.projectIssueFilters = _issueFilters;
+      });
+
+      return properties;
+    } catch (error) {
+      this.fetchDisplayProperties(workspaceSlug);
+      throw error;
+    }
+  };
+
+  get issueFilters() {
+    const workspaceSlug = this.rootStore.workspace.workspaceSlug;
+    if (!workspaceSlug) return undefined;
+    const displayFilters = this.issueDisplayFilters(workspaceSlug);
+
+    const _filters: IProjectIssuesFilters = {
+      filters: displayFilters?.filters,
+      displayFilters: displayFilters?.displayFilters,
+      displayProperties: displayFilters?.displayProperties,
+    };
+
+    return _filters;
+  }
+
+  get appliedFilters() {
+    const userFilters = this.issueFilters;
+    if (!userFilters) return undefined;
+
+    let filteredRouteParams: any = {
+      priority: userFilters?.filters?.priority || undefined,
+      state_group: userFilters?.filters?.state_group || undefined,
+      state: userFilters?.filters?.state || undefined,
+      assignees: userFilters?.filters?.assignees || undefined,
+      mentions: userFilters?.filters?.mentions || undefined,
+      created_by: userFilters?.filters?.created_by || undefined,
+      labels: userFilters?.filters?.labels || undefined,
+      start_date: userFilters?.filters?.start_date || undefined,
+      target_date: userFilters?.filters?.target_date || undefined,
+      type: userFilters?.displayFilters?.type || undefined,
+      sub_issue: userFilters?.displayFilters?.sub_issue || true,
+      show_empty_groups: userFilters?.displayFilters?.show_empty_groups || true,
+      start_target_date: userFilters?.displayFilters?.start_target_date || true,
+    };
+
+    const filteredParams = handleIssueQueryParamsByLayout(userFilters?.displayFilters?.layout, "profile_issues");
+    if (filteredParams) filteredRouteParams = this.computedFilter(filteredRouteParams, filteredParams);
+
+    if (userFilters?.displayFilters?.layout === "calendar") filteredRouteParams.group_by = "target_date";
+    if (userFilters?.displayFilters?.layout === "gantt_chart") filteredRouteParams.start_target_date = true;
+
+    return filteredRouteParams;
+  }
+
+  fetchFilters = async (workspaceSlug: string) => {
+    try {
+      await this.fetchDisplayFilters(workspaceSlug);
+      await this.fetchDisplayProperties(workspaceSlug);
+      return;
+    } catch (error) {
+      throw Error;
+    }
+  };
+
+  updateFilters = async (
+    workspaceSlug: string,
+
+    filterType: EFilterType,
+    filters: IIssueFilterOptions | IIssueDisplayFilterOptions | IIssueDisplayProperties
+  ) => {
+    try {
+      switch (filterType) {
+        case EFilterType.FILTERS:
+          await this.updateDisplayFilters(workspaceSlug, filterType, filters as IIssueFilterOptions);
+          break;
+        case EFilterType.DISPLAY_FILTERS:
+          await this.updateDisplayFilters(workspaceSlug, filterType, filters as IIssueDisplayFilterOptions);
+          break;
+        case EFilterType.DISPLAY_PROPERTIES:
+          await this.updateDisplayProperties(workspaceSlug, filters as IIssueDisplayProperties);
+          break;
+      }
+
+      return;
+    } catch (error) {
+      throw error;
+    }
+  };
+}
diff --git a/web/store/issues/global/issue.store.ts b/web/store/issues/global/issue.store.ts
new file mode 100644
index 000000000..c5a193dc6
--- /dev/null
+++ b/web/store/issues/global/issue.store.ts
@@ -0,0 +1,327 @@
+import { action, observable, makeObservable, computed, runInAction, autorun } from "mobx";
+// base class
+import { IssueBaseStore } from "store/issues";
+// services
+import { UserService } from "services/user.service";
+// types
+import { IIssueResponse, TLoader, IGroupedIssues, ISubGroupedIssues, TUnGroupedIssues, ViewFlags } from "../types";
+import { RootStore } from "store/root";
+import { IIssue } from "types";
+
+interface IProfileIssueTabTypes {
+  assigned: IIssueResponse;
+  created: IIssueResponse;
+  subscribed: IIssueResponse;
+}
+
+export interface IGlobalIssuesStore {
+  // observable
+  loader: TLoader;
+  issues: { [user_id: string]: IProfileIssueTabTypes } | undefined;
+  currentUserId: string | null;
+  currentUserIssueTab: "assigned" | "created" | "subscribed" | null;
+  // computed
+  getIssues: IIssueResponse | undefined;
+  getIssuesIds: IGroupedIssues | ISubGroupedIssues | TUnGroupedIssues | undefined;
+  // actions
+  fetchIssues: (
+    workspaceSlug: string,
+    userId: string,
+    loadType: TLoader,
+    type: "assigned" | "created" | "subscribed"
+  ) => Promise<IIssueResponse>;
+  createIssue: (workspaceSlug: string, userId: string, data: Partial<IIssue>) => Promise<IIssue | undefined>;
+  updateIssue: (
+    workspaceSlug: string,
+    userId: string,
+    issueId: string,
+    data: Partial<IIssue>
+  ) => Promise<IIssue | undefined>;
+  removeIssue: (
+    workspaceSlug: string,
+    userId: string,
+    projectId: string,
+    issueId: string
+  ) => Promise<IIssue | undefined>;
+  quickAddIssue: (workspaceSlug: string, userId: string, data: IIssue) => Promise<IIssue | undefined>;
+  viewFlags: ViewFlags;
+}
+
+export class GlobalIssuesStore extends IssueBaseStore implements IGlobalIssuesStore {
+  loader: TLoader = "init-loader";
+  issues: { [user_id: string]: IProfileIssueTabTypes } | undefined = undefined;
+  currentUserId: string | null = null;
+  currentUserIssueTab: "assigned" | "created" | "subscribed" | null = null;
+  // root store
+  rootStore;
+  // service
+  userService;
+
+  constructor(_rootStore: RootStore) {
+    super(_rootStore);
+
+    makeObservable(this, {
+      // observable
+      loader: observable.ref,
+      issues: observable.ref,
+      currentUserId: observable.ref,
+      currentUserIssueTab: observable.ref,
+      // computed
+      getIssues: computed,
+      getIssuesIds: computed,
+      viewFlags: computed,
+      // action
+      fetchIssues: action,
+      createIssue: action,
+      updateIssue: action,
+      removeIssue: action,
+      quickAddIssue: action,
+    });
+
+    this.rootStore = _rootStore;
+    this.userService = new UserService();
+
+    autorun(() => {
+      const workspaceSlug = this.rootStore.workspace.workspaceSlug;
+      if (!workspaceSlug || !this.currentUserId || !this.currentUserIssueTab) return;
+
+      const userFilters = this.rootStore?.workspaceProfileIssuesFilter?.issueFilters?.filters;
+      if (userFilters) this.fetchIssues(workspaceSlug, this.currentUserId, "mutation", this.currentUserIssueTab);
+    });
+  }
+
+  get getIssues() {
+    if (!this.currentUserId || !this.currentUserIssueTab || !this.issues || !this.issues[this.currentUserId])
+      return undefined;
+
+    return this.issues[this.currentUserId][this.currentUserIssueTab];
+  }
+
+  get getIssuesIds() {
+    const currentUserId = this.currentUserId;
+    const displayFilters = this.rootStore?.workspaceProfileIssuesFilter?.issueFilters?.displayFilters;
+    if (!displayFilters) return undefined;
+
+    const groupBy = displayFilters?.group_by;
+    const orderBy = displayFilters?.order_by;
+    const layout = displayFilters?.layout;
+
+    if (!currentUserId || !this.currentUserIssueTab || !this.issues || !this.issues[currentUserId]) return undefined;
+
+    let issues: IIssueResponse | IGroupedIssues | ISubGroupedIssues | TUnGroupedIssues | undefined = undefined;
+
+    if (layout === "list" && orderBy) {
+      if (groupBy) issues = this.groupedIssues(groupBy, orderBy, this.issues[currentUserId][this.currentUserIssueTab]);
+      else issues = this.unGroupedIssues(orderBy, this.issues[currentUserId][this.currentUserIssueTab]);
+    }
+
+    return issues;
+  }
+
+  get viewFlags() {
+    if (this.currentUserIssueTab === "subscribed") {
+      return {
+        enableQuickAdd: false,
+        enableIssueCreation: false,
+        enableInlineEditing: false,
+      };
+    }
+
+    return {
+      enableQuickAdd: false,
+      enableIssueCreation: true,
+      enableInlineEditing: true,
+    };
+  }
+
+  fetchIssues = async (
+    workspaceSlug: string,
+    userId: string,
+    loadType: TLoader = "init-loader",
+    type: "assigned" | "created" | "subscribed"
+  ) => {
+    try {
+      this.loader = loadType;
+      this.currentUserId = userId;
+      if (type) this.currentUserIssueTab = type;
+
+      let params: any = this.rootStore?.workspaceProfileIssuesFilter?.appliedFilters;
+      params = {
+        ...params,
+        assignees: undefined,
+        created_by: undefined,
+        subscriber: undefined,
+      };
+      if (this.currentUserIssueTab === "assigned")
+        params = params ? { ...params, assignees: userId } : { assignees: userId };
+      else if (this.currentUserIssueTab === "created")
+        params = params ? { ...params, created_by: userId } : { created_by: userId };
+      else if (this.currentUserIssueTab === "subscribed")
+        params = params ? { ...params, subscriber: userId } : { subscriber: userId };
+
+      const response = await this.userService.getV3UserProfileIssues(workspaceSlug, userId, params);
+
+      if (!this.currentUserIssueTab) return;
+
+      const _issues: any = {
+        ...this.issues,
+        [userId]: {
+          ...this.issues?.[userId],
+          ...{ [this.currentUserIssueTab]: response },
+        },
+      };
+
+      runInAction(() => {
+        this.issues = _issues;
+        this.loader = undefined;
+      });
+
+      return _issues;
+    } catch (error) {
+      this.loader = undefined;
+      throw error;
+    }
+  };
+
+  createIssue = async (workspaceSlug: string, userId: string, data: Partial<IIssue>) => {
+    try {
+      const projectId = data.project;
+      const moduleId = data.module_id;
+      const cycleId = data.cycle_id;
+
+      if (!projectId) return;
+
+      let response = {} as IIssue;
+      response = await this.rootStore.projectIssues.createIssue(workspaceSlug, projectId, data);
+
+      // if (moduleId)
+      //   response = await this.rootStore.moduleIssues.addIssueToModule(workspaceSlug, projectId, moduleId, response);
+
+      // if (cycleId)
+      //   response = await this.rootStore.cycleIssues.addIssueToCycle(workspaceSlug, projectId, cycleId, response);
+
+      let _issues = this.issues;
+      if (!_issues) _issues = {};
+      if (!_issues[userId]) _issues[userId] = { assigned: {}, created: {}, subscribed: {} };
+      _issues[userId] = { ..._issues[userId], ...{ [response.id]: response } };
+
+      runInAction(() => {
+        this.issues = _issues;
+      });
+
+      return response;
+    } catch (error) {
+      if (this.currentUserIssueTab) this.fetchIssues(workspaceSlug, userId, "mutation", this.currentUserIssueTab);
+      throw error;
+    }
+  };
+
+  updateIssue = async (workspaceSlug: string, userId: string, issueId: string, data: Partial<IIssue>) => {
+    try {
+      const projectId = data.project;
+      const moduleId = data.module_id;
+      const cycleId = data.cycle_id;
+
+      if (!projectId || !this.currentUserIssueTab) return;
+
+      let _issues = { ...this.issues };
+      if (!_issues) _issues = {};
+      if (!_issues[userId]) _issues[userId] = { assigned: {}, created: {}, subscribed: {} };
+      _issues[projectId][this.currentUserIssueTab][userId] = {
+        ..._issues[projectId][this.currentUserIssueTab][userId],
+        ...data,
+      };
+
+      runInAction(() => {
+        this.issues = _issues;
+      });
+
+      let response = data as IIssue | undefined;
+      response = await this.rootStore.projectIssues.updateIssue(
+        workspaceSlug,
+        projectId,
+        data.id as keyof IIssue,
+        data
+      );
+
+      if (moduleId)
+        response = await this.rootStore.moduleIssues.updateIssue(
+          workspaceSlug,
+          projectId,
+          response.id as keyof IIssue,
+          response,
+          moduleId
+        );
+
+      if (cycleId)
+        response = await this.rootStore.cycleIssues.updateIssue(
+          workspaceSlug,
+          projectId,
+          data.id as keyof IIssue,
+          data,
+          cycleId
+        );
+
+      return response;
+    } catch (error) {
+      if (this.currentUserIssueTab) this.fetchIssues(workspaceSlug, userId, "mutation", this.currentUserIssueTab);
+      throw error;
+    }
+  };
+
+  removeIssue = async (workspaceSlug: string, userId: string, projectId: string, issueId: string) => {
+    try {
+      let _issues = { ...this.issues };
+      if (!_issues) _issues = {};
+      if (!_issues[userId]) _issues[userId] = { assigned: {}, created: {}, subscribed: {} };
+
+      if (this.currentUserIssueTab) delete _issues?.[userId]?.[this.currentUserIssueTab]?.[issueId];
+
+      runInAction(() => {
+        this.issues = _issues;
+      });
+
+      const response = await this.rootStore.projectIssues.removeIssue(workspaceSlug, projectId, issueId);
+
+      return response;
+    } catch (error) {
+      if (this.currentUserIssueTab) this.fetchIssues(workspaceSlug, userId, "mutation", this.currentUserIssueTab);
+      throw error;
+    }
+  };
+
+  quickAddIssue = async (workspaceSlug: string, userId: string, data: IIssue) => {
+    try {
+      const projectId = data.project;
+
+      let _issues = { ...this.issues };
+      if (!_issues) _issues = {};
+      if (!_issues[userId]) _issues[userId] = { assigned: {}, created: {}, subscribed: {} };
+      _issues[userId] = { ..._issues[userId], ...{ [data.id as keyof IIssue]: data } };
+
+      runInAction(() => {
+        this.issues = _issues;
+      });
+
+      const response = await this.rootStore.projectIssues.createIssue(workspaceSlug, projectId, data);
+
+      if (this.issues && this.currentUserIssueTab) {
+        delete this.issues[userId][this.currentUserIssueTab][data.id as keyof IIssue];
+
+        let _issues = { ...this.issues };
+        if (!_issues) _issues = {};
+        if (!_issues[userId]) _issues[userId] = { assigned: {}, created: {}, subscribed: {} };
+        _issues[userId] = { ..._issues[userId], ...{ [response.id as keyof IIssue]: response } };
+
+        runInAction(() => {
+          this.issues = _issues;
+        });
+      }
+
+      return response;
+    } catch (error) {
+      if (this.currentUserIssueTab) this.fetchIssues(workspaceSlug, userId, "mutation", this.currentUserIssueTab);
+      throw error;
+    }
+  };
+}
diff --git a/web/store/issues/index.ts b/web/store/issues/index.ts
index d1d5ff81e..eeb192030 100644
--- a/web/store/issues/index.ts
+++ b/web/store/issues/index.ts
@@ -34,7 +34,11 @@ export * from "./project-issues/draft/filter.store";
 /** project issues and issue-filters ends */
 
 /** profile issues and issue-filters starts */
+export * from "./profile/issue.store";
+export * from "./profile/filter.store";
 /** profile issues and issue-filters ends */
 
 /** global issues and issue-filters starts */
+export * from "./global/issue.store";
+export * from "./global/filter.store";
 /** global issues and issue-filters ends */
diff --git a/web/store/issues/profile/filter.store.ts b/web/store/issues/profile/filter.store.ts
new file mode 100644
index 000000000..3fb82d9e5
--- /dev/null
+++ b/web/store/issues/profile/filter.store.ts
@@ -0,0 +1,327 @@
+import { action, makeObservable, observable, runInAction } from "mobx";
+// types
+import { RootStore } from "store/root";
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueParams } from "types";
+import { EFilterType } from "store/issues/types";
+import { handleIssueQueryParamsByLayout } from "helpers/issue.helper";
+import { IssueFilterBaseStore } from "../project-issues/base-issue-filter.store";
+
+interface IProjectIssuesFiltersOptions {
+  filters: IIssueFilterOptions;
+  displayFilters: IIssueDisplayFilterOptions;
+}
+
+interface IProjectIssuesDisplayOptions {
+  filters: IIssueFilterOptions;
+  displayFilters: IIssueDisplayFilterOptions;
+  displayProperties: IIssueDisplayProperties;
+}
+
+interface IProjectIssuesFilters {
+  filters: IIssueFilterOptions | undefined;
+  displayFilters: IIssueDisplayFilterOptions | undefined;
+  displayProperties: IIssueDisplayProperties | undefined;
+}
+
+export interface IProfileIssuesFilterStore {
+  // observables
+  projectIssueFilters: { [workspaceId: string]: IProjectIssuesDisplayOptions } | undefined;
+  // computed
+  issueFilters: IProjectIssuesFilters | undefined;
+  appliedFilters: TIssueParams[] | undefined;
+  // helpers
+  issueDisplayFilters: (workspaceId: string) => IProjectIssuesDisplayOptions | undefined;
+  // actions
+  fetchDisplayFilters: (workspaceSlug: string) => Promise<IProjectIssuesFiltersOptions>;
+  updateDisplayFilters: (
+    workspaceSlug: string,
+    type: EFilterType,
+    filters: IIssueFilterOptions | IIssueDisplayFilterOptions
+  ) => Promise<IProjectIssuesFiltersOptions>;
+  fetchDisplayProperties: (workspaceSlug: string) => Promise<IIssueDisplayProperties>;
+  updateDisplayProperties: (
+    workspaceSlug: string,
+    properties: IIssueDisplayProperties
+  ) => Promise<IIssueDisplayProperties>;
+  fetchFilters: (workspaceSlug: string) => Promise<void>;
+  updateFilters: (
+    workspaceSlug: string,
+    filterType: EFilterType,
+    filters: IIssueFilterOptions | IIssueDisplayFilterOptions | IIssueDisplayProperties
+  ) => Promise<void>;
+}
+
+export class ProfileIssuesFilterStore extends IssueFilterBaseStore implements IProfileIssuesFilterStore {
+  // observables
+  projectIssueFilters: { [projectId: string]: IProjectIssuesDisplayOptions } | undefined = undefined;
+  // root store
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    super(_rootStore);
+
+    makeObservable(this, {
+      // observables
+      projectIssueFilters: observable.ref,
+      // computed
+      // actions
+      fetchDisplayFilters: action,
+      updateDisplayFilters: action,
+      fetchDisplayProperties: action,
+      updateDisplayProperties: action,
+    });
+    // root store
+    this.rootStore = _rootStore;
+  }
+
+  // computed
+
+  // helpers
+  issueDisplayFilters = (workspaceId: string) => {
+    if (!workspaceId) return undefined;
+    return this.projectIssueFilters?.[workspaceId] || undefined;
+  };
+
+  // actions
+  fetchDisplayFilters = async (workspaceSlug: string) => {
+    try {
+      const filters: IIssueFilterOptions = {
+        assignees: null,
+        mentions: null,
+        created_by: null,
+        labels: null,
+        priority: null,
+        project: null,
+        start_date: null,
+        state: null,
+        state_group: null,
+        subscriber: null,
+        target_date: null,
+      };
+
+      const displayFilters: IIssueDisplayFilterOptions = {
+        calendar: {
+          show_weekends: false,
+          layout: "month",
+        },
+        group_by: "state_detail.group",
+        sub_group_by: null,
+        layout: "list",
+        order_by: "-created_at",
+        show_empty_groups: false,
+        start_target_date: false,
+        sub_issue: false,
+        type: null,
+      };
+
+      const issueFilters: IProjectIssuesFiltersOptions = {
+        filters: filters,
+        displayFilters: displayFilters,
+      };
+
+      let _projectIssueFilters = this.projectIssueFilters;
+      if (!_projectIssueFilters) _projectIssueFilters = {};
+      if (!_projectIssueFilters[workspaceSlug])
+        _projectIssueFilters[workspaceSlug] = { filters: {}, displayFilters: {}, displayProperties: {} };
+      _projectIssueFilters[workspaceSlug] = {
+        ..._projectIssueFilters[workspaceSlug],
+        ...issueFilters,
+      };
+
+      runInAction(() => {
+        this.projectIssueFilters = _projectIssueFilters;
+      });
+
+      return issueFilters;
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  updateDisplayFilters = async (
+    workspaceSlug: string,
+    type: EFilterType,
+    filters: IIssueFilterOptions | IIssueDisplayFilterOptions
+  ) => {
+    try {
+      let _projectIssueFilters = { ...this.projectIssueFilters };
+      if (!_projectIssueFilters) _projectIssueFilters = {};
+      if (!_projectIssueFilters[workspaceSlug])
+        _projectIssueFilters[workspaceSlug] = { filters: {}, displayFilters: {}, displayProperties: {} };
+
+      const _filters = {
+        filters: { ..._projectIssueFilters[workspaceSlug].filters },
+        displayFilters: { ..._projectIssueFilters[workspaceSlug].displayFilters },
+      };
+
+      if (type === EFilterType.FILTERS) _filters.filters = { ..._filters.filters, ...filters };
+      else if (type === EFilterType.DISPLAY_FILTERS)
+        _filters.displayFilters = { ..._filters.displayFilters, ...filters };
+
+      // set sub_group_by to null if group_by is set to null
+      if (_filters.displayFilters.group_by === null) _filters.displayFilters.sub_group_by = null;
+
+      // set sub_group_by to null if layout is switched to kanban group_by and sub_group_by are same
+      if (
+        _filters.displayFilters.layout === "kanban" &&
+        _filters.displayFilters.group_by === _filters.displayFilters.sub_group_by
+      )
+        _filters.displayFilters.sub_group_by = null;
+
+      // set group_by to state if layout is switched to kanban and group_by is null
+      if (_filters.displayFilters.layout === "kanban" && _filters.displayFilters.group_by === null)
+        _filters.displayFilters.group_by = "state";
+
+      _projectIssueFilters[workspaceSlug] = {
+        filters: _filters.filters,
+        displayFilters: _filters.displayFilters,
+        displayProperties: _projectIssueFilters[workspaceSlug].displayProperties,
+      };
+
+      runInAction(() => {
+        this.projectIssueFilters = _projectIssueFilters;
+      });
+
+      return _filters;
+    } catch (error) {
+      this.fetchDisplayFilters(workspaceSlug);
+      throw error;
+    }
+  };
+
+  fetchDisplayProperties = async (workspaceSlug: string) => {
+    try {
+      const displayProperties: IIssueDisplayProperties = {
+        assignee: false,
+        start_date: false,
+        due_date: false,
+        labels: false,
+        key: false,
+        priority: false,
+        state: false,
+        sub_issue_count: false,
+        link: false,
+        attachment_count: false,
+        estimate: false,
+        created_on: false,
+        updated_on: false,
+      };
+
+      let _projectIssueFilters = { ...this.projectIssueFilters };
+      if (!_projectIssueFilters) _projectIssueFilters = {};
+      if (!_projectIssueFilters[workspaceSlug])
+        _projectIssueFilters[workspaceSlug] = { filters: {}, displayFilters: {}, displayProperties: {} };
+      _projectIssueFilters[workspaceSlug] = {
+        ..._projectIssueFilters[workspaceSlug],
+        displayProperties: displayProperties,
+      };
+
+      runInAction(() => {
+        this.projectIssueFilters = _projectIssueFilters;
+      });
+
+      return displayProperties;
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  updateDisplayProperties = async (workspaceSlug: string, properties: IIssueDisplayProperties) => {
+    try {
+      let _issueFilters = { ...this.projectIssueFilters };
+      if (!_issueFilters) _issueFilters = {};
+      if (!_issueFilters[workspaceSlug])
+        _issueFilters[workspaceSlug] = { filters: {}, displayFilters: {}, displayProperties: {} };
+
+      const updatedDisplayProperties = { ..._issueFilters[workspaceSlug].displayProperties, ...properties };
+      _issueFilters[workspaceSlug] = { ..._issueFilters[workspaceSlug], displayProperties: updatedDisplayProperties };
+
+      runInAction(() => {
+        this.projectIssueFilters = _issueFilters;
+      });
+
+      return properties;
+    } catch (error) {
+      this.fetchDisplayProperties(workspaceSlug);
+      throw error;
+    }
+  };
+
+  get issueFilters() {
+    const workspaceSlug = this.rootStore.workspace.workspaceSlug;
+    if (!workspaceSlug) return undefined;
+    const displayFilters = this.issueDisplayFilters(workspaceSlug);
+
+    const _filters: IProjectIssuesFilters = {
+      filters: displayFilters?.filters,
+      displayFilters: displayFilters?.displayFilters,
+      displayProperties: displayFilters?.displayProperties,
+    };
+
+    return _filters;
+  }
+
+  get appliedFilters() {
+    const userFilters = this.issueFilters;
+    if (!userFilters) return undefined;
+
+    let filteredRouteParams: any = {
+      priority: userFilters?.filters?.priority || undefined,
+      state_group: userFilters?.filters?.state_group || undefined,
+      state: userFilters?.filters?.state || undefined,
+      assignees: userFilters?.filters?.assignees || undefined,
+      mentions: userFilters?.filters?.mentions || undefined,
+      created_by: userFilters?.filters?.created_by || undefined,
+      labels: userFilters?.filters?.labels || undefined,
+      start_date: userFilters?.filters?.start_date || undefined,
+      target_date: userFilters?.filters?.target_date || undefined,
+      type: userFilters?.displayFilters?.type || undefined,
+      sub_issue: userFilters?.displayFilters?.sub_issue || true,
+      show_empty_groups: userFilters?.displayFilters?.show_empty_groups || true,
+      start_target_date: userFilters?.displayFilters?.start_target_date || true,
+    };
+
+    const filteredParams = handleIssueQueryParamsByLayout(userFilters?.displayFilters?.layout, "profile_issues");
+    if (filteredParams) filteredRouteParams = this.computedFilter(filteredRouteParams, filteredParams);
+
+    if (userFilters?.displayFilters?.layout === "calendar") filteredRouteParams.group_by = "target_date";
+    if (userFilters?.displayFilters?.layout === "gantt_chart") filteredRouteParams.start_target_date = true;
+
+    return filteredRouteParams;
+  }
+
+  fetchFilters = async (workspaceSlug: string) => {
+    try {
+      await this.fetchDisplayFilters(workspaceSlug);
+      await this.fetchDisplayProperties(workspaceSlug);
+      return;
+    } catch (error) {
+      throw Error;
+    }
+  };
+
+  updateFilters = async (
+    workspaceSlug: string,
+
+    filterType: EFilterType,
+    filters: IIssueFilterOptions | IIssueDisplayFilterOptions | IIssueDisplayProperties
+  ) => {
+    try {
+      switch (filterType) {
+        case EFilterType.FILTERS:
+          await this.updateDisplayFilters(workspaceSlug, filterType, filters as IIssueFilterOptions);
+          break;
+        case EFilterType.DISPLAY_FILTERS:
+          await this.updateDisplayFilters(workspaceSlug, filterType, filters as IIssueDisplayFilterOptions);
+          break;
+        case EFilterType.DISPLAY_PROPERTIES:
+          await this.updateDisplayProperties(workspaceSlug, filters as IIssueDisplayProperties);
+          break;
+      }
+
+      return;
+    } catch (error) {
+      throw error;
+    }
+  };
+}
diff --git a/web/store/issues/profile/issue.store.ts b/web/store/issues/profile/issue.store.ts
new file mode 100644
index 000000000..71a2938cd
--- /dev/null
+++ b/web/store/issues/profile/issue.store.ts
@@ -0,0 +1,327 @@
+import { action, observable, makeObservable, computed, runInAction, autorun } from "mobx";
+// base class
+import { IssueBaseStore } from "store/issues";
+// services
+import { UserService } from "services/user.service";
+// types
+import { IIssueResponse, TLoader, IGroupedIssues, ISubGroupedIssues, TUnGroupedIssues, ViewFlags } from "../types";
+import { RootStore } from "store/root";
+import { IIssue } from "types";
+
+interface IProfileIssueTabTypes {
+  assigned: IIssueResponse;
+  created: IIssueResponse;
+  subscribed: IIssueResponse;
+}
+
+export interface IProfileIssuesStore {
+  // observable
+  loader: TLoader;
+  issues: { [user_id: string]: IProfileIssueTabTypes } | undefined;
+  currentUserId: string | null;
+  currentUserIssueTab: "assigned" | "created" | "subscribed" | null;
+  // computed
+  getIssues: IIssueResponse | undefined;
+  getIssuesIds: IGroupedIssues | ISubGroupedIssues | TUnGroupedIssues | undefined;
+  // actions
+  fetchIssues: (
+    workspaceSlug: string,
+    userId: string,
+    loadType: TLoader,
+    type?: "assigned" | "created" | "subscribed"
+  ) => Promise<IIssueResponse>;
+  createIssue: (workspaceSlug: string, userId: string, data: Partial<IIssue>) => Promise<IIssue | undefined>;
+  updateIssue: (
+    workspaceSlug: string,
+    userId: string,
+    issueId: string,
+    data: Partial<IIssue>
+  ) => Promise<IIssue | undefined>;
+  removeIssue: (
+    workspaceSlug: string,
+    userId: string,
+    projectId: string,
+    issueId: string
+  ) => Promise<IIssue | undefined>;
+  quickAddIssue: (workspaceSlug: string, userId: string, data: IIssue) => Promise<IIssue | undefined>;
+  viewFlags: ViewFlags;
+}
+
+export class ProfileIssuesStore extends IssueBaseStore implements IProfileIssuesStore {
+  loader: TLoader = "init-loader";
+  issues: { [user_id: string]: IProfileIssueTabTypes } | undefined = undefined;
+  currentUserId: string | null = null;
+  currentUserIssueTab: "assigned" | "created" | "subscribed" | null = null;
+  // root store
+  rootStore;
+  // service
+  userService;
+
+  constructor(_rootStore: RootStore) {
+    super(_rootStore);
+
+    makeObservable(this, {
+      // observable
+      loader: observable.ref,
+      issues: observable.ref,
+      currentUserId: observable.ref,
+      currentUserIssueTab: observable.ref,
+      // computed
+      getIssues: computed,
+      getIssuesIds: computed,
+      viewFlags: computed,
+      // action
+      fetchIssues: action,
+      createIssue: action,
+      updateIssue: action,
+      removeIssue: action,
+      quickAddIssue: action,
+    });
+
+    this.rootStore = _rootStore;
+    this.userService = new UserService();
+
+    autorun(() => {
+      const workspaceSlug = this.rootStore.workspace.workspaceSlug;
+      if (!workspaceSlug || !this.currentUserId || !this.currentUserIssueTab) return;
+
+      const userFilters = this.rootStore?.workspaceProfileIssuesFilter?.issueFilters?.filters;
+      if (userFilters) this.fetchIssues(workspaceSlug, this.currentUserId, "mutation", this.currentUserIssueTab);
+    });
+  }
+
+  get getIssues() {
+    if (!this.currentUserId || !this.currentUserIssueTab || !this.issues || !this.issues[this.currentUserId])
+      return undefined;
+
+    return this.issues[this.currentUserId][this.currentUserIssueTab];
+  }
+
+  get getIssuesIds() {
+    const currentUserId = this.currentUserId;
+    const displayFilters = this.rootStore?.workspaceProfileIssuesFilter?.issueFilters?.displayFilters;
+    if (!displayFilters) return undefined;
+
+    const groupBy = displayFilters?.group_by;
+    const orderBy = displayFilters?.order_by;
+    const layout = displayFilters?.layout;
+
+    if (!currentUserId || !this.currentUserIssueTab || !this.issues || !this.issues[currentUserId]) return undefined;
+
+    let issues: IIssueResponse | IGroupedIssues | ISubGroupedIssues | TUnGroupedIssues | undefined = undefined;
+
+    if (layout === "list" && orderBy) {
+      if (groupBy) issues = this.groupedIssues(groupBy, orderBy, this.issues[currentUserId][this.currentUserIssueTab]);
+      else issues = this.unGroupedIssues(orderBy, this.issues[currentUserId][this.currentUserIssueTab]);
+    }
+
+    return issues;
+  }
+
+  get viewFlags() {
+    if (this.currentUserIssueTab === "subscribed") {
+      return {
+        enableQuickAdd: false,
+        enableIssueCreation: false,
+        enableInlineEditing: false,
+      };
+    }
+
+    return {
+      enableQuickAdd: false,
+      enableIssueCreation: true,
+      enableInlineEditing: true,
+    };
+  }
+
+  fetchIssues = async (
+    workspaceSlug: string,
+    userId: string,
+    loadType: TLoader = "init-loader",
+    type?: "assigned" | "created" | "subscribed"
+  ) => {
+    try {
+      this.loader = loadType;
+      this.currentUserId = userId;
+      if (type) this.currentUserIssueTab = type;
+
+      let params: any = this.rootStore?.workspaceProfileIssuesFilter?.appliedFilters;
+      params = {
+        ...params,
+        assignees: undefined,
+        created_by: undefined,
+        subscriber: undefined,
+      };
+      if (this.currentUserIssueTab === "assigned")
+        params = params ? { ...params, assignees: userId } : { assignees: userId };
+      else if (this.currentUserIssueTab === "created")
+        params = params ? { ...params, created_by: userId } : { created_by: userId };
+      else if (this.currentUserIssueTab === "subscribed")
+        params = params ? { ...params, subscriber: userId } : { subscriber: userId };
+
+      const response = await this.userService.getV3UserProfileIssues(workspaceSlug, userId, params);
+
+      if (!this.currentUserIssueTab) return;
+
+      const _issues: any = {
+        ...this.issues,
+        [userId]: {
+          ...this.issues?.[userId],
+          ...{ [this.currentUserIssueTab]: response },
+        },
+      };
+
+      runInAction(() => {
+        this.issues = _issues;
+        this.loader = undefined;
+      });
+
+      return _issues;
+    } catch (error) {
+      this.loader = undefined;
+      throw error;
+    }
+  };
+
+  createIssue = async (workspaceSlug: string, userId: string, data: Partial<IIssue>) => {
+    try {
+      const projectId = data.project;
+      const moduleId = data.module_id;
+      const cycleId = data.cycle_id;
+
+      if (!projectId) return;
+
+      let response = {} as IIssue;
+      response = await this.rootStore.projectIssues.createIssue(workspaceSlug, projectId, data);
+
+      // if (moduleId)
+      //   response = await this.rootStore.moduleIssues.addIssueToModule(workspaceSlug, projectId, moduleId, response);
+
+      // if (cycleId)
+      //   response = await this.rootStore.cycleIssues.addIssueToCycle(workspaceSlug, projectId, cycleId, response);
+
+      let _issues = this.issues;
+      if (!_issues) _issues = {};
+      if (!_issues[userId]) _issues[userId] = { assigned: {}, created: {}, subscribed: {} };
+      _issues[userId] = { ..._issues[userId], ...{ [response.id]: response } };
+
+      runInAction(() => {
+        this.issues = _issues;
+      });
+
+      return response;
+    } catch (error) {
+      if (this.currentUserIssueTab) this.fetchIssues(workspaceSlug, userId, "mutation", this.currentUserIssueTab);
+      throw error;
+    }
+  };
+
+  updateIssue = async (workspaceSlug: string, userId: string, issueId: string, data: Partial<IIssue>) => {
+    try {
+      const projectId = data.project;
+      const moduleId = data.module_id;
+      const cycleId = data.cycle_id;
+
+      if (!projectId || !this.currentUserIssueTab) return;
+
+      let _issues = { ...this.issues };
+      if (!_issues) _issues = {};
+      if (!_issues[userId]) _issues[userId] = { assigned: {}, created: {}, subscribed: {} };
+      _issues[projectId][this.currentUserIssueTab][userId] = {
+        ..._issues[projectId][this.currentUserIssueTab][userId],
+        ...data,
+      };
+
+      runInAction(() => {
+        this.issues = _issues;
+      });
+
+      let response = data as IIssue | undefined;
+      response = await this.rootStore.projectIssues.updateIssue(
+        workspaceSlug,
+        projectId,
+        data.id as keyof IIssue,
+        data
+      );
+
+      if (moduleId)
+        response = await this.rootStore.moduleIssues.updateIssue(
+          workspaceSlug,
+          projectId,
+          response.id as keyof IIssue,
+          response,
+          moduleId
+        );
+
+      if (cycleId)
+        response = await this.rootStore.cycleIssues.updateIssue(
+          workspaceSlug,
+          projectId,
+          data.id as keyof IIssue,
+          data,
+          cycleId
+        );
+
+      return response;
+    } catch (error) {
+      if (this.currentUserIssueTab) this.fetchIssues(workspaceSlug, userId, "mutation", this.currentUserIssueTab);
+      throw error;
+    }
+  };
+
+  removeIssue = async (workspaceSlug: string, userId: string, projectId: string, issueId: string) => {
+    try {
+      let _issues = { ...this.issues };
+      if (!_issues) _issues = {};
+      if (!_issues[userId]) _issues[userId] = { assigned: {}, created: {}, subscribed: {} };
+
+      if (this.currentUserIssueTab) delete _issues?.[userId]?.[this.currentUserIssueTab]?.[issueId];
+
+      runInAction(() => {
+        this.issues = _issues;
+      });
+
+      const response = await this.rootStore.projectIssues.removeIssue(workspaceSlug, projectId, issueId);
+
+      return response;
+    } catch (error) {
+      if (this.currentUserIssueTab) this.fetchIssues(workspaceSlug, userId, "mutation", this.currentUserIssueTab);
+      throw error;
+    }
+  };
+
+  quickAddIssue = async (workspaceSlug: string, userId: string, data: IIssue) => {
+    try {
+      const projectId = data.project;
+
+      let _issues = { ...this.issues };
+      if (!_issues) _issues = {};
+      if (!_issues[userId]) _issues[userId] = { assigned: {}, created: {}, subscribed: {} };
+      _issues[userId] = { ..._issues[userId], ...{ [data.id as keyof IIssue]: data } };
+
+      runInAction(() => {
+        this.issues = _issues;
+      });
+
+      const response = await this.rootStore.projectIssues.createIssue(workspaceSlug, projectId, data);
+
+      if (this.issues && this.currentUserIssueTab) {
+        delete this.issues[userId][this.currentUserIssueTab][data.id as keyof IIssue];
+
+        let _issues = { ...this.issues };
+        if (!_issues) _issues = {};
+        if (!_issues[userId]) _issues[userId] = { assigned: {}, created: {}, subscribed: {} };
+        _issues[userId] = { ..._issues[userId], ...{ [response.id as keyof IIssue]: response } };
+
+        runInAction(() => {
+          this.issues = _issues;
+        });
+      }
+
+      return response;
+    } catch (error) {
+      if (this.currentUserIssueTab) this.fetchIssues(workspaceSlug, userId, "mutation", this.currentUserIssueTab);
+      throw error;
+    }
+  };
+}
diff --git a/web/store/issues/project-issues/archived/issue.store.ts b/web/store/issues/project-issues/archived/issue.store.ts
index 837a1e74d..a2fa7bd37 100644
--- a/web/store/issues/project-issues/archived/issue.store.ts
+++ b/web/store/issues/project-issues/archived/issue.store.ts
@@ -4,7 +4,7 @@ import { IssueBaseStore } from "store/issues";
 // services
 import { IssueArchiveService } from "services/issue";
 // types
-import { IIssueResponse, TLoader, IGroupedIssues, ISubGroupedIssues, TUnGroupedIssues } from "../../types";
+import { IIssueResponse, TLoader, IGroupedIssues, ISubGroupedIssues, TUnGroupedIssues, ViewFlags } from "../../types";
 import { RootStore } from "store/root";
 
 export interface IProjectArchivedIssuesStore {
@@ -18,6 +18,9 @@ export interface IProjectArchivedIssuesStore {
   fetchIssues: (workspaceSlug: string, projectId: string, loadType: TLoader) => Promise<IIssueResponse>;
   removeIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
   removeIssueFromArchived: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
+
+  quickAddIssue: undefined;
+  viewFlags: ViewFlags;
 }
 
 export class ProjectArchivedIssuesStore extends IssueBaseStore implements IProjectArchivedIssuesStore {
@@ -28,6 +31,13 @@ export class ProjectArchivedIssuesStore extends IssueBaseStore implements IProje
   // service
   archivedIssueService;
 
+  //viewData
+  viewFlags = {
+    enableQuickAdd: false,
+    enableIssueCreation: false,
+    enableInlineEditing: true,
+  };
+
   constructor(_rootStore: RootStore) {
     super(_rootStore);
 
@@ -101,7 +111,7 @@ export class ProjectArchivedIssuesStore extends IssueBaseStore implements IProje
 
       return response;
     } catch (error) {
-      // this.fetchIssues(workspaceSlug, projectId);
+      console.error(error);
       this.loader = undefined;
       throw error;
     }
@@ -124,4 +134,6 @@ export class ProjectArchivedIssuesStore extends IssueBaseStore implements IProje
       throw error;
     }
   };
+
+  quickAddIssue: undefined;
 }
diff --git a/web/store/issues/project-issues/base-issue.store.ts b/web/store/issues/project-issues/base-issue.store.ts
index 4f5901a91..d10dba31e 100644
--- a/web/store/issues/project-issues/base-issue.store.ts
+++ b/web/store/issues/project-issues/base-issue.store.ts
@@ -87,9 +87,8 @@ export class IssueBaseStore implements IIssueBaseStore {
 
       for (const subGroup of subGroupArray) {
         for (const group of groupArray) {
-          if (subGroup && group && issues[subGroup]) {
-            _issues[subGroup][group].push(_issue.id);
-          }
+          if (subGroup && group && _issues[subGroup][group]) _issues[subGroup][group].push(_issue.id);
+          else if (subGroup && group) _issues[subGroup][group] = [_issue.id];
         }
       }
     }
diff --git a/web/store/issues/project-issues/cycle/issue.store.ts b/web/store/issues/project-issues/cycle/issue.store.ts
index 1c36a1e9b..45c7afdc5 100644
--- a/web/store/issues/project-issues/cycle/issue.store.ts
+++ b/web/store/issues/project-issues/cycle/issue.store.ts
@@ -7,7 +7,7 @@ import { CycleService } from "services/cycle.service";
 // types
 import { TIssueGroupByOptions } from "types";
 import { IIssue } from "types/issues";
-import { IIssueResponse, TLoader, IGroupedIssues, ISubGroupedIssues, TUnGroupedIssues } from "../../types";
+import { IIssueResponse, TLoader, IGroupedIssues, ISubGroupedIssues, TUnGroupedIssues, ViewFlags } from "../../types";
 import { RootStore } from "store/root";
 
 export interface ICycleIssuesStore {
@@ -49,6 +49,7 @@ export interface ICycleIssuesStore {
     data: IIssue,
     cycleId?: string | undefined
   ) => Promise<IIssue | undefined>;
+  addIssueToCycle: (workspaceSlug: string, projectId: string, cycleId: string, data: IIssue) => Promise<IIssue>;
   removeIssueFromCycle: (
     workspaceSlug: string,
     projectId: string,
@@ -56,6 +57,8 @@ export interface ICycleIssuesStore {
     issueId: string,
     issueBridgeId: string
   ) => Promise<IIssue>;
+
+  viewFlags: ViewFlags;
 }
 
 export class CycleIssuesStore extends IssueBaseStore implements ICycleIssuesStore {
@@ -67,6 +70,13 @@ export class CycleIssuesStore extends IssueBaseStore implements ICycleIssuesStor
   cycleService;
   issueService;
 
+  //viewData
+  viewFlags = {
+    enableQuickAdd: true,
+    enableIssueCreation: true,
+    enableInlineEditing: true,
+  };
+
   constructor(_rootStore: RootStore) {
     super(_rootStore);
 
@@ -83,6 +93,7 @@ export class CycleIssuesStore extends IssueBaseStore implements ICycleIssuesStor
       updateIssue: action,
       removeIssue: action,
       quickAddIssue: action,
+      addIssueToCycle: action,
       removeIssueFromCycle: action,
     });
 
@@ -158,7 +169,7 @@ export class CycleIssuesStore extends IssueBaseStore implements ICycleIssuesStor
 
       return response;
     } catch (error) {
-      this.fetchIssues(workspaceSlug, projectId, "mutation", cycleId);
+      console.error(error);
       this.loader = undefined;
       throw error;
     }
@@ -174,18 +185,7 @@ export class CycleIssuesStore extends IssueBaseStore implements ICycleIssuesStor
 
     try {
       const response = await this.rootStore.projectIssues.createIssue(workspaceSlug, projectId, data);
-      const issueToCycle = await this.issueService.addIssueToCycle(workspaceSlug, projectId, cycleId, {
-        issues: [response.id],
-      });
-
-      let _issues = this.issues;
-      if (!_issues) _issues = {};
-      if (!_issues[cycleId]) _issues[cycleId] = {};
-      _issues[cycleId] = { ..._issues[cycleId], ...{ [response.id]: response } };
-
-      runInAction(() => {
-        this.issues = _issues;
-      });
+      const issueToCycle = await this.addIssueToCycle(workspaceSlug, projectId, cycleId, response);
 
       return issueToCycle;
     } catch (error) {
@@ -287,6 +287,28 @@ export class CycleIssuesStore extends IssueBaseStore implements ICycleIssuesStor
     }
   };
 
+  addIssueToCycle = async (workspaceSlug: string, projectId: string, cycleId: string, data: IIssue) => {
+    try {
+      const issueToCycle = await this.issueService.addIssueToCycle(workspaceSlug, projectId, cycleId, {
+        issues: [data.id],
+      });
+
+      let _issues = this.issues;
+      if (!_issues) _issues = {};
+      if (!_issues[cycleId]) _issues[cycleId] = {};
+      _issues[cycleId] = { ..._issues[cycleId], ...{ [data.id]: data } };
+
+      runInAction(() => {
+        this.issues = _issues;
+      });
+
+      return issueToCycle;
+    } catch (error) {
+      this.fetchIssues(workspaceSlug, projectId, "mutation", cycleId);
+      throw error;
+    }
+  };
+
   removeIssueFromCycle = async (
     workspaceSlug: string,
     projectId: string,
diff --git a/web/store/issues/project-issues/draft/issue.store.ts b/web/store/issues/project-issues/draft/issue.store.ts
index 1687c8d4e..f3565c9e9 100644
--- a/web/store/issues/project-issues/draft/issue.store.ts
+++ b/web/store/issues/project-issues/draft/issue.store.ts
@@ -2,10 +2,10 @@ import { action, observable, makeObservable, computed, runInAction, autorun } fr
 // base class
 import { IssueBaseStore } from "store/issues";
 // services
-import { IssueService } from "services/issue/issue.service";
+import { IssueDraftService } from "services/issue/issue_draft.service";
 // types
 import { IIssue } from "types/issues";
-import { IIssueResponse, TLoader, IGroupedIssues, ISubGroupedIssues, TUnGroupedIssues } from "../../types";
+import { IIssueResponse, TLoader, IGroupedIssues, ISubGroupedIssues, TUnGroupedIssues, ViewFlags } from "../../types";
 import { RootStore } from "store/root";
 
 export interface IProjectDraftIssuesStore {
@@ -20,6 +20,9 @@ export interface IProjectDraftIssuesStore {
   createIssue: (workspaceSlug: string, projectId: string, data: Partial<IIssue>) => Promise<IIssue>;
   updateIssue: (workspaceSlug: string, projectId: string, issueId: string, data: Partial<IIssue>) => Promise<IIssue>;
   removeIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<IIssue>;
+
+  quickAddIssue: undefined;
+  viewFlags: ViewFlags;
 }
 
 export class ProjectDraftIssuesStore extends IssueBaseStore implements IProjectDraftIssuesStore {
@@ -28,7 +31,14 @@ export class ProjectDraftIssuesStore extends IssueBaseStore implements IProjectD
   // root store
   rootStore;
   // service
-  issueService;
+  issueDraftService;
+
+  //viewData
+  viewFlags = {
+    enableQuickAdd: false,
+    enableIssueCreation: false,
+    enableInlineEditing: false,
+  };
 
   constructor(_rootStore: RootStore) {
     super(_rootStore);
@@ -48,7 +58,7 @@ export class ProjectDraftIssuesStore extends IssueBaseStore implements IProjectD
     });
 
     this.rootStore = _rootStore;
-    this.issueService = new IssueService();
+    this.issueDraftService = new IssueDraftService();
 
     autorun(() => {
       const workspaceSlug = this.rootStore.workspace.workspaceSlug;
@@ -97,7 +107,7 @@ export class ProjectDraftIssuesStore extends IssueBaseStore implements IProjectD
       this.loader = loadType;
 
       const params = this.rootStore?.projectDraftIssuesFilter?.appliedFilters;
-      const response = await this.issueService.getV3Issues(workspaceSlug, projectId, params);
+      const response = await this.issueDraftService.getV3DraftIssues(workspaceSlug, projectId, params);
 
       const _issues = { ...this.issues, [projectId]: { ...response } };
 
@@ -108,7 +118,7 @@ export class ProjectDraftIssuesStore extends IssueBaseStore implements IProjectD
 
       return response;
     } catch (error) {
-      this.fetchIssues(workspaceSlug, projectId);
+      console.error(error);
       this.loader = undefined;
       throw error;
     }
@@ -116,7 +126,7 @@ export class ProjectDraftIssuesStore extends IssueBaseStore implements IProjectD
 
   createIssue = async (workspaceSlug: string, projectId: string, data: Partial<IIssue>) => {
     try {
-      const response = await this.issueService.createIssue(workspaceSlug, projectId, data);
+      const response = await this.issueDraftService.createDraftIssue(workspaceSlug, projectId, data);
 
       let _issues = this.issues;
       if (!_issues) _issues = {};
@@ -145,7 +155,7 @@ export class ProjectDraftIssuesStore extends IssueBaseStore implements IProjectD
         this.issues = _issues;
       });
 
-      const response = await this.issueService.patchIssue(workspaceSlug, projectId, issueId, data);
+      const response = await this.issueDraftService.updateDraftIssue(workspaceSlug, projectId, issueId, data);
 
       return response;
     } catch (error) {
@@ -165,7 +175,7 @@ export class ProjectDraftIssuesStore extends IssueBaseStore implements IProjectD
         this.issues = _issues;
       });
 
-      const response = await this.issueService.deleteIssue(workspaceSlug, projectId, issueId);
+      const response = await this.issueDraftService.deleteDraftIssue(workspaceSlug, projectId, issueId);
 
       return response;
     } catch (error) {
@@ -173,4 +183,6 @@ export class ProjectDraftIssuesStore extends IssueBaseStore implements IProjectD
       throw error;
     }
   };
+
+  quickAddIssue: undefined;
 }
diff --git a/web/store/issues/project-issues/module/issue.store.ts b/web/store/issues/project-issues/module/issue.store.ts
index 966a41443..9d1bc3c93 100644
--- a/web/store/issues/project-issues/module/issue.store.ts
+++ b/web/store/issues/project-issues/module/issue.store.ts
@@ -7,7 +7,7 @@ import { ModuleService } from "services/module.service";
 // types
 import { TIssueGroupByOptions } from "types";
 import { IIssue } from "types/issues";
-import { IIssueResponse, TLoader, IGroupedIssues, ISubGroupedIssues, TUnGroupedIssues } from "../../types";
+import { IIssueResponse, TLoader, IGroupedIssues, ISubGroupedIssues, TUnGroupedIssues, ViewFlags } from "../../types";
 import { RootStore } from "store/root";
 
 export interface IModuleIssuesStore {
@@ -49,6 +49,7 @@ export interface IModuleIssuesStore {
     data: IIssue,
     moduleId?: string | undefined
   ) => Promise<IIssue | undefined>;
+  addIssueToModule: (workspaceSlug: string, projectId: string, moduleId: string, data: IIssue) => Promise<IIssue>;
   removeIssueFromModule: (
     workspaceSlug: string,
     projectId: string,
@@ -56,6 +57,8 @@ export interface IModuleIssuesStore {
     issueId: string,
     issueBridgeId: string
   ) => Promise<IIssue>;
+
+  viewFlags: ViewFlags;
 }
 
 export class ModuleIssuesStore extends IssueBaseStore implements IModuleIssuesStore {
@@ -67,6 +70,13 @@ export class ModuleIssuesStore extends IssueBaseStore implements IModuleIssuesSt
   moduleService;
   issueService;
 
+  //viewData
+  viewFlags = {
+    enableQuickAdd: true,
+    enableIssueCreation: true,
+    enableInlineEditing: true,
+  };
+
   constructor(_rootStore: RootStore) {
     super(_rootStore);
 
@@ -83,6 +93,7 @@ export class ModuleIssuesStore extends IssueBaseStore implements IModuleIssuesSt
       updateIssue: action,
       removeIssue: action,
       quickAddIssue: action,
+      addIssueToModule: action,
       removeIssueFromModule: action,
     });
 
@@ -158,7 +169,7 @@ export class ModuleIssuesStore extends IssueBaseStore implements IModuleIssuesSt
 
       return response;
     } catch (error) {
-      this.fetchIssues(workspaceSlug, projectId, "mutation", moduleId);
+      console.error(error);
       this.loader = undefined;
       throw error;
     }
@@ -174,18 +185,7 @@ export class ModuleIssuesStore extends IssueBaseStore implements IModuleIssuesSt
 
     try {
       const response = await this.rootStore.projectIssues.createIssue(workspaceSlug, projectId, data);
-      const issueToModule = await this.moduleService.addIssuesToModule(workspaceSlug, projectId, moduleId, {
-        issues: [response.id],
-      });
-
-      let _issues = this.issues;
-      if (!_issues) _issues = {};
-      if (!_issues[moduleId]) _issues[moduleId] = {};
-      _issues[moduleId] = { ..._issues[moduleId], ...{ [response.id]: response } };
-
-      runInAction(() => {
-        this.issues = _issues;
-      });
+      const issueToModule = await this.addIssueToModule(workspaceSlug, projectId, moduleId, response);
 
       return issueToModule;
     } catch (error) {
@@ -289,6 +289,28 @@ export class ModuleIssuesStore extends IssueBaseStore implements IModuleIssuesSt
     }
   };
 
+  addIssueToModule = async (workspaceSlug: string, projectId: string, moduleId: string, data: IIssue) => {
+    try {
+      const issueToModule = await this.moduleService.addIssuesToModule(workspaceSlug, projectId, moduleId, {
+        issues: [data.id],
+      });
+
+      let _issues = this.issues;
+      if (!_issues) _issues = {};
+      if (!_issues[moduleId]) _issues[moduleId] = {};
+      _issues[moduleId] = { ..._issues[moduleId], ...{ [data.id]: data } };
+
+      runInAction(() => {
+        this.issues = _issues;
+      });
+
+      return issueToModule;
+    } catch (error) {
+      this.fetchIssues(workspaceSlug, projectId, "mutation", moduleId);
+      throw error;
+    }
+  };
+
   removeIssueFromModule = async (
     workspaceSlug: string,
     projectId: string,
diff --git a/web/store/issues/project-issues/project-view/issue.store.ts b/web/store/issues/project-issues/project-view/issue.store.ts
index 17d7be030..a1dfb6d0b 100644
--- a/web/store/issues/project-issues/project-view/issue.store.ts
+++ b/web/store/issues/project-issues/project-view/issue.store.ts
@@ -6,7 +6,7 @@ import { IssueService } from "services/issue/issue.service";
 // types
 import { TIssueGroupByOptions } from "types";
 import { IIssue } from "types/issues";
-import { IIssueResponse, TLoader, IGroupedIssues, ISubGroupedIssues, TUnGroupedIssues } from "../../types";
+import { IIssueResponse, TLoader, IGroupedIssues, ISubGroupedIssues, TUnGroupedIssues, ViewFlags } from "../../types";
 import { RootStore } from "store/root";
 
 export interface IViewIssuesStore {
@@ -22,6 +22,8 @@ export interface IViewIssuesStore {
   updateIssue: (workspaceSlug: string, projectId: string, issueId: string, data: Partial<IIssue>) => Promise<IIssue>;
   removeIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<IIssue>;
   quickAddIssue: (workspaceSlug: string, projectId: string, data: IIssue) => Promise<IIssue>;
+
+  viewFlags: ViewFlags;
 }
 
 export class ViewIssuesStore extends IssueBaseStore implements IViewIssuesStore {
@@ -32,6 +34,13 @@ export class ViewIssuesStore extends IssueBaseStore implements IViewIssuesStore
   // service
   issueService;
 
+  //viewData
+  viewFlags = {
+    enableQuickAdd: true,
+    enableIssueCreation: true,
+    enableInlineEditing: true,
+  };
+
   constructor(_rootStore: RootStore) {
     super(_rootStore);
 
@@ -114,7 +123,7 @@ export class ViewIssuesStore extends IssueBaseStore implements IViewIssuesStore
 
       return response;
     } catch (error) {
-      this.fetchIssues(workspaceSlug, projectId);
+      console.error(error);
       this.loader = undefined;
       throw error;
     }
diff --git a/web/store/issues/project-issues/project/issue.store.ts b/web/store/issues/project-issues/project/issue.store.ts
index 684df6ed3..127c6e328 100644
--- a/web/store/issues/project-issues/project/issue.store.ts
+++ b/web/store/issues/project-issues/project/issue.store.ts
@@ -6,7 +6,7 @@ import { IssueService } from "services/issue/issue.service";
 // types
 import { TIssueGroupByOptions } from "types";
 import { IIssue } from "types/issues";
-import { IIssueResponse, TLoader, IGroupedIssues, ISubGroupedIssues, TUnGroupedIssues } from "../../types";
+import { IIssueResponse, TLoader, IGroupedIssues, ISubGroupedIssues, TUnGroupedIssues, ViewFlags } from "../../types";
 import { RootStore } from "store/root";
 
 export interface IProjectIssuesStore {
@@ -22,6 +22,8 @@ export interface IProjectIssuesStore {
   updateIssue: (workspaceSlug: string, projectId: string, issueId: string, data: Partial<IIssue>) => Promise<IIssue>;
   removeIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<IIssue>;
   quickAddIssue: (workspaceSlug: string, projectId: string, data: IIssue) => Promise<IIssue>;
+
+  viewFlags: ViewFlags;
 }
 
 export class ProjectIssuesStore extends IssueBaseStore implements IProjectIssuesStore {
@@ -32,6 +34,13 @@ export class ProjectIssuesStore extends IssueBaseStore implements IProjectIssues
   // service
   issueService;
 
+  //viewData
+  viewFlags = {
+    enableQuickAdd: true,
+    enableIssueCreation: true,
+    enableInlineEditing: true,
+  };
+
   constructor(_rootStore: RootStore) {
     super(_rootStore);
 
@@ -85,15 +94,24 @@ export class ProjectIssuesStore extends IssueBaseStore implements IProjectIssues
     let issues: IIssueResponse | IGroupedIssues | ISubGroupedIssues | TUnGroupedIssues | undefined = undefined;
 
     if (layout === "list" && orderBy) {
+      console.log("list");
       if (groupBy) issues = this.groupedIssues(groupBy, orderBy, this.issues[projectId]);
       else issues = this.unGroupedIssues(orderBy, this.issues[projectId]);
     } else if (layout === "kanban" && groupBy && orderBy) {
+      console.log("kanban");
       if (subGroupBy) issues = this.subGroupedIssues(subGroupBy, groupBy, orderBy, this.issues[projectId]);
       else issues = this.groupedIssues(groupBy, orderBy, this.issues[projectId]);
-    } else if (layout === "calendar")
+      console.log("issues", issues);
+    } else if (layout === "calendar") {
+      console.log("calendar");
       issues = this.groupedIssues("target_date" as TIssueGroupByOptions, "target_date", this.issues[projectId], true);
-    else if (layout === "spreadsheet") issues = this.unGroupedIssues(orderBy ?? "-created_at", this.issues[projectId]);
-    else if (layout === "gantt_chart") issues = this.unGroupedIssues(orderBy ?? "sort_order", this.issues[projectId]);
+    } else if (layout === "spreadsheet") {
+      console.log("spreadsheet");
+      issues = this.unGroupedIssues(orderBy ?? "-created_at", this.issues[projectId]);
+    } else if (layout === "gantt_chart") {
+      console.log("gantt_chart");
+      issues = this.unGroupedIssues(orderBy ?? "sort_order", this.issues[projectId]);
+    }
 
     return issues;
   }
@@ -114,7 +132,7 @@ export class ProjectIssuesStore extends IssueBaseStore implements IProjectIssues
 
       return response;
     } catch (error) {
-      this.fetchIssues(workspaceSlug, projectId);
+      console.error(error);
       this.loader = undefined;
       throw error;
     }
diff --git a/web/store/issues/types.ts b/web/store/issues/types.ts
index b630c9410..9330aba01 100644
--- a/web/store/issues/types.ts
+++ b/web/store/issues/types.ts
@@ -25,3 +25,9 @@ export interface IIssueResponse {
 }
 
 export type TLoader = "init-loader" | "mutation" | undefined;
+
+export interface ViewFlags {
+  enableQuickAdd: boolean;
+  enableIssueCreation: boolean;
+  enableInlineEditing: boolean;
+}
diff --git a/web/store/root.ts b/web/store/root.ts
index 2c2adb69f..c15890298 100644
--- a/web/store/root.ts
+++ b/web/store/root.ts
@@ -152,6 +152,18 @@ import {
   // draft issues filter
   IProjectDraftIssuesFilterStore,
   ProjectDraftIssuesFilterStore,
+  // profile issues
+  IProfileIssuesStore,
+  ProfileIssuesStore,
+  // profile issues filter
+  IProfileIssuesFilterStore,
+  ProfileIssuesFilterStore,
+  // global issues
+  IGlobalIssuesStore,
+  GlobalIssuesStore,
+  // global issues filter
+  IGlobalIssuesFilterStore,
+  GlobalIssuesFilterStore,
 } from "store/issues";
 
 import { CycleIssueFiltersStore, ICycleIssueFiltersStore } from "store/cycle-issues";
@@ -256,6 +268,12 @@ export class RootStore {
 
   projectDraftIssues: IProjectDraftIssuesStore;
   projectDraftIssuesFilter: IProjectDraftIssuesFilterStore;
+
+  workspaceProfileIssues: IProfileIssuesStore;
+  workspaceProfileIssuesFilter: IProfileIssuesFilterStore;
+
+  workspaceGlobalIssues: IGlobalIssuesStore;
+  workspaceGlobalIssuesFilter: IGlobalIssuesFilterStore;
   // project v3 issue and issue-filters ends
 
   cycleIssueFilters: ICycleIssueFiltersStore;
@@ -354,6 +372,12 @@ export class RootStore {
 
     this.projectDraftIssues = new ProjectDraftIssuesStore(this);
     this.projectDraftIssuesFilter = new ProjectDraftIssuesFilterStore(this);
+
+    this.workspaceProfileIssues = new ProfileIssuesStore(this);
+    this.workspaceProfileIssuesFilter = new ProfileIssuesFilterStore(this);
+
+    this.workspaceGlobalIssues = new GlobalIssuesStore(this);
+    this.workspaceGlobalIssuesFilter = new GlobalIssuesFilterStore(this);
     // project v3 issue and issue-filters ends
 
     this.cycleIssueFilters = new CycleIssueFiltersStore(this);