diff --git a/web/components/issues/peek-overview/layout.tsx b/web/components/issues/peek-overview/layout.tsx
index 57bcb904c..1ae0c3aa8 100644
--- a/web/components/issues/peek-overview/layout.tsx
+++ b/web/components/issues/peek-overview/layout.tsx
@@ -26,110 +26,121 @@ type Props = {
 
 export type TPeekOverviewModes = "side" | "modal" | "full";
 
-export const IssuePeekOverview: React.FC<Props> = observer(
-  ({ handleMutation, projectId, readOnly, workspaceSlug }) => {
-    const [isSidePeekOpen, setIsSidePeekOpen] = useState(false);
-    const [isModalPeekOpen, setIsModalPeekOpen] = useState(false);
-    const [peekOverviewMode, setPeekOverviewMode] = useState<TPeekOverviewModes>("side");
-    const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+export const IssuePeekOverview: React.FC<Props> = observer(({ handleMutation, projectId, readOnly, workspaceSlug }) => {
+  const [isSidePeekOpen, setIsSidePeekOpen] = useState(false);
+  const [isModalPeekOpen, setIsModalPeekOpen] = useState(false);
+  const [peekOverviewMode, setPeekOverviewMode] = useState<TPeekOverviewModes>("side");
+  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
 
-    const router = useRouter();
-    const { peekIssue } = router.query;
+  const router = useRouter();
+  const { peekIssue } = router.query;
 
-    const { issues: issuesStore } = useMobxStore();
-    const { deleteIssue, getIssueById, issues, updateIssue } = issuesStore;
+  const { issueDetail: issueDetailStore } = useMobxStore();
+  const { deleteIssue, getIssueById, issues, updateIssue } = issueDetailStore;
 
-    const issue = issues[peekIssue?.toString() ?? ""];
+  const issue = issues[peekIssue?.toString() ?? ""];
 
-    const { user } = useUser();
+  const { user } = useUser();
 
-    const handleClose = () => {
-      const { query } = router;
-      delete query.peekIssue;
+  const handleClose = () => {
+    const { query } = router;
+    delete query.peekIssue;
 
-      router.push({
-        pathname: router.pathname,
-        query: { ...query },
-      });
-    };
+    router.push({
+      pathname: router.pathname,
+      query: { ...query },
+    });
+  };
 
-    const handleUpdateIssue = async (formData: Partial<IIssue>) => {
-      if (!issue || !user) return;
+  const handleUpdateIssue = async (formData: Partial<IIssue>) => {
+    if (!issue || !user) return;
 
-      await updateIssue(workspaceSlug, projectId, issue.id, formData, user);
-      mutate(PROJECT_ISSUES_ACTIVITY(issue.id));
-      handleMutation();
-    };
+    await updateIssue(workspaceSlug, projectId, issue.id, formData, user);
+    mutate(PROJECT_ISSUES_ACTIVITY(issue.id));
+    handleMutation();
+  };
 
-    const handleDeleteIssue = async () => {
-      if (!issue || !user) return;
+  const handleDeleteIssue = async () => {
+    if (!issue || !user) return;
 
-      await deleteIssue(workspaceSlug, projectId, issue.id, user);
-      handleMutation();
+    await deleteIssue(workspaceSlug, projectId, issue.id, user);
+    handleMutation();
 
-      handleClose();
-    };
+    handleClose();
+  };
 
-    useEffect(() => {
-      if (!peekIssue) return;
+  useEffect(() => {
+    if (!peekIssue) return;
 
-      getIssueById(workspaceSlug, projectId, peekIssue.toString());
-    }, [getIssueById, peekIssue, projectId, workspaceSlug]);
+    getIssueById(workspaceSlug, projectId, peekIssue.toString());
+  }, [getIssueById, peekIssue, projectId, workspaceSlug]);
 
-    useEffect(() => {
-      if (peekIssue) {
-        if (peekOverviewMode === "side") {
-          setIsSidePeekOpen(true);
-          setIsModalPeekOpen(false);
-        } else {
-          setIsModalPeekOpen(true);
-          setIsSidePeekOpen(false);
-        }
-      } else {
-        setIsSidePeekOpen(false);
+  useEffect(() => {
+    if (peekIssue) {
+      if (peekOverviewMode === "side") {
+        setIsSidePeekOpen(true);
         setIsModalPeekOpen(false);
+      } else {
+        setIsModalPeekOpen(true);
+        setIsSidePeekOpen(false);
       }
-    }, [peekIssue, peekOverviewMode]);
+    } else {
+      setIsSidePeekOpen(false);
+      setIsModalPeekOpen(false);
+    }
+  }, [peekIssue, peekOverviewMode]);
 
-    return (
-      <>
-        <DeleteIssueModal
-          isOpen={deleteIssueModal}
-          handleClose={() => setDeleteIssueModal(false)}
-          data={issue ? { ...issue } : null}
-          onSubmit={handleDeleteIssue}
-          user={user}
-        />
-        <Transition.Root appear show={isSidePeekOpen} as={React.Fragment}>
-          <Dialog as="div" className="relative z-20" onClose={handleClose}>
-            <div className="fixed inset-0 z-20 h-full w-full overflow-y-auto">
-              <Transition.Child
-                as={React.Fragment}
-                enter="transition-transform duration-300"
-                enterFrom="translate-x-full"
-                enterTo="translate-x-0"
-                leave="transition-transform duration-200"
-                leaveFrom="translate-x-0"
-                leaveTo="translate-x-full"
-              >
-                <Dialog.Panel className="fixed z-20 bg-custom-background-100 top-0 right-0 h-full w-1/2 shadow-custom-shadow-md">
-                  <SidePeekView
-                    handleClose={handleClose}
-                    handleDeleteIssue={() => setDeleteIssueModal(true)}
-                    handleUpdateIssue={handleUpdateIssue}
-                    issue={issue}
-                    mode={peekOverviewMode}
-                    readOnly={readOnly}
-                    setMode={(mode) => setPeekOverviewMode(mode)}
-                    workspaceSlug={workspaceSlug}
-                  />
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
-          </Dialog>
-        </Transition.Root>
-        <Transition.Root appear show={isModalPeekOpen} as={React.Fragment}>
-          <Dialog as="div" className="relative z-20" onClose={handleClose}>
+  return (
+    <>
+      <DeleteIssueModal
+        isOpen={deleteIssueModal}
+        handleClose={() => setDeleteIssueModal(false)}
+        data={issue ? { ...issue } : null}
+        onSubmit={handleDeleteIssue}
+        user={user}
+      />
+      <Transition.Root appear show={isSidePeekOpen} as={React.Fragment}>
+        <Dialog as="div" className="relative z-20" onClose={handleClose}>
+          <div className="fixed inset-0 z-20 h-full w-full overflow-y-auto">
+            <Transition.Child
+              as={React.Fragment}
+              enter="transition-transform duration-300"
+              enterFrom="translate-x-full"
+              enterTo="translate-x-0"
+              leave="transition-transform duration-200"
+              leaveFrom="translate-x-0"
+              leaveTo="translate-x-full"
+            >
+              <Dialog.Panel className="fixed z-20 bg-custom-background-100 top-0 right-0 h-full w-1/2 shadow-custom-shadow-md">
+                <SidePeekView
+                  handleClose={handleClose}
+                  handleDeleteIssue={() => setDeleteIssueModal(true)}
+                  handleUpdateIssue={handleUpdateIssue}
+                  issue={issue}
+                  mode={peekOverviewMode}
+                  readOnly={readOnly}
+                  setMode={(mode) => setPeekOverviewMode(mode)}
+                  workspaceSlug={workspaceSlug}
+                />
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </Dialog>
+      </Transition.Root>
+      <Transition.Root appear show={isModalPeekOpen} as={React.Fragment}>
+        <Dialog as="div" className="relative z-20" onClose={handleClose}>
+          <Transition.Child
+            as={React.Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+          </Transition.Child>
+          <div className="fixed inset-0 z-20 h-full w-full overflow-y-auto">
             <Transition.Child
               as={React.Fragment}
               enter="ease-out duration-300"
@@ -139,55 +150,42 @@ export const IssuePeekOverview: React.FC<Props> = observer(
               leaveFrom="opacity-100"
               leaveTo="opacity-0"
             >
-              <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+              <Dialog.Panel>
+                <div
+                  className={`fixed z-20 bg-custom-background-100 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-lg shadow-custom-shadow-xl transition-all duration-300 ${
+                    peekOverviewMode === "modal" ? "h-[70%] w-3/5" : "h-[95%] w-[95%]"
+                  }`}
+                >
+                  {peekOverviewMode === "modal" && (
+                    <SidePeekView
+                      handleClose={handleClose}
+                      handleDeleteIssue={() => setDeleteIssueModal(true)}
+                      handleUpdateIssue={handleUpdateIssue}
+                      issue={issue}
+                      mode={peekOverviewMode}
+                      readOnly={readOnly}
+                      setMode={(mode) => setPeekOverviewMode(mode)}
+                      workspaceSlug={workspaceSlug}
+                    />
+                  )}
+                  {peekOverviewMode === "full" && (
+                    <FullScreenPeekView
+                      handleClose={handleClose}
+                      handleDeleteIssue={() => setDeleteIssueModal(true)}
+                      handleUpdateIssue={handleUpdateIssue}
+                      issue={issue}
+                      mode={peekOverviewMode}
+                      readOnly={readOnly}
+                      setMode={(mode) => setPeekOverviewMode(mode)}
+                      workspaceSlug={workspaceSlug}
+                    />
+                  )}
+                </div>
+              </Dialog.Panel>
             </Transition.Child>
-            <div className="fixed inset-0 z-20 h-full w-full overflow-y-auto">
-              <Transition.Child
-                as={React.Fragment}
-                enter="ease-out duration-300"
-                enterFrom="opacity-0"
-                enterTo="opacity-100"
-                leave="ease-in duration-200"
-                leaveFrom="opacity-100"
-                leaveTo="opacity-0"
-              >
-                <Dialog.Panel>
-                  <div
-                    className={`fixed z-20 bg-custom-background-100 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-lg shadow-custom-shadow-xl transition-all duration-300 ${
-                      peekOverviewMode === "modal" ? "h-[70%] w-3/5" : "h-[95%] w-[95%]"
-                    }`}
-                  >
-                    {peekOverviewMode === "modal" && (
-                      <SidePeekView
-                        handleClose={handleClose}
-                        handleDeleteIssue={() => setDeleteIssueModal(true)}
-                        handleUpdateIssue={handleUpdateIssue}
-                        issue={issue}
-                        mode={peekOverviewMode}
-                        readOnly={readOnly}
-                        setMode={(mode) => setPeekOverviewMode(mode)}
-                        workspaceSlug={workspaceSlug}
-                      />
-                    )}
-                    {peekOverviewMode === "full" && (
-                      <FullScreenPeekView
-                        handleClose={handleClose}
-                        handleDeleteIssue={() => setDeleteIssueModal(true)}
-                        handleUpdateIssue={handleUpdateIssue}
-                        issue={issue}
-                        mode={peekOverviewMode}
-                        readOnly={readOnly}
-                        setMode={(mode) => setPeekOverviewMode(mode)}
-                        workspaceSlug={workspaceSlug}
-                      />
-                    )}
-                  </div>
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
-          </Dialog>
-        </Transition.Root>
-      </>
-    );
-  }
-);
+          </div>
+        </Dialog>
+      </Transition.Root>
+    </>
+  );
+});
diff --git a/web/store/issue_detail.ts b/web/store/issue_detail.ts
index 352769810..ea5a31d21 100644
--- a/web/store/issue_detail.ts
+++ b/web/store/issue_detail.ts
@@ -3,57 +3,43 @@ import { observable, action, makeObservable, runInAction } from "mobx";
 import { RootStore } from "./root";
 // services
 import { IssueService } from "services/issue.service";
+import { IIssue } from "types";
 
 export type IPeekMode = "side" | "modal" | "full";
 
-export interface IIssueViewDetailStore {
+export interface IIssueDetailStore {
   loader: boolean;
   error: any | null;
 
   peekId: string | null;
   peekMode: IPeekMode | null;
 
-  issue_detail: {
-    workspace: {
-      [key: string]: {
-        issues: {
-          [key: string]: any;
-        };
-      };
-    };
+  issues: {
+    [key: string]: IIssue;
   };
 
   setPeekId: (issueId: string | null) => void;
   setPeekMode: (issueId: IPeekMode | null) => void;
-
   // fetch issue details
-  fetchIssueDetailsAsync: (workspaceId: string, projectId: string, issueId: string) => void;
+  fetchIssueDetails: (workspaceId: string, projectId: string, issueId: string) => void;
   // creating issue
-  createIssueAsync: (workspaceId: string, projectId: string, issueId: string, data: any) => void;
+  createIssue: (workspaceId: string, projectId: string, issueId: string, data: any) => void;
   // updating issue
-  updateIssueAsync: (workspaceId: string, projectId: string, issueId: string, data: any) => void;
+  updateIssue: (workspaceId: string, projectId: string, issueId: string, data: any) => void;
   // deleting issue
-  deleteIssueAsync: (workspaceId: string, projectId: string, issueId: string) => void;
+  deleteIssue: (workspaceId: string, projectId: string, issueId: string) => void;
 }
 
-class IssueViewDetailStore implements IIssueViewDetailStore {
+class IssueDetailStore implements IIssueDetailStore {
   loader: boolean = false;
   error: any | null = null;
 
   peekId: string | null = null;
   peekMode: IPeekMode | null = null;
 
-  issue_detail: {
-    workspace: {
-      [key: string]: {
-        issues: {
-          [key: string]: any;
-        };
-      };
-    };
-  } = {
-    workspace: {},
-  };
+  issues: {
+    [key: string]: IIssue;
+  } = {};
 
   // root store
   rootStore;
@@ -63,20 +49,21 @@ class IssueViewDetailStore implements IIssueViewDetailStore {
   constructor(_rootStore: RootStore) {
     makeObservable(this, {
       // observable
-      loader: observable,
-      error: observable,
+      loader: observable.ref,
+      error: observable.ref,
 
-      peekId: observable,
-      peekMode: observable,
-      issue_detail: observable,
+      peekId: observable.ref,
+      peekMode: observable.ref,
+
+      issues: observable.ref,
 
       setPeekId: action,
       setPeekMode: action,
 
-      fetchIssueDetailsAsync: action,
-      createIssueAsync: action,
-      updateIssueAsync: action,
-      deleteIssueAsync: action,
+      fetchIssueDetails: action,
+      createIssue: action,
+      updateIssue: action,
+      deleteIssue: action,
     });
 
     this.rootStore = _rootStore;
@@ -84,20 +71,22 @@ class IssueViewDetailStore implements IIssueViewDetailStore {
   }
 
   setPeekId = (issueId: string | null) => (this.peekId = issueId);
+
   setPeekMode = (mode: IPeekMode | null) => (this.peekMode = mode);
 
-  fetchIssueDetailsAsync = async (workspaceId: string, projectId: string, issueId: string) => {
+  fetchIssueDetails = async (workspaceId: string, projectId: string, issueId: string) => {
     try {
       this.loader = true;
       this.error = null;
 
-      console.log("workspaceId", workspaceId);
-      console.log("projectId", projectId);
-      console.log("issueId", issueId);
+      const issueDetailsResponse = await this.issueService.retrieve(workspaceId, projectId, issueId);
 
       runInAction(() => {
         this.loader = false;
         this.error = null;
+        this.issues = {
+          [issueId]: issueDetailsResponse,
+        };
       });
     } catch (error) {
       console.log("error in fetching issue details", error);
@@ -107,7 +96,7 @@ class IssueViewDetailStore implements IIssueViewDetailStore {
     }
   };
 
-  createIssueAsync = async (workspaceId: string, projectId: string, issueId: string, data: any) => {
+  createIssue = async (workspaceId: string, projectId: string, issueId: string, data: any) => {
     try {
       this.loader = true;
       this.error = null;
@@ -129,12 +118,12 @@ class IssueViewDetailStore implements IIssueViewDetailStore {
     }
   };
 
-  updateIssueAsync = async (workspaceId: string, projectId: string, issueId: string, data: any) => {
+  updateIssue = async (workspaceId: string, projectId: string, issueId: string, data: any) => {
     try {
       this.loader = true;
       this.error = null;
 
-      const filteredParams = this.rootStore.issueFilters.getComputedFilters(
+      const filteredParams = this.rootStore.issueFilter.getComputedFilters(
         workspaceId,
         projectId,
         null,
@@ -161,7 +150,7 @@ class IssueViewDetailStore implements IIssueViewDetailStore {
     }
   };
 
-  deleteIssueAsync = async (workspaceId: string, projectId: string, issueId: string) => {
+  deleteIssue = async (workspaceId: string, projectId: string, issueId: string) => {
     try {
       this.loader = true;
       this.error = null;
@@ -183,4 +172,4 @@ class IssueViewDetailStore implements IIssueViewDetailStore {
   };
 }
 
-export default IssueViewDetailStore;
+export default IssueDetailStore;