From 45617d145b8589fd5323543cf9ee602b98c6420f Mon Sep 17 00:00:00 2001
From: Dakshesh Jain <dakshesh.jain14@gmail.com>
Date: Tue, 22 Aug 2023 18:45:06 +0530
Subject: [PATCH 1/4] feat: filters in plane deploy

implemented multi-level dropdown for plane deploy
---
 .../[project_slug]/layout.tsx                 |   4 +-
 .../[workspace_slug]/[project_slug]/page.tsx  |  47 +++++-
 .../components/issues/filters-render/date.tsx |  38 -----
 .../issues/filters-render/index.tsx           |  49 ++++--
 .../label/filter-label-block.tsx              |  18 ++-
 .../issues/filters-render/label/index.tsx     |  21 ++-
 .../priority/filter-priority-block.tsx        |  17 +-
 .../issues/filters-render/priority/index.tsx  |  30 +++-
 .../state/filter-state-block.tsx              |  16 +-
 .../issues/filters-render/state/index.tsx     |  21 ++-
 apps/space/components/issues/navbar/index.tsx |  12 +-
 .../issues/navbar/issue-board-view.tsx        |  18 ++-
 .../components/issues/navbar/issue-filter.tsx | 108 ++++++++++++-
 apps/space/components/ui/dropdown.tsx         | 149 ++++++++++++++++++
 apps/space/hooks/use-outside-click.tsx        |  21 +++
 apps/space/lib/mobx/store-init.tsx            |  17 ++
 apps/space/store/issue.ts                     | 100 +++++++++++-
 apps/space/store/types/issue.ts               |  19 +++
 18 files changed, 615 insertions(+), 90 deletions(-)
 delete mode 100644 apps/space/components/issues/filters-render/date.tsx
 create mode 100644 apps/space/components/ui/dropdown.tsx
 create mode 100644 apps/space/hooks/use-outside-click.tsx

diff --git a/apps/space/app/[workspace_slug]/[project_slug]/layout.tsx b/apps/space/app/[workspace_slug]/[project_slug]/layout.tsx
index 7b4ed614233..350295c6a61 100644
--- a/apps/space/app/[workspace_slug]/[project_slug]/layout.tsx
+++ b/apps/space/app/[workspace_slug]/[project_slug]/layout.tsx
@@ -45,9 +45,7 @@ const RootLayout = ({ children }: { children: React.ReactNode }) => (
     <div className="flex-shrink-0 h-[60px] border-b border-gray-300 relative flex items-center bg-white select-none">
       <IssueNavbar />
     </div>
-    {/* <div className="flex-shrink-0 min-h-[50px] h-auto py-1.5 border-b border-gray-300 relative flex items-center shadow-md bg-white select-none">
-      <IssueFilter />
-    </div> */}
+    <IssueFilter />
     <div className="w-full h-full relative bg-gray-100/50 overflow-hidden">{children}</div>
 
     <div className="absolute z-[99999] bottom-[10px] right-[10px] bg-white rounded-sm shadow-lg border border-gray-100">
diff --git a/apps/space/app/[workspace_slug]/[project_slug]/page.tsx b/apps/space/app/[workspace_slug]/[project_slug]/page.tsx
index 80dd5f03809..239b769f41d 100644
--- a/apps/space/app/[workspace_slug]/[project_slug]/page.tsx
+++ b/apps/space/app/[workspace_slug]/[project_slug]/page.tsx
@@ -26,7 +26,14 @@ const WorkspaceProjectPage = observer(() => {
 
   const { workspace_slug, project_slug } = routerParams as { workspace_slug: string; project_slug: string };
   const board =
-    routerSearchparams && routerSearchparams.get("board") != null && (routerSearchparams.get("board") as TIssueBoardKeys | "");
+    routerSearchparams &&
+    routerSearchparams.get("board") != null &&
+    (routerSearchparams.get("board") as TIssueBoardKeys | "");
+
+  const states = routerSearchparams && routerSearchparams.get("states") != null && routerSearchparams.get("states");
+  const labels = routerSearchparams && routerSearchparams.get("labels") != null && routerSearchparams.get("labels");
+  const priorities =
+    routerSearchparams && routerSearchparams.get("priorities") != null && routerSearchparams.get("priorities");
 
   // updating default board view when we are in the issues page
   useEffect(() => {
@@ -42,29 +49,53 @@ const WorkspaceProjectPage = observer(() => {
         if (_key === "gantt" && workspacePRojectSettingViews.gantt === true) userAccessViews.push(_key);
       });
 
+      let url = `/${workspace_slug}/${project_slug}`;
+      let _board = board;
+
       if (userAccessViews && userAccessViews.length > 0) {
         if (!board) {
           store.issue.setCurrentIssueBoardView(userAccessViews[0]);
-          router.replace(`/${workspace_slug}/${project_slug}?board=${userAccessViews[0]}`);
+          _board = userAccessViews[0];
         } else {
           if (userAccessViews.includes(board)) {
             if (store.issue.currentIssueBoardView === null) store.issue.setCurrentIssueBoardView(board);
             else {
-              if (board === store.issue.currentIssueBoardView)
-                router.replace(`/${workspace_slug}/${project_slug}?board=${board}`);
-              else {
+              if (board === store.issue.currentIssueBoardView) {
+                _board = board;
+              } else {
+                _board = board;
                 store.issue.setCurrentIssueBoardView(board);
-                router.replace(`/${workspace_slug}/${project_slug}?board=${board}`);
               }
             }
           } else {
             store.issue.setCurrentIssueBoardView(userAccessViews[0]);
-            router.replace(`/${workspace_slug}/${project_slug}?board=${userAccessViews[0]}`);
+            _board = userAccessViews[0];
           }
         }
       }
+
+      _board = _board || "list";
+      url = `${url}?board=${_board}`;
+
+      if (states) url = `${url}&states=${states}`;
+      if (labels) url = `${url}&labels=${labels}`;
+      if (priorities) url = `${url}&priorities=${priorities}`;
+
+      url = decodeURIComponent(url);
+
+      router.replace(url);
     }
-  }, [workspace_slug, project_slug, board, router, store?.issue, store?.project?.workspaceProjectSettings]);
+  }, [
+    workspace_slug,
+    project_slug,
+    board,
+    router,
+    store?.issue,
+    store?.project?.workspaceProjectSettings,
+    states,
+    labels,
+    priorities,
+  ]);
 
   useEffect(() => {
     if (workspace_slug && project_slug) {
diff --git a/apps/space/components/issues/filters-render/date.tsx b/apps/space/components/issues/filters-render/date.tsx
deleted file mode 100644
index e01d0ae5899..00000000000
--- a/apps/space/components/issues/filters-render/date.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-"use client";
-
-// mobx react lite
-import { observer } from "mobx-react-lite";
-// mobx hook
-import { useMobxStore } from "lib/mobx/store-provider";
-
-const IssueDateFilter = observer(() => {
-  const store = useMobxStore();
-
-  return (
-    <>
-      <div className="flex items-center gap-2 border border-gray-300 px-2 py-1 pr-1 rounded">
-        <div className="flex-shrink-0 font-medium">Due Date</div>
-        <div className="relative flex flex-wrap items-center gap-1">
-          {/* <div className="flex items-center gap-1 border border-gray-300 px-[2px] py-0.5 rounded-full">
-            <div className="w-[18px] h-[18px] cursor-pointer flex justify-center items-center overflow-hidden rounded-full border border-gray-300">
-              <span className={`material-symbols-rounded text-[16px]`}>close</span>
-            </div>
-            <div>Backlog</div>
-            <div
-              className={`w-[18px] h-[18px] cursor-pointer flex justify-center items-center overflow-hidden rounded-full text-gray-500 hover:bg-gray-200/60 hover:text-gray-600`}
-            >
-              <span className={`material-symbols-rounded text-[16px]`}>close</span>
-            </div>
-          </div> */}
-        </div>
-        <div
-          className={`w-[20px] h-[20px] cursor-pointer flex justify-center items-center overflow-hidden rounded-sm text-gray-500 hover:bg-gray-200/60 hover:text-gray-600`}
-        >
-          <span className={`material-symbols-rounded text-[16px]`}>close</span>
-        </div>
-      </div>
-    </>
-  );
-});
-
-export default IssueDateFilter;
diff --git a/apps/space/components/issues/filters-render/index.tsx b/apps/space/components/issues/filters-render/index.tsx
index 366ae103010..6c4de488bf4 100644
--- a/apps/space/components/issues/filters-render/index.tsx
+++ b/apps/space/components/issues/filters-render/index.tsx
@@ -1,12 +1,13 @@
 "use client";
 
+import { useRouter, useParams } from "next/navigation";
+
 // mobx react lite
 import { observer } from "mobx-react-lite";
 // components
 import IssueStateFilter from "./state";
 import IssueLabelFilter from "./label";
 import IssuePriorityFilter from "./priority";
-import IssueDateFilter from "./date";
 // mobx hook
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
@@ -14,24 +15,38 @@ import { RootStore } from "store/root";
 const IssueFilter = observer(() => {
   const store: RootStore = useMobxStore();
 
-  const clearAllFilters = () => {};
+  const router = useRouter();
+  const routerParams = useParams();
+
+  const { workspace_slug, project_slug } = routerParams as { workspace_slug: string; project_slug: string };
+
+  const clearAllFilters = () => {
+    router.replace(
+      store.issue.getURLDefinition(workspace_slug, project_slug, {
+        key: "all",
+        removeAll: true,
+      })
+    );
+  };
+
+  if (store.issue.getIfFiltersIsEmpty()) return null;
 
   return (
-    <div className="container mx-auto px-5 flex justify-start items-center flex-wrap gap-2 text-sm">
-      {/* state */}
-      {store?.issue?.states && <IssueStateFilter />}
-      {/* labels */}
-      {store?.issue?.labels && <IssueLabelFilter />}
-      {/* priority */}
-      <IssuePriorityFilter />
-      {/* due date */}
-      <IssueDateFilter />
-      {/* clear all filters */}
-      <div
-        className="flex items-center gap-2 border border-gray-300 px-2 py-1 pr-1 rounded cursor-pointer hover:bg-gray-200/60"
-        onClick={clearAllFilters}
-      >
-        <div>Clear all filters</div>
+    <div className="flex-shrink-0 min-h-[50px] h-auto py-1.5 border-b border-gray-300 relative flex items-center shadow-md bg-white select-none">
+      <div className="container mx-auto px-5 flex justify-start items-center flex-wrap gap-2 text-sm">
+        {/* state */}
+        {store.issue.checkIfFilterExistsForKey("state") && <IssueStateFilter />}
+        {/* labels */}
+        {store.issue.checkIfFilterExistsForKey("label") && <IssueLabelFilter />}
+        {/* priority */}
+        {store.issue.checkIfFilterExistsForKey("priority") && <IssuePriorityFilter />}
+        {/* clear all filters */}
+        <div
+          className="flex items-center gap-2 border border-gray-300 px-2 py-1 pr-1 rounded cursor-pointer hover:bg-gray-200/60"
+          onClick={clearAllFilters}
+        >
+          <div>Clear all filters</div>
+        </div>
       </div>
     </div>
   );
diff --git a/apps/space/components/issues/filters-render/label/filter-label-block.tsx b/apps/space/components/issues/filters-render/label/filter-label-block.tsx
index 0606bfc9524..559f9f9c080 100644
--- a/apps/space/components/issues/filters-render/label/filter-label-block.tsx
+++ b/apps/space/components/issues/filters-render/label/filter-label-block.tsx
@@ -1,18 +1,30 @@
 "use client";
 
+import { useRouter, useParams } from "next/navigation";
+
 // mobx react lite
 import { observer } from "mobx-react-lite";
 // mobx hook
 import { useMobxStore } from "lib/mobx/store-provider";
 // interfaces
 import { IIssueLabel } from "store/types/issue";
-// constants
-import { issueGroupFilter } from "constants/data";
 
 export const RenderIssueLabel = observer(({ label }: { label: IIssueLabel }) => {
   const store = useMobxStore();
 
-  const removeLabelFromFilter = () => {};
+  const router = useRouter();
+  const routerParams = useParams();
+
+  const { workspace_slug, project_slug } = routerParams as { workspace_slug: string; project_slug: string };
+
+  const removeLabelFromFilter = () => {
+    router.replace(
+      store.issue.getURLDefinition(workspace_slug, project_slug, {
+        key: "label",
+        value: label?.id,
+      })
+    );
+  };
 
   return (
     <div
diff --git a/apps/space/components/issues/filters-render/label/index.tsx b/apps/space/components/issues/filters-render/label/index.tsx
index 7d313153a78..29374e05476 100644
--- a/apps/space/components/issues/filters-render/label/index.tsx
+++ b/apps/space/components/issues/filters-render/label/index.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import { useRouter, useParams } from "next/navigation";
+
 // mobx react lite
 import { observer } from "mobx-react-lite";
 // components
@@ -13,7 +15,19 @@ import { RootStore } from "store/root";
 const IssueLabelFilter = observer(() => {
   const store: RootStore = useMobxStore();
 
-  const clearLabelFilters = () => {};
+  const router = useRouter();
+  const routerParams = useParams();
+
+  const { workspace_slug, project_slug } = routerParams as { workspace_slug: string; project_slug: string };
+
+  const clearLabelFilters = () => {
+    router.replace(
+      store.issue.getURLDefinition(workspace_slug, project_slug, {
+        key: "label",
+        removeAll: true,
+      })
+    );
+  };
 
   return (
     <>
@@ -21,7 +35,10 @@ const IssueLabelFilter = observer(() => {
         <div className="flex-shrink-0 font-medium">Labels</div>
         <div className="relative flex flex-wrap items-center gap-1">
           {store?.issue?.labels &&
-            store?.issue?.labels.map((_label: IIssueLabel, _index: number) => <RenderIssueLabel label={_label} />)}
+            store?.issue?.labels.map(
+              (_label: IIssueLabel, _index: number) =>
+                store.issue.getUserSelectedFilter("label", _label.id) && <RenderIssueLabel label={_label} />
+            )}
         </div>
         <div
           className="flex-shrink-0 w-[20px] h-[20px] cursor-pointer flex justify-center items-center overflow-hidden rounded-sm text-gray-500 hover:bg-gray-200/60 hover:text-gray-600"
diff --git a/apps/space/components/issues/filters-render/priority/filter-priority-block.tsx b/apps/space/components/issues/filters-render/priority/filter-priority-block.tsx
index 98173fd66d6..94a3b59b56d 100644
--- a/apps/space/components/issues/filters-render/priority/filter-priority-block.tsx
+++ b/apps/space/components/issues/filters-render/priority/filter-priority-block.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import { useRouter, useParams } from "next/navigation";
+
 // mobx react lite
 import { observer } from "mobx-react-lite";
 // mobx hook
@@ -10,7 +12,20 @@ import { IIssuePriorityFilters } from "store/types/issue";
 export const RenderIssuePriority = observer(({ priority }: { priority: IIssuePriorityFilters }) => {
   const store = useMobxStore();
 
-  const removePriorityFromFilter = () => {};
+  const router = useRouter();
+
+  const routerParams = useParams();
+
+  const { workspace_slug, project_slug } = routerParams as { workspace_slug: string; project_slug: string };
+
+  const removePriorityFromFilter = () => {
+    router.replace(
+      store.issue.getURLDefinition(workspace_slug, project_slug, {
+        key: "priority",
+        value: priority?.key,
+      })
+    );
+  };
 
   return (
     <div
diff --git a/apps/space/components/issues/filters-render/priority/index.tsx b/apps/space/components/issues/filters-render/priority/index.tsx
index 2253a0be22d..ca2e6593f2b 100644
--- a/apps/space/components/issues/filters-render/priority/index.tsx
+++ b/apps/space/components/issues/filters-render/priority/index.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import { useRouter, useParams } from "next/navigation";
+
 // mobx react lite
 import { observer } from "mobx-react-lite";
 // mobx hook
@@ -14,21 +16,41 @@ import { issuePriorityFilters } from "constants/data";
 const IssuePriorityFilter = observer(() => {
   const store = useMobxStore();
 
+  const router = useRouter();
+  const routerParams = useParams();
+
+  const { workspace_slug, project_slug } = routerParams as { workspace_slug: string; project_slug: string };
+
+  const clearPriorityFilters = () => {
+    router.replace(
+      store.issue.getURLDefinition(workspace_slug, project_slug, {
+        key: "priority",
+        removeAll: true,
+      })
+    );
+  };
+
   return (
     <>
       <div className="flex items-center gap-2 border border-gray-300 px-2 py-1 pr-1 rounded">
         <div className="flex-shrink-0 font-medium">Priority</div>
         <div className="relative flex flex-wrap items-center gap-1">
-          {issuePriorityFilters.map((_priority: IIssuePriorityFilters, _index: number) => (
-            <RenderIssuePriority priority={_priority} />
-          ))}
+          {issuePriorityFilters.map(
+            (_priority: IIssuePriorityFilters, _index: number) =>
+              store.issue.getUserSelectedFilter("priority", _priority.key) && (
+                <RenderIssuePriority priority={_priority} />
+              )
+          )}
         </div>
         <div
           className={`w-[20px] h-[20px] cursor-pointer flex justify-center items-center overflow-hidden rounded-sm text-gray-500 hover:bg-gray-200/60 hover:text-gray-600`}
+          onClick={() => {
+            clearPriorityFilters();
+          }}
         >
           <span className={`material-symbols-rounded text-[16px]`}>close</span>
         </div>
-      </div>{" "}
+      </div>
     </>
   );
 });
diff --git a/apps/space/components/issues/filters-render/state/filter-state-block.tsx b/apps/space/components/issues/filters-render/state/filter-state-block.tsx
index 95a4f4c7094..8a015864fc0 100644
--- a/apps/space/components/issues/filters-render/state/filter-state-block.tsx
+++ b/apps/space/components/issues/filters-render/state/filter-state-block.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import { useRouter, useParams } from "next/navigation";
+
 // mobx react lite
 import { observer } from "mobx-react-lite";
 // mobx hook
@@ -12,9 +14,21 @@ import { issueGroupFilter } from "constants/data";
 export const RenderIssueState = observer(({ state }: { state: IIssueState }) => {
   const store = useMobxStore();
 
+  const router = useRouter();
+  const routerParams = useParams();
+
+  const { workspace_slug, project_slug } = routerParams as { workspace_slug: string; project_slug: string };
+
   const stateGroup = issueGroupFilter(state.group);
 
-  const removeStateFromFilter = () => {};
+  const removeStateFromFilter = () => {
+    router.replace(
+      store.issue.getURLDefinition(workspace_slug, project_slug, {
+        key: "state",
+        value: state?.id,
+      })
+    );
+  };
 
   if (stateGroup === null) return <></>;
   return (
diff --git a/apps/space/components/issues/filters-render/state/index.tsx b/apps/space/components/issues/filters-render/state/index.tsx
index fc73af381f2..f4de23e87ed 100644
--- a/apps/space/components/issues/filters-render/state/index.tsx
+++ b/apps/space/components/issues/filters-render/state/index.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import { useRouter, useParams } from "next/navigation";
+
 // mobx react lite
 import { observer } from "mobx-react-lite";
 // components
@@ -13,7 +15,19 @@ import { RootStore } from "store/root";
 const IssueStateFilter = observer(() => {
   const store: RootStore = useMobxStore();
 
-  const clearStateFilters = () => {};
+  const router = useRouter();
+  const routerParams = useParams();
+
+  const { workspace_slug, project_slug } = routerParams as { workspace_slug: string; project_slug: string };
+
+  const clearStateFilters = () => {
+    router.replace(
+      store.issue.getURLDefinition(workspace_slug, project_slug, {
+        key: "state",
+        removeAll: true,
+      })
+    );
+  };
 
   return (
     <>
@@ -21,7 +35,10 @@ const IssueStateFilter = observer(() => {
         <div className="flex-shrink-0 font-medium">State</div>
         <div className="relative flex flex-wrap items-center gap-1">
           {store?.issue?.states &&
-            store?.issue?.states.map((_state: IIssueState, _index: number) => <RenderIssueState state={_state} />)}
+            store?.issue?.states.map(
+              (_state: IIssueState, _index: number) =>
+                store.issue.getUserSelectedFilter("state", _state.id) && <RenderIssueState state={_state} />
+            )}
         </div>
         <div
           className="flex-shrink-0 w-[20px] h-[20px] cursor-pointer flex justify-center items-center overflow-hidden rounded-sm text-gray-500 hover:bg-gray-200/60 hover:text-gray-600"
diff --git a/apps/space/components/issues/navbar/index.tsx b/apps/space/components/issues/navbar/index.tsx
index 71a2fabcc40..a9625a42037 100644
--- a/apps/space/components/issues/navbar/index.tsx
+++ b/apps/space/components/issues/navbar/index.tsx
@@ -50,17 +50,17 @@ const IssueNavbar = observer(() => {
         <NavbarSearch />
       </div>
 
+      {/* issue filters */}
+      <div className="flex-shrink-0 relative flex items-center gap-2">
+        <NavbarIssueFilter />
+        {/* <NavbarIssueView /> */}
+      </div>
+
       {/* issue views */}
       <div className="flex-shrink-0 relative flex items-center gap-1 transition-all ease-in-out delay-150">
         <NavbarIssueBoardView />
       </div>
 
-      {/* issue filters */}
-      {/* <div className="flex-shrink-0 relative flex items-center gap-2">
-        <NavbarIssueFilter />
-        <NavbarIssueView />
-      </div> */}
-
       {/* theming */}
       {/* <div className="flex-shrink-0 relative">
         <NavbarTheme />
diff --git a/apps/space/components/issues/navbar/issue-board-view.tsx b/apps/space/components/issues/navbar/issue-board-view.tsx
index 57c8b27c16f..de46dc96b47 100644
--- a/apps/space/components/issues/navbar/issue-board-view.tsx
+++ b/apps/space/components/issues/navbar/issue-board-view.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 // next imports
-import { useRouter, useParams } from "next/navigation";
+import { useRouter, useParams, useSearchParams } from "next/navigation";
 // mobx react lite
 import { observer } from "mobx-react-lite";
 // constants
@@ -22,7 +22,21 @@ export const NavbarIssueBoardView = observer(() => {
 
   const handleCurrentBoardView = (boardView: TIssueBoardKeys) => {
     store?.issue?.setCurrentIssueBoardView(boardView);
-    router.replace(`/${workspace_slug}/${project_slug}?board=${boardView}`);
+    router.replace(
+      `/${workspace_slug}/${project_slug}?board=${boardView}${
+        store?.issue?.userSelectedLabels && store?.issue?.userSelectedLabels.length > 0
+          ? `&labels=${store?.issue?.userSelectedLabels.join(",")}`
+          : ""
+      }${
+        store?.issue?.userSelectedPriorities && store?.issue?.userSelectedPriorities.length > 0
+          ? `&priorities=${store?.issue?.userSelectedPriorities.join(",")}`
+          : ""
+      }${
+        store?.issue?.userSelectedStates && store?.issue?.userSelectedStates.length > 0
+          ? `&states=${store?.issue?.userSelectedStates.join(",")}`
+          : ""
+      }`
+    );
   };
 
   return (
diff --git a/apps/space/components/issues/navbar/issue-filter.tsx b/apps/space/components/issues/navbar/issue-filter.tsx
index 10255882d6e..aa481194a92 100644
--- a/apps/space/components/issues/navbar/issue-filter.tsx
+++ b/apps/space/components/issues/navbar/issue-filter.tsx
@@ -1,13 +1,119 @@
 "use client";
 
+import { useRouter, usePathname } from "next/navigation";
+
+import { ChevronDownIcon } from "@heroicons/react/20/solid";
+
 // mobx react lite
 import { observer } from "mobx-react-lite";
 // mobx
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
 
+// components
+import { Dropdown } from "components/ui/dropdown";
+
+// constants
+import { issueGroupFilter } from "constants/data";
+
+const PRIORITIES = ["urgent", "high", "medium", "low"];
+
 export const NavbarIssueFilter = observer(() => {
   const store: RootStore = useMobxStore();
 
-  return <div>Filter</div>;
+  const router = useRouter();
+  const pathName = usePathname();
+
+  const handleOnSelect = (key: "states" | "labels" | "priorities", value: string) => {
+    if (key === "states") {
+      store.issue.userSelectedStates = store.issue.userSelectedStates.includes(value)
+        ? store.issue.userSelectedStates.filter((s) => s !== value)
+        : [...store.issue.userSelectedStates, value];
+    } else if (key === "labels") {
+      store.issue.userSelectedLabels = store.issue.userSelectedLabels.includes(value)
+        ? store.issue.userSelectedLabels.filter((l) => l !== value)
+        : [...store.issue.userSelectedLabels, value];
+    } else if (key === "priorities") {
+      store.issue.userSelectedPriorities = store.issue.userSelectedPriorities.includes(value)
+        ? store.issue.userSelectedPriorities.filter((p) => p !== value)
+        : [...store.issue.userSelectedPriorities, value];
+    }
+
+    const paramsCommaSeparated = `${`board=${store.issue.currentIssueBoardView || "list"}`}${
+      store.issue.userSelectedPriorities.length > 0 ? `&priorities=${store.issue.userSelectedPriorities.join(",")}` : ""
+    }${store.issue.userSelectedStates.length > 0 ? `&states=${store.issue.userSelectedStates.join(",")}` : ""}${
+      store.issue.userSelectedLabels.length > 0 ? `&labels=${store.issue.userSelectedLabels.join(",")}` : ""
+    }`;
+
+    router.replace(`${pathName}?${paramsCommaSeparated}`);
+  };
+
+  return (
+    <Dropdown
+      button={
+        <>
+          <span>Filters</span>
+          <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
+        </>
+      }
+      items={[
+        {
+          display: "Priority",
+          children: PRIORITIES.map((priority) => ({
+            display: (
+              <span className="capitalize flex items-center gap-x-2">
+                <span className="material-symbols-rounded text-[14px]">
+                  {priority === "urgent"
+                    ? "error"
+                    : priority === "high"
+                    ? "signal_cellular_alt"
+                    : priority === "medium"
+                    ? "signal_cellular_alt_2_bar"
+                    : "signal_cellular_alt_1_bar"}
+                </span>
+                {priority}
+              </span>
+            ),
+            onClick: () => handleOnSelect("priorities", priority),
+            isSelected: store.issue.userSelectedPriorities.includes(priority),
+          })),
+        },
+        {
+          display: "State",
+          children: (store.issue.states || []).map((state) => {
+            const stateGroup = issueGroupFilter(state.group);
+
+            return {
+              display: (
+                <span className="capitalize flex items-center gap-x-2">
+                  {stateGroup && <stateGroup.icon />}
+                  {state.name}
+                </span>
+              ),
+              onClick: () => handleOnSelect("states", state.id),
+              isSelected: store.issue.userSelectedStates.includes(state.id),
+            };
+          }),
+        },
+        {
+          display: "Labels",
+          children: [...(store.issue.labels || [])].map((label) => ({
+            display: (
+              <span className="capitalize flex items-center gap-x-2">
+                <span
+                  className="w-3 h-3 rounded-full"
+                  style={{
+                    backgroundColor: label.color || "#000",
+                  }}
+                />
+                {label.name}
+              </span>
+            ),
+            onClick: () => handleOnSelect("labels", label.id),
+            isSelected: store.issue.userSelectedLabels.includes(label.id),
+          })),
+        },
+      ]}
+    />
+  );
 });
diff --git a/apps/space/components/ui/dropdown.tsx b/apps/space/components/ui/dropdown.tsx
new file mode 100644
index 00000000000..abbf5ef58bf
--- /dev/null
+++ b/apps/space/components/ui/dropdown.tsx
@@ -0,0 +1,149 @@
+"use client";
+
+import { Fragment, useState, useRef } from "react";
+
+// next
+import Link from "next/link";
+
+// headless
+import { Popover, Transition } from "@headlessui/react";
+import { ChevronLeftIcon, CheckIcon } from "@heroicons/react/20/solid";
+
+// hooks
+import useOutSideClick from "hooks/use-outside-click";
+
+type ItemOptionType = {
+  display: React.ReactNode;
+  as?: "button" | "link" | "div";
+  href?: string;
+  isSelected?: boolean;
+  onClick?: () => void;
+  children?: ItemOptionType[] | null;
+};
+
+type DropdownItemProps = {
+  item: ItemOptionType;
+};
+
+type DropDownListProps = {
+  open: boolean;
+  handleClose?: () => void;
+  items: ItemOptionType[];
+};
+
+type DropdownProps = {
+  button: React.ReactNode | (() => React.ReactNode);
+  items: ItemOptionType[];
+};
+
+const DropdownList: React.FC<DropDownListProps> = (props) => {
+  const { open, items, handleClose } = props;
+
+  const ref = useRef(null);
+
+  useOutSideClick(ref, () => {
+    if (handleClose) handleClose();
+  });
+
+  return (
+    <Popover className="absolute -left-1">
+      <Transition
+        show={open}
+        as={Fragment}
+        enter="transition ease-out duration-200"
+        enterFrom="opacity-0 translate-y-1"
+        enterTo="opacity-100 translate-y-0"
+        leave="transition ease-in duration-150"
+        leaveFrom="opacity-100 translate-y-0"
+        leaveTo="opacity-0 translate-y-1"
+      >
+        <Popover.Panel
+          ref={ref}
+          className="absolute left-1/2 -translate-x-full z-10 mt-1 max-w-[9rem] origin-top-right select-none rounded-md bg-gray-50 border border-gray-300 text-xs shadow-lg focus:outline-none"
+        >
+          <div className="w-full text-sm rounded-md shadow-lg">
+            {items.map((item, index) => (
+              <DropdownItem key={index} item={item} />
+            ))}
+          </div>
+        </Popover.Panel>
+      </Transition>
+    </Popover>
+  );
+};
+
+const DropdownItem: React.FC<DropdownItemProps> = (props) => {
+  const { item } = props;
+  const { display, children, as: as_, href, onClick, isSelected } = item;
+
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="w-full group relative flex gap-x-6 rounded-lg p-1">
+      {(!as_ || as_ === "button" || as_ === "div") && (
+        <button
+          type="button"
+          onClick={() => {
+            if (!children) {
+              if (onClick) onClick();
+              return;
+            }
+            setOpen((prev) => !prev);
+          }}
+          className={`w-full flex items-center gap-1 rounded px-1 py-1.5 text-gray-600 hover:bg-gray-100 ${
+            isSelected ? "bg-gray-100 text-gray-800" : ""
+          }`}
+        >
+          {children && <ChevronLeftIcon className="h-5 w-5 transition-transform transform" />}
+          {!children && <span />}
+          <span className="truncate text-xs">{display}</span>
+          <CheckIcon className={`h-3.5 w-3.5 opacity-0 ${isSelected ? "opacity-100" : ""}`} />
+        </button>
+      )}
+
+      {as_ === "link" && <Link href={href || "#"}>{display}</Link>}
+
+      {children && <DropdownList open={open} handleClose={() => setOpen(false)} items={children} />}
+    </div>
+  );
+};
+
+const Dropdown: React.FC<DropdownProps> = (props) => {
+  const { button, items } = props;
+
+  return (
+    <Popover className="relative">
+      {({ open }) => (
+        <>
+          <Popover.Button
+            className={`group flex items-center justify-between gap-2 rounded-md border border-gray-200 px-3 py-1.5 text-xs shadow-sm duration-300 focus:outline-none hover:text-custom-text-100 hover:bg-gray-100 ${
+              open ? "bg-gray-100 text-gray-800" : "text-gray-700"
+            }`}
+          >
+            {typeof button === "function" ? button() : button}
+          </Popover.Button>
+
+          <Transition
+            as={Fragment}
+            enter="transition ease-out duration-200"
+            enterFrom="opacity-0 translate-y-1"
+            enterTo="opacity-100 translate-y-0"
+            leave="transition ease-in duration-150"
+            leaveFrom="opacity-100 translate-y-0"
+            leaveTo="opacity-0 translate-y-1"
+          >
+            <Popover.Panel className="absolute left-full -translate-x-full z-10 mt-1 w-36 origin-top-right select-none rounded-md bg-gray-50 border border-gray-300 text-xs shadow-lg focus:outline-none">
+              <div className="w-full">
+                {items.map((item, index) => (
+                  <DropdownItem key={index} item={item} />
+                ))}
+              </div>
+            </Popover.Panel>
+          </Transition>
+        </>
+      )}
+    </Popover>
+  );
+};
+
+export { Dropdown };
diff --git a/apps/space/hooks/use-outside-click.tsx b/apps/space/hooks/use-outside-click.tsx
new file mode 100644
index 00000000000..f2bed415f77
--- /dev/null
+++ b/apps/space/hooks/use-outside-click.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import { useEffect } from "react";
+
+const useOutSideClick = (ref: any, callback: any) => {
+  const handleClick = (e: any) => {
+    if (ref.current && !ref.current.contains(e.target)) {
+      callback();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("click", handleClick);
+
+    return () => {
+      document.removeEventListener("click", handleClick);
+    };
+  });
+};
+
+export default useOutSideClick;
diff --git a/apps/space/lib/mobx/store-init.tsx b/apps/space/lib/mobx/store-init.tsx
index a31bc822fde..f0203083f20 100644
--- a/apps/space/lib/mobx/store-init.tsx
+++ b/apps/space/lib/mobx/store-init.tsx
@@ -1,6 +1,8 @@
 "use client";
 
 import { useEffect } from "react";
+// next imports
+import { useSearchParams } from "next/navigation";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
@@ -8,6 +10,9 @@ import { RootStore } from "store/root";
 const MobxStoreInit = () => {
   const store: RootStore = useMobxStore();
 
+  // search params
+  const routerSearchparams = useSearchParams();
+
   useEffect(() => {
     // theme
     const _theme = localStorage && localStorage.getItem("app_theme") ? localStorage.getItem("app_theme") : "light";
@@ -15,6 +20,18 @@ const MobxStoreInit = () => {
     else localStorage.setItem("app_theme", _theme && _theme != "light" ? "dark" : "light");
   }, [store?.theme]);
 
+  useEffect(() => {
+    if (!routerSearchparams) return;
+
+    const states = routerSearchparams.get("states");
+    const labels = routerSearchparams.get("labels");
+    const priorities = routerSearchparams.get("priorities");
+
+    store.issue.userSelectedLabels = labels?.split(",") || [];
+    store.issue.userSelectedPriorities = priorities?.split(",") || [];
+    store.issue.userSelectedStates = states?.split(",") || [];
+  }, [routerSearchparams, store.issue]);
+
   return <></>;
 };
 
diff --git a/apps/space/store/issue.ts b/apps/space/store/issue.ts
index 79ad4b9102c..861ee35697d 100644
--- a/apps/space/store/issue.ts
+++ b/apps/space/store/issue.ts
@@ -18,6 +18,7 @@ class IssueStore implements IIssueStore {
 
   userSelectedStates: string[] = [];
   userSelectedLabels: string[] = [];
+  userSelectedPriorities: string[] = [];
   // root store
   rootStore;
   // service
@@ -35,8 +36,9 @@ class IssueStore implements IIssueStore {
       labels: observable.ref,
       issues: observable.ref,
 
-      userSelectedStates: observable,
-      userSelectedLabels: observable,
+      userSelectedStates: observable.ref,
+      userSelectedLabels: observable.ref,
+      userSelectedPriorities: observable.ref,
       // action
       setCurrentIssueBoardView: action,
       getIssuesAsync: action,
@@ -56,6 +58,100 @@ class IssueStore implements IIssueStore {
     return this.issues?.filter((issue) => issue.state == state_id) || [];
   }
 
+  /**
+   *
+   * @param key Is the key of the filter, i.e. state, label, priority
+   * @param value Is the value of the filter, i.e. state_id, label_id, priority
+   * @returns boolean
+   */
+
+  getUserSelectedFilter(key: "state" | "priority" | "label", value: string): boolean {
+    if (key == "state") {
+      return this.userSelectedStates.includes(value);
+    } else if (key == "label") {
+      return this.userSelectedLabels.includes(value);
+    } else if (key == "priority") {
+      return this.userSelectedPriorities.includes(value);
+    } else {
+      return false;
+    }
+  }
+
+  checkIfFilterExistsForKey: (key: "state" | "priority" | "label") => boolean = (key) => {
+    if (key == "state") {
+      return this.userSelectedStates.length > 0;
+    } else if (key == "label") {
+      return this.userSelectedLabels.length > 0;
+    } else if (key == "priority") {
+      return this.userSelectedPriorities.length > 0;
+    } else {
+      return false;
+    }
+  };
+
+  clearUserSelectedFilter(key: "state" | "priority" | "label" | "all") {
+    if (key == "state") {
+      this.userSelectedStates = [];
+    } else if (key == "label") {
+      this.userSelectedLabels = [];
+    } else if (key == "priority") {
+      this.userSelectedPriorities = [];
+    } else if (key == "all") {
+      this.userSelectedStates = [];
+      this.userSelectedLabels = [];
+      this.userSelectedPriorities = [];
+    }
+  }
+
+  getIfFiltersIsEmpty: () => boolean = () =>
+    this.userSelectedStates.length === 0 &&
+    this.userSelectedLabels.length === 0 &&
+    this.userSelectedPriorities.length === 0;
+
+  getURLDefinition = (
+    workspaceSlug: string,
+    projectId: string,
+    action?: {
+      key: "state" | "priority" | "label" | "all";
+      value?: string;
+      removeAll?: boolean;
+    }
+  ) => {
+    let url = `/${workspaceSlug}/${projectId}?board=${this.currentIssueBoardView}`;
+
+    if (action) {
+      if (action.key === "state")
+        this.userSelectedStates = action.removeAll
+          ? []
+          : [...this.userSelectedStates].filter((state) => state !== action.value);
+      if (action.key === "label")
+        this.userSelectedLabels = action.removeAll
+          ? []
+          : [...this.userSelectedLabels].filter((label) => label !== action.value);
+      if (action.key === "priority")
+        this.userSelectedPriorities = action.removeAll
+          ? []
+          : [...this.userSelectedPriorities].filter((priority) => priority !== action.value);
+      if (action.key === "all") {
+        this.userSelectedStates = [];
+        this.userSelectedLabels = [];
+        this.userSelectedPriorities = [];
+      }
+    }
+
+    if (this.checkIfFilterExistsForKey("state")) {
+      url += `&states=${this.userSelectedStates.join(",")}`;
+    }
+    if (this.checkIfFilterExistsForKey("label")) {
+      url += `&labels=${this.userSelectedLabels.join(",")}`;
+    }
+    if (this.checkIfFilterExistsForKey("priority")) {
+      url += `&priorities=${this.userSelectedPriorities.join(",")}`;
+    }
+
+    return url;
+  };
+
   // action
   setCurrentIssueBoardView = async (view: TIssueBoardKeys) => {
     this.currentIssueBoardView = view;
diff --git a/apps/space/store/types/issue.ts b/apps/space/store/types/issue.ts
index 5feeba7bd40..bfbcd2d6f7b 100644
--- a/apps/space/store/types/issue.ts
+++ b/apps/space/store/types/issue.ts
@@ -63,10 +63,29 @@ export interface IIssueStore {
 
   userSelectedStates: string[];
   userSelectedLabels: string[];
+  userSelectedPriorities: string[];
 
   getCountOfIssuesByState: (state: string) => number;
   getFilteredIssuesByState: (state: string) => IIssue[];
 
+  getUserSelectedFilter: (key: "state" | "priority" | "label", value: string) => boolean;
+
+  checkIfFilterExistsForKey: (key: "state" | "priority" | "label") => boolean;
+
+  clearUserSelectedFilter: (key: "state" | "priority" | "label" | "all") => void;
+
+  getIfFiltersIsEmpty: () => boolean;
+
+  getURLDefinition: (
+    workspaceSlug: string,
+    projectId: string,
+    action?: {
+      key: "state" | "priority" | "label" | "all";
+      value?: string;
+      removeAll?: boolean;
+    }
+  ) => string;
+
   setCurrentIssueBoardView: (view: TIssueBoardKeys) => void;
   getIssuesAsync: (workspace_slug: string, project_slug: string) => Promise<void>;
 }

From b71efbfdb4dbf01ee7e10900c350e5c7bbeabee2 Mon Sep 17 00:00:00 2001
From: Dakshesh Jain <dakshesh.jain14@gmail.com>
Date: Thu, 24 Aug 2023 11:59:07 +0530
Subject: [PATCH 2/4] style: spacing and fonts

---
 .../[workspace_slug]/[project_slug]/page.tsx  |  4 +-
 apps/space/app/testing/page.tsx               | 82 +++++++++++++++++++
 .../issues/board-views/block-due-date.tsx     |  2 +-
 .../issues/board-views/block-labels.tsx       |  8 +-
 .../issues/board-views/block-priority.tsx     |  4 +-
 .../issues/board-views/block-state.tsx        |  4 +-
 .../issues/board-views/kanban/block.tsx       |  6 +-
 .../issues/board-views/kanban/header.tsx      |  6 +-
 .../issues/board-views/list/block.tsx         | 58 +++++++------
 .../issues/board-views/list/header.tsx        |  8 +-
 .../issues/board-views/list/index.tsx         |  2 +-
 apps/space/constants/data.ts                  | 10 +--
 apps/space/styles/globals.css                 |  6 ++
 13 files changed, 145 insertions(+), 55 deletions(-)
 create mode 100644 apps/space/app/testing/page.tsx

diff --git a/apps/space/app/[workspace_slug]/[project_slug]/page.tsx b/apps/space/app/[workspace_slug]/[project_slug]/page.tsx
index 81c2b48c2c1..3a3f59b1b19 100644
--- a/apps/space/app/[workspace_slug]/[project_slug]/page.tsx
+++ b/apps/space/app/[workspace_slug]/[project_slug]/page.tsx
@@ -88,13 +88,13 @@ const WorkspaceProjectPage = observer(() => {
               <>
                 {store?.issue?.currentIssueBoardView === "list" && (
                   <div className="relative w-full h-full overflow-y-auto">
-                    <div className="container mx-auto px-5 py-3">
+                    <div className="mx-auto px-4">
                       <IssueListView />
                     </div>
                   </div>
                 )}
                 {store?.issue?.currentIssueBoardView === "kanban" && (
-                  <div className="relative w-full h-full mx-auto px-5">
+                  <div className="relative w-full h-full mx-auto px-9 py-5">
                     <IssueKanbanView />
                   </div>
                 )}
diff --git a/apps/space/app/testing/page.tsx b/apps/space/app/testing/page.tsx
new file mode 100644
index 00000000000..537f5199cb5
--- /dev/null
+++ b/apps/space/app/testing/page.tsx
@@ -0,0 +1,82 @@
+"use client";
+
+import { useState, Fragment } from "react";
+
+import { Transition } from "@headlessui/react";
+
+const Testing = () => {
+  const [clicked, setClicked] = useState<"upvote" | "downvote" | null>(null);
+
+  return (
+    <div className="relative w-screen h-screen flex justify-center items-center">
+      <div className="flex gap-3 items-center">
+        <button
+          type="button"
+          onClick={() => setClicked((prev) => (prev === "upvote" ? null : "upvote"))}
+          className="flex items-center justify-center overflow-hidden px-2 py-1 gap-x-1 border border-gray-300 rounded focus:outline-none"
+        >
+          <svg className="w-2.5 text-gray-900" viewBox="0 0 8 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M3.44122 2.35988L0.952108 4.84898C0.848405 4.95268 0.718049 5.00574 0.561041 5.00815C0.404044 5.01054 0.271292 4.95749 0.162783 4.84898C0.0542613 4.74047 0 4.60891 0 4.45431C0 4.2997 0.0542613 4.16814 0.162783 4.05963L3.52908 0.693333C3.66448 0.557934 3.82245 0.490234 4.00297 0.490234C4.1835 0.490234 4.34147 0.557934 4.47687 0.693333L7.84316 4.05963C7.94688 4.16335 7.99994 4.2937 8.00233 4.4507C8.00474 4.60771 7.95169 4.74047 7.84316 4.84898C7.73466 4.95749 7.6031 5.01174 7.4485 5.01174C7.2939 5.01174 7.16235 4.95749 7.05384 4.84898L4.56473 2.35988V8.94848C4.56473 9.10787 4.51095 9.24135 4.4034 9.34891C4.29586 9.45646 4.16238 9.51023 4.00297 9.51023C3.84357 9.51023 3.71009 9.45646 3.60254 9.34891C3.495 9.24135 3.44122 9.10787 3.44122 8.94848V2.35988Z"
+              fill="currentColor"
+            />
+          </svg>
+          <span
+            className={`text-sm font-normal transition-opacity ease-in-out ${
+              clicked === "upvote" ? "opacity-0" : "opacity-100"
+            }`}
+          >
+            10
+          </span>
+
+          <Transition
+            as={Fragment}
+            show={clicked === "upvote"}
+            enter="transition ease-out duration-100"
+            enterFrom="transform translate-y-4 opacity-0"
+            enterTo="transform translate-y-0 opacity-100"
+            leave="transition ease-in duration-75"
+            leaveFrom="transform translate-y-0 opacity-100"
+            leaveTo="transform -translate-y-4 opacity-0"
+          >
+            <span className="absolute ml-3 text-sm font-normal">11</span>
+          </Transition>
+        </button>
+        <button
+          type="button"
+          onClick={() => setClicked((prev) => (prev === "downvote" ? null : "downvote"))}
+          className="flex items-center justify-center overflow-hidden px-2 py-1 gap-x-1 border border-red-600 rounded focus:outline-none"
+        >
+          <svg className="w-2.5 text-red-600" viewBox="0 0 8 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M4.55878 7.6406L7.04789 5.15151C7.15159 5.04781 7.28195 4.99475 7.43896 4.99234C7.59596 4.98994 7.72871 5.043 7.83722 5.15151C7.94574 5.26002 8 5.39157 8 5.54617C8 5.70079 7.94574 5.83235 7.83722 5.94085L4.47092 9.30715C4.33552 9.44255 4.17755 9.51025 3.99703 9.51025C3.8165 9.51025 3.65853 9.44255 3.52313 9.30715L0.156836 5.94085C0.0531201 5.83714 6.34193e-05 5.70678 -0.00233364 5.54979C-0.00474262 5.39278 0.0483136 5.26002 0.156836 5.15151C0.265345 5.043 0.396898 4.98875 0.551497 4.98875C0.706097 4.98875 0.837651 5.043 0.946161 5.15151L3.43527 7.6406L3.43527 1.05201C3.43527 0.892613 3.48905 0.759136 3.5966 0.651576C3.70414 0.544028 3.83762 0.490253 3.99703 0.490253C4.15643 0.490253 4.28991 0.544028 4.39746 0.651576C4.505 0.759136 4.55878 0.892613 4.55878 1.05201L4.55878 7.6406Z"
+              fill="currentColor"
+            />
+          </svg>
+          <span
+            className={`text-sm font-normal text-red-600 transition-opacity ease-in-out ${
+              clicked === "downvote" ? "opacity-0" : "opacity-100"
+            }`}
+          >
+            10
+          </span>
+
+          <Transition
+            as={Fragment}
+            show={clicked === "downvote"}
+            enter="transition ease-out duration-100"
+            enterFrom="transform -translate-y-4 opacity-0"
+            enterTo="transform translate-y-0 opacity-100"
+            leave="transition ease-in duration-75"
+            leaveFrom="transform translate-y-0 opacity-100"
+            leaveTo="transform translate-y-4 opacity-0"
+          >
+            <span className="absolute ml-3 text-sm font-normal text-red-600">9</span>
+          </Transition>
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Testing;
diff --git a/apps/space/components/issues/board-views/block-due-date.tsx b/apps/space/components/issues/board-views/block-due-date.tsx
index 6d3cc3cc034..fae2f600cb6 100644
--- a/apps/space/components/issues/board-views/block-due-date.tsx
+++ b/apps/space/components/issues/board-views/block-due-date.tsx
@@ -24,7 +24,7 @@ const validDate = (date: any, state: string): string => {
 
 export const IssueBlockDueDate = ({ due_date, state }: any) => (
   <div
-    className={`h-[24px] rounded-sm flex px-2 items-center border border-gray-300 gap-1 text-gray-700 text-xs font-medium 
+    className={`h-[24px] rounded-md flex px-2.5 py-1 items-center border border-gray-300 gap-1 text-gray-700 text-xs font-medium 
     ${validDate(due_date, state)}`}
   >
     {renderDateFormat(due_date)}
diff --git a/apps/space/components/issues/board-views/block-labels.tsx b/apps/space/components/issues/board-views/block-labels.tsx
index 90cc1629c93..939e267963b 100644
--- a/apps/space/components/issues/board-views/block-labels.tsx
+++ b/apps/space/components/issues/board-views/block-labels.tsx
@@ -6,11 +6,11 @@ export const IssueBlockLabels = ({ labels }: any) => (
       labels.length > 0 &&
       labels.map((_label: any) => (
         <div
-          className={`h-[24px] rounded-sm flex px-1 items-center border gap-1 !bg-transparent !text-gray-700`}
-          style={{ backgroundColor: `${_label?.color}10`, borderColor: `${_label?.color}50` }}
+          className={`h-[24px] rounded-md flex px-2.5 py-1 items-center border gap-1 !bg-transparent !text-gray-700`}
+          // style={{ backgroundColor: `${_label?.color}10`, borderColor: `${_label?.color}50` }}
         >
-          <div className="w-[10px] h-[10px] rounded-full" style={{ backgroundColor: `${_label?.color}` }} />
-          <div className="text-sm">{_label?.name}</div>
+          <div className="w-2 h-2 rounded-full" style={{ backgroundColor: `${_label?.color}` }} />
+          <div className="text-xs">{_label?.name}</div>
         </div>
       ))}
   </div>
diff --git a/apps/space/components/issues/board-views/block-priority.tsx b/apps/space/components/issues/board-views/block-priority.tsx
index 61ca5076587..79720fc1951 100644
--- a/apps/space/components/issues/board-views/block-priority.tsx
+++ b/apps/space/components/issues/board-views/block-priority.tsx
@@ -10,8 +10,8 @@ export const IssueBlockPriority = ({ priority }: { priority: TIssuePriorityKey |
 
   if (priority_detail === null) return <></>;
   return (
-    <div className={`w-[24px] h-[24px] rounded-sm flex justify-center items-center ${priority_detail?.className}`}>
-      <span className="material-symbols-rounded text-[16px]">{priority_detail?.icon}</span>
+    <div className={`h-6 w-6 rounded flex justify-center items-center ${priority_detail?.className}`}>
+      <span className="material-symbols-rounded text-sm">{priority_detail?.icon}</span>
     </div>
   );
 };
diff --git a/apps/space/components/issues/board-views/block-state.tsx b/apps/space/components/issues/board-views/block-state.tsx
index 87cd65938da..8dba32c7c72 100644
--- a/apps/space/components/issues/board-views/block-state.tsx
+++ b/apps/space/components/issues/board-views/block-state.tsx
@@ -9,10 +9,10 @@ export const IssueBlockState = ({ state }: any) => {
   if (stateGroup === null) return <></>;
   return (
     <div
-      className={`h-[24px] rounded-sm flex px-1 items-center border ${stateGroup?.className} gap-1 !bg-transparent !text-gray-700`}
+      className={`h-[24px] rounded-md flex px-2.5 py-1 items-center border ${stateGroup?.className} gap-2 !bg-transparent !text-gray-700`}
     >
       <stateGroup.icon />
-      <div className="text-sm">{state?.name}</div>
+      <div className="text-xs">{state?.name}</div>
     </div>
   );
 };
diff --git a/apps/space/components/issues/board-views/kanban/block.tsx b/apps/space/components/issues/board-views/kanban/block.tsx
index 22af77568b9..ec913a15bfa 100644
--- a/apps/space/components/issues/board-views/kanban/block.tsx
+++ b/apps/space/components/issues/board-views/kanban/block.tsx
@@ -17,14 +17,14 @@ export const IssueListBlock = ({ issue }: { issue: IIssue }) => {
   const store: RootStore = useMobxStore();
 
   return (
-    <div className="p-2 px-3 bg-white space-y-2 rounded-sm shadow">
+    <div className="p-3.5 h-[118px] flex flex-col justify-between bg-white space-y-2 rounded shadow">
       {/* id */}
-      <div className="flex-shrink-0 text-sm text-gray-600 w-[60px]">
+      <div className="flex-shrink-0 text-xs font-medium text-gray-600 w-[60px]">
         {store?.project?.project?.identifier}-{issue?.sequence_id}
       </div>
 
       {/* name */}
-      <div className="font-medium text-gray-800 h-full line-clamp-2">{issue.name}</div>
+      <div className="text-gray-800 text-sm font-medium h-full break-words line-clamp-2">{issue.name}</div>
 
       {/* priority */}
       <div className="relative flex flex-wrap items-center gap-2 w-full">
diff --git a/apps/space/components/issues/board-views/kanban/header.tsx b/apps/space/components/issues/board-views/kanban/header.tsx
index 43c19f5f526..ce05f70723a 100644
--- a/apps/space/components/issues/board-views/kanban/header.tsx
+++ b/apps/space/components/issues/board-views/kanban/header.tsx
@@ -18,12 +18,12 @@ export const IssueListHeader = observer(({ state }: { state: IIssueState }) => {
   if (stateGroup === null) return <></>;
 
   return (
-    <div className="py-2 flex items-center gap-2">
+    <div className="pb-3 flex items-center">
       <div className="w-[28px] h-[28px] flex justify-center items-center">
         <stateGroup.icon />
       </div>
-      <div className="font-medium capitalize">{state?.name}</div>
-      <div className="bg-gray-200/50 text-gray-700 font-medium text-xs w-full max-w-[26px] h-[20px] flex justify-center items-center rounded-full">
+      <div className="font-semibold text-base capitalize ml-2 mr-3">{state?.name}</div>
+      <div className="text-gray-700 w-full max-w-[26px] h-[20px] flex justify-center items-center rounded-full">
         {store.issue.getCountOfIssuesByState(state.id)}
       </div>
     </div>
diff --git a/apps/space/components/issues/board-views/list/block.tsx b/apps/space/components/issues/board-views/list/block.tsx
index b9dfcc6ab77..943f9b92c69 100644
--- a/apps/space/components/issues/board-views/list/block.tsx
+++ b/apps/space/components/issues/board-views/list/block.tsx
@@ -17,43 +17,47 @@ export const IssueListBlock = ({ issue }: { issue: IIssue }) => {
   const store: RootStore = useMobxStore();
 
   return (
-    <div className="p-2 px-3 relative flex items-center gap-3">
-      <div className="relative flex items-center gap-3 w-full">
+    <div className="flex items-center px-9 py-3.5 relative gap-10">
+      <div className="relative flex items-center gap-6 w-full flex-grow overflow-hidden">
         {/* id */}
         <div className="flex-shrink-0 text-sm text-gray-600 w-[60px]">
           {store?.project?.project?.identifier}-{issue?.sequence_id}
         </div>
         {/* name */}
-        <div className="font-medium text-gray-800 h-full line-clamp-1">{issue.name}</div>
+        <div className="text-gray-800 h-full line-clamp-1 w-full overflow-ellipsis">
+          <p className="text-[0.825rem] font-medium text-sm truncate">{issue.name}</p>
+        </div>
       </div>
 
-      {/* priority */}
-      {issue?.priority && (
-        <div className="flex-shrink-0">
-          <IssueBlockPriority priority={issue?.priority} />
-        </div>
-      )}
+      <div className="inline-flex flex-shrink-0 items-center gap-2 text-xs text-gray-500">
+        {/* priority */}
+        {issue?.priority && (
+          <div className="flex-shrink-0">
+            <IssueBlockPriority priority={issue?.priority} />
+          </div>
+        )}
 
-      {/* state */}
-      {issue?.state_detail && (
-        <div className="flex-shrink-0">
-          <IssueBlockState state={issue?.state_detail} />
-        </div>
-      )}
+        {/* state */}
+        {issue?.state_detail && (
+          <div className="flex-shrink-0">
+            <IssueBlockState state={issue?.state_detail} />
+          </div>
+        )}
 
-      {/* labels */}
-      {issue?.label_details && issue?.label_details.length > 0 && (
-        <div className="flex-shrink-0">
-          <IssueBlockLabels labels={issue?.label_details} />
-        </div>
-      )}
+        {/* labels */}
+        {issue?.label_details && issue?.label_details.length > 0 && (
+          <div className="flex-shrink-0">
+            <IssueBlockLabels labels={issue?.label_details} />
+          </div>
+        )}
 
-      {/* due date */}
-      {issue?.target_date && (
-        <div className="flex-shrink-0">
-          <IssueBlockDueDate due_date={issue?.target_date} group={issue?.state_detail?.group} />
-        </div>
-      )}
+        {/* due date */}
+        {issue?.target_date && (
+          <div className="flex-shrink-0">
+            <IssueBlockDueDate due_date={issue?.target_date} group={issue?.state_detail?.group} />
+          </div>
+        )}
+      </div>
     </div>
   );
 };
diff --git a/apps/space/components/issues/board-views/list/header.tsx b/apps/space/components/issues/board-views/list/header.tsx
index e87cac6f778..85e3c9e555e 100644
--- a/apps/space/components/issues/board-views/list/header.tsx
+++ b/apps/space/components/issues/board-views/list/header.tsx
@@ -18,14 +18,12 @@ export const IssueListHeader = observer(({ state }: { state: IIssueState }) => {
   if (stateGroup === null) return <></>;
 
   return (
-    <div className="py-2 px-3 flex items-center gap-2">
+    <div className="py-2 px-3 flex items-center">
       <div className="w-[28px] h-[28px] flex justify-center items-center">
         <stateGroup.icon />
       </div>
-      <div className="font-medium capitalize">{state?.name}</div>
-      <div className="bg-gray-200/50 text-gray-700 font-medium text-xs w-full max-w-[26px] h-[20px] flex justify-center items-center rounded-full">
-        {store.issue.getCountOfIssuesByState(state.id)}
-      </div>
+      <div className="font-semibold leading-6 text-base capitalize ml-2 mr-3">{state?.name}</div>
+      <div className="text-gray-700 font-normal text-base">{store.issue.getCountOfIssuesByState(state.id)}</div>
     </div>
   );
 });
diff --git a/apps/space/components/issues/board-views/list/index.tsx b/apps/space/components/issues/board-views/list/index.tsx
index 7a7ec0de13a..54fbe65335e 100644
--- a/apps/space/components/issues/board-views/list/index.tsx
+++ b/apps/space/components/issues/board-views/list/index.tsx
@@ -29,7 +29,7 @@ export const IssueListView = observer(() => {
                 ))}
               </div>
             ) : (
-              <div className="bg-white p-5 text-sm text-gray-600">No Issues are available.</div>
+              <div className="bg-white px-9 py-3.5 text-sm text-gray-500">No Issues are available.</div>
             )}
           </div>
         ))}
diff --git a/apps/space/constants/data.ts b/apps/space/constants/data.ts
index 81ccae11683..21369d3a007 100644
--- a/apps/space/constants/data.ts
+++ b/apps/space/constants/data.ts
@@ -56,31 +56,31 @@ export const issuePriorityFilters: IIssuePriorityFilters[] = [
   {
     key: "urgent",
     title: "Urgent",
-    className: "border border-red-500/50 bg-red-500/20 text-red-500",
+    className: "border border-gray-200 text-red-500",
     icon: "error",
   },
   {
     key: "high",
     title: "High",
-    className: "border border-orange-500/50 bg-orange-500/20 text-orange-500",
+    className: "border border-gray-200 text-orange-500",
     icon: "signal_cellular_alt",
   },
   {
     key: "medium",
     title: "Medium",
-    className: "border border-yellow-500/50 bg-yellow-500/20 text-yellow-500",
+    className: "border border-gray-200 text-yellow-500",
     icon: "signal_cellular_alt_2_bar",
   },
   {
     key: "low",
     title: "Low",
-    className: "border border-green-500/50 bg-green-500/20 text-green-500",
+    className: "border border-gray-200 text-green-500",
     icon: "signal_cellular_alt_1_bar",
   },
   {
     key: "none",
     title: "None",
-    className: "border border-gray-500/50 bg-gray-500/20 text-gray-500",
+    className: "border border-gray-200 text-gray-500",
     icon: "block",
   },
 ];
diff --git a/apps/space/styles/globals.css b/apps/space/styles/globals.css
index e493f0abc1c..5c07b693253 100644
--- a/apps/space/styles/globals.css
+++ b/apps/space/styles/globals.css
@@ -4,3 +4,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  html {
+    font-family: "Inter", sans-serif;
+  }
+}

From c668880c6ce54cb02e57b064f4387fbbd6fbdefd Mon Sep 17 00:00:00 2001
From: Dakshesh Jain <dakshesh.jain14@gmail.com>
Date: Fri, 25 Aug 2023 19:44:04 +0530
Subject: [PATCH 3/4] feat: plane deploy

implemented authentication/theming, created/modified all the required store & services
---
 .../app/(auth)/components/email-code-form.tsx | 219 +++++++++++++++++
 .../(auth)/components/email-password-form.tsx | 116 +++++++++
 .../components/email-reset-password-form.tsx  |  89 +++++++
 .../(auth)/components/github-login-button.tsx |  59 +++++
 .../app/(auth)/components/google-login.tsx    |  61 +++++
 .../[project_slug]/layout.tsx                 |   8 +-
 .../[workspace_slug]/[project_slug]/page.tsx  |  58 ++++-
 apps/space/app/layout.tsx                     |  10 +-
 .../onboarding/components/user-details.tsx    | 221 ++++++++++++++++++
 apps/space/app/onboarding/page.tsx            |  62 +++++
 apps/space/app/page.tsx                       | 189 ++++++++++++++-
 .../issues/board-views/block-labels.tsx       |  10 +-
 .../issues/board-views/block-state.tsx        |  10 +-
 .../issues/board-views/kanban/block.tsx       |   6 +-
 .../issues/board-views/kanban/index.tsx       |   6 +-
 .../issues/board-views/list/block.tsx         |  10 +-
 .../issues/board-views/list/index.tsx         |  10 +-
 .../issues/filters-render/index.tsx           |   7 +-
 .../label/filter-label-block.tsx              |  18 +-
 .../issues/filters-render/label/index.tsx     |  12 +-
 .../priority/filter-priority-block.tsx        |  12 +-
 .../issues/filters-render/priority/index.tsx  |  10 +-
 .../state/filter-state-block.tsx              |  14 +-
 .../issues/filters-render/state/index.tsx     |  12 +-
 apps/space/components/issues/navbar/index.tsx |   2 +-
 .../issues/navbar/issue-board-view.tsx        |   6 +-
 .../peek-overview/full-screen-peek-view.tsx   |  61 +++++
 .../issues/peek-overview/header.tsx           |  94 ++++++++
 .../components/issues/peek-overview/index.ts  |   8 +
 .../issues/peek-overview/issue-activity.tsx   |  92 ++++++++
 .../issues/peek-overview/issue-details.tsx    |  18 ++
 .../issues/peek-overview/issue-properties.tsx | 163 +++++++++++++
 .../issues/peek-overview/issue-reaction.tsx   |  90 +++++++
 .../issues/peek-overview/layout.tsx           | 105 +++++++++
 .../issues/peek-overview/side-peek-view.tsx   |  45 ++++
 apps/space/components/ui/dropdown.tsx         |  12 +-
 apps/space/components/ui/icon.tsx             |  10 +
 apps/space/components/ui/index.ts             |   6 +
 apps/space/components/ui/input.tsx            |  37 +++
 apps/space/components/ui/primary-button.tsx   |  35 +++
 .../space/components/ui/reaction-selector.tsx |  78 +++++++
 apps/space/components/ui/secondary-button.tsx |  33 +++
 apps/space/components/ui/toast-alert.tsx      |  67 ++++++
 apps/space/constants/data.ts                  |  20 +-
 apps/space/constants/workspace.ts             |  12 +
 apps/space/contexts/toast.context.tsx         |  97 ++++++++
 apps/space/helpers/emoji.helper.tsx           |  56 +++++
 apps/space/helpers/string.helper.ts           |  31 +++
 apps/space/hooks/use-timer.tsx                |  19 ++
 apps/space/hooks/use-toast.tsx                |   9 +
 apps/space/public/logos/github-black.png      | Bin 0 -> 14032 bytes
 apps/space/public/logos/github-square.png     | Bin 0 -> 2352 bytes
 apps/space/public/logos/github-white.png      | Bin 0 -> 16559 bytes
 .../black-horizontal-with-blue-logo.svg       |  17 ++
 .../public/plane-logos/blue-without-text.png  | Bin 0 -> 2460 bytes
 .../white-horizontal-with-blue-logo.svg       |  17 ++
 .../public/plane-logos/white-horizontal.svg   |  17 ++
 apps/space/services/authentication.service.ts |  93 ++++++++
 apps/space/services/issue.service.ts          | 122 ++++++++++
 apps/space/services/user.service.ts           |   8 +
 apps/space/store/root.ts                      |   7 +-
 apps/space/store/user.ts                      |  36 ++-
 apps/space/styles/globals.css                 | 139 +++++++++++
 apps/space/tailwind.config.js                 | 168 ++++++++++++-
 64 files changed, 2954 insertions(+), 105 deletions(-)
 create mode 100644 apps/space/app/(auth)/components/email-code-form.tsx
 create mode 100644 apps/space/app/(auth)/components/email-password-form.tsx
 create mode 100644 apps/space/app/(auth)/components/email-reset-password-form.tsx
 create mode 100644 apps/space/app/(auth)/components/github-login-button.tsx
 create mode 100644 apps/space/app/(auth)/components/google-login.tsx
 create mode 100644 apps/space/app/onboarding/components/user-details.tsx
 create mode 100644 apps/space/app/onboarding/page.tsx
 create mode 100644 apps/space/components/issues/peek-overview/full-screen-peek-view.tsx
 create mode 100644 apps/space/components/issues/peek-overview/header.tsx
 create mode 100644 apps/space/components/issues/peek-overview/index.ts
 create mode 100644 apps/space/components/issues/peek-overview/issue-activity.tsx
 create mode 100644 apps/space/components/issues/peek-overview/issue-details.tsx
 create mode 100644 apps/space/components/issues/peek-overview/issue-properties.tsx
 create mode 100644 apps/space/components/issues/peek-overview/issue-reaction.tsx
 create mode 100644 apps/space/components/issues/peek-overview/layout.tsx
 create mode 100644 apps/space/components/issues/peek-overview/side-peek-view.tsx
 create mode 100644 apps/space/components/ui/icon.tsx
 create mode 100644 apps/space/components/ui/index.ts
 create mode 100644 apps/space/components/ui/input.tsx
 create mode 100644 apps/space/components/ui/primary-button.tsx
 create mode 100644 apps/space/components/ui/reaction-selector.tsx
 create mode 100644 apps/space/components/ui/secondary-button.tsx
 create mode 100644 apps/space/components/ui/toast-alert.tsx
 create mode 100644 apps/space/constants/workspace.ts
 create mode 100644 apps/space/contexts/toast.context.tsx
 create mode 100644 apps/space/helpers/emoji.helper.tsx
 create mode 100644 apps/space/helpers/string.helper.ts
 create mode 100644 apps/space/hooks/use-timer.tsx
 create mode 100644 apps/space/hooks/use-toast.tsx
 create mode 100644 apps/space/public/logos/github-black.png
 create mode 100644 apps/space/public/logos/github-square.png
 create mode 100644 apps/space/public/logos/github-white.png
 create mode 100644 apps/space/public/plane-logos/black-horizontal-with-blue-logo.svg
 create mode 100644 apps/space/public/plane-logos/blue-without-text.png
 create mode 100644 apps/space/public/plane-logos/white-horizontal-with-blue-logo.svg
 create mode 100644 apps/space/public/plane-logos/white-horizontal.svg
 create mode 100644 apps/space/services/authentication.service.ts

diff --git a/apps/space/app/(auth)/components/email-code-form.tsx b/apps/space/app/(auth)/components/email-code-form.tsx
new file mode 100644
index 00000000000..952be49531b
--- /dev/null
+++ b/apps/space/app/(auth)/components/email-code-form.tsx
@@ -0,0 +1,219 @@
+import React, { useEffect, useState, useCallback } from "react";
+
+// react hook form
+import { useForm } from "react-hook-form";
+
+// services
+import authenticationService from "services/authentication.service";
+
+// hooks
+import useToast from "hooks/use-toast";
+import useTimer from "hooks/use-timer";
+
+// ui
+import { CheckCircleIcon } from "@heroicons/react/20/solid";
+import { Input, PrimaryButton, SecondaryButton } from "components/ui";
+
+// types
+type EmailCodeFormValues = {
+  email: string;
+  key?: string;
+  token?: string;
+};
+
+export const EmailCodeForm = ({ handleSignIn }: any) => {
+  const [codeSent, setCodeSent] = useState(false);
+  const [codeResent, setCodeResent] = useState(false);
+  const [isCodeResending, setIsCodeResending] = useState(false);
+  const [errorResendingCode, setErrorResendingCode] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const { setToastAlert } = useToast();
+  const { timer: resendCodeTimer, setTimer: setResendCodeTimer } = useTimer();
+
+  const {
+    register,
+    handleSubmit,
+    setError,
+    setValue,
+    getValues,
+    watch,
+    formState: { errors, isSubmitting, isValid, isDirty },
+  } = useForm<EmailCodeFormValues>({
+    defaultValues: {
+      // TODO: remove this before pushing
+      email: "",
+      key: "",
+      token: "",
+    },
+    mode: "onChange",
+    reValidateMode: "onChange",
+  });
+
+  const isResendDisabled = resendCodeTimer > 0 || isCodeResending || isSubmitting || errorResendingCode;
+
+  const onSubmit = useCallback(
+    async ({ email }: EmailCodeFormValues) => {
+      setErrorResendingCode(false);
+      await authenticationService
+        .emailCode({ email })
+        .then((res) => {
+          console.log("res", res);
+          setValue("key", res.key);
+          setCodeSent(true);
+        })
+        .catch((err) => {
+          setErrorResendingCode(true);
+          setToastAlert({
+            title: "Oops!",
+            type: "error",
+            message: err?.error,
+          });
+        });
+    },
+    [setToastAlert, setValue]
+  );
+
+  const handleSignin = async (formData: EmailCodeFormValues) => {
+    setIsLoading(true);
+    await authenticationService
+      .magicSignIn(formData)
+      .then((response) => {
+        setIsLoading(false);
+        handleSignIn(response);
+      })
+      .catch((error) => {
+        setIsLoading(false);
+        setToastAlert({
+          title: "Oops!",
+          type: "error",
+          message: error?.response?.data?.error ?? "Enter the correct code to sign in",
+        });
+        setError("token" as keyof EmailCodeFormValues, {
+          type: "manual",
+          message: error?.error,
+        });
+      });
+  };
+
+  const emailOld = getValues("email");
+
+  useEffect(() => {
+    setErrorResendingCode(false);
+  }, [emailOld]);
+
+  useEffect(() => {
+    const submitForm = (e: KeyboardEvent) => {
+      if (!codeSent && e.key === "Enter") {
+        e.preventDefault();
+        handleSubmit(onSubmit)().then(() => {
+          setResendCodeTimer(30);
+        });
+      }
+    };
+
+    if (!codeSent) {
+      window.addEventListener("keydown", submitForm);
+    }
+
+    return () => {
+      window.removeEventListener("keydown", submitForm);
+    };
+  }, [handleSubmit, codeSent, onSubmit, setResendCodeTimer]);
+
+  return (
+    <>
+      {(codeSent || codeResent) && (
+        <p className="text-center mt-4">
+          We have sent the sign in code.
+          <br />
+          Please check your inbox at <span className="font-medium">{watch("email")}</span>
+        </p>
+      )}
+      <form className="space-y-4 mt-10 sm:w-[360px] mx-auto">
+        <div className="space-y-1">
+          <Input
+            id="email"
+            type="email"
+            placeholder="Enter your email address..."
+            className="border-custom-border-300 h-[46px]"
+            {...register("email", {
+              required: "Email address is required",
+              validate: (value) =>
+                /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
+                  value
+                ) || "Email address is not valid",
+            })}
+          />
+          {errors.email && <div className="text-sm text-red-500">{errors.email.message}</div>}
+        </div>
+
+        {codeSent && (
+          <>
+            <Input
+              id="token"
+              type="token"
+              {...register("token", {
+                required: "Code is required",
+              })}
+              placeholder="Enter code..."
+              className="border-custom-border-300 h-[46px]"
+            />
+            {errors.token && <div className="text-sm text-red-500">{errors.token.message}</div>}
+            <button
+              type="button"
+              className={`flex w-full justify-end text-xs outline-none ${
+                isResendDisabled ? "cursor-default text-custom-text-200" : "cursor-pointer text-custom-primary-100"
+              } `}
+              onClick={() => {
+                setIsCodeResending(true);
+                onSubmit({ email: getValues("email") }).then(() => {
+                  setCodeResent(true);
+                  setIsCodeResending(false);
+                  setResendCodeTimer(30);
+                });
+              }}
+              disabled={isResendDisabled}
+            >
+              {resendCodeTimer > 0 ? (
+                <span className="text-right">Request new code in {resendCodeTimer} seconds</span>
+              ) : isCodeResending ? (
+                "Sending new code..."
+              ) : errorResendingCode ? (
+                "Please try again later"
+              ) : (
+                <span className="font-medium">Resend code</span>
+              )}
+            </button>
+          </>
+        )}
+        {codeSent ? (
+          <PrimaryButton
+            type="submit"
+            className="w-full text-center h-[46px]"
+            size="md"
+            onClick={handleSubmit(handleSignin)}
+            disabled={!isValid && isDirty}
+            loading={isLoading}
+          >
+            {isLoading ? "Signing in..." : "Sign in"}
+          </PrimaryButton>
+        ) : (
+          <PrimaryButton
+            className="w-full text-center h-[46px]"
+            size="md"
+            onClick={() => {
+              handleSubmit(onSubmit)().then(() => {
+                setResendCodeTimer(30);
+              });
+            }}
+            disabled={!isValid && isDirty}
+            loading={isSubmitting}
+          >
+            {isSubmitting ? "Sending code..." : "Send sign in code"}
+          </PrimaryButton>
+        )}
+      </form>
+    </>
+  );
+};
diff --git a/apps/space/app/(auth)/components/email-password-form.tsx b/apps/space/app/(auth)/components/email-password-form.tsx
new file mode 100644
index 00000000000..23742eefe15
--- /dev/null
+++ b/apps/space/app/(auth)/components/email-password-form.tsx
@@ -0,0 +1,116 @@
+import React, { useState } from "react";
+
+import { useRouter } from "next/router";
+import Link from "next/link";
+
+// react hook form
+import { useForm } from "react-hook-form";
+// components
+import { EmailResetPasswordForm } from "./email-reset-password-form";
+// ui
+import { Input, PrimaryButton } from "components/ui";
+// types
+type EmailPasswordFormValues = {
+  email: string;
+  password?: string;
+  medium?: string;
+};
+
+type Props = {
+  onSubmit: (formData: EmailPasswordFormValues) => Promise<void>;
+};
+
+export const EmailPasswordForm: React.FC<Props> = ({ onSubmit }) => {
+  const [isResettingPassword, setIsResettingPassword] = useState(false);
+
+  const router = useRouter();
+  const isSignUpPage = router.pathname === "/sign-up";
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting, isValid, isDirty },
+  } = useForm<EmailPasswordFormValues>({
+    defaultValues: {
+      email: "",
+      password: "",
+      medium: "email",
+    },
+    mode: "onChange",
+    reValidateMode: "onChange",
+  });
+
+  return (
+    <>
+      <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
+        {isResettingPassword ? "Reset your password" : isSignUpPage ? "Sign up on Plane" : "Sign in to Plane"}
+      </h1>
+      {isResettingPassword ? (
+        <EmailResetPasswordForm setIsResettingPassword={setIsResettingPassword} />
+      ) : (
+        <form className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto" onSubmit={handleSubmit(onSubmit)}>
+          <div className="space-y-1">
+            <Input
+              id="email"
+              type="email"
+              {...register("email", {
+                required: "Email address is required",
+                validate: (value) =>
+                  /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
+                    value
+                  ) || "Email address is not valid",
+              })}
+              placeholder="Enter your email address..."
+              className="border-custom-border-300 h-[46px]"
+            />
+            {errors.email && <div className="text-sm text-red-500">{errors.email.message}</div>}
+          </div>
+          <div className="space-y-1">
+            <Input
+              id="password"
+              type="password"
+              {...register("password", {
+                required: "Password is required",
+              })}
+              placeholder="Enter your password..."
+              className="border-custom-border-300 h-[46px]"
+            />
+            {errors.password && <div className="text-sm text-red-500">{errors.password.message}</div>}
+          </div>
+          <div className="text-right text-xs">
+            {isSignUpPage ? (
+              <Link href="/">
+                <a className="text-custom-text-200 hover:text-custom-primary-100">Already have an account? Sign in.</a>
+              </Link>
+            ) : (
+              <button
+                type="button"
+                onClick={() => setIsResettingPassword(true)}
+                className="text-custom-text-200 hover:text-custom-primary-100"
+              >
+                Forgot your password?
+              </button>
+            )}
+          </div>
+          <div>
+            <PrimaryButton
+              type="submit"
+              className="w-full text-center h-[46px]"
+              disabled={!isValid && isDirty}
+              loading={isSubmitting}
+            >
+              {isSignUpPage ? (isSubmitting ? "Signing up..." : "Sign up") : isSubmitting ? "Signing in..." : "Sign in"}
+            </PrimaryButton>
+            {!isSignUpPage && (
+              <Link href="/sign-up">
+                <a className="block text-custom-text-200 hover:text-custom-primary-100 text-xs mt-4">
+                  Don{"'"}t have an account? Sign up.
+                </a>
+              </Link>
+            )}
+          </div>
+        </form>
+      )}
+    </>
+  );
+};
diff --git a/apps/space/app/(auth)/components/email-reset-password-form.tsx b/apps/space/app/(auth)/components/email-reset-password-form.tsx
new file mode 100644
index 00000000000..c850b305cec
--- /dev/null
+++ b/apps/space/app/(auth)/components/email-reset-password-form.tsx
@@ -0,0 +1,89 @@
+import React from "react";
+
+// react hook form
+import { useForm } from "react-hook-form";
+// services
+import userService from "services/user.service";
+// hooks
+// import useToast from "hooks/use-toast";
+// ui
+import { Input, PrimaryButton, SecondaryButton } from "components/ui";
+// types
+type Props = {
+  setIsResettingPassword: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+export const EmailResetPasswordForm: React.FC<Props> = ({ setIsResettingPassword }) => {
+  // const { setToastAlert } = useToast();
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm({
+    defaultValues: {
+      email: "",
+    },
+    mode: "onChange",
+    reValidateMode: "onChange",
+  });
+
+  const forgotPassword = async (formData: any) => {
+    const payload = {
+      email: formData.email,
+    };
+
+    // await userService
+    //   .forgotPassword(payload)
+    //   .then(() =>
+    //     setToastAlert({
+    //       type: "success",
+    //       title: "Success!",
+    //       message: "Password reset link has been sent to your email address.",
+    //     })
+    //   )
+    //   .catch((err) => {
+    //     if (err.status === 400)
+    //       setToastAlert({
+    //         type: "error",
+    //         title: "Error!",
+    //         message: "Please check the Email ID entered.",
+    //       });
+    //     else
+    //       setToastAlert({
+    //         type: "error",
+    //         title: "Error!",
+    //         message: "Something went wrong. Please try again.",
+    //       });
+    //   });
+  };
+
+  return (
+    <form className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto" onSubmit={handleSubmit(forgotPassword)}>
+      <div className="space-y-1">
+        <Input
+          id="email"
+          type="email"
+          {...register("email", {
+            required: "Email address is required",
+            validate: (value) =>
+              /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
+                value
+              ) || "Email address is not valid",
+          })}
+          placeholder="Enter registered email address.."
+          className="border-custom-border-300 h-[46px]"
+        />
+        {errors.email && <div className="text-sm text-red-500">{errors.email.message}</div>}
+      </div>
+      <div className="mt-5 flex flex-col-reverse sm:flex-row items-center gap-2">
+        <SecondaryButton className="w-full text-center h-[46px]" onClick={() => setIsResettingPassword(false)}>
+          Go Back
+        </SecondaryButton>
+        <PrimaryButton type="submit" className="w-full text-center h-[46px]" loading={isSubmitting}>
+          {isSubmitting ? "Sending link..." : "Send reset link"}
+        </PrimaryButton>
+      </div>
+    </form>
+  );
+};
diff --git a/apps/space/app/(auth)/components/github-login-button.tsx b/apps/space/app/(auth)/components/github-login-button.tsx
new file mode 100644
index 00000000000..da87cb14dc2
--- /dev/null
+++ b/apps/space/app/(auth)/components/github-login-button.tsx
@@ -0,0 +1,59 @@
+import { useEffect, useState, FC } from "react";
+
+import Link from "next/link";
+import Image from "next/image";
+import { useSearchParams } from "next/navigation";
+
+// next-themes
+import { useTheme } from "next-themes";
+// images
+import githubBlackImage from "/public/logos/github-black.png";
+import githubWhiteImage from "/public/logos/github-white.png";
+
+const { NEXT_PUBLIC_GITHUB_ID } = process.env;
+
+export interface GithubLoginButtonProps {
+  handleSignIn: React.Dispatch<string>;
+}
+
+export const GithubLoginButton: FC<GithubLoginButtonProps> = ({ handleSignIn }) => {
+  const [loginCallBackURL, setLoginCallBackURL] = useState(undefined);
+  const [gitCode, setGitCode] = useState<null | string>(null);
+
+  const searchParams = useSearchParams();
+
+  const code = searchParams?.get("code");
+
+  const { theme } = useTheme();
+
+  useEffect(() => {
+    if (code && !gitCode) {
+      setGitCode(code.toString());
+      handleSignIn(code.toString());
+    }
+  }, [code, gitCode, handleSignIn]);
+
+  useEffect(() => {
+    const origin = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+    setLoginCallBackURL(`${origin}/` as any);
+  }, []);
+
+  return (
+    <div className="w-full flex justify-center items-center">
+      <Link
+        className="w-full"
+        href={`https://github.com/login/oauth/authorize?client_id=${process.env.NEXT_PUBLIC_GITHUB_ID}&redirect_uri=${loginCallBackURL}&scope=read:user,user:email`}
+      >
+        <button className="flex w-full items-center justify-center gap-2 rounded border border-custom-border-300 p-2 text-sm font-medium text-custom-text-100 duration-300 hover:bg-custom-background-80 h-[46px]">
+          <Image
+            src={theme === "dark" ? githubWhiteImage : githubBlackImage}
+            height={20}
+            width={20}
+            alt="GitHub Logo"
+          />
+          <span>Sign in with GitHub</span>
+        </button>
+      </Link>
+    </div>
+  );
+};
diff --git a/apps/space/app/(auth)/components/google-login.tsx b/apps/space/app/(auth)/components/google-login.tsx
new file mode 100644
index 00000000000..f95b7120420
--- /dev/null
+++ b/apps/space/app/(auth)/components/google-login.tsx
@@ -0,0 +1,61 @@
+import { FC, CSSProperties, useEffect, useRef, useCallback, useState } from "react";
+
+import Script from "next/script";
+
+export interface IGoogleLoginButton {
+  text?: string;
+  handleSignIn: React.Dispatch<any>;
+  styles?: CSSProperties;
+}
+
+export const GoogleLoginButton: FC<IGoogleLoginButton> = ({ handleSignIn }) => {
+  const googleSignInButton = useRef<HTMLDivElement>(null);
+  const [gsiScriptLoaded, setGsiScriptLoaded] = useState(false);
+
+  const loadScript = useCallback(() => {
+    if (!googleSignInButton.current || gsiScriptLoaded) return;
+
+    console.log("process.env.NEXT_PUBLIC_GOOGLE_CLIENTID: ", process.env.NEXT_PUBLIC_GOOGLE_CLIENTID);
+
+    (window as any)?.google?.accounts.id.initialize({
+      client_id: process.env.NEXT_PUBLIC_GOOGLE_CLIENTID || "",
+      callback: handleSignIn,
+    });
+
+    try {
+      (window as any)?.google?.accounts.id.renderButton(
+        googleSignInButton.current,
+        {
+          type: "standard",
+          theme: "outline",
+          size: "large",
+          logo_alignment: "center",
+          width: 360,
+          text: "signin_with",
+        } as any // customization attributes
+      );
+    } catch (err) {
+      console.log(err);
+    }
+
+    (window as any)?.google?.accounts.id.prompt(); // also display the One Tap dialog
+
+    setGsiScriptLoaded(true);
+  }, [handleSignIn, gsiScriptLoaded]);
+
+  useEffect(() => {
+    if ((window as any)?.google?.accounts?.id) {
+      loadScript();
+    }
+    return () => {
+      (window as any)?.google?.accounts.id.cancel();
+    };
+  }, [loadScript]);
+
+  return (
+    <>
+      <Script src="https://accounts.google.com/gsi/client" async defer onLoad={loadScript} />
+      <div className="overflow-hidden rounded w-full" id="googleSignInButton" ref={googleSignInButton} />
+    </>
+  );
+};
diff --git a/apps/space/app/[workspace_slug]/[project_slug]/layout.tsx b/apps/space/app/[workspace_slug]/[project_slug]/layout.tsx
index 350295c6a61..81006dbb7c8 100644
--- a/apps/space/app/[workspace_slug]/[project_slug]/layout.tsx
+++ b/apps/space/app/[workspace_slug]/[project_slug]/layout.tsx
@@ -42,18 +42,18 @@ export async function generateMetadata({ params }: LayoutProps): Promise<Metadat
 
 const RootLayout = ({ children }: { children: React.ReactNode }) => (
   <div className="relative w-screen min-h-[500px] h-screen overflow-hidden flex flex-col">
-    <div className="flex-shrink-0 h-[60px] border-b border-gray-300 relative flex items-center bg-white select-none">
+    <div className="flex-shrink-0 h-[60px] border-b border-custom-border-300 relative flex items-center bga-white select-none">
       <IssueNavbar />
     </div>
     <IssueFilter />
-    <div className="w-full h-full relative bg-gray-100/50 overflow-hidden">{children}</div>
+    <div className="w-full h-full relative overflow-hidden">{children}</div>
 
-    <div className="absolute z-[99999] bottom-[10px] right-[10px] bg-white rounded-sm shadow-lg border border-gray-100">
+    <div className="absolute z-[99999] bottom-[10px] right-[10px] bg-custom-background-100 rounded-sm shadow-lg border border-custom-border-200">
       <Link href="https://plane.so" className="p-1 px-2 flex items-center gap-1" target="_blank">
         <div className="w-[24px] h-[24px] relative flex justify-center items-center">
           <Image src="/plane-logo.webp" alt="plane logo" className="w-[24px] h-[24px]" height="24" width="24" />
         </div>
-        <div className="text-xs">
+        <div className="text-xs text-custom-text-200">
           Powered by <b>Plane Deploy</b>
         </div>
       </Link>
diff --git a/apps/space/app/[workspace_slug]/[project_slug]/page.tsx b/apps/space/app/[workspace_slug]/[project_slug]/page.tsx
index 79dc7b5a8a4..f65d584cbbe 100644
--- a/apps/space/app/[workspace_slug]/[project_slug]/page.tsx
+++ b/apps/space/app/[workspace_slug]/[project_slug]/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 // next imports
 import { useRouter, useParams, useSearchParams } from "next/navigation";
 // mobx
@@ -11,19 +11,22 @@ import { IssueKanbanView } from "components/issues/board-views/kanban";
 import { IssueCalendarView } from "components/issues/board-views/calendar";
 import { IssueSpreadsheetView } from "components/issues/board-views/spreadsheet";
 import { IssueGanttView } from "components/issues/board-views/gantt";
+import { SidePeekView } from "components/issues/peek-overview";
 // mobx store
 import { RootStore } from "store/root";
 import { useMobxStore } from "lib/mobx/store-provider";
 // types
 import { TIssueBoardKeys } from "store/types";
 
-const WorkspaceProjectPage = observer(() => {
+const WorkspaceProjectPage = () => {
   const store: RootStore = useMobxStore();
 
   const router = useRouter();
   const routerParams = useParams();
   const routerSearchparams = useSearchParams();
 
+  const [activeIssue, setActiveIssue] = useState<any>(null);
+
   const { workspace_slug, project_slug } = routerParams as { workspace_slug: string; project_slug: string };
   const board =
     routerSearchparams &&
@@ -104,14 +107,57 @@ const WorkspaceProjectPage = observer(() => {
     }
   }, [workspace_slug, project_slug, store?.project, store?.issue]);
 
+  // copy the first store.issue.issues[0] to activeIssue
+  // useEffect(() => {
+  //   if (store?.issue?.issues && store?.issue?.issues.length > 0) {
+  //     setActiveIssue(store?.issue?.issues[0]);
+  //   }
+  // }, [store?.issue?.issues]);
+
   return (
     <div className="relative w-full h-full overflow-hidden">
+      {activeIssue && (
+        <SidePeekView
+          handleClose={() => {
+            setActiveIssue(null);
+          }}
+          issue={activeIssue}
+          mode="side"
+          setMode={() => {}}
+          workspaceSlug={workspace_slug}
+        />
+      )}
+      <button
+        type="button"
+        onClick={() => {
+          store.user.requiredLogin(() => {
+            console.log("hahahah");
+          });
+        }}
+        className="fixed bottom-5 left-5 z-50 border px-2 py-1 rounded bg-gray-200"
+      >
+        Test Auth
+      </button>
+      <button
+        type="button"
+        onClick={() => {
+          store.user.requiredLogin(() => {
+            console.log("hahahah");
+          });
+        }}
+        className="fixed bottom-5 left-5 z-50 border px-2 py-1 rounded bg-gray-200"
+      >
+        Test Auth
+      </button>
+
       {store?.issue?.loader && !store.issue.issues ? (
-        <div className="text-sm text-center py-10 text-gray-500">Loading...</div>
+        <div className="text-sm text-center py-10 text-custom-text-100">Loading...</div>
       ) : (
         <>
           {store?.issue?.error ? (
-            <div className="text-sm text-center py-10 text-gray-500">Something went wrong.</div>
+            <div className="text-sm text-center py-10  bg-custom-background-200 text-custom-text-100">
+              Something went wrong.
+            </div>
           ) : (
             store?.issue?.currentIssueBoardView && (
               <>
@@ -137,6 +183,6 @@ const WorkspaceProjectPage = observer(() => {
       )}
     </div>
   );
-});
+};
 
-export default WorkspaceProjectPage;
+export default observer(WorkspaceProjectPage);
diff --git a/apps/space/app/layout.tsx b/apps/space/app/layout.tsx
index b63f748e8ab..c2efb410000 100644
--- a/apps/space/app/layout.tsx
+++ b/apps/space/app/layout.tsx
@@ -2,16 +2,22 @@
 
 // root styles
 import "styles/globals.css";
+
+// toast alert
+import { ToastContextProvider } from "contexts/toast.context";
+
 // mobx store provider
 import { MobxStoreProvider } from "lib/mobx/store-provider";
 import MobxStoreInit from "lib/mobx/store-init";
 
 const RootLayout = ({ children }: { children: React.ReactNode }) => (
   <html lang="en">
-    <body className="antialiased w-100">
+    <body data-theme="dark" className="antialiased bg-custom-background-90 w-100">
       <MobxStoreProvider>
         <MobxStoreInit />
-        <main>{children}</main>
+        <ToastContextProvider>
+          <main>{children}</main>
+        </ToastContextProvider>
       </MobxStoreProvider>
     </body>
   </html>
diff --git a/apps/space/app/onboarding/components/user-details.tsx b/apps/space/app/onboarding/components/user-details.tsx
new file mode 100644
index 00000000000..8a23f17c2b2
--- /dev/null
+++ b/apps/space/app/onboarding/components/user-details.tsx
@@ -0,0 +1,221 @@
+import { useEffect, Fragment } from "react";
+
+// next
+import { useSearchParams, useRouter } from "next/navigation";
+
+// react-hook-form
+import { Controller, useForm } from "react-hook-form";
+
+// mobx
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+// headless ui
+import { Listbox, Transition } from "@headlessui/react";
+
+// icons
+import { ChevronDownIcon, CheckIcon } from "@heroicons/react/20/solid";
+
+// constants
+import { USER_ROLES } from "constants/workspace";
+
+// hooks
+import useToast from "hooks/use-toast";
+
+// services
+import UserService from "services/user.service";
+
+// ui
+import { Input, PrimaryButton } from "components/ui";
+
+const defaultValues = {
+  first_name: "",
+  last_name: "",
+  role: "",
+};
+
+type Props = {
+  user?: any;
+};
+
+export const UserDetails: React.FC<Props> = observer(({ user }) => {
+  const { setToastAlert } = useToast();
+
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const { user: userStore } = useMobxStore();
+
+  const {
+    register,
+    handleSubmit,
+    control,
+    reset,
+    formState: { errors, isSubmitting, isValid },
+  } = useForm({
+    defaultValues,
+  });
+
+  console.log("errors", errors);
+
+  const onSubmit = async (formData: any) => {
+    // if (!user) return;
+
+    const payload = {
+      ...formData,
+      onboarding_step: {
+        ...user.onboarding_step,
+        profile_complete: true,
+      },
+    };
+
+    console.log("payload", payload);
+
+    const userService = new UserService();
+
+    await userService
+      .updateMe(payload)
+      .then((response) => {
+        // mutate<ICurrentUserResponse>(
+        //   CURRENT_USER,
+        //   (prevData) => {
+        //     if (!prevData) return prevData;
+
+        //     return {
+        //       ...prevData,
+        //       ...payload,
+        //     };
+        //   },
+        //   false
+        // );
+
+        userStore.setCurrentUser(response);
+
+        const nextPath = searchParams?.get("next_path") || "/";
+        router.push(nextPath);
+
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Details updated successfully.",
+        });
+      })
+      .catch((err) => {
+        // mutate(CURRENT_USER);
+      });
+  };
+
+  useEffect(() => {
+    if (user) {
+      reset({
+        first_name: user.first_name,
+        last_name: user.last_name,
+        role: user.role,
+      });
+    }
+  }, [user, reset]);
+
+  return (
+    <form
+      className="h-full w-full space-y-7 sm:space-y-10 overflow-y-auto sm:flex sm:flex-col sm:items-start sm:justify-center"
+      onSubmit={handleSubmit(onSubmit)}
+    >
+      <div className="relative sm:text-lg">
+        <div className="text-gray-800 absolute -top-1 -left-3">{'"'}</div>
+        <h5>Hey there 👋🏻</h5>
+        <h5 className="mt-5 mb-6">Let{"'"}s get you onboard!</h5>
+        <h4 className="text-xl sm:text-2xl font-semibold">Set up your Plane profile.</h4>
+      </div>
+
+      <div className="space-y-7 sm:w-3/4 md:w-2/5">
+        <div className="space-y-1 text-sm">
+          <label htmlFor="firstName">First Name</label>
+          <Input
+            id="firstName"
+            autoComplete="off"
+            placeholder="Enter your first name..."
+            {...register("first_name", {
+              required: "First name is required",
+            })}
+          />
+          {errors.first_name && <div className="text-sm text-red-500">{errors.first_name.message}</div>}
+        </div>
+        <div className="space-y-1 text-sm">
+          <label htmlFor="lastName">Last Name</label>
+          <Input
+            id="lastName"
+            autoComplete="off"
+            placeholder="Enter your last name..."
+            {...register("last_name", {
+              required: "Last name is required",
+            })}
+          />
+          {errors.last_name && <div className="text-sm text-red-500">{errors.last_name.message}</div>}
+        </div>
+        <div className="space-y-1 text-sm">
+          <span>What{"'"}s your role?</span>
+          <div className="w-full">
+            <Controller
+              name="role"
+              control={control}
+              rules={{ required: "This field is required" }}
+              render={({ field: { value, onChange } }) => (
+                <Listbox as="div" value={value} onChange={onChange} className="relative flex-shrink-0 text-left">
+                  <Listbox.Button
+                    type="button"
+                    className={`flex items-center justify-between gap-1 w-full rounded-md border border-custom-border-300 shadow-sm duration-300 focus:outline-none px-3 py-2 text-sm`}
+                  >
+                    <span className="text-custom-text-400">{value || "Select your role..."}</span>
+                    <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
+                  </Listbox.Button>
+
+                  <Transition
+                    as={Fragment}
+                    enter="transition ease-out duration-100"
+                    enterFrom="transform opacity-0 scale-95"
+                    enterTo="transform opacity-100 scale-100"
+                    leave="transition ease-in duration-75"
+                    leaveFrom="transform opacity-100 scale-100"
+                    leaveTo="transform opacity-0 scale-95"
+                  >
+                    <Listbox.Options
+                      className={`absolute z-10 border border-custom-border-300 mt-1 overflow-y-auto rounded-md bg-custom-background-90 text-xs shadow-lg focus:outline-none w-full max-h-36 left-0 origin-top-left`}
+                    >
+                      <div className="space-y-1 p-2">
+                        {USER_ROLES.map((role) => (
+                          <Listbox.Option
+                            key={role.value}
+                            value={role.value}
+                            className={({ active, selected }) =>
+                              `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                                active || selected ? "bg-custom-background-80" : ""
+                              } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                            }
+                          >
+                            {({ selected }) => (
+                              <div className="flex items-center justify-between gap-2">
+                                <div className="flex items-center gap-2">
+                                  <span>{role.label}</span>
+                                </div>
+                                {selected && <CheckIcon className="h-4 w-4 flex-shrink-0" />}
+                              </div>
+                            )}
+                          </Listbox.Option>
+                        ))}
+                      </div>
+                    </Listbox.Options>
+                  </Transition>
+                </Listbox>
+              )}
+            />
+            {errors.role && <span className="text-sm text-red-500">{errors.role.message}</span>}
+          </div>
+        </div>
+      </div>
+
+      <PrimaryButton type="submit" size="md" disabled={!isValid} loading={isSubmitting}>
+        {isSubmitting ? "Updating..." : "Continue"}
+      </PrimaryButton>
+    </form>
+  );
+});
diff --git a/apps/space/app/onboarding/page.tsx b/apps/space/app/onboarding/page.tsx
new file mode 100644
index 00000000000..feca1b8f584
--- /dev/null
+++ b/apps/space/app/onboarding/page.tsx
@@ -0,0 +1,62 @@
+"use client";
+
+import React, { useEffect } from "react";
+
+// next
+import Image from "next/image";
+
+// assets
+import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
+import BlackHorizontalLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg";
+
+// mobx
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+// services
+import authenticationService from "services/authentication.service";
+
+// hooks
+import useToast from "hooks/use-toast";
+
+// components
+import { UserDetails } from "./components/user-details";
+
+const HomePage = () => {
+  const { user: userStore } = useMobxStore();
+
+  const user = userStore?.currentUser;
+
+  const { setToastAlert } = useToast();
+
+  useEffect(() => {
+    const user = userStore?.currentUser;
+
+    if (!user) {
+      userStore.getUserAsync();
+    }
+  }, [userStore]);
+
+  return (
+    <div className="h-screen w-full overflow-hidden bg-custom-background-100">
+      <div className="flex h-full w-full flex-col gap-y-2 sm:gap-y-0 sm:flex-row overflow-hidden">
+        <div className="relative h-1/6 flex-shrink-0 sm:w-2/12 md:w-3/12 lg:w-1/5">
+          <div className="absolute border-b-[0.5px] sm:border-r-[0.5px] border-custom-border-200 h-[0.5px] w-full top-1/2 left-0 -translate-y-1/2 sm:h-screen sm:w-[0.5px] sm:top-0 sm:left-1/2 md:left-1/3 sm:-translate-x-1/2 sm:translate-y-0 z-10" />
+          <div className="absolute grid place-items-center bg-custom-background-100 px-3 sm:px-0 py-5 left-2 sm:left-1/2 md:left-1/3 sm:-translate-x-1/2 top-1/2 -translate-y-1/2 sm:translate-y-0 sm:top-12 z-10">
+            <div className="h-[30px] w-[30px]">
+              <Image src={BluePlaneLogoWithoutText} alt="Plane logo" />
+            </div>
+          </div>
+          <div className="absolute sm:fixed text-custom-text-100 text-sm font-medium right-4 top-1/4 sm:top-12 -translate-y-1/2 sm:translate-y-0 sm:right-16 sm:py-5">
+            {user?.email}
+          </div>
+        </div>
+        <div className="relative flex justify-center sm:items-center h-full px-8 pb-0 sm:px-0 sm:py-12 sm:pr-[8.33%] sm:w-10/12 md:w-9/12 lg:w-4/5 overflow-hidden">
+          <UserDetails user={user} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default observer(HomePage);
diff --git a/apps/space/app/page.tsx b/apps/space/app/page.tsx
index 6a18b728395..aac82509647 100644
--- a/apps/space/app/page.tsx
+++ b/apps/space/app/page.tsx
@@ -1,9 +1,188 @@
 "use client";
 
-import React from "react";
+import React, { useEffect } from "react";
 
-const HomePage = () => (
-  <div className="relative w-screen h-screen flex justify-center items-center text-5xl">Plane Deploy</div>
-);
+// next
+import Image from "next/image";
+import Router from "next/router";
+import { useRouter, useSearchParams } from "next/navigation";
 
-export default HomePage;
+// assets
+import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
+
+// mobx
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+// services
+import authenticationService from "services/authentication.service";
+
+// hooks
+import useToast from "hooks/use-toast";
+
+// components
+import { EmailPasswordForm } from "./(auth)/components/email-password-form";
+import { GithubLoginButton } from "./(auth)/components/github-login-button";
+import { GoogleLoginButton } from "./(auth)/components/google-login";
+import { EmailCodeForm } from "./(auth)/components/email-code-form";
+
+const HomePage = () => {
+  const { user: userStore } = useMobxStore();
+
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const { setToastAlert } = useToast();
+
+  const onSignInError = (error: any) => {
+    setToastAlert({
+      title: "Error signing in!",
+      type: "error",
+      message: error?.error || "Something went wrong. Please try again later or contact the support team.",
+    });
+  };
+
+  const onSignInSuccess = (response: any) => {
+    // const isOnboarded = response?.user?.onboarding_step?.profile_complete||false;
+    const isOnboarded = false;
+    const nextPath = searchParams?.get("next_path") || "/";
+
+    userStore.setCurrentUser(response?.user);
+
+    if (!isOnboarded) {
+      router.push(`/onboarding?next_path=${nextPath}`);
+      return;
+    }
+
+    router.push(nextPath);
+  };
+
+  const handleGoogleSignIn = async ({ clientId, credential }: any) => {
+    try {
+      if (clientId && credential) {
+        const socialAuthPayload = {
+          medium: "google",
+          credential,
+          clientId,
+        };
+        const response = await authenticationService.socialAuth(socialAuthPayload);
+
+        onSignInSuccess(response);
+
+        if (response && response?.user) {
+          // mutateUser();
+          // handleTheme(response?.user);
+        }
+      } else {
+        throw Error("Cant find credentials");
+      }
+    } catch (err: any) {
+      onSignInError(err);
+    }
+  };
+
+  const handleGitHubSignIn = async (credential: string) => {
+    try {
+      if (process.env.NEXT_PUBLIC_GITHUB_ID && credential) {
+        const socialAuthPayload = {
+          medium: "github",
+          credential,
+          clientId: process.env.NEXT_PUBLIC_GITHUB_ID,
+        };
+        const response = await authenticationService.socialAuth(socialAuthPayload);
+        onSignInSuccess(response);
+        if (response && response?.user) {
+          // mutateUser();
+          // handleTheme(response?.user);
+        }
+      } else {
+        throw Error("Cant find credentials");
+      }
+    } catch (err: any) {
+      onSignInError(err);
+    }
+  };
+
+  const handlePasswordSignIn = async (formData: any) => {
+    await authenticationService
+      .emailLogin(formData)
+      .then((response) => {
+        try {
+          if (response) {
+            onSignInSuccess(response);
+            // mutateUser();
+            // handleTheme(response?.user);
+          }
+        } catch (err: any) {
+          onSignInError(err);
+        }
+      })
+      .catch((err) => onSignInError(err));
+  };
+
+  const handleEmailCodeSignIn = async (response: any) => {
+    try {
+      if (response) {
+        onSignInSuccess(response);
+
+        // userStore.setCurrentUser(response);
+
+        // mutateUser();
+        // handleTheme(response?.user);
+      }
+    } catch (err: any) {
+      onSignInError(err);
+    }
+  };
+
+  return (
+    <div className="h-screen w-full overflow-hidden">
+      <div className="hidden sm:block sm:fixed border-r-[0.5px] border-custom-border-200 h-screen w-[0.5px] top-0 left-20 lg:left-32" />
+      <div className="fixed grid place-items-center bg-custom-background-100 sm:py-5 top-11 sm:top-12 left-7 sm:left-16 lg:left-28">
+        <div className="grid place-items-center bg-custom-background-100">
+          <div className="h-[30px] w-[30px]">
+            <Image src={BluePlaneLogoWithoutText} alt="Plane Logo" />
+          </div>
+        </div>
+      </div>
+      <div className="grid place-items-center h-full overflow-y-auto py-5 px-7">
+        <div>
+          {parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? (
+            <>
+              <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
+                Sign in to Plane
+              </h1>
+              <div className="flex flex-col divide-y divide-custom-border-200">
+                <div className="pb-7">
+                  <EmailCodeForm handleSignIn={handleEmailCodeSignIn} />
+                </div>
+                <div className="flex flex-col items-center justify-center gap-4 pt-7 sm:w-[360px] mx-auto overflow-hidden">
+                  <GoogleLoginButton handleSignIn={handleGoogleSignIn} />
+                  <GithubLoginButton handleSignIn={handleGitHubSignIn} />
+                </div>
+              </div>
+            </>
+          ) : (
+            <EmailPasswordForm onSubmit={handlePasswordSignIn} />
+          )}
+
+          {parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? (
+            <p className="pt-16 text-custom-text-200 text-sm text-center">
+              By signing up, you agree to the{" "}
+              <a
+                href="https://plane.so/terms-and-conditions"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="font-medium underline"
+              >
+                Terms & Conditions
+              </a>
+            </p>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default observer(HomePage);
diff --git a/apps/space/components/issues/board-views/block-labels.tsx b/apps/space/components/issues/board-views/block-labels.tsx
index 939e267963b..31e218a7f2f 100644
--- a/apps/space/components/issues/board-views/block-labels.tsx
+++ b/apps/space/components/issues/board-views/block-labels.tsx
@@ -6,11 +6,13 @@ export const IssueBlockLabels = ({ labels }: any) => (
       labels.length > 0 &&
       labels.map((_label: any) => (
         <div
-          className={`h-[24px] rounded-md flex px-2.5 py-1 items-center border gap-1 !bg-transparent !text-gray-700`}
-          // style={{ backgroundColor: `${_label?.color}10`, borderColor: `${_label?.color}50` }}
+          key={_label?.id}
+          className="flex cursor-default items-center flex-shrink-0 rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm"
         >
-          <div className="w-2 h-2 rounded-full" style={{ backgroundColor: `${_label?.color}` }} />
-          <div className="text-xs">{_label?.name}</div>
+          <div className="flex items-center gap-1.5 text-custom-text-200">
+            <div className="w-2 h-2 rounded-full" style={{ backgroundColor: `${_label?.color}` }} />
+            <div className="text-xs">{_label?.name}</div>
+          </div>
         </div>
       ))}
   </div>
diff --git a/apps/space/components/issues/board-views/block-state.tsx b/apps/space/components/issues/board-views/block-state.tsx
index 8dba32c7c72..b422af0275c 100644
--- a/apps/space/components/issues/board-views/block-state.tsx
+++ b/apps/space/components/issues/board-views/block-state.tsx
@@ -8,11 +8,11 @@ export const IssueBlockState = ({ state }: any) => {
 
   if (stateGroup === null) return <></>;
   return (
-    <div
-      className={`h-[24px] rounded-md flex px-2.5 py-1 items-center border ${stateGroup?.className} gap-2 !bg-transparent !text-gray-700`}
-    >
-      <stateGroup.icon />
-      <div className="text-xs">{state?.name}</div>
+    <div className="flex items-center justify-between gap-1 w-full rounded-md shadow-sm border border-custom-border-300 duration-300 focus:outline-none px-2.5 py-1 text-xs cursor-pointer hover:bg-custom-background-80">
+      <div className="flex items-center cursor-pointer w-full gap-2 text-custom-text-200">
+        <stateGroup.icon />
+        <div className="text-xs">{state?.name}</div>
+      </div>
     </div>
   );
 };
diff --git a/apps/space/components/issues/board-views/kanban/block.tsx b/apps/space/components/issues/board-views/kanban/block.tsx
index ec913a15bfa..5ca3205232d 100644
--- a/apps/space/components/issues/board-views/kanban/block.tsx
+++ b/apps/space/components/issues/board-views/kanban/block.tsx
@@ -17,14 +17,14 @@ export const IssueListBlock = ({ issue }: { issue: IIssue }) => {
   const store: RootStore = useMobxStore();
 
   return (
-    <div className="p-3.5 h-[118px] flex flex-col justify-between bg-white space-y-2 rounded shadow">
+    <div className="p-3.5 h-[118px] flex flex-col justify-between bg-custom-background-100 space-y-2 rounded shadow">
       {/* id */}
-      <div className="flex-shrink-0 text-xs font-medium text-gray-600 w-[60px]">
+      <div className="flex-shrink-0 text-xs font-medium text-custom-text-200 w-[60px]">
         {store?.project?.project?.identifier}-{issue?.sequence_id}
       </div>
 
       {/* name */}
-      <div className="text-gray-800 text-sm font-medium h-full break-words line-clamp-2">{issue.name}</div>
+      <div className="text-custom-text-100 text-sm font-medium h-full break-words line-clamp-2">{issue.name}</div>
 
       {/* priority */}
       <div className="relative flex flex-wrap items-center gap-2 w-full">
diff --git a/apps/space/components/issues/board-views/kanban/index.tsx b/apps/space/components/issues/board-views/kanban/index.tsx
index d716356ffd8..ee35a9c05ce 100644
--- a/apps/space/components/issues/board-views/kanban/index.tsx
+++ b/apps/space/components/issues/board-views/kanban/index.tsx
@@ -19,7 +19,7 @@ export const IssueKanbanView = observer(() => {
       {store?.issue?.states &&
         store?.issue?.states.length > 0 &&
         store?.issue?.states.map((_state: IIssueState) => (
-          <div className="flex-shrink-0 relative w-[340px] h-full flex flex-col">
+          <div key={_state.id} className="flex-shrink-0 relative w-[340px] h-full flex flex-col">
             <div className="flex-shrink-0">
               <IssueListHeader state={_state} />
             </div>
@@ -28,11 +28,11 @@ export const IssueKanbanView = observer(() => {
               store.issue.getFilteredIssuesByState(_state.id).length > 0 ? (
                 <div className="space-y-3 pb-2">
                   {store.issue.getFilteredIssuesByState(_state.id).map((_issue: IIssue) => (
-                    <IssueListBlock issue={_issue} />
+                    <IssueListBlock key={_issue.id} issue={_issue} />
                   ))}
                 </div>
               ) : (
-                <div className="relative w-full h-full flex justify-center items-center p-10 text-center text-sm text-gray-600">
+                <div className="relative w-full h-full flex justify-center items-center p-10 text-center text-sm text-custom-text-200">
                   No Issues are available.
                 </div>
               )}
diff --git a/apps/space/components/issues/board-views/list/block.tsx b/apps/space/components/issues/board-views/list/block.tsx
index 943f9b92c69..19ae55178cb 100644
--- a/apps/space/components/issues/board-views/list/block.tsx
+++ b/apps/space/components/issues/board-views/list/block.tsx
@@ -17,19 +17,19 @@ export const IssueListBlock = ({ issue }: { issue: IIssue }) => {
   const store: RootStore = useMobxStore();
 
   return (
-    <div className="flex items-center px-9 py-3.5 relative gap-10">
+    <div className="flex items-center px-9 py-3.5 relative gap-10 border-b border-custom-border-200 bg-custom-background-100 last:border-b-0">
       <div className="relative flex items-center gap-6 w-full flex-grow overflow-hidden">
         {/* id */}
-        <div className="flex-shrink-0 text-sm text-gray-600 w-[60px]">
+        <div className="flex-shrink-0 text-sm w-[60px] text-custom-text-200">
           {store?.project?.project?.identifier}-{issue?.sequence_id}
         </div>
         {/* name */}
-        <div className="text-gray-800 h-full line-clamp-1 w-full overflow-ellipsis">
-          <p className="text-[0.825rem] font-medium text-sm truncate">{issue.name}</p>
+        <div className="h-full line-clamp-1 w-full overflow-ellipsis">
+          <p className="text-[0.825rem] font-medium text-sm truncate text-custom-text-100">{issue.name}</p>
         </div>
       </div>
 
-      <div className="inline-flex flex-shrink-0 items-center gap-2 text-xs text-gray-500">
+      <div className="inline-flex flex-shrink-0 items-center gap-2 text-xs">
         {/* priority */}
         {issue?.priority && (
           <div className="flex-shrink-0">
diff --git a/apps/space/components/issues/board-views/list/index.tsx b/apps/space/components/issues/board-views/list/index.tsx
index 54fbe65335e..1f9188d4b47 100644
--- a/apps/space/components/issues/board-views/list/index.tsx
+++ b/apps/space/components/issues/board-views/list/index.tsx
@@ -19,17 +19,19 @@ export const IssueListView = observer(() => {
       {store?.issue?.states &&
         store?.issue?.states.length > 0 &&
         store?.issue?.states.map((_state: IIssueState) => (
-          <div className="relative w-full">
+          <div key={_state.id} className="relative w-full">
             <IssueListHeader state={_state} />
             {store.issue.getFilteredIssuesByState(_state.id) &&
             store.issue.getFilteredIssuesByState(_state.id).length > 0 ? (
-              <div className="bg-white divide-y">
+              <div className="divide-y">
                 {store.issue.getFilteredIssuesByState(_state.id).map((_issue: IIssue) => (
-                  <IssueListBlock issue={_issue} />
+                  <IssueListBlock key={_issue.id} issue={_issue} />
                 ))}
               </div>
             ) : (
-              <div className="bg-white px-9 py-3.5 text-sm text-gray-500">No Issues are available.</div>
+              <div className="px-9 py-3.5 text-sm text-custom-text-200 bg-custom-background-100">
+                No Issues are available.
+              </div>
             )}
           </div>
         ))}
diff --git a/apps/space/components/issues/filters-render/index.tsx b/apps/space/components/issues/filters-render/index.tsx
index 6c4de488bf4..cc9382f2750 100644
--- a/apps/space/components/issues/filters-render/index.tsx
+++ b/apps/space/components/issues/filters-render/index.tsx
@@ -32,7 +32,7 @@ const IssueFilter = observer(() => {
   if (store.issue.getIfFiltersIsEmpty()) return null;
 
   return (
-    <div className="flex-shrink-0 min-h-[50px] h-auto py-1.5 border-b border-gray-300 relative flex items-center shadow-md bg-white select-none">
+    <div className="flex-shrink-0 min-h-[50px] h-auto py-1.5 border-b border-custom-border-200 relative flex items-center shadow-md bg-whiate select-none">
       <div className="container mx-auto px-5 flex justify-start items-center flex-wrap gap-2 text-sm">
         {/* state */}
         {store.issue.checkIfFilterExistsForKey("state") && <IssueStateFilter />}
@@ -42,10 +42,13 @@ const IssueFilter = observer(() => {
         {store.issue.checkIfFilterExistsForKey("priority") && <IssuePriorityFilter />}
         {/* clear all filters */}
         <div
-          className="flex items-center gap-2 border border-gray-300 px-2 py-1 pr-1 rounded cursor-pointer hover:bg-gray-200/60"
+          className="flex items-center gap-2 border border-custom-border-200 px-2 py-1 cursor-pointer text-xs rounded-full"
           onClick={clearAllFilters}
         >
           <div>Clear all filters</div>
+          <div className="flex-shrink-0 w-3 h-3 cursor-pointer flex justify-center items-center overflow-hidden rounded-sm">
+            <span className="material-symbols-rounded text-[12px]">close</span>
+          </div>
         </div>
       </div>
     </div>
diff --git a/apps/space/components/issues/filters-render/label/filter-label-block.tsx b/apps/space/components/issues/filters-render/label/filter-label-block.tsx
index 559f9f9c080..800121dbe28 100644
--- a/apps/space/components/issues/filters-render/label/filter-label-block.tsx
+++ b/apps/space/components/issues/filters-render/label/filter-label-block.tsx
@@ -28,18 +28,20 @@ export const RenderIssueLabel = observer(({ label }: { label: IIssueLabel }) =>
 
   return (
     <div
-      className="flex-shrink-0 relative flex items-center flex-wrap gap-1 border px-[2px] py-0.5 rounded-full select-none"
-      style={{ color: label?.color, backgroundColor: `${label?.color}10`, borderColor: `${label?.color}50` }}
+      className="flex-shrink-0 relative flex items-center flex-wrap gap-1 px-2 py-0.5 rounded-full select-none"
+      style={{ color: label?.color, backgroundColor: `${label?.color}10` }}
     >
-      <div className="flex-shrink-0 w-[20px] h-[20px] flex justify-center items-center overflow-hidden rounded-full">
-        <div className="w-[10px] h-[10px] rounded-full" style={{ backgroundColor: `${label?.color}` }} />
-      </div>
-      <div className="text-sm font-medium whitespace-nowrap">{label?.name}</div>
       <div
-        className="flex-shrink-0 w-[20px] h-[20px] cursor-pointer flex justify-center items-center overflow-hidden rounded-full text-gray-500 hover:bg-gray-200/60 hover:text-gray-600"
+        className="flex-shrink-0 w-1.5 h-1.5 flex justify-center items-center overflow-hidden rounded-full"
+        style={{ backgroundColor: `${label?.color}` }}
+      />
+
+      <div className="font-medium whitespace-nowrap text-xs">{label?.name}</div>
+      <div
+        className="flex-shrink-0 w-3 h-3 cursor-pointer flex justify-center items-center overflow-hidden rounded-full"
         onClick={removeLabelFromFilter}
       >
-        <span className="material-symbols-rounded text-[14px]">close</span>
+        <span className="material-symbols-rounded text-xs">close</span>
       </div>
     </div>
   );
diff --git a/apps/space/components/issues/filters-render/label/index.tsx b/apps/space/components/issues/filters-render/label/index.tsx
index 29374e05476..946a29c74c2 100644
--- a/apps/space/components/issues/filters-render/label/index.tsx
+++ b/apps/space/components/issues/filters-render/label/index.tsx
@@ -31,20 +31,22 @@ const IssueLabelFilter = observer(() => {
 
   return (
     <>
-      <div className="flex items-center gap-2 border border-gray-300 px-2 py-1 pr-1 rounded">
-        <div className="flex-shrink-0 font-medium">Labels</div>
+      <div className="flex items-center gap-2 border border-custom-border-300 px-2 py-1 rounded-full text-xs">
+        <div className="flex-shrink-0 text-custom-text-200">Labels</div>
         <div className="relative flex flex-wrap items-center gap-1">
           {store?.issue?.labels &&
             store?.issue?.labels.map(
               (_label: IIssueLabel, _index: number) =>
-                store.issue.getUserSelectedFilter("label", _label.id) && <RenderIssueLabel label={_label} />
+                store.issue.getUserSelectedFilter("label", _label.id) && (
+                  <RenderIssueLabel key={_label.id} label={_label} />
+                )
             )}
         </div>
         <div
-          className="flex-shrink-0 w-[20px] h-[20px] cursor-pointer flex justify-center items-center overflow-hidden rounded-sm text-gray-500 hover:bg-gray-200/60 hover:text-gray-600"
+          className="flex-shrink-0 w-3 h-3 cursor-pointer flex justify-center items-center overflow-hidden rounded-sm"
           onClick={clearLabelFilters}
         >
-          <span className="material-symbols-rounded text-[16px]">close</span>
+          <span className="material-symbols-rounded text-[12px]">close</span>
         </div>
       </div>
     </>
diff --git a/apps/space/components/issues/filters-render/priority/filter-priority-block.tsx b/apps/space/components/issues/filters-render/priority/filter-priority-block.tsx
index 94a3b59b56d..b38c72a376d 100644
--- a/apps/space/components/issues/filters-render/priority/filter-priority-block.tsx
+++ b/apps/space/components/issues/filters-render/priority/filter-priority-block.tsx
@@ -29,19 +29,19 @@ export const RenderIssuePriority = observer(({ priority }: { priority: IIssuePri
 
   return (
     <div
-      className={`flex-shrink-0 relative flex items-center flex-wrap gap-1 border px-[2px] py-0.5 rounded-full select-none ${
+      className={`flex-shrink-0 relative flex items-center flex-wrap gap-1 px-2 py-0.5 text-xs rounded-full select-none ${
         priority.className || ``
       }`}
     >
-      <div className="flex-shrink-0 w-[20px] h-[20px] flex justify-center items-center overflow-hidden rounded-full">
-        <span className="material-symbols-rounded text-[14px]">{priority?.icon}</span>
+      <div className="flex-shrink-0 flex justify-center items-center overflow-hidden rounded-full">
+        <span className="material-symbols-rounded text-xs">{priority?.icon}</span>
       </div>
-      <div className="text-sm font-medium whitespace-nowrap">{priority?.title}</div>
+      <div className="whitespace-nowrap">{priority?.title}</div>
       <div
-        className="flex-shrink-0 w-[20px] h-[20px] cursor-pointer flex justify-center items-center overflow-hidden rounded-full text-gray-500 hover:bg-gray-200/60 hover:text-gray-600"
+        className="flex-shrink-0 w-3 h-3 cursor-pointer flex justify-center items-center overflow-hidden rounded-full"
         onClick={removePriorityFromFilter}
       >
-        <span className="material-symbols-rounded text-[14px]">close</span>
+        <span className="material-symbols-rounded text-xs">close</span>
       </div>
     </div>
   );
diff --git a/apps/space/components/issues/filters-render/priority/index.tsx b/apps/space/components/issues/filters-render/priority/index.tsx
index ca2e6593f2b..8f0f369c2ec 100644
--- a/apps/space/components/issues/filters-render/priority/index.tsx
+++ b/apps/space/components/issues/filters-render/priority/index.tsx
@@ -32,23 +32,23 @@ const IssuePriorityFilter = observer(() => {
 
   return (
     <>
-      <div className="flex items-center gap-2 border border-gray-300 px-2 py-1 pr-1 rounded">
-        <div className="flex-shrink-0 font-medium">Priority</div>
+      <div className="flex items-center gap-2 border border-custom-border-300 px-2 py-1 rounded-full text-xs">
+        <div className="flex-shrink-0 text-custom-text-200">Priority</div>
         <div className="relative flex flex-wrap items-center gap-1">
           {issuePriorityFilters.map(
             (_priority: IIssuePriorityFilters, _index: number) =>
               store.issue.getUserSelectedFilter("priority", _priority.key) && (
-                <RenderIssuePriority priority={_priority} />
+                <RenderIssuePriority key={_priority.key} priority={_priority} />
               )
           )}
         </div>
         <div
-          className={`w-[20px] h-[20px] cursor-pointer flex justify-center items-center overflow-hidden rounded-sm text-gray-500 hover:bg-gray-200/60 hover:text-gray-600`}
+          className="flex-shrink-0 w-3 h-3 cursor-pointer flex justify-center items-center overflow-hidden rounded-sm"
           onClick={() => {
             clearPriorityFilters();
           }}
         >
-          <span className={`material-symbols-rounded text-[16px]`}>close</span>
+          <span className="material-symbols-rounded text-[12px]">close</span>
         </div>
       </div>
     </>
diff --git a/apps/space/components/issues/filters-render/state/filter-state-block.tsx b/apps/space/components/issues/filters-render/state/filter-state-block.tsx
index 8a015864fc0..3eb5dcd0703 100644
--- a/apps/space/components/issues/filters-render/state/filter-state-block.tsx
+++ b/apps/space/components/issues/filters-render/state/filter-state-block.tsx
@@ -32,20 +32,16 @@ export const RenderIssueState = observer(({ state }: { state: IIssueState }) =>
 
   if (stateGroup === null) return <></>;
   return (
-    <div
-      className={`flex-shrink-0 relative flex items-center flex-wrap gap-1 border px-[2px] py-0.5 rounded-full select-none ${
-        stateGroup.className || ``
-      }`}
-    >
-      <div className="flex-shrink-0 w-[20px] h-[20px] flex justify-center items-center overflow-hidden rounded-full">
+    <div className={`inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 ${stateGroup.className || ``}`}>
+      <div className="flex-shrink-0 w-3 h-3 flex justify-center items-center overflow-hidden rounded-full">
         <stateGroup.icon />
       </div>
-      <div className="text-sm font-medium whitespace-nowrap">{state?.name}</div>
+      <div className="text-xs font-medium whitespace-nowrap">{state?.name}</div>
       <div
-        className="flex-shrink-0 w-[20px] h-[20px] cursor-pointer flex justify-center items-center overflow-hidden rounded-full text-gray-500 hover:bg-gray-200/60 hover:text-gray-600"
+        className="flex-shrink-0 w-3 h-3 cursor-pointer flex justify-center items-center overflow-hidden rounded-full"
         onClick={removeStateFromFilter}
       >
-        <span className="material-symbols-rounded text-[14px]">close</span>
+        <span className="material-symbols-rounded text-xs">close</span>
       </div>
     </div>
   );
diff --git a/apps/space/components/issues/filters-render/state/index.tsx b/apps/space/components/issues/filters-render/state/index.tsx
index f4de23e87ed..e991f4a44a1 100644
--- a/apps/space/components/issues/filters-render/state/index.tsx
+++ b/apps/space/components/issues/filters-render/state/index.tsx
@@ -31,20 +31,22 @@ const IssueStateFilter = observer(() => {
 
   return (
     <>
-      <div className="flex items-center gap-2 border border-gray-300 px-2 py-1 pr-1 rounded">
-        <div className="flex-shrink-0 font-medium">State</div>
+      <div className="flex items-center gap-2 border border-custom-border-300 px-2 py-1 rounded-full text-xs">
+        <div className="flex-shrink-0 text-custom-text-200">State</div>
         <div className="relative flex flex-wrap items-center gap-1">
           {store?.issue?.states &&
             store?.issue?.states.map(
               (_state: IIssueState, _index: number) =>
-                store.issue.getUserSelectedFilter("state", _state.id) && <RenderIssueState state={_state} />
+                store.issue.getUserSelectedFilter("state", _state.id) && (
+                  <RenderIssueState key={_state.id} state={_state} />
+                )
             )}
         </div>
         <div
-          className="flex-shrink-0 w-[20px] h-[20px] cursor-pointer flex justify-center items-center overflow-hidden rounded-sm text-gray-500 hover:bg-gray-200/60 hover:text-gray-600"
+          className="flex-shrink-0 w-3 h-3 cursor-pointer flex justify-center items-center overflow-hidden rounded-sm"
           onClick={clearStateFilters}
         >
-          <span className="material-symbols-rounded text-[16px]">close</span>
+          <span className="material-symbols-rounded text-[12px]">close</span>
         </div>
       </div>
     </>
diff --git a/apps/space/components/issues/navbar/index.tsx b/apps/space/components/issues/navbar/index.tsx
index a9625a42037..033bb0fcee8 100644
--- a/apps/space/components/issues/navbar/index.tsx
+++ b/apps/space/components/issues/navbar/index.tsx
@@ -33,7 +33,7 @@ const IssueNavbar = observer(() => {
     <div className="px-5 relative w-full flex items-center gap-4">
       {/* project detail */}
       <div className="flex-shrink-0 flex items-center gap-2">
-        <div className="w-[32px] h-[32px] rounded-sm flex justify-center items-center bg-gray-100 text-[24px]">
+        <div className="w-[32px] h-[32px] rounded-sm flex justify-center items-center text-[24px]">
           {store?.project?.project && store?.project?.project?.emoji ? (
             renderEmoji(store?.project?.project?.emoji)
           ) : (
diff --git a/apps/space/components/issues/navbar/issue-board-view.tsx b/apps/space/components/issues/navbar/issue-board-view.tsx
index de46dc96b47..7bcb88eb1b3 100644
--- a/apps/space/components/issues/navbar/issue-board-view.tsx
+++ b/apps/space/components/issues/navbar/issue-board-view.tsx
@@ -49,10 +49,10 @@ export const NavbarIssueBoardView = observer(() => {
             store?.project?.workspaceProjectSettings?.views[_view?.key] && (
               <div
                 key={_view?.key}
-                className={`w-[28px] h-[28px] flex justify-center items-center rounded-sm cursor-pointer text-gray-500 ${
+                className={`w-[28px] h-[28px] flex justify-center items-center rounded-sm cursor-pointer ${
                   _view?.key === store?.issue?.currentIssueBoardView
-                    ? `bg-gray-200/60 text-gray-800`
-                    : `hover:bg-gray-200/60 text-gray-600`
+                    ? `bg-custom-background-200 text-custom-text-200`
+                    : `hover:bg-custom-background-200 text-custom-text-300`
                 }`}
                 onClick={() => handleCurrentBoardView(_view?.key)}
                 title={_view?.title}
diff --git a/apps/space/components/issues/peek-overview/full-screen-peek-view.tsx b/apps/space/components/issues/peek-overview/full-screen-peek-view.tsx
new file mode 100644
index 00000000000..cb622628bfe
--- /dev/null
+++ b/apps/space/components/issues/peek-overview/full-screen-peek-view.tsx
@@ -0,0 +1,61 @@
+import {
+  PeekOverviewHeader,
+  PeekOverviewIssueActivity,
+  PeekOverviewIssueDetails,
+  PeekOverviewIssueProperties,
+  TPeekOverviewModes,
+} from "components/issues/peek-overview";
+
+type Props = {
+  handleClose: () => void;
+  handleDeleteIssue: () => void;
+  handleUpdateIssue: (issue: Partial<any>) => Promise<void>;
+  issue: any;
+  mode: TPeekOverviewModes;
+  readOnly: boolean;
+  setMode: (mode: TPeekOverviewModes) => void;
+  workspaceSlug: string;
+};
+
+export const FullScreenPeekView: React.FC<Props> = ({
+  handleClose,
+  handleDeleteIssue,
+  handleUpdateIssue,
+  issue,
+  mode,
+  readOnly,
+  setMode,
+  workspaceSlug,
+}) => (
+  <div className="h-full w-full grid grid-cols-10 divide-x divide-custom-border-200 overflow-hidden">
+    <div className="h-full w-full flex flex-col col-span-7 overflow-hidden">
+      <div className="w-full p-5">
+        <PeekOverviewHeader
+          handleClose={handleClose}
+          issue={issue}
+          mode={mode}
+          setMode={setMode}
+          workspaceSlug={workspaceSlug}
+        />
+      </div>
+      <div className="h-full w-full px-6 overflow-y-auto">
+        {/* issue title and description */}
+        <div className="w-full">
+          <PeekOverviewIssueDetails issue={issue} workspaceSlug={workspaceSlug} />
+        </div>
+        {/* divider */}
+        <div className="h-[1] w-full border-t border-custom-border-200 my-5" />
+        {/* issue activity/comments */}
+        <div className="w-full">
+          <PeekOverviewIssueActivity workspaceSlug={workspaceSlug} issue={issue} />
+        </div>
+      </div>
+    </div>
+    <div className="col-span-3 h-full w-full overflow-y-auto">
+      {/* issue properties */}
+      <div className="w-full px-6 py-5">
+        <PeekOverviewIssueProperties issue={issue} mode="full" workspaceSlug={workspaceSlug} />
+      </div>
+    </div>
+  </div>
+);
diff --git a/apps/space/components/issues/peek-overview/header.tsx b/apps/space/components/issues/peek-overview/header.tsx
new file mode 100644
index 00000000000..f05b8ed1f33
--- /dev/null
+++ b/apps/space/components/issues/peek-overview/header.tsx
@@ -0,0 +1,94 @@
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { Icon } from "components/ui";
+// helpers
+import { copyTextToClipboard } from "helpers/string.helper";
+// types
+import { TPeekOverviewModes } from "./layout";
+import { ArrowRightAlt, CloseFullscreen, East, OpenInFull } from "@mui/icons-material";
+
+type Props = {
+  handleClose: () => void;
+  issue: any;
+  mode: TPeekOverviewModes;
+  setMode: (mode: TPeekOverviewModes) => void;
+  workspaceSlug: string;
+};
+
+const peekModes: {
+  key: TPeekOverviewModes;
+  icon: string;
+  label: string;
+}[] = [
+  { key: "side", icon: "side_navigation", label: "Side Peek" },
+  {
+    key: "modal",
+    icon: "dialogs",
+    label: "Modal Peek",
+  },
+  {
+    key: "full",
+    icon: "nearby",
+    label: "Full Screen Peek",
+  },
+];
+
+export const PeekOverviewHeader: React.FC<Props> = ({ issue, handleClose, mode, setMode, workspaceSlug }) => {
+  const { setToastAlert } = useToast();
+
+  const handleCopyLink = () => {
+    const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+
+    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link copied!",
+        message: "Issue link copied to clipboard",
+      });
+    });
+  };
+
+  return (
+    <div className="flex justify-between items-center">
+      <div className="flex items-center gap-4">
+        {mode === "side" && (
+          <button type="button" onClick={handleClose}>
+            <East
+              sx={{
+                fontSize: "14px",
+              }}
+            />
+          </button>
+        )}
+        {mode === "modal" || mode === "full" ? (
+          <button type="button" onClick={() => setMode("side")}>
+            <CloseFullscreen
+              sx={{
+                fontSize: "14px",
+              }}
+            />
+          </button>
+        ) : (
+          <button type="button" onClick={() => setMode("modal")}>
+            <OpenInFull
+              sx={{
+                fontSize: "14px",
+              }}
+            />
+          </button>
+        )}
+        <button type="button" className={`grid place-items-center ${mode === "full" ? "rotate-45" : ""}`}>
+          <Icon iconName={peekModes.find((m) => m.key === mode)?.icon ?? ""} />
+        </button>
+      </div>
+      {(mode === "side" || mode === "modal") && (
+        <div className="flex items-center gap-2">
+          <button type="button" onClick={handleCopyLink} className="-rotate-45">
+            <Icon iconName="link" />
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/apps/space/components/issues/peek-overview/index.ts b/apps/space/components/issues/peek-overview/index.ts
new file mode 100644
index 00000000000..168f63cf59c
--- /dev/null
+++ b/apps/space/components/issues/peek-overview/index.ts
@@ -0,0 +1,8 @@
+export * from "./full-screen-peek-view";
+export * from "./header";
+export * from "./issue-activity";
+export * from "./issue-details";
+export * from "./issue-properties";
+export * from "./layout";
+export * from "./side-peek-view";
+export * from "./issue-reaction";
diff --git a/apps/space/components/issues/peek-overview/issue-activity.tsx b/apps/space/components/issues/peek-overview/issue-activity.tsx
new file mode 100644
index 00000000000..1496bfc30c8
--- /dev/null
+++ b/apps/space/components/issues/peek-overview/issue-activity.tsx
@@ -0,0 +1,92 @@
+import useSWR, { mutate } from "swr";
+
+// mobx
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+// services
+// import issuesService from "services/issues.service";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+// import { AddComment, IssueActivitySection } from "components/issues";
+// fetch-keys
+// import { PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
+
+type Props = {
+  workspaceSlug: string;
+  issue: any;
+};
+
+export const PeekOverviewIssueActivity: React.FC<Props> = observer(({ workspaceSlug, issue }) => {
+  const { setToastAlert } = useToast();
+
+  const { user: userStore } = useMobxStore();
+
+  const user = userStore?.currentUser;
+
+  // const { data: issueActivity, mutate: mutateIssueActivity } = useSWR(
+  //   workspaceSlug && issue ? PROJECT_ISSUES_ACTIVITY(issue.id) : null,
+  //   workspaceSlug && issue
+  //     ? () => issuesService.getIssueActivities(workspaceSlug.toString(), issue?.project, issue?.id)
+  //     : null
+  // );
+
+  // const handleCommentUpdate = async (comment: any) => {
+  //   if (!workspaceSlug || !issue) return;
+
+  //   await issuesService
+  //     .patchIssueComment(
+  //       workspaceSlug as string,
+  //       issue.project,
+  //       issue.id,
+  //       comment.id,
+  //       comment,
+  //       user
+  //     )
+  //     .then(() => mutateIssueActivity());
+  // };
+
+  // const handleCommentDelete = async (commentId: string) => {
+  //   if (!workspaceSlug || !issue) return;
+
+  //   mutateIssueActivity((prevData: any) => prevData?.filter((p: any) => p.id !== commentId), false);
+
+  //   await issuesService
+  //     .deleteIssueComment(workspaceSlug as string, issue.project, issue.id, commentId, user)
+  //     .then(() => mutateIssueActivity());
+  // };
+
+  // const handleAddComment = async (formData: IIssueComment) => {
+  //   if (!workspaceSlug || !issue) return;
+
+  //   await issuesService
+  //     .createIssueComment(workspaceSlug.toString(), issue.project, issue.id, formData, user)
+  //     .then(() => {
+  //       mutate(PROJECT_ISSUES_ACTIVITY(issue.id));
+  //     })
+  //     .catch(() =>
+  //       setToastAlert({
+  //         type: "error",
+  //         title: "Error!",
+  //         message: "Comment could not be posted. Please try again.",
+  //       })
+  //     );
+  // };
+
+  return (
+    <div>
+      <h4 className="font-medium">Activity</h4>
+      {/* <div className="mt-4">
+        <IssueActivitySection
+          activity={issueActivity}
+          handleCommentUpdate={handleCommentUpdate}
+          handleCommentDelete={handleCommentDelete}
+        />
+        <div className="mt-4">
+          <AddComment onSubmit={handleAddComment} />
+        </div>
+      </div> */}
+    </div>
+  );
+});
diff --git a/apps/space/components/issues/peek-overview/issue-details.tsx b/apps/space/components/issues/peek-overview/issue-details.tsx
new file mode 100644
index 00000000000..b5b19db19f7
--- /dev/null
+++ b/apps/space/components/issues/peek-overview/issue-details.tsx
@@ -0,0 +1,18 @@
+// components
+import { IssueReaction } from "components/issues/peek-overview";
+// types
+
+type Props = {
+  issue: any;
+  workspaceSlug: string;
+};
+
+export const PeekOverviewIssueDetails: React.FC<Props> = ({ issue, workspaceSlug }) => (
+  <div className="space-y-2">
+    <h6 className="font-medium text-custom-text-200">
+      {issue.project_detail.identifier}-{issue.sequence_id}
+    </h6>
+    <h4 className="break-words text-2xl font-semibold">{issue.name}</h4>
+    {/* <IssueReaction workspaceSlug={workspaceSlug} issueId={issue.id} projectId={issue.project} /> */}
+  </div>
+);
diff --git a/apps/space/components/issues/peek-overview/issue-properties.tsx b/apps/space/components/issues/peek-overview/issue-properties.tsx
new file mode 100644
index 00000000000..d23cdcc255c
--- /dev/null
+++ b/apps/space/components/issues/peek-overview/issue-properties.tsx
@@ -0,0 +1,163 @@
+// headless ui
+import { Disclosure } from "@headlessui/react";
+// import { getStateGroupIcon } from "components/icons";
+// components
+import { TPeekOverviewModes } from "components/issues/peek-overview";
+// icons
+import { Icon } from "components/ui";
+import { copyTextToClipboard, addSpaceIfCamelCase } from "helpers/string.helper";
+import useToast from "hooks/use-toast";
+
+type Props = {
+  issue: any;
+  mode: TPeekOverviewModes;
+  workspaceSlug: string;
+};
+
+export const PeekOverviewIssueProperties: React.FC<Props> = ({ issue, mode, workspaceSlug }) => {
+  const { setToastAlert } = useToast();
+
+  const startDate = issue.start_date;
+  const targetDate = issue.target_date;
+
+  const minDate = startDate ? new Date(startDate) : null;
+  minDate?.setDate(minDate.getDate());
+
+  const maxDate = targetDate ? new Date(targetDate) : null;
+  maxDate?.setDate(maxDate.getDate());
+
+  const handleCopyLink = () => {
+    const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+
+    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link copied!",
+        message: "Issue link copied to clipboard",
+      });
+    });
+  };
+
+  return (
+    <div className={mode === "full" ? "divide-y divide-custom-border-200" : ""}>
+      {mode === "full" && (
+        <div className="flex justify-between gap-2 pb-3">
+          <h6 className="flex items-center gap-2 font-medium">
+            {/* {getStateGroupIcon(issue.state_detail.group, "16", "16", issue.state_detail.color)} */}
+            {issue.project_detail.identifier}-{issue.sequence_id}
+          </h6>
+          <div className="flex items-center gap-2">
+            <button type="button" onClick={handleCopyLink} className="-rotate-45">
+              <Icon iconName="link" />
+            </button>
+          </div>
+        </div>
+      )}
+      <div className={`space-y-4 ${mode === "full" ? "pt-3" : ""}`}>
+        <div className="flex items-center gap-2 text-sm">
+          <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
+            <Icon iconName="radio_button_checked" className="!text-base flex-shrink-0" />
+            <span className="flex-grow truncate">State</span>
+          </div>
+          <div className="w-3/4">
+            <button type="button" className="bg-custom-background-80 text-sm rounded px-2.5 py-0.5">
+              {issue.state && (
+                <div className="flex items-center gap-1.5 text-left text-custom-text-100">
+                  {/* {getStateGroupIcon(issue.state?.group ?? "backlog", "14", "14", issue.state?.color ?? "")}
+                  {addSpaceIfCamelCase(selectedState?.name ?? "")} */}
+                </div>
+              )}
+            </button>
+
+            {/* <SidebarStateSelect
+              value={issue.state}
+              onChange={(val: string) => onChange({ state: val })}
+              disabled={readOnly}
+            /> */}
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2 text-sm">
+          <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
+            <Icon iconName="signal_cellular_alt" className="!text-base flex-shrink-0" />
+            <span className="flex-grow truncate">Priority</span>
+          </div>
+          <div className="w-3/4">
+            {/* <button
+              type="button"
+              className={`flex items-center gap-1.5 text-left text-sm capitalize rounded px-2.5 py-0.5 ${
+                value === "urgent"
+                  ? "border-red-500/20 bg-red-500/20 text-red-500"
+                  : value === "high"
+                  ? "border-orange-500/20 bg-orange-500/20 text-orange-500"
+                  : value === "medium"
+                  ? "border-yellow-500/20 bg-yellow-500/20 text-yellow-500"
+                  : value === "low"
+                  ? "border-green-500/20 bg-green-500/20 text-green-500"
+                  : "bg-custom-background-80 border-custom-border-200"
+              }`}
+            >
+              <span className="grid place-items-center -my-1">{getPriorityIcon(value ?? "None", "!text-sm")}</span>
+              <span>{value ?? "None"}</span>
+            </button> */}
+          </div>
+        </div>
+        <div className="flex items-center gap-2 text-sm">
+          <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
+            <Icon iconName="calendar_today" className="!text-base flex-shrink-0" />
+            <span className="flex-grow truncate">Due date</span>
+          </div>
+          {/* <div>
+            {issue.target_date ? (
+              <CustomDatePicker
+                placeholder="Due date"
+                value={issue.target_date}
+                onChange={(val) =>
+                  onChange({
+                    target_date: val,
+                  })
+                }
+                className="bg-custom-background-100"
+                wrapperClassName="w-full"
+                minDate={minDate ?? undefined}
+                disabled={readOnly}
+              />
+            ) : (
+              <span className="text-custom-text-200">Empty</span>
+            )}
+          </div> */}
+        </div>
+        {/* <div className="flex items-center gap-2 text-sm">
+          <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
+            <Icon iconName="change_history" className="!text-base flex-shrink-0" />
+            <span className="flex-grow truncate">Estimate</span>
+          </div>
+          <div className="w-3/4">
+            <SidebarEstimateSelect
+              value={issue.estimate_point}
+              onChange={(val: number | null) => onChange({ estimate_point: val })}
+              disabled={readOnly}
+            />
+          </div>
+        </div> */}
+        {/* <Disclosure as="div">
+          {({ open }) => (
+            <>
+              <Disclosure.Button
+                as="button"
+                type="button"
+                className="flex items-center gap-1 text-sm text-custom-text-200"
+              >
+                Show {open ? "Less" : "More"}
+                <Icon iconName={open ? "expand_less" : "expand_more"} className="!text-base" />
+              </Disclosure.Button>
+              <Disclosure.Panel as="div" className="mt-4 space-y-4">
+                Disclosure Panel
+              </Disclosure.Panel>
+            </>
+          )}
+        </Disclosure> */}
+      </div>
+    </div>
+  );
+};
diff --git a/apps/space/components/issues/peek-overview/issue-reaction.tsx b/apps/space/components/issues/peek-overview/issue-reaction.tsx
new file mode 100644
index 00000000000..0005b541728
--- /dev/null
+++ b/apps/space/components/issues/peek-overview/issue-reaction.tsx
@@ -0,0 +1,90 @@
+// hooks
+
+// import useIssueReaction from "hooks/use-issue-reaction";
+
+// mobx
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+// components
+import { ReactionSelector } from "components/ui";
+// string helpers
+import { renderEmoji } from "helpers/emoji.helper";
+
+// types
+type Props = {
+  workspaceSlug?: string | string[];
+  projectId?: string | string[];
+  issueId?: string | string[];
+};
+
+export const IssueReaction: React.FC<Props> = observer((props) => {
+  const { workspaceSlug, projectId, issueId } = props;
+
+  // const { user } = useUserAuth();
+
+  const { user: userStore } = useMobxStore();
+
+  const user = userStore?.currentUser;
+
+  return null;
+
+  const { reactions, groupedReactions, handleReactionCreate, handleReactionDelete } = useIssueReaction(
+    workspaceSlug,
+    projectId,
+    issueId
+  );
+
+  const handleReactionClick = (reaction: string) => {
+    if (!workspaceSlug || !projectId || !issueId) return;
+
+    const isSelected = reactions?.some((r) => r.actor === user?.id && r.reaction === reaction);
+
+    if (isSelected) {
+      handleReactionDelete(reaction);
+    } else {
+      handleReactionCreate(reaction);
+    }
+  };
+
+  return (
+    <div className="flex gap-1.5 items-center mt-4">
+      <ReactionSelector
+        size="md"
+        position="top"
+        value={reactions?.filter((reaction) => reaction.actor === user?.id).map((r) => r.reaction) || []}
+        onSelect={handleReactionClick}
+      />
+
+      {Object.keys(groupedReactions || {}).map(
+        (reaction) =>
+          groupedReactions?.[reaction]?.length &&
+          groupedReactions[reaction].length > 0 && (
+            <button
+              type="button"
+              onClick={() => {
+                handleReactionClick(reaction);
+              }}
+              key={reaction}
+              className={`flex items-center gap-1 text-custom-text-100 text-sm h-full px-2 py-1 rounded-md ${
+                reactions?.some((r) => r.actor === user?.id && r.reaction === reaction)
+                  ? "bg-custom-primary-100/10"
+                  : "bg-custom-background-80"
+              }`}
+            >
+              <span>{renderEmoji(reaction)}</span>
+              <span
+                className={
+                  reactions?.some((r) => r.actor === user?.id && r.reaction === reaction)
+                    ? "text-custom-primary-100"
+                    : ""
+                }
+              >
+                {groupedReactions?.[reaction].length}{" "}
+              </span>
+            </button>
+          )
+      )}
+    </div>
+  );
+});
diff --git a/apps/space/components/issues/peek-overview/layout.tsx b/apps/space/components/issues/peek-overview/layout.tsx
new file mode 100644
index 00000000000..5da30125c24
--- /dev/null
+++ b/apps/space/components/issues/peek-overview/layout.tsx
@@ -0,0 +1,105 @@
+import React, { useState } from "react";
+
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+import { FullScreenPeekView, SidePeekView } from "components/issues/peek-overview";
+
+type Props = {
+  handleDeleteIssue: () => void;
+  handleUpdateIssue: (issue: Partial<any>) => Promise<void>;
+  issue: any | null;
+  isOpen: boolean;
+  onClose: () => void;
+  workspaceSlug: string;
+  readOnly: boolean;
+};
+
+export type TPeekOverviewModes = "side" | "modal" | "full";
+
+export const IssuePeekOverview: React.FC<Props> = ({
+  handleDeleteIssue,
+  handleUpdateIssue,
+  issue,
+  isOpen,
+  onClose,
+  workspaceSlug,
+  readOnly,
+}) => {
+  const [peekOverviewMode, setPeekOverviewMode] = useState<TPeekOverviewModes>("side");
+
+  const handleClose = () => {
+    onClose();
+    setPeekOverviewMode("side");
+  };
+
+  if (!issue || !isOpen) return null;
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        {/* add backdrop conditionally */}
+        {(peekOverviewMode === "modal" || peekOverviewMode === "full") && (
+          <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 overflow-y-auto">
+          <div className="relative h-full w-full">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel
+                className={`absolute z-20 bg-custom-background-100 ${
+                  peekOverviewMode === "side"
+                    ? "top-0 right-0 h-full w-1/2 shadow-custom-shadow-md"
+                    : peekOverviewMode === "modal"
+                    ? "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-[70%] w-3/5 rounded-lg shadow-custom-shadow-xl"
+                    : "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-[95%] w-[95%] rounded-lg shadow-custom-shadow-xl"
+                }`}
+              >
+                {(peekOverviewMode === "side" || peekOverviewMode === "modal") && (
+                  <SidePeekView
+                    handleClose={handleClose}
+                    handleDeleteIssue={handleDeleteIssue}
+                    handleUpdateIssue={handleUpdateIssue}
+                    issue={issue}
+                    mode={peekOverviewMode}
+                    readOnly={readOnly}
+                    setMode={(mode) => setPeekOverviewMode(mode)}
+                    workspaceSlug={workspaceSlug}
+                  />
+                )}
+                {peekOverviewMode === "full" && (
+                  <FullScreenPeekView
+                    handleClose={handleClose}
+                    handleDeleteIssue={handleDeleteIssue}
+                    handleUpdateIssue={handleUpdateIssue}
+                    issue={issue}
+                    mode={peekOverviewMode}
+                    readOnly={readOnly}
+                    setMode={(mode) => setPeekOverviewMode(mode)}
+                    workspaceSlug={workspaceSlug}
+                  />
+                )}
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/apps/space/components/issues/peek-overview/side-peek-view.tsx b/apps/space/components/issues/peek-overview/side-peek-view.tsx
new file mode 100644
index 00000000000..c573eec7855
--- /dev/null
+++ b/apps/space/components/issues/peek-overview/side-peek-view.tsx
@@ -0,0 +1,45 @@
+import {
+  PeekOverviewHeader,
+  PeekOverviewIssueActivity,
+  PeekOverviewIssueDetails,
+  PeekOverviewIssueProperties,
+  TPeekOverviewModes,
+} from "components/issues/peek-overview";
+
+type Props = {
+  handleClose: () => void;
+  issue: any;
+  mode: TPeekOverviewModes;
+  setMode: (mode: TPeekOverviewModes) => void;
+  workspaceSlug: string;
+};
+
+export const SidePeekView: React.FC<Props> = ({ handleClose, issue, mode, setMode, workspaceSlug }) => (
+  <div className="h-full w-full flex flex-col overflow-hidden">
+    <div className="w-full p-5">
+      <PeekOverviewHeader
+        handleClose={handleClose}
+        issue={issue}
+        mode={mode}
+        setMode={setMode}
+        workspaceSlug={workspaceSlug}
+      />
+    </div>
+    <div className="h-full w-full px-6 overflow-y-auto">
+      {/* issue title and description */}
+      <div className="w-full">
+        <PeekOverviewIssueDetails issue={issue} workspaceSlug={workspaceSlug} />
+      </div>
+      {/* issue properties */}
+      <div className="w-full mt-10">
+        <PeekOverviewIssueProperties issue={issue} mode={mode} workspaceSlug={workspaceSlug} />
+      </div>
+      {/* divider */}
+      <div className="h-[1] w-full border-t border-custom-border-200 my-5" />
+      {/* issue activity/comments */}
+      <div className="w-full pb-5">
+        <PeekOverviewIssueActivity workspaceSlug={workspaceSlug} issue={issue} />
+      </div>
+    </div>
+  </div>
+);
diff --git a/apps/space/components/ui/dropdown.tsx b/apps/space/components/ui/dropdown.tsx
index abbf5ef58bf..d1791de0038 100644
--- a/apps/space/components/ui/dropdown.tsx
+++ b/apps/space/components/ui/dropdown.tsx
@@ -59,7 +59,7 @@ const DropdownList: React.FC<DropDownListProps> = (props) => {
       >
         <Popover.Panel
           ref={ref}
-          className="absolute left-1/2 -translate-x-full z-10 mt-1 max-w-[9rem] origin-top-right select-none rounded-md bg-gray-50 border border-gray-300 text-xs shadow-lg focus:outline-none"
+          className="absolute left-1/2 -translate-x-full z-10 mt-1 max-w-[9rem] origin-top-right select-none rounded-md bg-custom-background-90 border border-custom-border-300 text-xs shadow-lg focus:outline-none"
         >
           <div className="w-full text-sm rounded-md shadow-lg">
             {items.map((item, index) => (
@@ -90,8 +90,8 @@ const DropdownItem: React.FC<DropdownItemProps> = (props) => {
             }
             setOpen((prev) => !prev);
           }}
-          className={`w-full flex items-center gap-1 rounded px-1 py-1.5 text-gray-600 hover:bg-gray-100 ${
-            isSelected ? "bg-gray-100 text-gray-800" : ""
+          className={`w-full flex items-center gap-1 rounded px-1 py-1.5 text-custom-text-200 hover:bg-custom-background-80 ${
+            isSelected ? "bg-custom-background-80" : ""
           }`}
         >
           {children && <ChevronLeftIcon className="h-5 w-5 transition-transform transform" />}
@@ -116,8 +116,8 @@ const Dropdown: React.FC<DropdownProps> = (props) => {
       {({ open }) => (
         <>
           <Popover.Button
-            className={`group flex items-center justify-between gap-2 rounded-md border border-gray-200 px-3 py-1.5 text-xs shadow-sm duration-300 focus:outline-none hover:text-custom-text-100 hover:bg-gray-100 ${
-              open ? "bg-gray-100 text-gray-800" : "text-gray-700"
+            className={`group flex items-center justify-between gap-2 rounded-md border border-custom-border-200 px-3 py-1.5 text-xs shadow-sm duration-300 focus:outline-none hover:text-custom-text-100 hover:bg-custom-background-90 ${
+              open ? "bg-custom-background-90 text-custom-text-100" : "text-custom-text-200"
             }`}
           >
             {typeof button === "function" ? button() : button}
@@ -132,7 +132,7 @@ const Dropdown: React.FC<DropdownProps> = (props) => {
             leaveFrom="opacity-100 translate-y-0"
             leaveTo="opacity-0 translate-y-1"
           >
-            <Popover.Panel className="absolute left-full -translate-x-full z-10 mt-1 w-36 origin-top-right select-none rounded-md bg-gray-50 border border-gray-300 text-xs shadow-lg focus:outline-none">
+            <Popover.Panel className="absolute left-full -translate-x-full z-10 mt-1 w-36 origin-top-right select-none rounded-md bg-custom-background-90 border border-custom-border-300 text-xs shadow-lg focus:outline-none">
               <div className="w-full">
                 {items.map((item, index) => (
                   <DropdownItem key={index} item={item} />
diff --git a/apps/space/components/ui/icon.tsx b/apps/space/components/ui/icon.tsx
new file mode 100644
index 00000000000..418186291b8
--- /dev/null
+++ b/apps/space/components/ui/icon.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+
+type Props = {
+  iconName: string;
+  className?: string;
+};
+
+export const Icon: React.FC<Props> = ({ iconName, className = "" }) => (
+  <span className={`material-symbols-rounded text-sm leading-5 font-light ${className}`}>{iconName}</span>
+);
diff --git a/apps/space/components/ui/index.ts b/apps/space/components/ui/index.ts
new file mode 100644
index 00000000000..ab077407375
--- /dev/null
+++ b/apps/space/components/ui/index.ts
@@ -0,0 +1,6 @@
+export * from "./dropdown";
+export * from "./input";
+export * from "./primary-button";
+export * from "./secondary-button";
+export * from "./icon";
+export * from "./reaction-selector";
diff --git a/apps/space/components/ui/input.tsx b/apps/space/components/ui/input.tsx
new file mode 100644
index 00000000000..b6be82ae579
--- /dev/null
+++ b/apps/space/components/ui/input.tsx
@@ -0,0 +1,37 @@
+import React, { forwardRef, Ref } from "react";
+
+// types
+interface Props extends React.InputHTMLAttributes<HTMLInputElement> {
+  mode?: "primary" | "transparent" | "trueTransparent";
+  error?: boolean;
+  inputSize?: "rg" | "lg";
+  fullWidth?: boolean;
+}
+
+export const Input = forwardRef((props: Props, ref: Ref<HTMLInputElement>) => {
+  const { mode = "primary", error, className = "", type, fullWidth = true, id, inputSize = "rg", ...rest } = props;
+
+  return (
+    <input
+      id={id}
+      ref={ref}
+      type={type}
+      className={`block rounded-md bg-transparent text-sm focus:outline-none placeholder-custom-text-400 ${
+        mode === "primary"
+          ? "rounded-md border border-custom-border-200"
+          : mode === "transparent"
+          ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary"
+          : mode === "trueTransparent"
+          ? "rounded border-none bg-transparent ring-0"
+          : ""
+      } ${error ? "border-red-500" : ""} ${error && mode === "primary" ? "bg-red-500/20" : ""} ${
+        fullWidth ? "w-full" : ""
+      } ${inputSize === "rg" ? "px-3 py-2" : inputSize === "lg" ? "p-3" : ""} ${className}`}
+      {...rest}
+    />
+  );
+});
+
+Input.displayName = "Input";
+
+export default Input;
diff --git a/apps/space/components/ui/primary-button.tsx b/apps/space/components/ui/primary-button.tsx
new file mode 100644
index 00000000000..b3e1b82ee0a
--- /dev/null
+++ b/apps/space/components/ui/primary-button.tsx
@@ -0,0 +1,35 @@
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  size?: "sm" | "md" | "lg";
+  outline?: boolean;
+  loading?: boolean;
+}
+
+export const PrimaryButton: React.FC<ButtonProps> = ({
+  children,
+  className = "",
+  onClick,
+  type = "button",
+  disabled = false,
+  loading = false,
+  size = "sm",
+  outline = false,
+}) => (
+  <button
+    type={type}
+    className={`${className} border border-custom-primary font-medium duration-300 ${
+      size === "sm"
+        ? "rounded px-3 py-2 text-xs"
+        : size === "md"
+        ? "rounded-md px-3.5 py-2 text-sm"
+        : "rounded-lg px-4 py-2 text-base"
+    } ${disabled ? "cursor-not-allowed opacity-70 hover:opacity-70" : ""} ${
+      outline
+        ? "bg-transparent text-custom-primary hover:bg-custom-primary hover:text-white"
+        : "text-white bg-custom-primary hover:border-opacity-90 hover:bg-opacity-90"
+    }  ${loading ? "cursor-wait" : ""}`}
+    onClick={onClick}
+    disabled={disabled || loading}
+  >
+    {children}
+  </button>
+);
diff --git a/apps/space/components/ui/reaction-selector.tsx b/apps/space/components/ui/reaction-selector.tsx
new file mode 100644
index 00000000000..8cbdef38ddb
--- /dev/null
+++ b/apps/space/components/ui/reaction-selector.tsx
@@ -0,0 +1,78 @@
+import { Fragment } from "react";
+
+// headless ui
+import { Popover, Transition } from "@headlessui/react";
+
+// helper
+import { renderEmoji } from "helpers/emoji.helper";
+
+// icons
+import { Icon } from "components/ui";
+
+const reactionEmojis = ["128077", "128078", "128516", "128165", "128533", "129505", "9992", "128064"];
+
+interface Props {
+  size?: "sm" | "md" | "lg";
+  position?: "top" | "bottom";
+  value?: string | string[] | null;
+  onSelect: (emoji: string) => void;
+}
+
+export const ReactionSelector: React.FC<Props> = (props) => {
+  const { value, onSelect, position, size } = props;
+
+  return (
+    <Popover className="relative">
+      {({ open, close: closePopover }) => (
+        <>
+          <Popover.Button
+            className={`${
+              open ? "" : "text-opacity-90"
+            } group inline-flex items-center rounded-md bg-custom-background-80 focus:outline-none`}
+          >
+            <span
+              className={`flex justify-center items-center rounded-md px-2 ${
+                size === "sm" ? "w-6 h-6" : size === "md" ? "w-7 h-7" : "w-8 h-8"
+              }`}
+            >
+              <Icon iconName="add_reaction" className="text-custom-text-100 scale-125" />
+            </span>
+          </Popover.Button>
+          <Transition
+            as={Fragment}
+            enter="transition ease-out duration-200"
+            enterFrom="opacity-0 translate-y-1"
+            enterTo="opacity-100 translate-y-0"
+            leave="transition ease-in duration-150"
+            leaveFrom="opacity-100 translate-y-0"
+            leaveTo="opacity-0 translate-y-1"
+          >
+            <Popover.Panel
+              className={`bg-custom-sidebar-background-100 absolute -left-2 z-10 ${
+                position === "top" ? "-top-12" : "-bottom-12"
+              }`}
+            >
+              <div className="bg-custom-sidebar-background-100 border border-custom-border-200 rounded-md p-1">
+                <div className="flex gap-x-1">
+                  {reactionEmojis.map((emoji) => (
+                    <button
+                      key={emoji}
+                      type="button"
+                      onClick={() => {
+                        onSelect(emoji);
+                        closePopover();
+                      }}
+                      className="flex select-none items-center justify-between rounded-md text-sm p-1 hover:bg-custom-sidebar-background-90"
+                    >
+                      {() => renderEmoji(emoji)}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </Popover.Panel>
+          </Transition>
+        </>
+      )}
+    </Popover>
+  );
+};
diff --git a/apps/space/components/ui/secondary-button.tsx b/apps/space/components/ui/secondary-button.tsx
new file mode 100644
index 00000000000..39f55c81a67
--- /dev/null
+++ b/apps/space/components/ui/secondary-button.tsx
@@ -0,0 +1,33 @@
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  size?: "sm" | "md" | "lg";
+  outline?: boolean;
+  loading?: boolean;
+}
+
+export const SecondaryButton: React.FC<ButtonProps> = ({
+  children,
+  className = "",
+  onClick,
+  type = "button",
+  disabled = false,
+  loading = false,
+  size = "sm",
+  outline = false,
+}) => (
+  <button
+    type={type}
+    className={`${className} border border-gray-200 font-medium duration-300 ${
+      size === "sm"
+        ? "rounded px-3 py-2 text-xs"
+        : size === "md"
+        ? "rounded-md px-3.5 py-2 text-sm"
+        : "rounded-lg px-4 py-2 text-base"
+    } ${disabled ? "cursor-not-allowed border-gray-200 bg-gray-100" : ""} ${
+      outline ? "bg-transparent hover:bg-gray-100" : "bg-gray-100 hover:border-opacity-70 hover:bg-opacity-70"
+    } ${loading ? "cursor-wait" : ""}`}
+    onClick={onClick}
+    disabled={disabled || loading}
+  >
+    {children}
+  </button>
+);
diff --git a/apps/space/components/ui/toast-alert.tsx b/apps/space/components/ui/toast-alert.tsx
new file mode 100644
index 00000000000..5d0c0123c98
--- /dev/null
+++ b/apps/space/components/ui/toast-alert.tsx
@@ -0,0 +1,67 @@
+import React from "react";
+// hooks
+import {
+  CheckCircleIcon,
+  ExclamationTriangleIcon,
+  InformationCircleIcon,
+  XCircleIcon,
+  XMarkIcon,
+} from "@heroicons/react/24/outline";
+import useToast from "hooks/use-toast";
+// icons
+
+const ToastAlerts = () => {
+  const { alerts, removeAlert } = useToast();
+
+  if (!alerts) return null;
+
+  return (
+    <div className="pointer-events-none fixed top-5 right-5 z-50 h-full w-80 space-y-5 overflow-hidden">
+      {alerts.map((alert) => (
+        <div className="relative overflow-hidden rounded-md text-white" key={alert.id}>
+          <div className="absolute top-1 right-1">
+            <button
+              type="button"
+              className="pointer-events-auto inline-flex rounded-md p-1.5 focus:outline-none focus:ring-2 focus:ring-offset-2"
+              onClick={() => removeAlert(alert.id)}
+            >
+              <span className="sr-only">Dismiss</span>
+              <XMarkIcon className="h-5 w-5" aria-hidden="true" />
+            </button>
+          </div>
+          <div
+            className={`px-2 py-4 ${
+              alert.type === "success"
+                ? "bg-[#06d6a0]"
+                : alert.type === "error"
+                ? "bg-[#ef476f]"
+                : alert.type === "warning"
+                ? "bg-[#e98601]"
+                : "bg-[#1B9aaa]"
+            }`}
+          >
+            <div className="flex items-center gap-x-3">
+              <div className="flex-shrink-0">
+                {alert.type === "success" ? (
+                  <CheckCircleIcon className="h-8 w-8" aria-hidden="true" />
+                ) : alert.type === "error" ? (
+                  <XCircleIcon className="h-8 w-8" />
+                ) : alert.type === "warning" ? (
+                  <ExclamationTriangleIcon className="h-8 w-8" aria-hidden="true" />
+                ) : (
+                  <InformationCircleIcon className="h-8 w-8" />
+                )}
+              </div>
+              <div>
+                <p className="font-semibold">{alert.title}</p>
+                {alert.message && <p className="mt-1 text-xs">{alert.message}</p>}
+              </div>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default ToastAlerts;
diff --git a/apps/space/constants/data.ts b/apps/space/constants/data.ts
index 21369d3a007..e6e51da4990 100644
--- a/apps/space/constants/data.ts
+++ b/apps/space/constants/data.ts
@@ -56,31 +56,31 @@ export const issuePriorityFilters: IIssuePriorityFilters[] = [
   {
     key: "urgent",
     title: "Urgent",
-    className: "border border-gray-200 text-red-500",
+    className: "bg-red-500/10 text-red-500",
     icon: "error",
   },
   {
     key: "high",
     title: "High",
-    className: "border border-gray-200 text-orange-500",
+    className: "bg-orange-500/10 text-orange-500",
     icon: "signal_cellular_alt",
   },
   {
     key: "medium",
     title: "Medium",
-    className: "border border-gray-200 text-yellow-500",
+    className: "bg-yellow-500/10 text-yellow-500",
     icon: "signal_cellular_alt_2_bar",
   },
   {
     key: "low",
     title: "Low",
-    className: "border border-gray-200 text-green-500",
+    className: "bg-green-500/10 text-green-500",
     icon: "signal_cellular_alt_1_bar",
   },
   {
     key: "none",
     title: "None",
-    className: "border border-gray-200 text-gray-500",
+    className: "bg-gray-500/10 text-gray-500",
     icon: "block",
   },
 ];
@@ -111,35 +111,35 @@ export const issueGroups: IIssueGroup[] = [
     key: "backlog",
     title: "Backlog",
     color: "#d9d9d9",
-    className: `border-[#d9d9d9]/50 text-[#d9d9d9] bg-[#d9d9d9]/10`,
+    className: `text-[#d9d9d9] bg-[#d9d9d9]/10`,
     icon: BacklogStateIcon,
   },
   {
     key: "unstarted",
     title: "Unstarted",
     color: "#3f76ff",
-    className: `border-[#3f76ff]/50 text-[#3f76ff] bg-[#3f76ff]/10`,
+    className: `text-[#3f76ff] bg-[#3f76ff]/10`,
     icon: UnstartedStateIcon,
   },
   {
     key: "started",
     title: "Started",
     color: "#f59e0b",
-    className: `border-[#f59e0b]/50 text-[#f59e0b] bg-[#f59e0b]/10`,
+    className: `text-[#f59e0b] bg-[#f59e0b]/10`,
     icon: StartedStateIcon,
   },
   {
     key: "completed",
     title: "Completed",
     color: "#16a34a",
-    className: `border-[#16a34a]/50 text-[#16a34a] bg-[#16a34a]/10`,
+    className: `text-[#16a34a] bg-[#16a34a]/10`,
     icon: CompletedStateIcon,
   },
   {
     key: "cancelled",
     title: "Cancelled",
     color: "#dc2626",
-    className: `border-[#dc2626]/50 text-[#dc2626] bg-[#dc2626]/10`,
+    className: `text-[#dc2626] bg-[#dc2626]/10`,
     icon: CancelledStateIcon,
   },
 ];
diff --git a/apps/space/constants/workspace.ts b/apps/space/constants/workspace.ts
new file mode 100644
index 00000000000..5ae5a7cf4f6
--- /dev/null
+++ b/apps/space/constants/workspace.ts
@@ -0,0 +1,12 @@
+export const USER_ROLES = [
+  { value: "Product / Project Manager", label: "Product / Project Manager" },
+  { value: "Development / Engineering", label: "Development / Engineering" },
+  { value: "Founder / Executive", label: "Founder / Executive" },
+  { value: "Freelancer / Consultant", label: "Freelancer / Consultant" },
+  { value: "Marketing / Growth", label: "Marketing / Growth" },
+  { value: "Sales / Business Development", label: "Sales / Business Development" },
+  { value: "Support / Operations", label: "Support / Operations" },
+  { value: "Student / Professor", label: "Student / Professor" },
+  { value: "Human Resources", label: "Human Resources" },
+  { value: "Other", label: "Other" },
+];
diff --git a/apps/space/contexts/toast.context.tsx b/apps/space/contexts/toast.context.tsx
new file mode 100644
index 00000000000..a382b4fd216
--- /dev/null
+++ b/apps/space/contexts/toast.context.tsx
@@ -0,0 +1,97 @@
+import React, { createContext, useCallback, useReducer } from "react";
+// uuid
+import { v4 as uuid } from "uuid";
+// components
+import ToastAlert from "components/ui/toast-alert";
+
+export const toastContext = createContext<ContextType>({} as ContextType);
+
+// types
+type ToastAlert = {
+  id: string;
+  title: string;
+  message?: string;
+  type: "success" | "error" | "warning" | "info";
+};
+
+type ReducerActionType = {
+  type: "SET_TOAST_ALERT" | "REMOVE_TOAST_ALERT";
+  payload: ToastAlert;
+};
+
+type ContextType = {
+  alerts?: ToastAlert[];
+  removeAlert: (id: string) => void;
+  setToastAlert: (data: {
+    title: string;
+    type?: "success" | "error" | "warning" | "info" | undefined;
+    message?: string | undefined;
+  }) => void;
+};
+
+type StateType = {
+  toastAlerts?: ToastAlert[];
+};
+
+type ReducerFunctionType = (state: StateType, action: ReducerActionType) => StateType;
+
+export const initialState: StateType = {
+  toastAlerts: [],
+};
+
+export const reducer: ReducerFunctionType = (state, action) => {
+  const { type, payload } = action;
+
+  switch (type) {
+    case "SET_TOAST_ALERT":
+      return {
+        ...state,
+        toastAlerts: [...(state.toastAlerts ?? []), payload],
+      };
+
+    case "REMOVE_TOAST_ALERT":
+      return {
+        ...state,
+        toastAlerts: state.toastAlerts?.filter((toastAlert) => toastAlert.id !== payload.id),
+      };
+
+    default: {
+      return state;
+    }
+  }
+};
+
+export const ToastContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  const removeAlert = useCallback((id: string) => {
+    dispatch({
+      type: "REMOVE_TOAST_ALERT",
+      payload: { id, title: "", message: "", type: "success" },
+    });
+  }, []);
+
+  const setToastAlert = useCallback(
+    (data: { title: string; type?: "success" | "error" | "warning" | "info"; message?: string }) => {
+      const id = uuid();
+      const { title, type, message } = data;
+      dispatch({
+        type: "SET_TOAST_ALERT",
+        payload: { id, title, message, type: type ?? "success" },
+      });
+
+      const timer = setTimeout(() => {
+        removeAlert(id);
+        clearTimeout(timer);
+      }, 3000);
+    },
+    [removeAlert]
+  );
+
+  return (
+    <toastContext.Provider value={{ setToastAlert, removeAlert, alerts: state.toastAlerts }}>
+      <ToastAlert />
+      {children}
+    </toastContext.Provider>
+  );
+};
diff --git a/apps/space/helpers/emoji.helper.tsx b/apps/space/helpers/emoji.helper.tsx
new file mode 100644
index 00000000000..7c9f3cfcb2d
--- /dev/null
+++ b/apps/space/helpers/emoji.helper.tsx
@@ -0,0 +1,56 @@
+export const getRandomEmoji = () => {
+  const emojis = [
+    "8986",
+    "9200",
+    "128204",
+    "127773",
+    "127891",
+    "127947",
+    "128076",
+    "128077",
+    "128187",
+    "128188",
+    "128512",
+    "128522",
+    "128578",
+  ];
+
+  return emojis[Math.floor(Math.random() * emojis.length)];
+};
+
+export const renderEmoji = (
+  emoji:
+    | string
+    | {
+        name: string;
+        color: string;
+      }
+) => {
+  if (!emoji) return;
+
+  if (typeof emoji === "object")
+    return (
+      <span style={{ color: emoji.color }} className="material-symbols-rounded text-lg">
+        {emoji.name}
+      </span>
+    );
+  else return isNaN(parseInt(emoji)) ? emoji : String.fromCodePoint(parseInt(emoji));
+};
+
+export const groupReactions: (reactions: any[], key: string) => { [key: string]: any[] } = (
+  reactions: any,
+  key: string
+) => {
+  const groupedReactions = reactions.reduce(
+    (acc: any, reaction: any) => {
+      if (!acc[reaction[key]]) {
+        acc[reaction[key]] = [];
+      }
+      acc[reaction[key]].push(reaction);
+      return acc;
+    },
+    {} as { [key: string]: any[] }
+  );
+
+  return groupedReactions;
+};
diff --git a/apps/space/helpers/string.helper.ts b/apps/space/helpers/string.helper.ts
new file mode 100644
index 00000000000..1b676ca571b
--- /dev/null
+++ b/apps/space/helpers/string.helper.ts
@@ -0,0 +1,31 @@
+export const addSpaceIfCamelCase = (str: string) => str.replace(/([a-z])([A-Z])/g, "$1 $2");
+
+const fallbackCopyTextToClipboard = (text: string) => {
+  var textArea = document.createElement("textarea");
+  textArea.value = text;
+
+  // Avoid scrolling to bottom
+  textArea.style.top = "0";
+  textArea.style.left = "0";
+  textArea.style.position = "fixed";
+
+  document.body.appendChild(textArea);
+  textArea.focus();
+  textArea.select();
+
+  try {
+    // FIXME: Even though we are using this as a fallback, execCommand is deprecated 👎. We should find a better way to do this.
+    // https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
+    var successful = document.execCommand("copy");
+  } catch (err) {}
+
+  document.body.removeChild(textArea);
+};
+
+export const copyTextToClipboard = async (text: string) => {
+  if (!navigator.clipboard) {
+    fallbackCopyTextToClipboard(text);
+    return;
+  }
+  await navigator.clipboard.writeText(text);
+};
diff --git a/apps/space/hooks/use-timer.tsx b/apps/space/hooks/use-timer.tsx
new file mode 100644
index 00000000000..1edf4931ab0
--- /dev/null
+++ b/apps/space/hooks/use-timer.tsx
@@ -0,0 +1,19 @@
+import { useState, useEffect } from "react";
+
+const TIMER = 30;
+
+const useTimer = (initialValue: number = TIMER) => {
+  const [timer, setTimer] = useState(initialValue);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTimer((prev) => prev - 1);
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return { timer, setTimer };
+};
+
+export default useTimer;
diff --git a/apps/space/hooks/use-toast.tsx b/apps/space/hooks/use-toast.tsx
new file mode 100644
index 00000000000..6de3c104c67
--- /dev/null
+++ b/apps/space/hooks/use-toast.tsx
@@ -0,0 +1,9 @@
+import { useContext } from "react";
+import { toastContext } from "contexts/toast.context";
+
+const useToast = () => {
+  const toastContextData = useContext(toastContext);
+  return toastContextData;
+};
+
+export default useToast;
diff --git a/apps/space/public/logos/github-black.png b/apps/space/public/logos/github-black.png
new file mode 100644
index 0000000000000000000000000000000000000000..7a7a82474ff108faf2c883c5616c83160c889c3c
GIT binary patch
literal 14032
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
F|34@0LH+;$

literal 0
HcmV?d00001

diff --git a/apps/space/public/logos/github-square.png b/apps/space/public/logos/github-square.png
new file mode 100644
index 0000000000000000000000000000000000000000..527ba79f25878c988d6abb3af215b1f5f4d98ea6
GIT binary patch
literal 2352
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
W&#HdDYlN8q0000<MNUMnLSTZm>Vy*j

literal 0
HcmV?d00001

diff --git a/apps/space/public/logos/github-white.png b/apps/space/public/logos/github-white.png
new file mode 100644
index 0000000000000000000000000000000000000000..dbb2b578cb6bc41059e08eea448a9a88d78d6b9a
GIT binary patch
literal 16559
zcmbWe2UJr_+bFz~5KuZINbg0E-XS!lhN^T6z4sm>AcTVo5dj71MMXq<6+~*(D54Y*
zkkBNe0#buWQQ95OdEa+^-@m^9-gPf)v9kB<nWxRnGfx}*c?%;3S}s}$f*8=o`c@DG
z2aj;*7&Z9$g&p|=evXG2UkryJX0fAxSYnGA8w4TQeQg{f9L&u$+=ByUTs?x_JY}$f
zA)q$|Y3g7@T;2UWBLv($y?ukUgx1=-g#>&(w1n)H&E?EP^gMlhjibXnt)ne$+@t;7
z)jfoCv;{P=8UR3`XN0Q&HZUM4Tm!2m^fz1$@O;!PD<trDmk56?p|eK_1su%J3+M%h
zc?zh=$Vt1)$teh^s>{f$C@HDPNeL*(DagsnDa*<$NXx5e$SG;as|x(<PY7TO^YGHJ
z(l`7UF7T!$<P#AQq9H3A6%{2Dr6>~|<}E9)uC6XCry#4KAPss*hhGhfaK%aog$w^1
zg1%?Cdzf!Xgl}+=z!5}Ox8TSKEg?YZKP&`>{0D4M_`k#i1SX4h4Uv_Xkvn4P?~Wes
z|LGSJ85Zz2au0V|&j8Or&!C8K&{zIHeM5YLBZ9+yg8zR&|L606LjXi;ZvGz}|06Ad
zf&W1f9$|n1Z2U_g|6}iPo2wz7vR0nq!I5F^o(32|rtlFrAsTvNo~{wWVK%|R0so$;
z^ZzDUKtWzcLEyB#Z;(fDRJg={8Q`h!8sVuW1ZEA)m%OyRnvJ}IhJvDoyvi9lWer8S
zf4Z6nd-!@?{hzujDr?9q|F^DS$#}R%xc(nId$?<O1&0N?0)~A9UA;YJLxQ}81pXsN
z4ZYxi;4pv~P^b7`+tGS@=fi@%d;`FTa4Vy80%!w06?t_P6=?+-`M=3EH`hQ1g-5ss
zxqG7ZwS<6hWPE)+G}P4G)#Q{s)TEW<<-MepJd_lq)#TMYrInQ3<Xqk5mEGOsJpMgi
zKiEC;XbJp#yvP6Lc*`(fumxQM{-5C-ZOo&!qhahD4rcZ0zqXFGXXwA40(=GjUM?E0
z?nm1|OUV6b{yhN)|1|slKTF`B@ligW0O<c_UHsE6JlHED$~DaMtT&L>|8d>P0^((l
zHtauq$o_v>{QKK~+1&r`4m8Hm<9}2Yc=?aA^9%wSE)1x$n{X`_2tw(g_0QU13s<J2
zavg0u57)O#Sp;--qf>E0y!tFB4GfTUPIQugb>{f*j!)V)l#G2oUuS<_>NKVvx)o-t
z`xw0@V6sMa!Z>e+e}+@c(<^KsuX8&pXM5@DfTD=kz(H=G(^AZ*OEEPMzkG2OL0dgD
zd(S9<&ZzW;381ZLE<(l`BWKy643Wq?NSp|oS4kL!EA3){DH=H`8ah4dE=E?X{LI(-
zd5PD-J#Q@keFwDaG#5FjP=_SEygSxOxF+m;Dz$?>y~8kmMcBY9(E&2vluul!AA^5F
zs=!qcE$|jt3k?Q7=YhO(<2T_d;RfM5VU*CFz>S;4wI{o|h1%(&-EU6O=vES$*MG#Y
zl3(a2btw;3tQ`v|J|+FS8@GXX`$Ajd(n{5u#&NCQHN(UUCcx&OyhGK^IrMz(xF#PK
z>s3zuhno^ZuG7Cu33j7;L2W9TjKnGB{vc=&#kYAAI&u36D++p%gx7@NgyCeC>+!HC
z$W%cOZSDaRsF`4vJ4NDDgVe6)=Gb4m!Vt@}!w@19f=XjI&TNG4*s1W6PGYGjW@L3D
zZH#h{5ZQ=enJ}E-A9_#sQW_F>GQBqtp_#T5(QO~Zll4u>?H<{KtT2nGs%VmeMhun|
zR0<ERT)s}JnS^Okq~DY=1ieocwtWxRb(CWuv8x@!($&WW@r;i26TB1L@hpEmejZvH
zb`dJC@q)D@>L91T3Y;o*QWAs{4q*dAn6vjTy@u-sHZs=BQVd<Xze)M!%)p$X17l6h
zY2{)hE<Yfd6f*Bim`uJAYc(!IbHJ^ZMtbnp&?eOb_Mj|}dKuEZzf<Zwc5Qu>VFQ0R
zVGVJL+y+wy;>ve(cau5nPVU(%ZMz8Z7*_MPYOCIQ>c<XMHjNV>Me~blZ<?Bi!YEF&
zEPC7A=cNISK{u1Vf6c&n@(T?lUq&TZo`_)}kt<cCAe&R%kSvw9abcNwbH5{Ta61ZD
z5cbHJ9eSsng1xf#l~CJzu~f1M(NTcy_@G67?<HK9laIcmh*WB{*melhMqbI_)t`2Q
zJ*cE-Nm}NCEoT%OR6dG_>I5038(r;w01PcZ2-XR82yRjDyZK~lvMpg9d%eL#Ng9Q_
z<gc>sJ10Y)C;c|<oJel<UKLt>IQ~3z#4Zgg_X$sU246EB5Nz%>!dW7oiO-);ae&HC
z7a;hB`Mzh`q^&_~u!AgK{eExQgNljcJ3<uFHy*2;Js1`d;uOZHoQuR!%Tp~QVi6=6
z^^_6MQ;0gMgX@-z<(BNw;+PDv*L$^JcC-gcJf3&>ma$}xA^~msnUX!+XcSTL6;2p|
z)&5L;jO`^+I;iGd8)1krsx~M)I_-{++4PzHoFxY4314kdz1YoW`8_j#?)>cMeU4CB
z(=(wAI6EZ-R=J@u{<L~ZX$7}fF~<&9y_$N89}%wms0=m;rNQUE8Q!(|>o*}K;XceX
z{82fh6hyUdJi~<RZ%j0nobFCY#2e9!y0SylTg+q*%_7Uil6YtkA@h#0ghvLxTsBT@
z=s4vzFB>^3qt6{e#iurcPJ<!_4+xf_p7o{jbU1H#cRypvq8j`IFO$F)(;)-qAS3&k
z#*oThg3p-|7(2A0%7E1hQLGORV@Gec$PU?c@a-mj3a5QA-6CB1=W4IIi1MH<0Y*&F
z^AkMNfyqb4;vJ?@vZ}XAZ{{046?7JwIN5w#7+PuKZx~7{_-!otF4pZ){fy}R`2-%A
zPkLkmYeHuIMvhIjy8dLC5TC*b7dzCiO4V^oZRhLp-isp5ldQ=tbGBGJ<FD$-4*~wH
zgDb0GHm&9h4VTY^d1IIv-mu{2CepE2dIp@WZgwWC_;fD|aNS1gZuC)go$c%CHyaSD
znDjakIHX#y<;U{`%Kx4~aK@!JB^rOEt)<~RekG4rzcZBT0q4!+qUW^)07Wa%?CFKN
z9^_xC<YT(~HOM_$k~k_^WOKoiV2x{UO!RSMhc>r33YT(5%u<qjs4aULOV-tq=Pea+
zb?|s1fS}kfGErZ5A~4?%Q1@s2#ExS9RSYv)@@+TH2zJ=VSR$VWjl566RW)qnjK~zQ
z22Q2`uz+YSGejDc_Kr~qEvj)V_eA|#1?&m*vj$d3zYNICko;*+ZXo>iji<;9cE_KN
z%%kaOYPCH@zid&>bRM4M`cw0+1GD?QY(>f^@d@3*6UJ_^^PPg^PQvl=vmz4X%nf6`
zsHVh-yVlTX{&5~UO)bFIXkP<iBjNS<*|wMP2O3K!=$u>n0e<Dk;|&6T(v}4rU0~-^
zi*VhrCLl7aerae6lIdgoh^d90o=L%l0}e`^su{09nyM({$&1iEZ!U`H)Ra*MbtpY$
z2KzL`w-A21CxU#67@C_=`eL6Rt5UC|ZnWe8oecg(Ro!_6)O0U_gnBJbMe6}OUp-Ek
zN#H$deP4)<t#6Y>8D9o{y%`%w!C=3l{i;lpR}$BH89!39L$4i}T91(g02j?u-S`W3
z+qAhtbhwI1s#Xq%GoUq+7)Zbn%*W5>_w_(eytv7J%X^{~CQBy**VvC5;VvQVP|k^}
z15xzoCEivz));fAtP$eq(<Z35p1mRBnSVBbbC0qt08W+<-H3$4_l$z*wi##qHTVb(
z9qynbne@dn!$ww|{2O+y0a}=TAL<;Bu55D0={4yo-AIRR&2bVeoAit`qJP?u?Z*Wd
z2jDKFTcTSJvqhA9gcGcr^hWZKgl`zcz&ik$>#YUhH|X>Z?&3DdJotOJ{Jx0tuw1=z
zh;3NfB|z7V7*WPL=%+BczvYfv>B`M-Jk4LNp);4$Ns}`J&Kdc^DxnUOQ=ruyR^Opc
zWV#izYibqKCpxjEoEbiH3rWZwCp^cN)`>I^84}r7!HkaFK<efmFSO`mMQ2R-a+8$`
zXOU76REFplx7f}E+pm_emfX@k+~x$)v!M1?GQlde$unXNjDNzvu^J7dM9xO&05gQg
z_!q2b^gEpVop7cR@cXgjuLU}diYji{3T#gcbzP)_osYWkE^mpSqZGskT}i6a6-B$U
zG$59x$In)dG)v$v>SuY+%c8lIGZ(nMJZUPda%gda<WmGYuyoPQO>9F(5p%sb88(O?
zwlxTZRavu-?<!$!YosRsAPgSKnCpv9@(|8$=^U(HI>Z-q3~lvD^H{4CN<VMH393f!
zaa#h8Hs@trn(o%sjLa!R!wEXB0OjJ$C4K&n6N-q5D^M&q)6QKHhM-d=vc8X7*r8xJ
zV=qAF*P)lJ{Wx->mD)v|JhjZ6QEE5NsV0lkzdK<ERT~Cuv<HFxZB;d87;q{!7;~rO
zX&^1x2P`)9>&rO{?w1~!BMD8o#3RXES`sL!^S#kx1`B|ubd$D1vPB+qP^-X$-Z3iJ
zDmEfcx^PiwmiJ;pg+qqkE}fWN3(}fR{<fL@d#&HF%fzn>h0k0)KnM6K{>j(*8L85M
zjTU!%I2o-j&+VSP5RReFo-@qLS2+ps!!d6eFN7yS-PA#AUt{>FH2w0%^y=ScEUs#k
z`3cTBR~_|Z{Z>ZH2t5g>*otelFam#yx4midZk1WWmT3!%cuVGLsriiK83@=<2tM_n
z8W8E)tu^rqjzg+A`aP;0?$^~;GpuTzxNYC|X<T@t9(`pmk`Ul#JXsSb9;HU9J@GjT
zMRp<o7Cw}&(8yseI%v>;;(XII`L3?{vW$zKi!0{NS*7RDj(TWco!B$f_w<Zqi<1Z%
z#O3T*>53{DSe$;uA8-4RP9`{iIa$Men{IZ8{KnT0M$shGj0<v+g<N)N>s0m4Sa{5;
zQ6chom6T1BnNZFm?8UY}&gu_6v_)~KiJ|nn^Btf7sw?+-O9ZuzrEGfZHRQD@)NaLQ
zR%=1jU9ecTRx$aWAH-;=X5tO;>q6?#(^Om;?1@K`&z-&t8A!t6iDASp^XPgBQPYaG
z@OZ~b5**9)yhw)-m033<^5jFkcJl>Syk!&90OJs|H|&&m634o?TXFzj2uB*(`28iS
z*!$Qi3=`RSv8jBS!;R}))t1Xo!z(l&OC@ku30Z)XZ$$+0COtD3_J+rE+_=t+CgY2>
zG+in`+ho+=d&D7@0qJM?j$O&(EjeW_0o_b?=a{BEiP}ikf)<0AN|@Dh)%q{^wOc31
zvYh!-ASb=$=4NxQ^Er-W+ptySZ%vCk1vByl+@#=(cJn>1k+TT?_}`Wl=BuKgzQx`p
zWj{l!2pOK9I{q|Dmb$Bm*UdKnJXCES;JU=*yw*j(=Z#5*nTr=!TvMbhOr8FCPg<1y
zW9NOZ+i%Uk1-Q-IZhCR#nijq~f7#rD3af-U*w>Ii5l%`8wkTbrr|3_m+4OI6lOGa~
zd1a#FajZ=Ur9S4NsL@N)bhv9c1kjRwC&=HHnUU&v2NA45@$Uz7Y6ub&R)OKOcpOsP
zgU06p0<T@&vZ#ra%Oowu2Zg1TsTW~ttNDeBd3KmbSA$M(E{1^<j>(q*uh;IU4&we@
z`FYx+knQ~Y*Ts>1upJJ}L88x3%Av<iyzMZGMX%ES+nc+qQLGfh5;?7#TagFMyC+(Y
zUp|~WaqXh?Xfs6O!d}KC-}Li`$@xi8cxS0z+GloK=eI2dkzWy1h>Hi8;@+LPvjkCZ
zsFYY%6=_(&fK5wk{px(U3j2gyea~q1a1=MjJkQr>ZvK(S6mJ<pXBgM1A^-I97!y@w
z6UUC&y5iVlN9m}CTK-&>nB(g{m>P{K4R%PD=0F^!uUB+TQv#)*k(wY24fZlxWf<st
zhp)U{YP&lYTO!PVP5R20v9J4|^^vnuB^(^r`knrM<#EZpJ60xKmx@=`4E$wEUK#N&
zSgD-W?endQuM?o{nJB*ut7mNRIhUx;gSE#bdsrg6&V{S6UNTdve2-ZktEIH1<$BkS
z_G{n;T@cx_w1&>_4?Y_bZkOKPZ_Cb|KMcj(@#q#R4*K9S2aobd;;?;IP!~EcG1m8d
z9Og$>o1OZVexg8d)YD;?k-T?z?5eP{tcdogta+d9P1o7u#oT$ZZ?RnRm+H0Zg&PRr
zJ$J`6M7@_s<wB?^L4G44;u_#Itx%&@6F?EmHBzBvQ>7`cDH#VUDSyjZvrR|Ij=5Mj
zS&Ap>&qhMLZSF$`74K>e4rzLfKp9VEm^MX{EX(H9w8|)EAu~eequY~5QH?x-axG#{
zT+%@qCrS%(^~gv=%dhF(*jD3N!ao^YG>M?h*T)*gEBA9&2ImX9oXM7@$MF8X^v!ti
zoEz1TkcsZbZs$o>WG!`+qWpfA_D}m9IN?=X*{Y_?{4%q03q$DgVjLpw(2Z<1dvQSr
z9{+MvGEzQ=6dLI4M)xC0VdvLeFVR{w=VV6pwKCR6SAvcyDa)2pUq+5SgmMk`bekhb
zLu|X4crtiPU{3V0Tv&qS!PGT^Gv^ZJ@Z4Tu<-r`3?olm3%JlIT3qK=o^{XcAQS-|g
zToTyGt(R_-KDn}xC+jz4{|Z0sRKMlWyLXZN!87iVkE~SEq~rOm`;=X=g+Z?6vZGF0
z{C<F2%yJL2!3!q>*ZaNSYb;MJKifDG4N*rz&p+OABiG9$Qwv_tuB;=|aJHD52k0Bu
zEgFot#$NZA*kJoUDn5&oRNk=e{?uW$V1ccv4<j`UQ(2Mg%W(2BH<Z2k^rs^=Cer-*
zYr+hm4=>A_e&)$rDM&?7W$e8CCy|>Cq7`P^$In-%;`<4bInU9zCimIrgTV1<EBv_0
zuc6M{QO%!<K-=hG4`b?M6s%yqnLN4_>7f6aorzke=1<8*VQ5vvR?1%1wDO%?i@L#X
z&>I6qTAUF}dsKy*su#_j5s4P{*U>v~tE_BKLBkZneFcY9)5?q`=+?HLTl8ZE&^idI
zRPE#gYgVAbBn=p!e3W~VvJRdwIo9o6*%Z}BrIO=w_rChfcHA(rxd?UK@=O1@oYCHd
zFkU=4`1*9umD!LE6B}EoPhiW*UOkq_$SO;6_uj-==dzOSnMzum_iTcWCx|cDJnl39
zHW3s_?zO#Aek-0RNIt`M<;i;~NW`|61sBG97HLUka{<!ia_IhRDI)J*c>NV!1{-Cq
z3}AO!21Aq7;DAPU==-kU_^H$F5D7-A{pSA`u4~mS1-*NQst?RNYTh~5yH@u%JM7Tt
zPDEa?lNYR>v)&oMRwv(dMEAXm<1mfcAB3BpomYXCnPeIpEFHYD3}tA%mY%NK_}usz
z>x0F%-rjcPZhdrH^;4?_Vru|MUvU75dB->;7=GHdXROf>`fT%Y*DrRX@d%`J6C$Fo
z>OFQ?!4UF-(N*j?yh`I1!=$&VqLNELg<pRboq|&~>S8au&4SZw*r=Oew)>V*>3Z3^
zGmp@8D{i=i4(GeG;GBJR93~R^k{uAZSaovB`;;T3$&$X;-)M`0&_yn=JMNBd{`)Ua
zIzq8s<ZbIUzFb~iEAhVfj2~R@OZ@D=1=iM!z<9;1xRC22Fs4D!%=DP>Y7?|OT_DF)
z#HSNh)J3!WHHJQ&9!$9v{iuWwQD_)oMb3Wu978j3#ANf|Huq3y6l{q(J>C+1K^Tg0
znRlj1?_(6G7!7d$S%X}@LgZ$%g*v()Y!8iK!%ZYJ1I@HLnvzu|+-P0QUE*LDl_KrG
z3_}_3!bP=_=TB9!wy!c)C$r$5oTBhazR{fZrAJFnh>?De^}?*LB?{5vEZM<_0e2ut
zKheqTX!Y32V7XDa3tzE;v+CdgK%5nDdGY%TLYei|#0qw(u4s0<3TydlC0CTqpK++A
z+^Ov8;eZW0Yye`v9c$a!0qq0<Gq)!6bVvl|SdE8Z19SWjff>y#7F;Kgebu}-*cp;7
z5}Qf|q$F<vYfjh>qJHhcOtqCXT!lIaxOo-ppAfa;1Eu!+JcGDl#l$qII<Y9esGo>L
zW!zd1Sl(M&uApyS_5T1TUqr;+uM7_X^Hbw;*(%<W_gewAG(<ao^ZetV9=d3Qdg+Sp
zDEgn~iPbO%y4LVJDHRGitVWp6Ao64NwT7vXF`$T7Kl2i6>y!Jz93E7JR|1PGDsF0T
zfxFBSBsOtxGBeyKEPY{{n_2>L(jjb@bEV)CaVfwP^vg=Y%|qbH=Um<DHus+*c<%A3
zu{8smJbP&7NL@5LA!3zL*Ts|&4j-5JSEHz0dbAHaDmTzT!(=TTBZrR*Dm`4;{rzem
zoU#iWgH>EQ$j@24=d8p#vPiLpo8iVf@vZkIfV&aovKhx(VKdK6r?`7*Ujl6{mxNVt
zNm>@TG!W|&_~1!e=Y1BObp1wM!43V_z+I^@*}x<Iy25HF8;<Lb-hZ`!5~A6<Zy*{Y
z9&#4UOi_di<zSil5_)hR{!0-VA}SYrM@jNEo^bF>ZA2I?noC_suPKH~UX4<(50s4u
zVOAHJh8MRNzu38WlP8u1GBkqExJiH17(W}){hYvC^+&JM0;Y+PMBB95AG!H_wbTcS
zsO#Co!^viKNZeuT=6WER1l*ISw;v_&dnJ9?|4e$%zvxNp!XC1A?`!!ndszFdt69dP
zw<Gz=ABP*YRyA)Vi$5-SQn}2#HI_qlZ;rwr)6^X@sOziG-gUL-z{$svR6`^Cv}%ID
zi8G%)MObUnJGSs}ZPk;O96PllG3n-Viu@9g`joaE?yW%bZIT>7R?qGg+wLR!i38n?
zU1>$#rCw?@Y6__9q=bc6;!i7CaDlk@x6Derrq2c}hJ*vpX>sTc;W6>k(|1kM4e}pa
z?Udn^a<?WQi2ns3sObt5PciSg%<V5#l2Gww7v{}1S~49taD1Wr)U~~gL!p^lUoy>M
z^e|JyF3Fy=gmmBye#9|~svNgUb9K>RE#y?Z2&-q2zx{~E8y@44bf;8;1AYKozQ<eo
z3hV=pwfNisT9;>5CFS<_`$0I}T8TbZ2BqJ#qB3+ScM(SUH5*=TGzRNA8VQd*)e7vh
zBy&=Zr5(g$b&h#+?hK&>$lL~ZL%*Pmhjr^aYYo@}+l7OT%p^Gfe&z@tH%kw7T{ds&
zqfgYUm)2FqxnNl1=NFamkN%GTs6sRE8HZfIZv9|ogLbnx^fPy_fNdt3Kv%GFd-92;
z4b)NE!IMwK6Tg^djHt}R#XXZ2%5!dS7kp)d6cbiVQcLiyOZQ7vno{34@P6f?SNbeO
zFvs~<8JB*aGL*U(y4hXYl8>&YaR4D2nm`jxx47<gLuk(Sgu$6V>LB7b5y&$1sUmvA
zZZCD67U%eW@L?!V0k3X`q|4<T_s3n=I^Zt%Y5(%M8pTWpiB_ywh)ihO`v2WdMzc{3
z{fs+4mBV{3Lo$SaXs+VYna!0m?2sakp|ZEcQ%yvy!Zcu`@)>NXXD0ad6G#OLs#dt$
zN=Ldwf;(iixu^_{RcG;*x~q8PCFa@jz(|b~Qt-4_VA`KaiA-qQ`ajo>dkuG)r%gP)
zCxpU@h}N%EeGa>}2Z9-oB<V{i^WZ$YM`)>we!sbXrWV#pOR9XQ#Jep!yWosoEb+(n
zH|a&Z9hGVl{Lm;24TGIK;SAKTmCz)?FYvX({y`&>pfT$Gqr)1Um`AOP(=%hTmm#&2
zj#^dDXh$z@htA#IKb~~B71qBZ#?O(f!A##<kcy>m^V{Cue9sQWh*JG%?Ed;AKBEnY
zk-bs_G_yljdH!UGOunp4y$mhiV=jGvkPqbPM`)?P1U^4P5}4)0#ZA2(|86BWE<?PE
zNedfmvXIwz&mYxij%Wed1iN7N+iZ}(81;{m0=zX4{n9EG(Aq=t{x2P1a;maM;*NKZ
zz<#Sd0&waLEso~f_XUxp4iVqmfo{!wkUNs#g+JT&mIXp{xx>!a^t)6;As`9{@<bmw
z=x~04Fwo=EQ4f9$nk(EEgG(FddP55h!pgISp$w%rOa`M9d;l&lYhuJuDmb$%41?Y>
zevn7O=^2=q5cKn2Kkk7Yc2H#cv3!(bL#SjhNATqqmAJEms5AO~+bM@a-V%2{H3pIh
z%AjYe=!n|4Ee)3n93Y!P{xI~Vyg>J6l|1TzLNI2v7wkP{B^{J*Pk<%^pdsJ3R-~p6
zbPs<5qL0=QAdsB#Q~}W4-vX5v>wE(*PoPRq*c}33@KPRs8hHLE4JJZayPRR?HR&Kt
zhoh<j$6zT}V_<bQQWt*MCF<+hk~-Q58Ixz8{R6(~3Ck0?3XOw1rXSx0a91_w3qzwD
z{|4{`I<d1YjXu-#&v^SblaKF~Q~t)<9sCaiQqYOk1uKBh+2#n}FzzByP8Eh;EP;<I
z-C=i#-Qhs|1rD9#!?+*g5*lxB;DBgV8ls1vz~~ySBR<^xTd*oXuxGa&pl?7{IFZrh
zK(|eHGsJ4I#n9OTVB(f?HJDcy3q$B?jOfwyZc0HJJFjHW?mV#aVrvM!=bBS0A9uR)
zsLS8aE%?zU$at2iT_iQs=4mvY6ch&1c^^3@iHp-;xo|v936VfgS~2v!uE8m)A@97s
zWuL)wFgSZsS15i#w3kWmVj<l4=|!N4Dq)i^c`RUHJ01~+3v^`!LRl&NXGO~;Swnct
z-&0p_4Hi%st-#P6@vCgch^;^3GSF0~>2My5*U*a!I{WjX47v(*(9yQa?NNq$_rBze
zc(x>5UCpDOx>r>4>fi4{TwHv7PN!OxQD~#-1Ui^#<d`%edR$P$uiuvtNZ4Bz;caHD
z_XH=bNj)d#;9`)g2Q5U-?-SvjXU;8^`FR|tIR@QkhYro?KSs7636Co1X14cpIDrMH
zx%>Bf`T#H**&*e1AD8AM<^7P8;0{zpt~I3Gpg}4ByGbjdxe+u8L&`s|12tpwaK8}|
zQ3zh$fD-|<T9_k3PDxXfUY>p>n{YK7zQh`%U~E-TgAUMEJ%chfVn8${>>3(D?Br}h
zUKuR?C~V1g6eGzCf>sk7B%lypU6mxFNMu5wW9{y4G#%~_rR>fKvL*8Q8)@juv0VSl
zE>3_+$sy`igo}z1<oE8KgH?eR9|thcLqQ5*MDa*d;2D9<Y6LAVqKV9TBF+6=1jR<Z
zx9|tGUeI7aKq<Pz<i-Sj=XwUUvO8E^W3M59IO66ny+%Z`C?WDucW%qe!;p*LL!Xv(
zCeU~t9dcR_Ne6Yk^|q(>g5~8e@tRE&Qu(;7#!?maW4U>}=iYCx0~POW%c0L2&ZTQr
zu=B8tFMH`LFRc8@O2YKfs)Dr$Y#rKnp^YFZXz|qr2pvd?o!WaMBPI<6A!;k7Zi$7<
zojKe!wi;I3b7rz{czJi@YouHneB_lE@r`cAh)p}x?v=zWXE755J0Bc;w7jfcxb670
z*dX9Y@>{}zha!kZkf@RlmpmSKO@lN`(_h&m`oWNwCop^L7AKQ#CMEUkCXSsLE%-T2
z7jS$k7lf{(pNcii@3oDer6O*17u4<)u+}I<oqV8ehj2PN!TwMbfXVAIr9BOQ!0ANO
z2OI^oRxV?Q`jL%g4<nxgix9#dS$2yr6ccKi^nBEhPVE{PiB^@WvVbmG9R6mXCbKkO
zjg52$j8SB2jeb2-=tD*JBY#pDE)PaQAXy}c&Lq*G4%?n*g=)m-##UV%gN+P+A@1di
zj1Gx6B78)F2?4TTjlz_7U>Pc<%|q$$7$0WQ+d!?%^~Ks$)kT2R>;^7M?=myj*!63_
zJ&=SM(_<wSlgwC4K-;A^1^63YmG_VD{=^r<IU<!C=!zD<JCOx<N^h3Na>H|A{+={L
zCI@KEQPo=8BGtnJx2AG|sxNNb=uL_%5P;uD?O0nRA()Q7#7&EdghE{}wV33@Ud0?U
z_xT8Sv9*T$5zin+V8OjCG^}m|r<lH#IEY&T6Y)(m2NnvM*N=Cx6^5ctv};rpZ^1w3
zAKBWS^r%A(R2Etz-XRhOSs+HHjc`Y6W%1q$PSzvoL#f^Kn{^<{as#)iLboGR9}Von
zB00Jp?RqZ^vw7tmIN6L`R^fdC-$J7eBw!^T3pe6jS~ZL&^?_k79BQubLTy^c;Fcgs
zQ!&aYpt66Vvq+aoyl2Y_!VN>_>*g+xfIKhx3X@N}oJJ+vRXovdAA>)5;&<+c3e|xs
z;PMlvkj5bca5S=_`I^_7p#@*<v(1!~WcQ=!#yg{g{U*I~aqkab+d7@-pb)MH=+6ut
zVqlydmUXDCoHIHuVg~-8vx|x+7tr^J7apsEy8h>5xN~P^4K7DHk;G1FS}6F+M-C-8
zANe(f`w7l)#iqn^?<i=AbrPzx(h-JI5@r}OjD0^rX^56y;GtdEqKdm+6hB<3pI)T%
z%l>axp2F7GTH=6wQYp-2`_^G+*3D6)?aL5WMprSAZZBVr(<DQzQF>@#(oV_R`C3Fb
z5)^6NxE7bb_{EiQ2)pb-bJxa{32^`q09i$ZI)7`~{osXX5VZ3Gnt2pW;@eS_CyJvV
z6;l<OnQ>O;b&aj5{@OT6D8EWzYvuLGoIV%8@ogBE!3awuBIC_f%zpJBF3%TGbHZA0
zahTYJYvHgZU-2Ms^Y~9ZVTklwb-MT0`0rOPNQhYc!LLP~DEt>tOhOf5dW0v*?nK`H
zz^;Tp-_Djn&?k5hWXJ!l!1j!30@I0@YqI^RLKSd-R`Ddhd%XHLa+w0?r>56b88zS`
zrzpd)Zu?CI2DRJRxRK1RQcTS05HZX_;7@nzg*{ga94e&tDG-NyBX-5+@7Sb`v8Mli
zuISSq8}lKUCxR9#!M0M9B0i{|mzIWU>+(owQkarTCmd*Y`1eL;3=c)@4w**mEP-bv
z(GYF3qQJXztReitAeCwVmK@K|;HEXX8%%!I5|9h69#duKK3*bWKQr8TaVCNsNPOdb
zS={@=)v^&9%VtQ8U(Nm2+QUB+_Z)bz^z~?vNbejk@X66Z_L&Tn{4AusqL8JU>jwkr
z{)iXh2`R}2`UZP_#*&|-31fK6{dO_$3%|>zwk<qa$mN@$Ohvq+c88n7<>qw3s!Ndk
znkXKZzQ1}i2Jd|seE(g+$#vgVFSi%DZC}0+IpOz(Rjy~;^EM)<6Q0#?tYtXMy&mAd
z#XS&di3`eO?7*vW{b3{Ao>H@#51@)oa46pe0e+M7#`iB1PeR0VnM=v)ry~a+6F<Xr
z2%U&hg&MjJ1Xj4-FpT|sD~!bB0Q85X9~D`<WZhm>D_Je&PXPJH^9!YR`G^jt))UxM
zm;=WxN7{wGhpj9SPAg$JC0bE=;s+rHFPtRG5Tru6M4oPy&v_X{P&eqfa2E;bmpk5y
z)l;76C1$@A_oTVY<;6huB%ttLoQ}J}wuEm*H<jG~q1{2=u4;Nse8iDY`if)4S0tR8
zeN^(XGQf<d{~80uV0o{(!;<~Cmq9v+)v;giKl9U^)sc4Z#E#Z_>sMYvk+AccSaJ6>
zJyx!Mn%4Ol-|rdaxf$ZS?{(G$VJWMWWvV?L^7*Mw%dhPxvByFgEd_7MK+r*E`IUm@
zC4x6D<q3uFGAxN%^;ep~b-%m6399%`s#+6sq3_XfiX9oZEKu2L51Tptli~eo$d0DA
z>^YsCwt=RXb?J2SIr48}a>C0KZnwyn34@^~2GjKt@}gT-Zp8DKvX=07H_uJJRiK4%
z+lZvB^*5sJsbSj+xzw83B+Yr3LLrAwHH2-v8v#)^qSBOX<l$^mSg)?7n#MKfc(49V
zZ8h9Q%k89#1!u5R$qnK$L$)oUG7~<#q0RhnS3r)4t5rfhMTxB)q~Qb!h>WK4yj7|e
zkx#{JmDO;_jd5QZ1PSpN<iUlZ<}#MlS3Nj}Gi_d(Qm}(_Qp7#cP@#u5-ir8|t4t!=
z>%m3bM$#1YZ0LuVSr?%I#w%wx`1b#t2`$FBo{^5JXQZ5UgFW6|v<&!FaoZUlU-DqO
zzEtAUDXhZK51qW$`;UdDjQaMS?cWsST!bJVG>`STQm~+1xqToFd4u@Q#e7x8?a{+w
zLnm)&yHw1|KHyxyo5oWV<5@)FjrMmGbGLp6iFYy(1{!#DHD!8LtoVJW<c~jtB4y|2
zL>;^F?5zGY7T(pTTdA1DKaTWKZ@E;zil>t2Ka&+GF_dKSJ@gkk%MsGm{5(oTxW$>S
zHa+)e9i2Ig=geQlln8K0(^`lZtK1R$DUiLk9QF9>aIRm{efXf{2Hf@}6vImQJbz({
zc$UYumd0VI0B<0ma_)8Oy#_aO-(BaK!hB=SGQ?$ORMiSPVkc(S<l1PD)4f=N6B`mD
zND$wV#5A%=#Q82FeL7Xzi)%05hlz)9hWu7@K1>}xX5P$2(RJZ=nPltIW=`=N9plGq
zxtrM9!YDT6R!JF~jLhV#zklO7RiHTda%S$s6!sIAO}Fg@uB2KDc@(^QSG2n@)-Q2D
zP^_S}gvB{-8B|JwRN<q)qH1T|M1OOyr)Q{N>7Z^Xd-;TF(N#W#ouY3-D%H!3rk9s&
z3B@p1xEu<6D!x}+xrojED_!1<65=+nBai1?6)aZP)|O9vBL)9_y(s>sHI9k=>-NNx
z#;(Rn7ASe%Lsr<L*T3;GQRhQaZ_H|}SVQnZQ)X=)=`n><DaNmg!RdHx>YSFJRO-B+
z8*Noa#cRp=9(DwO9VOZ`&yc4tM4}-z_zlljA@WrM6Kib^MG_bwWNv*HvN3Lg{MDwl
zw)`EyV-!3frZVoE0&2#@TgqxC{0M9KCsZ~?+c5rq#)scK@P*T;$0dbEJiOhdm2`Id
zKO&D)KHaLj*y5Nh?K_hlvJ!)LU8p)yJ8kRyW}rJw+fs`5UjAZ@4e7VurZDs<P26te
zS${g-H=$j!Yc-ANW$JGqJ6)@uog3Xd#bLr)pr={0ac5b;>VBMori^n1*laOw3mvI6
zK3B{Nk6}Dtk7?m@GmD+pBim;+O5C3-qLRg$g&Sff^2g7X@=1#sX2@3md3mwG<H|9f
zyAdmmfkw--PXk|%?K6ZpydGQ5c;-GoLp6`61IFRzmt!Y1;@@(^aHQ~E1(zT@T!tgv
zGR+m6FUsD`dJo!dvHdb?ND?qt{(Su8YuNmLg_!jEvVu(UbMrarr@O36Wd#26Equ~z
zf@yLOmF?}<gm|x{^E02#R)6za$ubI8Y$WYnYwXs)4SzanNH|XLVsqNyA-l6V)va{V
z7Z&iIyVibk#|(4K_e2iMHJAK83EYK2fdQ?crlw@Q*vbj@5HU)Wn=76=3PEux+zqZ&
z#v44hWhYzJ6(8S|Qq<i#1`(YJz2kx=EvOKs(LnpQV^~f$9qWm6GJF0l?Fk@xc;`*1
zLT{1Ih&vVJHZ;LG@<>2pxF=!T2HQD!BK+av%>DI+?<yQZb`HTgy!u=XCrODUHdR|k
zjj5&t;Y>xFFVi+LxWU~7f5{G~f>;d{j#i#NRvvZz>22YPv-3=woG_f)*shhEYMn|u
zl9WesD5JHciE|oio|yHTm0-MI=98pO=*C4hCYEo^A(-H`gN*Q_K|6H6^)bn`n$XS+
zZQVBAMEBc9pP8P4Zu2?o6)kb|Z>%Gw8%fcr5Y#7Tw-S`cTMDnE>9QJXRuP^%J65?6
zZT^fV#0ztb&ClQMdV>Xj^oaDK$fpviK1PMgAk|mr$d2QJl0PLXFX#RWcH2*|ThUzJ
zn_QrEYY&ik-(G$J5Pk-N;-JE8-V(S!H1n_xaTg@t%S-%~$1jY-Z1UZk5amr4!hc#W
zRZId?j2GVnw+G4QgjYBwn}`}^eC9_?H6Wsiid4weKU8s^`$S6c(#{K`l}K6n8f+Zq
z4%_Iap&I{A-7+)VRar{%t=dS{hK<=3Hpe>OxRj#!f@$NE1gorr6fVrc`58Dw?mj9{
zvT@OnXFEUo`+E*dR-icj)6cX%#s?qwK_pJ&yG@B~)nkoQkSRWMg<WL6{AFS}hWHgr
zP6TV|cs9IyfbrqSeFf0d9X6CCZ9X9X5OjueJ`{~E1wWY3Gu5V#efDx`blQNpG3)ni
zBjF6Nu30~u|8i}%-3IvS2>eI*BP%b{ACpH?+@#=!MIhXj_1hW)HGk&EcU64?g$nct
z*~i@X2b@fJbS`I!I#AvI6N7<l=Yq#!BYqqBmX58ZYS2rUe!No)rH}N2_$zku*<ml>
z4^Vs0?D9Ta=#}LywlNX(Eui9D-V%>jgjW@D#?cxL#|Iv=IX`2}2CmMw2h9ahJDSzf
zHuKgIUU9f3@V=|cZbP@D)kBOh$r%hVe#_R?1!F>wFX4mj3mFjgHf29QJl{C#6UBVZ
z#$BlfYNf`S9<41FZ0yU(98i+VNEKw-8pob=y}c(soNYx~pMR9Y94vq?1I?b#7=DwE
zt#yLl4-4TRtkCq=1WU<}>-sYzr_DiWmecX6d_d?f^RAKib3c(+EO^e!k6Gu8+-nCI
zAAD-fTFB&jQh_8y65pr?ZkK&qnxX4p$4Z8ThGjSI@v4cVu1k)UKfE+L!JVvK5t_es
zl5i`IUh@n}AHRxdDdD3T>7#P846svDReg7F8VQQ0xkBuKy$1^IL{Znd*2D=-O`y={
z2a-Td^!v=vn0T-J-PgZj8nhcyDQ7@2YQZ=9lHo(`X_A9UW;?foFc`BWHtVxl(3p5M
z3L+jmiq79#Fmy3>Q|q$8K%b45x#h$`or{dfR{9R3%+~NvnX-u@)lr#2F++%}iUAy*
z^Kb9V$_|?*n@2DD1d?wMmXb>ZCQ}J$;!PfL_~Ah6BQDf&k}N>=V}not3TbRF)8aS@
zYY9f)G!nhzgw=7uXi#50b+-=1T)>s}Lx$XVcWfq^@sOwO+1<O;;UW#cvqsVng|~b!
z7V>&jPJruB0s5Mg?Y@{h8JhWCMQ$zH6pj)OQo&BtMSh2xq%}vA<v!IvZK(_2WF5cw
z^RgRNKJU_1Ef%v1trgueelCbIW|??;YKwtzmcWm@`22#&dUU=mG-cM8UZZBz!hYdc
zwWa38kU_P&8>6pnlBC}<J}`Wq4ywe4e(SXZ^UoT8HLp%&{`9M+gjC;yC!gC5ol@1L
zO>4X!R>XDW9aWQ6aKp^!sz#z-Oxb|x0+}p77CLBi@pMVBZ<Y!>1l2t(in-REzm+;+
zd=XTwrzql&iq|edQX*S4K9d&C1@J+TH*3C*#Mymk2bFH$2Td;1LCLSQi!G~92WK*!
z0M1?68v|T^pH&Hy@5+k{fijRlF<rbfCi$-wT{@Kqcl;g%wfk2(eKz_fSTni>b}Q>q
zo#V-61c7~Au=J*Xzu0NXDNB6UqtQ07M_JpiHUChXR8AN?iY~FY<t`{*au&cmgmBo^
zy*y#($=PuN>?mexFhR06D?bC)NkxckKjVdZS;W%OkZi2PkbT6t99k&ZJrU%4FFdG8
z;Q#U&gs5$khF2ebxBu7-Xy_!$KL~8#r#uF3{)me>%Qd|x5e<;TIi7_OOjw#wCl}To
zgh%`yG~u;f(P3%tA{!v6HPJyg>MG_A{2KKsq=}V|jQB)9sxi@H0eEDgrC&3B4t_*G
zDnsZ{@qxoAgNqzp!sOGx-nG9N27^M7E0qVI;Bg30#-X3#7Z7oB=hm`79;lUs3K5z`
zTRdBGbZT5!P^FBnd<c?5@fMgn0qoG1ljN&Uy;<HeH>7^gS)XypFq9UY_+#CeIFeBG
zD%TmR>jR9B!E|Uo4IUNZQcOx}PO(F0{;;obYs7PfXg72|7Kt21;Z>Z3r69X4G<kSj
zkhVpT!s-@?yG&!cm~Y7%*q-eQlk0kh0EJ(tUpyrG5Uh_%Y7NqaCL(GGaF^IugfqCW
zVE4MP&K{1f6IMZ~b%j|EOW@U|^ex`&NCJ@^F^D_>2{I8&*nofvQ?xPgTO}v%C#%GQ
zQlPd*D0d1@)&-@I0-~JoVniVg&+&lFe8Y@ep)x}l*|&^V-t15n234;U;u)5vU{2#i
ze}#6B5eus~^b<mJ^=0W7T#E@yn`nX-`Xh<OLt~yapgfs^C8LOkV|9p_Ct?|;pB+tA
zCl=2+K)+TMT=?6XqJB*f%Q)i&gDUyq!4T%veGsk+M-CY}gT$J|&6`P%JmXKyajZwh
z!y;{or|AcT${1w0e@|SuZvI4rahltdo;^%yn|C4ajtkl(Z%{JhXS|N;%a(9Gphj}b
zY#_svm)t8{=Q;h_K|bUM?cp`|8^7nE%eOmPs9L<MU(H}|=<F`hhNC4v{~%hMKl7sT
z<)XvAn4(=aT5dYr`6d<F$lmabfZe5=LQd)5=9_{|J@1Q8-(HGI$P=!+m>KJcAl+_Y
zjHh!6;?GO^v(uEZ_&tiCi2L2E&eaPlkvH&_8ysYvj3%WQmxSxuLbVb{%yf{&maz^W
zpn$!yIVZA!+h|9AFAG$0HBDqou3_Uo92D?eHq+EQd<<&dlecjrQuh%~)KchyA*@Q=
zYYs8KySv61=FR>XUB5IYDELL^KAr1V`|52(Fff|C)Q|$BGjbF|a{aPEAgC1Y7=&bd
zzEqS^`0gwQM&xg%jGvu&^QMmH&@@0H%o)R6lOYUQU3>naO&`>zsIy}=LM%aG?p=&-
z<&)n;FL#|m#*cO?ao_()Q}i{nDhE1fO8-2+LGoDn2EcoLweRYN(uG=H+3p|VeUBtc
zl*YdYb>yIUr4_=eg<Js$hyYgleJGv4WR_LGUNyi=%*VZ=aDLKQ=ezS$8u{5sYA4+J
z@D^#u)<2i@c9xU)MfKhMN!-094B3}pwEpVCW02(7`%BGar({{+C*PeDMMh@n(Na-x
z?rzOftOkU^jPQsez(krm{&ifAC(RE@I^2~g*q~4gvr~TI<0?S1A3$SXI5!^~FT~v)
z`-&)dj%GFv#tFVGPEl(jcl0sL<2$3hb;-}`HyRToZd*fE$^%F~!+<+wT=h_S&U;)Z
zjvqi~UV~M{>WIwk)`43i@+xtg;i{A?WXD#S2eh9NR#&s3HK^F=X<#J_clRF+9yJK$
zI*i||BL%X)+Re({w*&#&9S}KR(RX1YA2udF&E3Y?bXX_1ED@Il@^e$2_Z^X%?BK4E
zfHE4T4i{kahEcpq`r9NGlkNIJ>^d8MAAvzwfC@xyfKC1YzDyg-_v}|76?eDSb5N#9
zu^@l`CKdQaOTfJU9C<~5@|#2)gWK0JO;emDoC$eQT=<xw5PpYx+ukLL+`V4$_)P=k
zQ%jdT?>ECFWis&513*1o6>ZtLCc@|U$w4Kqza^Jsxbuae-g_}0tcb-yP9p80C9`mb
z-)Zh{j9SuZxVG6z<YEz6qXh<pc$W68;`@aL$oh4Err?1WSSI5tj7r>FA71Y6El%EI
z6i?E8^bv6Z@*y1c;ueZ6X{pYrY12Z{dZr^wrmdiuSGTfa17`&B6K=ez0oD0IPgv3y
zVwqdTRZRk~G8w;b&vf|G4Gi)y_N=#W>OkQKKb((>2S2!2`!+_G))ZIA68Ksiw;T4g
zJU}IGI#ilsMRq0dhdmm(wT+_^XTF@;P2DQ5daDu$MavtOjwn7GAUzdX3p=0VcuW&X
zx}UpYpX2~Vj149fC1<t=^`~Y4wjCoBDbb)FVyyS#J>r|XNp=?Ts6e{d?4a6Tn|$YU
zri_*+yQL{?v1Q%E0ee&-+>}EcFYdmWcSZg-u5Gr5utn^>7A4|+fq}H+doc$#2;UM_
zIk^a5gEddj;2%W;U&VN!gsWkF7;7QevL7o?S^FmC8P4)xV$qq9lI*y5aIern`RK+G
zJz|EM&up1WMMu@bw}WOxWdk36mXAI*sWs<u765L$D!2uoIf3P0i7_O_=mv%gho%Ri
zc_x|!RMQp*-dJ|FG3=bKXQOD4e@?00Sm!%G?8w-W-Kwf%GFA0aa(t)4nJ%FYJ_#Fq
z^gHH83{!;taMGJWsMwT#lmF~gfz@EZo>I9efeDY$D?V0ukK5ZN%9G}NKB@^pzd%Jk
zPHg$C^KwH=Nq`Pw`yx_ujFfnqHv8L~AMYc_VfV_=hg+sNe&#1Jt4w<`s%aAhxUPXl
zW-dD^ZH^w@vM+CBUVZ#<iw-BtD*j80Uk#<4ddbrV+xlbJrLut`LG?rm^_cm9!rdeY
zRAQgcPr<AIYJ1MMbAn>vHWOD70`82Nz1PnEW#{Ieq4E3}>aZ3igCfu#pm{zti#8nI
zEb2CKhdq$&qtQkLn47We<wsYu?l@tf$0#ur6e=(nO0?^oWTuIjF3LA9BA>)H2EaQY
z?D5cJ7e;GEZ^i}sY$}p<PSnQmg@}YGh3LK991R6m?h=z&Zh%`ho04sFDfpVS$Gpj}
zBNflIev&4>9lom+&%~fyh{P>=u!jg-pyz@5PXEvVW$fZ6kDTDKRi)cbW@a(GX!^|=
z`;U>OUEq3KtqPn`lxwbtE_Q|=M)P$};?j6hvR=fkpG?5`mRUjR=}Ei59*AL2%X`Eh
zt3SZ4h00Rm$it-H{%*1&hRL5eDZ9a98hej$O}A)8vtGb;%@tU&lJb(2lhFlDMNE6y
zJ04MIeS1g5F2nf|#fHH*2ts6g;*<TaMsd=kN7oYl5H7(k;Vvn6$0i88!gZ6tW|g*H
zGk;g^Rd8IBk(5Mw>nC%8dFuET#h-spt%qZ*E%bdu{<)XR4MYF;JF4K)=6|lP9`awU
XrLyyQCk|X82tpfJ=+~Ze`RjiH<r<Xv

literal 0
HcmV?d00001

diff --git a/apps/space/public/plane-logos/black-horizontal-with-blue-logo.svg b/apps/space/public/plane-logos/black-horizontal-with-blue-logo.svg
new file mode 100644
index 00000000000..ae79919fc55
--- /dev/null
+++ b/apps/space/public/plane-logos/black-horizontal-with-blue-logo.svg
@@ -0,0 +1,17 @@
+<svg width="133" height="30" viewBox="0 0 133 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_372_3489)">
+<path d="M35.7598 0.00235398H44.7151C46.4036 -0.0301787 48.0819 0.274777 49.6538 0.899752C51.0897 1.48694 52.3232 2.48876 53.2005 3.7804C54.1414 5.27171 54.6058 7.02009 54.5305 8.78788C54.6025 10.5948 54.1394 12.3823 53.2005 13.921C52.338 15.271 51.1056 16.3375 49.6538 16.9901C48.0968 17.6881 46.409 18.0371 44.7062 18.0131H40.3882V30.0024H35.7598V0.00235398ZM40.3882 14.1812H43.4472C44.5022 14.1924 45.5515 14.0225 46.5505 13.6787C47.4425 13.3684 48.2171 12.7851 48.7672 12.0095C49.3447 11.1092 49.6299 10.0487 49.5829 8.97633C49.6547 7.88162 49.368 6.79348 48.7672 5.88031C48.2009 5.1354 47.4202 4.58669 46.5328 4.30986C45.5354 3.98896 44.4937 3.83143 43.4472 3.84322H40.3882V14.1812Z" fill="#262626"/>
+<path d="M63.6538 30.0023H58.9102V0.00234985H63.6538V30.0023Z" fill="#262626"/>
+<path d="M83.1961 30.0023V26.0717C82.9541 26.623 82.6146 27.1249 82.1941 27.5524C81.5462 28.2456 80.7841 28.8194 79.942 29.2485C78.8993 29.7731 77.7457 30.0319 76.5816 30.0023C74.9896 30.0315 73.4209 29.6134 72.0497 28.7943C70.6785 27.9753 69.5585 26.7874 68.8144 25.3628C68.0116 23.8079 67.6091 22.0734 67.644 20.3194C67.6069 18.5595 68.0094 16.8186 68.8144 15.2581C69.5577 13.8315 70.677 12.6411 72.048 11.819C73.419 10.9969 74.9882 10.5752 76.5816 10.6006C77.7134 10.57 78.8375 10.7969 79.8711 11.2647C80.698 11.6453 81.4539 12.1675 82.1055 12.8082C82.5675 13.2374 82.9256 13.7687 83.1518 14.3607V11.139H87.8333V29.9844L83.1961 30.0023ZM72.299 20.3194C72.2745 21.3974 72.5412 22.4617 73.0704 23.3975C73.548 24.2312 74.2333 24.9235 75.0579 25.4053C75.8825 25.8872 76.8175 26.1417 77.7697 26.1435C78.7342 26.1735 79.6872 25.9254 80.5177 25.4281C81.3482 24.9308 82.0218 24.2047 82.4602 23.3347C82.9374 22.3947 83.1751 21.349 83.1518 20.2925C83.1763 19.233 82.9385 18.1841 82.4602 17.2413C81.9964 16.419 81.3267 15.7349 80.5183 15.2581C79.6888 14.7549 78.7367 14.4969 77.7697 14.5133C76.8353 14.5149 75.9179 14.7656 75.1097 15.2401C74.2725 15.73 73.5757 16.4321 73.0881 17.2772C72.5606 18.2015 72.288 19.2521 72.299 20.3194Z" fill="#262626"/>
+<path d="M103.536 10.6096C104.757 10.611 105.964 10.8677 107.082 11.3634C108.238 11.8795 109.223 12.7205 109.92 13.7864C110.714 15.0781 111.104 16.5829 111.037 18.1029V30.0023H106.293V18.9733C106.348 18.3184 106.273 17.6591 106.074 17.0337C105.874 16.4082 105.554 15.8291 105.132 15.3299C104.739 14.9381 104.272 14.6317 103.758 14.4296C103.244 14.2274 102.695 14.1337 102.144 14.1543C101.323 14.1599 100.521 14.3994 99.8295 14.8453C99.0977 15.3167 98.4893 15.9602 98.0562 16.7209C97.5907 17.539 97.3518 18.469 97.3646 19.4131V30.0023H92.6387V11.157H97.3646V14.244C97.5688 13.6234 97.9368 13.0711 98.4286 12.6467C99.081 12.0457 99.8309 11.563 100.645 11.2198C101.557 10.8175 102.541 10.6097 103.536 10.6096Z" fill="#262626"/>
+<path d="M118.973 21.4322C118.987 22.346 119.221 23.2426 119.656 24.0436C120.095 24.8189 120.753 25.4438 121.545 25.8384C122.494 26.3044 123.541 26.5293 124.595 26.4935C125.5 26.5093 126.4 26.3635 127.255 26.0628C127.932 25.8094 128.569 25.4556 129.143 25.0128C129.56 24.6821 129.93 24.2957 130.243 23.8642L132.335 26.7448C131.854 27.3909 131.273 27.9545 130.615 28.414C129.834 28.9511 128.963 29.3402 128.044 29.5626C126.808 29.8643 125.538 30.0031 124.267 29.9754C122.476 30.0226 120.705 29.599 119.124 28.746C117.69 27.949 116.513 26.7492 115.737 25.291C114.909 23.68 114.498 21.8834 114.54 20.0682C114.532 18.3948 114.924 16.7444 115.684 15.2581C116.41 13.8364 117.524 12.6558 118.894 11.857C120.412 11.0607 122.093 10.6338 123.803 10.6105C125.513 10.5871 127.205 10.9678 128.744 11.7224C130.081 12.4518 131.174 13.5669 131.883 14.9261C132.667 16.483 133.051 18.2141 133 19.9605C133 20.0771 133 20.3284 133 20.6963C133.005 20.9431 132.984 21.1897 132.938 21.4322H118.973ZM128.567 17.9503C128.53 17.3776 128.37 16.8201 128.097 16.317C127.762 15.6679 127.264 15.12 126.652 14.7287C125.854 14.2334 124.926 13.9955 123.992 14.0466C123.03 14.0014 122.076 14.2282 121.234 14.7017C120.661 15.0464 120.172 15.5175 119.804 16.08C119.435 16.6424 119.197 17.2817 119.106 17.9503H128.567Z" fill="#262626"/>
+<path d="M29.127 0.271576H9.70898V10.0981H19.418V19.9246H29.127V0.271576Z" fill="#3F76FF"/>
+<path d="M9.709 10.0981H0V19.9066H9.709V10.0981Z" fill="#3F76FF"/>
+<path d="M19.4266 19.9246H9.73535V29.7511H19.4266V19.9246Z" fill="#3F76FF"/>
+</g>
+<defs>
+<clipPath id="clip0_372_3489">
+<rect width="133" height="30" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/space/public/plane-logos/blue-without-text.png b/apps/space/public/plane-logos/blue-without-text.png
new file mode 100644
index 0000000000000000000000000000000000000000..ea94aec7920b8ee108ed403cd22548712d983a95
GIT binary patch
literal 2460
zcmeHJU1%Id9N*a1CXv`Clu{eebpsOdc6W9!x0hSGp6OlE9OTj?IcOBL&h5@6OKx{I
zyPMp{g9&}`14<)UH4kkS`cMR`n1`Y*CDjTx)D}Y?jKn5=h&Hr_7A^Qvh_jcwBb8{e
zuXbVB*_q$`KYsK3|JipE-TUflch^!BRTt}w_E1#S4sTRHPF8MO(|Pi$u{vLND5}Br
zM%6<4nH)uJ*{LV{+`f31tYU+M8crcDXIKPHQG3EU3#x<2rBkS1Hx=ggxhaO$HHA44
zh=aHlK?8bc!A8A>?xb26R6`mQev#gjlZgQXxsc8o8Pkz-3RAQzlexFdGjtK+4k}EW
z=aBA;C+G;a5iN0mRRIv`V2Bf>mKF*4Xc35j2LWCXSwWIPi!21`(!&sMww9KAq8%k)
z<V#@&T-TC$KAX*QSwDyEeqIQLLOc+8QDg~%b@HYQbFAq!l`TY(quRRV>e!?`i!g<U
zU4<c$uBBjD6|<&OqKOd3=b*(49Pm;q0yVXQvxe<V(YdDbD1!`Sx(>k#6|6OYUF;0t
ze=uFyzRv-nHXg6|*f18usJL+4_7RdsiI5G^PBL#Hz6UvY*j7>d2nn;v%f^x;Hi9m;
zlNe{p7nLZ7Op5|1(#;2SQ^Q&3`E>_S6uL-Z$gTNVAg~~i6a^Us<$&}82*`f0290A)
zPv<v;w#tFPeNZA94Z84wU`>_N*ft<ZST|rl;w`hEp(`}X5uCv`aZIA~uV0TvA_*I(
z^$gi?diL$5W9<=12uTtvazZiOcwCN|jtfl{#i9yB$l-KdlLM;gmx6-CYJiAS11*4s
zEda8?fF!2W)|5XKgyr*5tPXn;D4*B<<N5uzPD&7F9@>sqn4WgzPTe85nlF`3FB&S%
zGCEz9iwsq-3=~H7?jLDPX<2`02G-1G2M{s(FS=NRIXLZRp^e)530n`;9Z!Piy@FlK
zga3Pq#l3aKU51m6;Y};8ihNX>9WqIWvq>u(+cf_QMQ!%QqHW3Cv6Z<mj9$3w&6&m}
z=G6)6T77fx_UXaIthQ<Q&P&Omuc@ELp0L|*y#3AbPv))*Q%6^i)hyhcId%J2`zznQ
z@So%Je=OHobvI_utaOY|Tv@qxmb*Op<cX>utz58Bb!Viy_TBm&bW`(79f`5SA5%}Y
zRf&fl(>8Cp^#9%Xtz+B74?}myYEGZr`h6<9`lYhCaQfErv+uP&ed2?+W}4EIt7q@+
zIuD;)<&F+7RbMymL>`g0fn3gorw+b$^_0=5Xbp=WqHy72<_KYQi74~%0(gJ?qiqKl
zM(0Kw&#MjJU7Y<L6u#{mIk~lKd3MrwYq{R4d*hKPHz>z+uy7%B_4DxP@%{7g?vebb
cgtA}wpRf3)FDzbO^!}e>?cLGO_P&1TFD&-(9RL6T

literal 0
HcmV?d00001

diff --git a/apps/space/public/plane-logos/white-horizontal-with-blue-logo.svg b/apps/space/public/plane-logos/white-horizontal-with-blue-logo.svg
new file mode 100644
index 00000000000..1f09cc34ab6
--- /dev/null
+++ b/apps/space/public/plane-logos/white-horizontal-with-blue-logo.svg
@@ -0,0 +1,17 @@
+<svg width="133" height="30" viewBox="0 0 133 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_372_3489)">
+<path d="M35.7598 0.00235398H44.7151C46.4036 -0.0301787 48.0819 0.274777 49.6538 0.899752C51.0897 1.48694 52.3232 2.48876 53.2005 3.7804C54.1414 5.27171 54.6058 7.02009 54.5305 8.78788C54.6025 10.5948 54.1394 12.3823 53.2005 13.921C52.338 15.271 51.1056 16.3375 49.6538 16.9901C48.0968 17.6881 46.409 18.0371 44.7062 18.0131H40.3882V30.0024H35.7598V0.00235398ZM40.3882 14.1812H43.4472C44.5022 14.1924 45.5515 14.0225 46.5505 13.6787C47.4425 13.3684 48.2171 12.7851 48.7672 12.0095C49.3447 11.1092 49.6299 10.0487 49.5829 8.97633C49.6547 7.88162 49.368 6.79348 48.7672 5.88031C48.2009 5.1354 47.4202 4.58669 46.5328 4.30986C45.5354 3.98896 44.4937 3.83143 43.4472 3.84322H40.3882V14.1812Z" fill="#ffffff"/>
+<path d="M63.6538 30.0023H58.9102V0.00234985H63.6538V30.0023Z" fill="#ffffff"/>
+<path d="M83.1961 30.0023V26.0717C82.9541 26.623 82.6146 27.1249 82.1941 27.5524C81.5462 28.2456 80.7841 28.8194 79.942 29.2485C78.8993 29.7731 77.7457 30.0319 76.5816 30.0023C74.9896 30.0315 73.4209 29.6134 72.0497 28.7943C70.6785 27.9753 69.5585 26.7874 68.8144 25.3628C68.0116 23.8079 67.6091 22.0734 67.644 20.3194C67.6069 18.5595 68.0094 16.8186 68.8144 15.2581C69.5577 13.8315 70.677 12.6411 72.048 11.819C73.419 10.9969 74.9882 10.5752 76.5816 10.6006C77.7134 10.57 78.8375 10.7969 79.8711 11.2647C80.698 11.6453 81.4539 12.1675 82.1055 12.8082C82.5675 13.2374 82.9256 13.7687 83.1518 14.3607V11.139H87.8333V29.9844L83.1961 30.0023ZM72.299 20.3194C72.2745 21.3974 72.5412 22.4617 73.0704 23.3975C73.548 24.2312 74.2333 24.9235 75.0579 25.4053C75.8825 25.8872 76.8175 26.1417 77.7697 26.1435C78.7342 26.1735 79.6872 25.9254 80.5177 25.4281C81.3482 24.9308 82.0218 24.2047 82.4602 23.3347C82.9374 22.3947 83.1751 21.349 83.1518 20.2925C83.1763 19.233 82.9385 18.1841 82.4602 17.2413C81.9964 16.419 81.3267 15.7349 80.5183 15.2581C79.6888 14.7549 78.7367 14.4969 77.7697 14.5133C76.8353 14.5149 75.9179 14.7656 75.1097 15.2401C74.2725 15.73 73.5757 16.4321 73.0881 17.2772C72.5606 18.2015 72.288 19.2521 72.299 20.3194Z" fill="#ffffff"/>
+<path d="M103.536 10.6096C104.757 10.611 105.964 10.8677 107.082 11.3634C108.238 11.8795 109.223 12.7205 109.92 13.7864C110.714 15.0781 111.104 16.5829 111.037 18.1029V30.0023H106.293V18.9733C106.348 18.3184 106.273 17.6591 106.074 17.0337C105.874 16.4082 105.554 15.8291 105.132 15.3299C104.739 14.9381 104.272 14.6317 103.758 14.4296C103.244 14.2274 102.695 14.1337 102.144 14.1543C101.323 14.1599 100.521 14.3994 99.8295 14.8453C99.0977 15.3167 98.4893 15.9602 98.0562 16.7209C97.5907 17.539 97.3518 18.469 97.3646 19.4131V30.0023H92.6387V11.157H97.3646V14.244C97.5688 13.6234 97.9368 13.0711 98.4286 12.6467C99.081 12.0457 99.8309 11.563 100.645 11.2198C101.557 10.8175 102.541 10.6097 103.536 10.6096Z" fill="#ffffff"/>
+<path d="M118.973 21.4322C118.987 22.346 119.221 23.2426 119.656 24.0436C120.095 24.8189 120.753 25.4438 121.545 25.8384C122.494 26.3044 123.541 26.5293 124.595 26.4935C125.5 26.5093 126.4 26.3635 127.255 26.0628C127.932 25.8094 128.569 25.4556 129.143 25.0128C129.56 24.6821 129.93 24.2957 130.243 23.8642L132.335 26.7448C131.854 27.3909 131.273 27.9545 130.615 28.414C129.834 28.9511 128.963 29.3402 128.044 29.5626C126.808 29.8643 125.538 30.0031 124.267 29.9754C122.476 30.0226 120.705 29.599 119.124 28.746C117.69 27.949 116.513 26.7492 115.737 25.291C114.909 23.68 114.498 21.8834 114.54 20.0682C114.532 18.3948 114.924 16.7444 115.684 15.2581C116.41 13.8364 117.524 12.6558 118.894 11.857C120.412 11.0607 122.093 10.6338 123.803 10.6105C125.513 10.5871 127.205 10.9678 128.744 11.7224C130.081 12.4518 131.174 13.5669 131.883 14.9261C132.667 16.483 133.051 18.2141 133 19.9605C133 20.0771 133 20.3284 133 20.6963C133.005 20.9431 132.984 21.1897 132.938 21.4322H118.973ZM128.567 17.9503C128.53 17.3776 128.37 16.8201 128.097 16.317C127.762 15.6679 127.264 15.12 126.652 14.7287C125.854 14.2334 124.926 13.9955 123.992 14.0466C123.03 14.0014 122.076 14.2282 121.234 14.7017C120.661 15.0464 120.172 15.5175 119.804 16.08C119.435 16.6424 119.197 17.2817 119.106 17.9503H128.567Z" fill="#ffffff"/>
+<path d="M29.127 0.271576H9.70898V10.0981H19.418V19.9246H29.127V0.271576Z" fill="#3F76FF"/>
+<path d="M9.709 10.0981H0V19.9066H9.709V10.0981Z" fill="#3F76FF"/>
+<path d="M19.4266 19.9246H9.73535V29.7511H19.4266V19.9246Z" fill="#3F76FF"/>
+</g>
+<defs>
+<clipPath id="clip0_372_3489">
+<rect width="133" height="30" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/space/public/plane-logos/white-horizontal.svg b/apps/space/public/plane-logos/white-horizontal.svg
new file mode 100644
index 00000000000..13e2dbb9fa8
--- /dev/null
+++ b/apps/space/public/plane-logos/white-horizontal.svg
@@ -0,0 +1,17 @@
+<svg width="178" height="40" viewBox="0 0 178 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_435_3747)">
+<path d="M47.8574 -4.66756e-06H59.8428C62.1026 -0.0433815 64.3487 0.363226 66.4525 1.19653C68.3742 1.97944 70.025 3.3152 71.1992 5.03739C72.4584 7.02581 73.0799 9.35697 72.9792 11.714C73.0756 14.1233 72.4557 16.5067 71.1992 18.5582C70.0448 20.3582 68.3954 21.7802 66.4525 22.6503C64.3686 23.581 62.1098 24.0463 59.8309 24.0144H54.0518V40H47.8574V-4.66756e-06ZM54.0518 18.9052H58.1458C59.5579 18.9201 60.9622 18.6935 62.2992 18.2351C63.493 17.8214 64.5297 17.0436 65.2658 16.0096C66.0388 14.8091 66.4205 13.3952 66.3576 11.9653C66.4536 10.5057 66.0699 9.05483 65.2658 7.83727C64.508 6.84406 63.4631 6.11244 62.2754 5.74334C60.9405 5.31547 59.5464 5.10542 58.1458 5.12114H54.0518V18.9052Z" fill="#F2F2F2"/>
+<path d="M85.1905 40H78.8418V0H85.1905V40Z" fill="#F2F2F2"/>
+<path d="M111.345 40V34.7592C111.021 35.4943 110.566 36.1634 110.004 36.7335C109.136 37.6576 108.117 38.4228 106.99 38.9949C105.594 39.6944 104.05 40.0394 102.492 40C100.362 40.0389 98.262 39.4814 96.4269 38.3893C94.5917 37.2972 93.0929 35.7134 92.0969 33.8139C91.0225 31.7408 90.4838 29.4281 90.5305 27.0894C90.4808 24.7429 91.0196 22.4217 92.0969 20.341C93.0918 18.4388 94.5897 16.8517 96.4246 15.7555C98.2595 14.6594 100.36 14.0971 102.492 14.131C104.007 14.0902 105.511 14.3928 106.895 15.0165C108.001 15.524 109.013 16.2202 109.885 17.0745C110.503 17.6468 110.983 18.3551 111.285 19.1445V14.8489H117.551V39.9761L111.345 40ZM96.7605 27.0894C96.7277 28.5267 97.0847 29.9458 97.7929 31.1935C98.4321 32.3051 99.3493 33.2282 100.453 33.8706C101.556 34.5131 102.808 34.8525 104.082 34.8549C105.373 34.8949 106.649 34.5641 107.76 33.901C108.871 33.2379 109.773 32.2699 110.36 31.1098C110.998 29.8565 111.317 28.4623 111.285 27.0536C111.318 25.6409 111 24.2424 110.36 22.9853C109.739 21.8888 108.843 20.9767 107.761 20.341C106.651 19.6701 105.376 19.3261 104.082 19.3479C102.832 19.3501 101.604 19.6844 100.522 20.3171C99.4017 20.9702 98.4693 21.9063 97.8166 23.0332C97.1106 24.2655 96.7459 25.6664 96.7605 27.0894Z" fill="#F2F2F2"/>
+<path d="M138.567 14.143C140.201 14.1449 141.816 14.4871 143.313 15.1481C144.86 15.8362 146.178 16.9575 147.111 18.3787C148.174 20.101 148.695 22.1074 148.606 24.134V40H142.257V25.2946C142.33 24.4215 142.23 23.5424 141.963 22.7085C141.696 21.8745 141.268 21.1023 140.703 20.4367C140.177 19.9144 139.551 19.5058 138.864 19.2363C138.176 18.9667 137.441 18.8418 136.703 18.8693C135.606 18.8767 134.532 19.196 133.606 19.7906C132.627 20.4192 131.813 21.2771 131.233 22.2914C130.61 23.3822 130.29 24.6223 130.307 25.8809V40H123.982V14.8729H130.307V18.9889C130.581 18.1614 131.073 17.425 131.731 16.8591C132.605 16.0578 133.608 15.4143 134.698 14.9566C135.918 14.4202 137.235 14.1432 138.567 14.143Z" fill="#F2F2F2"/>
+<path d="M159.226 28.5731C159.245 29.7916 159.558 30.987 160.14 32.055C160.728 33.0887 161.608 33.922 162.668 34.4481C163.938 35.0694 165.339 35.3692 166.75 35.3216C167.961 35.3426 169.166 35.1482 170.31 34.7472C171.217 34.4094 172.068 33.9376 172.837 33.3473C173.394 32.9063 173.889 32.3911 174.309 31.8157L177.109 35.6566C176.465 36.5181 175.688 37.2695 174.807 37.8821C173.761 38.5983 172.596 39.1172 171.366 39.4137C169.711 39.8159 168.012 40.0009 166.311 39.9641C163.915 40.027 161.543 39.4622 159.428 38.3249C157.508 37.2622 155.934 35.6624 154.895 33.7182C153.787 31.5703 153.236 29.1747 153.293 26.7544C153.282 24.5233 153.807 22.3227 154.824 20.341C155.795 18.4454 157.286 16.8713 159.12 15.8062C161.152 14.7444 163.402 14.1753 165.69 14.1442C167.979 14.113 170.243 14.6206 172.303 15.6267C174.093 16.5992 175.555 18.086 176.504 19.8983C177.552 21.9742 178.067 24.2823 177.999 26.6108C177.999 26.7664 177.999 27.1014 177.999 27.592C178.005 27.921 177.977 28.2498 177.916 28.5731H159.226ZM172.066 23.9306C172.017 23.167 171.802 22.4237 171.437 21.7529C170.989 20.8874 170.322 20.1568 169.503 19.6351C168.435 18.9747 167.194 18.6575 165.943 18.7257C164.656 18.6653 163.378 18.9678 162.252 19.5992C161.485 20.0587 160.831 20.6868 160.338 21.4368C159.844 22.1867 159.526 23.0391 159.404 23.9306H172.066Z" fill="#F2F2F2"/>
+<path d="M38.9821 0.358963H12.9941V13.461H25.9881V26.563H38.9821V0.358963Z" fill="#F2F2F2"/>
+<path d="M12.994 13.461H0V26.539H12.994V13.461Z" fill="#F2F2F2"/>
+<path d="M25.9996 26.563H13.0293V39.665H25.9996V26.563Z" fill="#F2F2F2"/>
+</g>
+<defs>
+<clipPath id="clip0_435_3747">
+<rect width="178" height="40" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/space/services/authentication.service.ts b/apps/space/services/authentication.service.ts
new file mode 100644
index 00000000000..d1453b8ddc2
--- /dev/null
+++ b/apps/space/services/authentication.service.ts
@@ -0,0 +1,93 @@
+// services
+import APIService from "services/api.service";
+
+class AuthService extends APIService {
+  constructor() {
+    console.log("NEXT_PUBLIC_API_BASE_URL: ", process.env.NEXT_PUBLIC_API_BASE_URL);
+    super(process.env.NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
+  }
+
+  async emailLogin(data: any) {
+    return this.post("/api/sign-in/", data, { headers: {} })
+      .then((response) => {
+        this.setAccessToken(response?.data?.access_token);
+        this.setRefreshToken(response?.data?.refresh_token);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async emailSignUp(data: { email: string; password: string }) {
+    return this.post("/api/sign-up/", data, { headers: {} })
+      .then((response) => {
+        this.setAccessToken(response?.data?.access_token);
+        this.setRefreshToken(response?.data?.refresh_token);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async socialAuth(data: any): Promise<{
+    access_token: string;
+    refresh_toke: string;
+    user: any;
+  }> {
+    return this.post("/api/social-auth/", data, { headers: {} })
+      .then((response) => {
+        this.setAccessToken(response?.data?.access_token);
+        this.setRefreshToken(response?.data?.refresh_token);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async emailCode(data: any) {
+    return this.post("/api/magic-generate/", data, { headers: {} })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async forgotPassword(data: { email: string }): Promise<any> {
+    return this.post(`/api/forgot-password/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async magicSignIn(data: any) {
+    const response = await this.post("/api/magic-sign-in/", data, { headers: {} });
+    if (response?.status === 200) {
+      this.setAccessToken(response?.data?.access_token);
+      this.setRefreshToken(response?.data?.refresh_token);
+      return response?.data;
+    }
+    throw response.response.data;
+  }
+
+  async signOut() {
+    return this.post("/api/sign-out/", { refresh_token: this.getRefreshToken() })
+      .then((response) => {
+        this.purgeAccessToken();
+        this.purgeRefreshToken();
+        return response?.data;
+      })
+      .catch((error) => {
+        this.purgeAccessToken();
+        this.purgeRefreshToken();
+        throw error?.response?.data;
+      });
+  }
+}
+
+const authService = new AuthService();
+
+export default authService;
diff --git a/apps/space/services/issue.service.ts b/apps/space/services/issue.service.ts
index 38b2f7a1d37..6d4787ec422 100644
--- a/apps/space/services/issue.service.ts
+++ b/apps/space/services/issue.service.ts
@@ -13,6 +13,128 @@ class IssueService extends APIService {
         throw error?.response;
       });
   }
+
+  async getIssueById(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
+    return this.get(`/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/issues/${issueId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async getIssueVotes(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
+    return this.get(`/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/issues/${issueId}/votes/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async createIssueVote(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
+    return this.post(`/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/issues/${issueId}/votes/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async deleteIssueVote(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
+    return this.delete(`/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/issues/${issueId}/votes/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async getIssueReactions(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
+    return this.get(`/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/issues/${issueId}/reactions/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async createIssueReaction(workspaceSlug: string, projectId: string, issueId: string, data: any): Promise<any> {
+    return this.post(
+      `/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/issues/${issueId}/reactions/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async deleteIssueReaction(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    reactionId: string
+  ): Promise<any> {
+    return this.delete(
+      `/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/issues/${issueId}/reactions/${reactionId}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async getIssueComments(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
+    return this.get(`/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/issues/${issueId}/comments/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async getCommentsReactions(workspaceSlug: string, projectId: string, commentId: string): Promise<any> {
+    return this.get(
+      `/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/comments/${commentId}/reactions/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async createIssueComment(workspaceSlug: string, projectId: string, issueId: string, data: any): Promise<any> {
+    return this.post(
+      `/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/issues/${issueId}/comments/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async updateIssueComment(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    commentId: string,
+    data: any
+  ): Promise<any> {
+    return this.patch(
+      `/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/issues/${issueId}/comments/${commentId}/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async deleteIssueComment(workspaceSlug: string, projectId: string, issueId: string, commentId: string): Promise<any> {
+    return this.delete(
+      `/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/issues/${issueId}/comments/${commentId}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
 }
 
 export default IssueService;
diff --git a/apps/space/services/user.service.ts b/apps/space/services/user.service.ts
index a84358a9645..9a324bb9577 100644
--- a/apps/space/services/user.service.ts
+++ b/apps/space/services/user.service.ts
@@ -13,6 +13,14 @@ class UserService extends APIService {
         throw error?.response;
       });
   }
+
+  async updateMe(data: any): Promise<any> {
+    return this.patch("/api/users/me/", data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
 }
 
 export default UserService;
diff --git a/apps/space/store/root.ts b/apps/space/store/root.ts
index dd6d620c018..162fcddc0ce 100644
--- a/apps/space/store/root.ts
+++ b/apps/space/store/root.ts
@@ -5,15 +5,17 @@ import UserStore from "./user";
 import ThemeStore from "./theme";
 import IssueStore from "./issue";
 import ProjectStore from "./project";
+import IssueDetailStore from "./issue-detail";
 // types
-import { IIssueStore, IProjectStore, IThemeStore, IUserStore } from "./types";
+import { IIssueStore, IProjectStore, IThemeStore } from "./types";
 
 enableStaticRendering(typeof window === "undefined");
 
 export class RootStore {
-  user: IUserStore;
+  user: UserStore;
   theme: IThemeStore;
   issue: IIssueStore;
+  issueDetail: IssueDetailStore;
   project: IProjectStore;
 
   constructor() {
@@ -21,5 +23,6 @@ export class RootStore {
     this.theme = new ThemeStore(this);
     this.issue = new IssueStore(this);
     this.project = new ProjectStore(this);
+    this.issueDetail = new IssueDetailStore(this);
   }
 }
diff --git a/apps/space/store/user.ts b/apps/space/store/user.ts
index 2f4782236dc..916ad3521bb 100644
--- a/apps/space/store/user.ts
+++ b/apps/space/store/user.ts
@@ -1,3 +1,5 @@
+import { redirect } from "next/navigation";
+
 // mobx
 import { observable, action, computed, makeObservable, runInAction } from "mobx";
 // service
@@ -17,15 +19,47 @@ class UserStore implements IUserStore {
       // observable
       currentUser: observable,
       // actions
+      setCurrentUser: action,
       // computed
     });
     this.rootStore = _rootStore;
     this.userService = new UserService();
   }
 
+  setCurrentUser = (user: any) => {
+    // TODO: destructure user object
+    this.currentUser = user;
+  };
+
+  /**
+   *
+   * @param callback
+   * @description A wrapper function to check user authentication; it redirects to the login page if not authenticated, otherwise, it executes a callback.
+   * @example this.requiredLogin(() => { // do something });
+   */
+
+  requiredLogin = (callback: () => void) => {
+    if (this.currentUser) {
+      callback();
+      return;
+    }
+
+    this.getUserAsync()
+      .then(() => {
+        if (!this.currentUser) {
+          const currentPath = window.location.pathname;
+          window.location.href = `/?next_path=${currentPath}`;
+        } else callback();
+      })
+      .catch(() => {
+        const currentPath = window.location.pathname;
+        window.location.href = `/?next_path=${currentPath}`;
+      });
+  };
+
   getUserAsync = async () => {
     try {
-      const response = this.userService.currentUser();
+      const response = await this.userService.currentUser();
       if (response) {
         runInAction(() => {
           this.currentUser = response;
diff --git a/apps/space/styles/globals.css b/apps/space/styles/globals.css
index 5c07b693253..bf06090578b 100644
--- a/apps/space/styles/globals.css
+++ b/apps/space/styles/globals.css
@@ -9,4 +9,143 @@
   html {
     font-family: "Inter", sans-serif;
   }
+
+  :root {
+    color-scheme: light !important;
+
+    --color-primary-10: 236, 241, 255;
+    --color-primary-20: 217, 228, 255;
+    --color-primary-30: 197, 214, 255;
+    --color-primary-40: 178, 200, 255;
+    --color-primary-50: 159, 187, 255;
+    --color-primary-60: 140, 173, 255;
+    --color-primary-70: 121, 159, 255;
+    --color-primary-80: 101, 145, 255;
+    --color-primary-90: 82, 132, 255;
+    --color-primary-100: 63, 118, 255;
+    --color-primary-200: 57, 106, 230;
+    --color-primary-300: 50, 94, 204;
+    --color-primary-400: 44, 83, 179;
+    --color-primary-500: 38, 71, 153;
+    --color-primary-600: 32, 59, 128;
+    --color-primary-700: 25, 47, 102;
+    --color-primary-800: 19, 35, 76;
+    --color-primary-900: 13, 24, 51;
+
+    --color-background-100: 255, 255, 255; /* primary bg */
+    --color-background-90: 250, 250, 250; /* secondary bg */
+    --color-background-80: 245, 245, 245; /* tertiary bg */
+
+    --color-text-100: 23, 23, 23; /* primary text */
+    --color-text-200: 58, 58, 58; /* secondary text */
+    --color-text-300: 82, 82, 82; /* tertiary text */
+    --color-text-400: 163, 163, 163; /* placeholder text */
+
+    --color-border-100: 245, 245, 245; /* subtle border= 1 */
+    --color-border-200: 229, 229, 229; /* subtle border- 2 */
+    --color-border-300: 212, 212, 212; /* strong border- 1 */
+    --color-border-400: 185, 185, 185; /* strong border- 2 */
+
+    --color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */
+    --color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */
+    --color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */
+
+    --color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
+    --color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */
+    --color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
+    --color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
+
+    --color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
+    --color-sidebar-border-200: var(--color-border-100); /* subtle sidebar border- 2 */
+    --color-sidebar-border-300: var(--color-border-100); /* strong sidebar border- 1 */
+    --color-sidebar-border-400: var(--color-border-100); /* strong sidebar border- 2 */
+  }
+
+  [data-theme="light"] {
+    color-scheme: light !important;
+
+    --color-background-100: 255, 255, 255; /* primary bg */
+    --color-background-90: 250, 250, 250; /* secondary bg */
+    --color-background-80: 245, 245, 245; /* tertiary bg */
+  }
+
+  [data-theme="light"] {
+    --color-text-100: 23, 23, 23; /* primary text */
+    --color-text-200: 58, 58, 58; /* secondary text */
+    --color-text-300: 82, 82, 82; /* tertiary text */
+    --color-text-400: 163, 163, 163; /* placeholder text */
+
+    --color-border-100: 245, 245, 245; /* subtle border= 1 */
+    --color-border-200: 229, 229, 229; /* subtle border- 2 */
+    --color-border-300: 212, 212, 212; /* strong border- 1 */
+    --color-border-400: 185, 185, 185; /* strong border- 2 */
+  }
+
+  [data-theme="light-contrast"] {
+    --color-text-100: 11, 11, 11; /* primary text */
+    --color-text-200: 38, 38, 38; /* secondary text */
+    --color-text-300: 58, 58, 58; /* tertiary text */
+    --color-text-400: 115, 115, 115; /* placeholder text */
+
+    --color-border-100: 34, 34, 34; /* subtle border= 1 */
+    --color-border-200: 38, 38, 38; /* subtle border- 2 */
+    --color-border-300: 46, 46, 46; /* strong border- 1 */
+    --color-border-400: 58, 58, 58; /* strong border- 2 */
+  }
+
+  [data-theme="dark"] {
+    color-scheme: dark !important;
+
+    --color-background-100: 7, 7, 7; /* primary bg */
+    --color-background-90: 11, 11, 11; /* secondary bg */
+    --color-background-80: 23, 23, 23; /* tertiary bg */
+  }
+
+  [data-theme="dark"] {
+    --color-text-100: 229, 229, 229; /* primary text */
+    --color-text-200: 163, 163, 163; /* secondary text */
+    --color-text-300: 115, 115, 115; /* tertiary text */
+    --color-text-400: 82, 82, 82; /* placeholder text */
+
+    --color-border-100: 34, 34, 34; /* subtle border= 1 */
+    --color-border-200: 38, 38, 38; /* subtle border- 2 */
+    --color-border-300: 46, 46, 46; /* strong border- 1 */
+    --color-border-400: 58, 58, 58; /* strong border- 2 */
+  }
+
+  [data-theme="light"],
+  [data-theme="dark"] {
+    --color-primary-10: 236, 241, 255;
+    --color-primary-20: 217, 228, 255;
+    --color-primary-30: 197, 214, 255;
+    --color-primary-40: 178, 200, 255;
+    --color-primary-50: 159, 187, 255;
+    --color-primary-60: 140, 173, 255;
+    --color-primary-70: 121, 159, 255;
+    --color-primary-80: 101, 145, 255;
+    --color-primary-90: 82, 132, 255;
+    --color-primary-100: 63, 118, 255;
+    --color-primary-200: 57, 106, 230;
+    --color-primary-300: 50, 94, 204;
+    --color-primary-400: 44, 83, 179;
+    --color-primary-500: 38, 71, 153;
+    --color-primary-600: 32, 59, 128;
+    --color-primary-700: 25, 47, 102;
+    --color-primary-800: 19, 35, 76;
+    --color-primary-900: 13, 24, 51;
+
+    --color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */
+    --color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */
+    --color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */
+
+    --color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
+    --color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */
+    --color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
+    --color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
+
+    --color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
+    --color-sidebar-border-200: var(--color-border-100); /* subtle sidebar border- 2 */
+    --color-sidebar-border-300: var(--color-border-100); /* strong sidebar border- 1 */
+    --color-sidebar-border-400: var(--color-border-100); /* strong sidebar border- 2 */
+  }
 }
diff --git a/apps/space/tailwind.config.js b/apps/space/tailwind.config.js
index 55aaa9a319a..b12d7339363 100644
--- a/apps/space/tailwind.config.js
+++ b/apps/space/tailwind.config.js
@@ -1,5 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 
+const convertToRGB = (variableName) => `rgba(var(${variableName}))`;
+
 module.exports = {
   content: [
     "./app/**/*.{js,ts,jsx,tsx}",
@@ -10,7 +12,171 @@ module.exports = {
   ],
   theme: {
     extend: {
-      colors: {},
+      colors: {
+        custom: {
+          primary: {
+            0: "rgb(255, 255, 255)",
+            10: convertToRGB("--color-primary-10"),
+            20: convertToRGB("--color-primary-20"),
+            30: convertToRGB("--color-primary-30"),
+            40: convertToRGB("--color-primary-40"),
+            50: convertToRGB("--color-primary-50"),
+            60: convertToRGB("--color-primary-60"),
+            70: convertToRGB("--color-primary-70"),
+            80: convertToRGB("--color-primary-80"),
+            90: convertToRGB("--color-primary-90"),
+            100: convertToRGB("--color-primary-100"),
+            200: convertToRGB("--color-primary-200"),
+            300: convertToRGB("--color-primary-300"),
+            400: convertToRGB("--color-primary-400"),
+            500: convertToRGB("--color-primary-500"),
+            600: convertToRGB("--color-primary-600"),
+            700: convertToRGB("--color-primary-700"),
+            800: convertToRGB("--color-primary-800"),
+            900: convertToRGB("--color-primary-900"),
+            1000: "rgb(0, 0, 0)",
+            DEFAULT: convertToRGB("--color-primary-100"),
+          },
+          background: {
+            0: "rgb(255, 255, 255)",
+            10: convertToRGB("--color-background-10"),
+            20: convertToRGB("--color-background-20"),
+            30: convertToRGB("--color-background-30"),
+            40: convertToRGB("--color-background-40"),
+            50: convertToRGB("--color-background-50"),
+            60: convertToRGB("--color-background-60"),
+            70: convertToRGB("--color-background-70"),
+            80: convertToRGB("--color-background-80"),
+            90: convertToRGB("--color-background-90"),
+            100: convertToRGB("--color-background-100"),
+            200: convertToRGB("--color-background-200"),
+            300: convertToRGB("--color-background-300"),
+            400: convertToRGB("--color-background-400"),
+            500: convertToRGB("--color-background-500"),
+            600: convertToRGB("--color-background-600"),
+            700: convertToRGB("--color-background-700"),
+            800: convertToRGB("--color-background-800"),
+            900: convertToRGB("--color-background-900"),
+            1000: "rgb(0, 0, 0)",
+            DEFAULT: convertToRGB("--color-background-100"),
+          },
+          text: {
+            0: "rgb(255, 255, 255)",
+            10: convertToRGB("--color-text-10"),
+            20: convertToRGB("--color-text-20"),
+            30: convertToRGB("--color-text-30"),
+            40: convertToRGB("--color-text-40"),
+            50: convertToRGB("--color-text-50"),
+            60: convertToRGB("--color-text-60"),
+            70: convertToRGB("--color-text-70"),
+            80: convertToRGB("--color-text-80"),
+            90: convertToRGB("--color-text-90"),
+            100: convertToRGB("--color-text-100"),
+            200: convertToRGB("--color-text-200"),
+            300: convertToRGB("--color-text-300"),
+            400: convertToRGB("--color-text-400"),
+            500: convertToRGB("--color-text-500"),
+            600: convertToRGB("--color-text-600"),
+            700: convertToRGB("--color-text-700"),
+            800: convertToRGB("--color-text-800"),
+            900: convertToRGB("--color-text-900"),
+            1000: "rgb(0, 0, 0)",
+            DEFAULT: convertToRGB("--color-text-100"),
+          },
+          border: {
+            0: "rgb(255, 255, 255)",
+            100: convertToRGB("--color-border-100"),
+            200: convertToRGB("--color-border-200"),
+            300: convertToRGB("--color-border-300"),
+            400: convertToRGB("--color-border-400"),
+            1000: "rgb(0, 0, 0)",
+            DEFAULT: convertToRGB("--color-border-200"),
+          },
+          sidebar: {
+            background: {
+              0: "rgb(255, 255, 255)",
+              10: convertToRGB("--color-sidebar-background-10"),
+              20: convertToRGB("--color-sidebar-background-20"),
+              30: convertToRGB("--color-sidebar-background-30"),
+              40: convertToRGB("--color-sidebar-background-40"),
+              50: convertToRGB("--color-sidebar-background-50"),
+              60: convertToRGB("--color-sidebar-background-60"),
+              70: convertToRGB("--color-sidebar-background-70"),
+              80: convertToRGB("--color-sidebar-background-80"),
+              90: convertToRGB("--color-sidebar-background-90"),
+              100: convertToRGB("--color-sidebar-background-100"),
+              200: convertToRGB("--color-sidebar-background-200"),
+              300: convertToRGB("--color-sidebar-background-300"),
+              400: convertToRGB("--color-sidebar-background-400"),
+              500: convertToRGB("--color-sidebar-background-500"),
+              600: convertToRGB("--color-sidebar-background-600"),
+              700: convertToRGB("--color-sidebar-background-700"),
+              800: convertToRGB("--color-sidebar-background-800"),
+              900: convertToRGB("--color-sidebar-background-900"),
+              1000: "rgb(0, 0, 0)",
+              DEFAULT: convertToRGB("--color-sidebar-background-100"),
+            },
+            text: {
+              0: "rgb(255, 255, 255)",
+              10: convertToRGB("--color-sidebar-text-10"),
+              20: convertToRGB("--color-sidebar-text-20"),
+              30: convertToRGB("--color-sidebar-text-30"),
+              40: convertToRGB("--color-sidebar-text-40"),
+              50: convertToRGB("--color-sidebar-text-50"),
+              60: convertToRGB("--color-sidebar-text-60"),
+              70: convertToRGB("--color-sidebar-text-70"),
+              80: convertToRGB("--color-sidebar-text-80"),
+              90: convertToRGB("--color-sidebar-text-90"),
+              100: convertToRGB("--color-sidebar-text-100"),
+              200: convertToRGB("--color-sidebar-text-200"),
+              300: convertToRGB("--color-sidebar-text-300"),
+              400: convertToRGB("--color-sidebar-text-400"),
+              500: convertToRGB("--color-sidebar-text-500"),
+              600: convertToRGB("--color-sidebar-text-600"),
+              700: convertToRGB("--color-sidebar-text-700"),
+              800: convertToRGB("--color-sidebar-text-800"),
+              900: convertToRGB("--color-sidebar-text-900"),
+              1000: "rgb(0, 0, 0)",
+              DEFAULT: convertToRGB("--color-sidebar-text-100"),
+            },
+            border: {
+              0: "rgb(255, 255, 255)",
+              100: convertToRGB("--color-sidebar-border-100"),
+              200: convertToRGB("--color-sidebar-border-200"),
+              300: convertToRGB("--color-sidebar-border-300"),
+              400: convertToRGB("--color-sidebar-border-400"),
+              1000: "rgb(0, 0, 0)",
+              DEFAULT: convertToRGB("--color-sidebar-border-200"),
+            },
+          },
+          backdrop: "#131313",
+        },
+      },
+      typography: ({ theme }) => ({
+        brand: {
+          css: {
+            "--tw-prose-body": convertToRGB("--color-text-100"),
+            "--tw-prose-p": convertToRGB("--color-text-100"),
+            "--tw-prose-headings": convertToRGB("--color-text-100"),
+            "--tw-prose-lead": convertToRGB("--color-text-100"),
+            "--tw-prose-links": convertToRGB("--color-primary-100"),
+            "--tw-prose-bold": convertToRGB("--color-text-100"),
+            "--tw-prose-counters": convertToRGB("--color-text-100"),
+            "--tw-prose-bullets": convertToRGB("--color-text-100"),
+            "--tw-prose-hr": convertToRGB("--color-text-100"),
+            "--tw-prose-quotes": convertToRGB("--color-text-100"),
+            "--tw-prose-quote-borders": convertToRGB("--color-border"),
+            "--tw-prose-code": convertToRGB("--color-text-100"),
+            "--tw-prose-pre-code": convertToRGB("--color-text-100"),
+            "--tw-prose-pre-bg": convertToRGB("--color-background-100"),
+            "--tw-prose-th-borders": convertToRGB("--color-border"),
+            "--tw-prose-td-borders": convertToRGB("--color-border"),
+          },
+        },
+      }),
+    },
+    fontFamily: {
+      custom: ["Inter", "sans-serif"],
     },
   },
   plugins: [],

From 7f40a28767b3f7733bd91aa07d1ae3ab327cc338 Mon Sep 17 00:00:00 2001
From: dakshesh14 <dakshesh.jain14@gmail.com>
Date: Tue, 29 Aug 2023 19:52:02 +0530
Subject: [PATCH 4/4] devL reactions, voting, comments and theme

---
 .../issues/comment/comment-card.tsx           |    7 +-
 .../app/(auth)/components/email-code-form.tsx |    5 +-
 .../(auth)/components/github-login-button.tsx |    2 -
 .../app/(auth)/components/google-login.tsx    |    2 -
 .../[workspace_slug]/[project_slug]/page.tsx  |   64 +-
 apps/space/app/layout.tsx                     |   11 +-
 .../onboarding/components/user-details.tsx    |   23 +-
 apps/space/app/page.tsx                       |   19 +-
 apps/space/app/testing/page.tsx               |   82 --
 .../issues/board-views/block-due-date.tsx     |    2 +-
 .../issues/board-views/kanban/block.tsx       |   17 +-
 .../issues/board-views/list/block.tsx         |   15 +-
 .../issues/filters-render/index.tsx           |    2 +-
 apps/space/components/issues/navbar/index.tsx |    4 +-
 apps/space/components/issues/navbar/theme.tsx |   18 +-
 .../issues/peek-overview/add-comment.tsx      |  126 ++
 .../peek-overview/comment-detail-card.tsx     |  228 +++
 .../peek-overview/full-screen-peek-view.tsx   |  103 +-
 .../issues/peek-overview/header.tsx           |    9 +-
 .../components/issues/peek-overview/index.ts  |    4 +
 .../issues/peek-overview/issue-activity.tsx   |   90 +-
 .../issues/peek-overview/issue-details.tsx    |   10 +-
 .../peek-overview/issue-emoji-reactions.tsx   |   94 ++
 .../issues/peek-overview/issue-properties.tsx |  124 +-
 .../issues/peek-overview/issue-reaction.tsx   |   98 +-
 .../peek-overview/issue-vote-reactions.tsx    |  102 ++
 .../issues/peek-overview/layout.tsx           |   25 +-
 .../issues/peek-overview/side-peek-view.tsx   |   80 +-
 .../components/tiptap/bubble-menu/index.tsx   |  119 ++
 .../tiptap/bubble-menu/link-selector.tsx      |   90 ++
 .../tiptap/bubble-menu/node-selector.tsx      |  130 ++
 .../bubble-menu/utils/link-validator.tsx      |   12 +
 .../tiptap/extensions/image-resize.tsx        |   57 +
 .../components/tiptap/extensions/index.tsx    |  137 ++
 .../tiptap/extensions/updated-image.tsx       |   22 +
 apps/space/components/tiptap/index.tsx        |  100 ++
 .../tiptap/plugins/delete-image.tsx           |   56 +
 .../tiptap/plugins/upload-image.tsx           |  127 ++
 apps/space/components/tiptap/props.tsx        |   56 +
 .../components/tiptap/slash-command/index.tsx |  339 +++++
 apps/space/components/tiptap/utils.ts         |    6 +
 .../space/components/ui/reaction-selector.tsx |    5 +-
 apps/space/components/ui/secondary-button.tsx |    8 +-
 apps/space/helpers/date-time.helper.ts        |   14 +
 apps/space/package.json                       |    2 +
 apps/space/services/api.service.ts            |   10 +
 apps/space/services/authentication.service.ts |    1 -
 apps/space/services/file.service.ts           |  101 ++
 apps/space/services/issue.service.ts          |   13 +-
 apps/space/store/issue.ts                     |  358 ++++-
 apps/space/store/root.ts                      |    5 +-
 apps/space/store/types/issue.ts               |   98 +-
 apps/space/tailwind.config.js                 |    4 +-
 yarn.lock                                     | 1283 ++++++++++-------
 54 files changed, 3418 insertions(+), 1101 deletions(-)
 delete mode 100644 apps/space/app/testing/page.tsx
 create mode 100644 apps/space/components/issues/peek-overview/add-comment.tsx
 create mode 100644 apps/space/components/issues/peek-overview/comment-detail-card.tsx
 create mode 100644 apps/space/components/issues/peek-overview/issue-emoji-reactions.tsx
 create mode 100644 apps/space/components/issues/peek-overview/issue-vote-reactions.tsx
 create mode 100644 apps/space/components/tiptap/bubble-menu/index.tsx
 create mode 100644 apps/space/components/tiptap/bubble-menu/link-selector.tsx
 create mode 100644 apps/space/components/tiptap/bubble-menu/node-selector.tsx
 create mode 100644 apps/space/components/tiptap/bubble-menu/utils/link-validator.tsx
 create mode 100644 apps/space/components/tiptap/extensions/image-resize.tsx
 create mode 100644 apps/space/components/tiptap/extensions/index.tsx
 create mode 100644 apps/space/components/tiptap/extensions/updated-image.tsx
 create mode 100644 apps/space/components/tiptap/index.tsx
 create mode 100644 apps/space/components/tiptap/plugins/delete-image.tsx
 create mode 100644 apps/space/components/tiptap/plugins/upload-image.tsx
 create mode 100644 apps/space/components/tiptap/props.tsx
 create mode 100644 apps/space/components/tiptap/slash-command/index.tsx
 create mode 100644 apps/space/components/tiptap/utils.ts
 create mode 100644 apps/space/helpers/date-time.helper.ts
 create mode 100644 apps/space/services/file.service.ts

diff --git a/apps/app/components/issues/comment/comment-card.tsx b/apps/app/components/issues/comment/comment-card.tsx
index 06ef891a9ea..9698c2ef397 100644
--- a/apps/app/components/issues/comment/comment-card.tsx
+++ b/apps/app/components/issues/comment/comment-card.tsx
@@ -28,7 +28,12 @@ type Props = {
   handleCommentDeletion: (comment: string) => void;
 };
 
-export const CommentCard: React.FC<Props> = ({ comment, workspaceSlug, onSubmit, handleCommentDeletion }) => {
+export const CommentCard: React.FC<Props> = ({
+  comment,
+  workspaceSlug,
+  onSubmit,
+  handleCommentDeletion,
+}) => {
   const { user } = useUser();
 
   const editorRef = React.useRef<any>(null);
diff --git a/apps/space/app/(auth)/components/email-code-form.tsx b/apps/space/app/(auth)/components/email-code-form.tsx
index 952be49531b..b760ccfbb2a 100644
--- a/apps/space/app/(auth)/components/email-code-form.tsx
+++ b/apps/space/app/(auth)/components/email-code-form.tsx
@@ -11,8 +11,7 @@ import useToast from "hooks/use-toast";
 import useTimer from "hooks/use-timer";
 
 // ui
-import { CheckCircleIcon } from "@heroicons/react/20/solid";
-import { Input, PrimaryButton, SecondaryButton } from "components/ui";
+import { Input, PrimaryButton } from "components/ui";
 
 // types
 type EmailCodeFormValues = {
@@ -41,7 +40,6 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
     formState: { errors, isSubmitting, isValid, isDirty },
   } = useForm<EmailCodeFormValues>({
     defaultValues: {
-      // TODO: remove this before pushing
       email: "",
       key: "",
       token: "",
@@ -58,7 +56,6 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
       await authenticationService
         .emailCode({ email })
         .then((res) => {
-          console.log("res", res);
           setValue("key", res.key);
           setCodeSent(true);
         })
diff --git a/apps/space/app/(auth)/components/github-login-button.tsx b/apps/space/app/(auth)/components/github-login-button.tsx
index da87cb14dc2..54f215421f2 100644
--- a/apps/space/app/(auth)/components/github-login-button.tsx
+++ b/apps/space/app/(auth)/components/github-login-button.tsx
@@ -10,8 +10,6 @@ import { useTheme } from "next-themes";
 import githubBlackImage from "/public/logos/github-black.png";
 import githubWhiteImage from "/public/logos/github-white.png";
 
-const { NEXT_PUBLIC_GITHUB_ID } = process.env;
-
 export interface GithubLoginButtonProps {
   handleSignIn: React.Dispatch<string>;
 }
diff --git a/apps/space/app/(auth)/components/google-login.tsx b/apps/space/app/(auth)/components/google-login.tsx
index f95b7120420..82916d7b569 100644
--- a/apps/space/app/(auth)/components/google-login.tsx
+++ b/apps/space/app/(auth)/components/google-login.tsx
@@ -15,8 +15,6 @@ export const GoogleLoginButton: FC<IGoogleLoginButton> = ({ handleSignIn }) => {
   const loadScript = useCallback(() => {
     if (!googleSignInButton.current || gsiScriptLoaded) return;
 
-    console.log("process.env.NEXT_PUBLIC_GOOGLE_CLIENTID: ", process.env.NEXT_PUBLIC_GOOGLE_CLIENTID);
-
     (window as any)?.google?.accounts.id.initialize({
       client_id: process.env.NEXT_PUBLIC_GOOGLE_CLIENTID || "",
       callback: handleSignIn,
diff --git a/apps/space/app/[workspace_slug]/[project_slug]/page.tsx b/apps/space/app/[workspace_slug]/[project_slug]/page.tsx
index f65d584cbbe..f27b6d16d73 100644
--- a/apps/space/app/[workspace_slug]/[project_slug]/page.tsx
+++ b/apps/space/app/[workspace_slug]/[project_slug]/page.tsx
@@ -11,7 +11,7 @@ import { IssueKanbanView } from "components/issues/board-views/kanban";
 import { IssueCalendarView } from "components/issues/board-views/calendar";
 import { IssueSpreadsheetView } from "components/issues/board-views/spreadsheet";
 import { IssueGanttView } from "components/issues/board-views/gantt";
-import { SidePeekView } from "components/issues/peek-overview";
+import { IssuePeekOverview } from "components/issues/peek-overview";
 // mobx store
 import { RootStore } from "store/root";
 import { useMobxStore } from "lib/mobx/store-provider";
@@ -25,7 +25,7 @@ const WorkspaceProjectPage = () => {
   const routerParams = useParams();
   const routerSearchparams = useSearchParams();
 
-  const [activeIssue, setActiveIssue] = useState<any>(null);
+  const activeIssueId = store.issue.activePeekOverviewIssueId;
 
   const { workspace_slug, project_slug } = routerParams as { workspace_slug: string; project_slug: string };
   const board =
@@ -101,54 +101,26 @@ const WorkspaceProjectPage = () => {
   ]);
 
   useEffect(() => {
-    if (workspace_slug && project_slug) {
-      store?.project?.getProjectSettingsAsync(workspace_slug, project_slug);
-      store?.issue?.getIssuesAsync(workspace_slug, project_slug);
-    }
-  }, [workspace_slug, project_slug, store?.project, store?.issue]);
+    if (!workspace_slug || !project_slug) return;
+
+    const params = {
+      state: states || null,
+      labels: labels || null,
+      priority: priorities || null,
+    };
 
-  // copy the first store.issue.issues[0] to activeIssue
-  // useEffect(() => {
-  //   if (store?.issue?.issues && store?.issue?.issues.length > 0) {
-  //     setActiveIssue(store?.issue?.issues[0]);
-  //   }
-  // }, [store?.issue?.issues]);
+    store?.project?.getProjectSettingsAsync(workspace_slug, project_slug);
+    store?.issue?.getIssuesAsync(workspace_slug, project_slug, params);
+  }, [workspace_slug, project_slug, store?.project, store?.issue, states, labels, priorities]);
 
   return (
     <div className="relative w-full h-full overflow-hidden">
-      {activeIssue && (
-        <SidePeekView
-          handleClose={() => {
-            setActiveIssue(null);
-          }}
-          issue={activeIssue}
-          mode="side"
-          setMode={() => {}}
-          workspaceSlug={workspace_slug}
-        />
-      )}
-      <button
-        type="button"
-        onClick={() => {
-          store.user.requiredLogin(() => {
-            console.log("hahahah");
-          });
-        }}
-        className="fixed bottom-5 left-5 z-50 border px-2 py-1 rounded bg-gray-200"
-      >
-        Test Auth
-      </button>
-      <button
-        type="button"
-        onClick={() => {
-          store.user.requiredLogin(() => {
-            console.log("hahahah");
-          });
-        }}
-        className="fixed bottom-5 left-5 z-50 border px-2 py-1 rounded bg-gray-200"
-      >
-        Test Auth
-      </button>
+      <IssuePeekOverview
+        isOpen={Boolean(activeIssueId)}
+        onClose={() => store.issue.setActivePeekOverviewIssueId(null)}
+        issue={store?.issue?.issues?.find((_issue) => _issue.id === activeIssueId) || null}
+        workspaceSlug={workspace_slug}
+      />
 
       {store?.issue?.loader && !store.issue.issues ? (
         <div className="text-sm text-center py-10 text-custom-text-100">Loading...</div>
diff --git a/apps/space/app/layout.tsx b/apps/space/app/layout.tsx
index c2efb410000..1cb5fc643d2 100644
--- a/apps/space/app/layout.tsx
+++ b/apps/space/app/layout.tsx
@@ -3,6 +3,9 @@
 // root styles
 import "styles/globals.css";
 
+// next theme
+import { ThemeProvider } from "next-themes";
+
 // toast alert
 import { ToastContextProvider } from "contexts/toast.context";
 
@@ -11,12 +14,14 @@ import { MobxStoreProvider } from "lib/mobx/store-provider";
 import MobxStoreInit from "lib/mobx/store-init";
 
 const RootLayout = ({ children }: { children: React.ReactNode }) => (
-  <html lang="en">
-    <body data-theme="dark" className="antialiased bg-custom-background-90 w-100">
+  <html lang="en" suppressHydrationWarning>
+    <body className="antialiased bg-custom-background-90 w-100">
       <MobxStoreProvider>
         <MobxStoreInit />
         <ToastContextProvider>
-          <main>{children}</main>
+          <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+            <main>{children}</main>
+          </ThemeProvider>
         </ToastContextProvider>
       </MobxStoreProvider>
     </body>
diff --git a/apps/space/app/onboarding/components/user-details.tsx b/apps/space/app/onboarding/components/user-details.tsx
index 8a23f17c2b2..d9bdec54b77 100644
--- a/apps/space/app/onboarding/components/user-details.tsx
+++ b/apps/space/app/onboarding/components/user-details.tsx
@@ -56,11 +56,7 @@ export const UserDetails: React.FC<Props> = observer(({ user }) => {
     defaultValues,
   });
 
-  console.log("errors", errors);
-
   const onSubmit = async (formData: any) => {
-    // if (!user) return;
-
     const payload = {
       ...formData,
       onboarding_step: {
@@ -69,26 +65,11 @@ export const UserDetails: React.FC<Props> = observer(({ user }) => {
       },
     };
 
-    console.log("payload", payload);
-
     const userService = new UserService();
 
     await userService
       .updateMe(payload)
       .then((response) => {
-        // mutate<ICurrentUserResponse>(
-        //   CURRENT_USER,
-        //   (prevData) => {
-        //     if (!prevData) return prevData;
-
-        //     return {
-        //       ...prevData,
-        //       ...payload,
-        //     };
-        //   },
-        //   false
-        // );
-
         userStore.setCurrentUser(response);
 
         const nextPath = searchParams?.get("next_path") || "/";
@@ -100,9 +81,7 @@ export const UserDetails: React.FC<Props> = observer(({ user }) => {
           message: "Details updated successfully.",
         });
       })
-      .catch((err) => {
-        // mutate(CURRENT_USER);
-      });
+      .catch((err) => {});
   };
 
   useEffect(() => {
diff --git a/apps/space/app/page.tsx b/apps/space/app/page.tsx
index aac82509647..746e1c6d1bb 100644
--- a/apps/space/app/page.tsx
+++ b/apps/space/app/page.tsx
@@ -43,8 +43,7 @@ const HomePage = () => {
   };
 
   const onSignInSuccess = (response: any) => {
-    // const isOnboarded = response?.user?.onboarding_step?.profile_complete||false;
-    const isOnboarded = false;
+    const isOnboarded = response?.user?.onboarding_step?.profile_complete || false;
     const nextPath = searchParams?.get("next_path") || "/";
 
     userStore.setCurrentUser(response?.user);
@@ -68,11 +67,6 @@ const HomePage = () => {
         const response = await authenticationService.socialAuth(socialAuthPayload);
 
         onSignInSuccess(response);
-
-        if (response && response?.user) {
-          // mutateUser();
-          // handleTheme(response?.user);
-        }
       } else {
         throw Error("Cant find credentials");
       }
@@ -91,10 +85,6 @@ const HomePage = () => {
         };
         const response = await authenticationService.socialAuth(socialAuthPayload);
         onSignInSuccess(response);
-        if (response && response?.user) {
-          // mutateUser();
-          // handleTheme(response?.user);
-        }
       } else {
         throw Error("Cant find credentials");
       }
@@ -110,8 +100,6 @@ const HomePage = () => {
         try {
           if (response) {
             onSignInSuccess(response);
-            // mutateUser();
-            // handleTheme(response?.user);
           }
         } catch (err: any) {
           onSignInError(err);
@@ -124,11 +112,6 @@ const HomePage = () => {
     try {
       if (response) {
         onSignInSuccess(response);
-
-        // userStore.setCurrentUser(response);
-
-        // mutateUser();
-        // handleTheme(response?.user);
       }
     } catch (err: any) {
       onSignInError(err);
diff --git a/apps/space/app/testing/page.tsx b/apps/space/app/testing/page.tsx
deleted file mode 100644
index 537f5199cb5..00000000000
--- a/apps/space/app/testing/page.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-"use client";
-
-import { useState, Fragment } from "react";
-
-import { Transition } from "@headlessui/react";
-
-const Testing = () => {
-  const [clicked, setClicked] = useState<"upvote" | "downvote" | null>(null);
-
-  return (
-    <div className="relative w-screen h-screen flex justify-center items-center">
-      <div className="flex gap-3 items-center">
-        <button
-          type="button"
-          onClick={() => setClicked((prev) => (prev === "upvote" ? null : "upvote"))}
-          className="flex items-center justify-center overflow-hidden px-2 py-1 gap-x-1 border border-gray-300 rounded focus:outline-none"
-        >
-          <svg className="w-2.5 text-gray-900" viewBox="0 0 8 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path
-              d="M3.44122 2.35988L0.952108 4.84898C0.848405 4.95268 0.718049 5.00574 0.561041 5.00815C0.404044 5.01054 0.271292 4.95749 0.162783 4.84898C0.0542613 4.74047 0 4.60891 0 4.45431C0 4.2997 0.0542613 4.16814 0.162783 4.05963L3.52908 0.693333C3.66448 0.557934 3.82245 0.490234 4.00297 0.490234C4.1835 0.490234 4.34147 0.557934 4.47687 0.693333L7.84316 4.05963C7.94688 4.16335 7.99994 4.2937 8.00233 4.4507C8.00474 4.60771 7.95169 4.74047 7.84316 4.84898C7.73466 4.95749 7.6031 5.01174 7.4485 5.01174C7.2939 5.01174 7.16235 4.95749 7.05384 4.84898L4.56473 2.35988V8.94848C4.56473 9.10787 4.51095 9.24135 4.4034 9.34891C4.29586 9.45646 4.16238 9.51023 4.00297 9.51023C3.84357 9.51023 3.71009 9.45646 3.60254 9.34891C3.495 9.24135 3.44122 9.10787 3.44122 8.94848V2.35988Z"
-              fill="currentColor"
-            />
-          </svg>
-          <span
-            className={`text-sm font-normal transition-opacity ease-in-out ${
-              clicked === "upvote" ? "opacity-0" : "opacity-100"
-            }`}
-          >
-            10
-          </span>
-
-          <Transition
-            as={Fragment}
-            show={clicked === "upvote"}
-            enter="transition ease-out duration-100"
-            enterFrom="transform translate-y-4 opacity-0"
-            enterTo="transform translate-y-0 opacity-100"
-            leave="transition ease-in duration-75"
-            leaveFrom="transform translate-y-0 opacity-100"
-            leaveTo="transform -translate-y-4 opacity-0"
-          >
-            <span className="absolute ml-3 text-sm font-normal">11</span>
-          </Transition>
-        </button>
-        <button
-          type="button"
-          onClick={() => setClicked((prev) => (prev === "downvote" ? null : "downvote"))}
-          className="flex items-center justify-center overflow-hidden px-2 py-1 gap-x-1 border border-red-600 rounded focus:outline-none"
-        >
-          <svg className="w-2.5 text-red-600" viewBox="0 0 8 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path
-              d="M4.55878 7.6406L7.04789 5.15151C7.15159 5.04781 7.28195 4.99475 7.43896 4.99234C7.59596 4.98994 7.72871 5.043 7.83722 5.15151C7.94574 5.26002 8 5.39157 8 5.54617C8 5.70079 7.94574 5.83235 7.83722 5.94085L4.47092 9.30715C4.33552 9.44255 4.17755 9.51025 3.99703 9.51025C3.8165 9.51025 3.65853 9.44255 3.52313 9.30715L0.156836 5.94085C0.0531201 5.83714 6.34193e-05 5.70678 -0.00233364 5.54979C-0.00474262 5.39278 0.0483136 5.26002 0.156836 5.15151C0.265345 5.043 0.396898 4.98875 0.551497 4.98875C0.706097 4.98875 0.837651 5.043 0.946161 5.15151L3.43527 7.6406L3.43527 1.05201C3.43527 0.892613 3.48905 0.759136 3.5966 0.651576C3.70414 0.544028 3.83762 0.490253 3.99703 0.490253C4.15643 0.490253 4.28991 0.544028 4.39746 0.651576C4.505 0.759136 4.55878 0.892613 4.55878 1.05201L4.55878 7.6406Z"
-              fill="currentColor"
-            />
-          </svg>
-          <span
-            className={`text-sm font-normal text-red-600 transition-opacity ease-in-out ${
-              clicked === "downvote" ? "opacity-0" : "opacity-100"
-            }`}
-          >
-            10
-          </span>
-
-          <Transition
-            as={Fragment}
-            show={clicked === "downvote"}
-            enter="transition ease-out duration-100"
-            enterFrom="transform -translate-y-4 opacity-0"
-            enterTo="transform translate-y-0 opacity-100"
-            leave="transition ease-in duration-75"
-            leaveFrom="transform translate-y-0 opacity-100"
-            leaveTo="transform translate-y-4 opacity-0"
-          >
-            <span className="absolute ml-3 text-sm font-normal text-red-600">9</span>
-          </Transition>
-        </button>
-      </div>
-    </div>
-  );
-};
-
-export default Testing;
diff --git a/apps/space/components/issues/board-views/block-due-date.tsx b/apps/space/components/issues/board-views/block-due-date.tsx
index fae2f600cb6..c653f0e829f 100644
--- a/apps/space/components/issues/board-views/block-due-date.tsx
+++ b/apps/space/components/issues/board-views/block-due-date.tsx
@@ -24,7 +24,7 @@ const validDate = (date: any, state: string): string => {
 
 export const IssueBlockDueDate = ({ due_date, state }: any) => (
   <div
-    className={`h-[24px] rounded-md flex px-2.5 py-1 items-center border border-gray-300 gap-1 text-gray-700 text-xs font-medium 
+    className={`h-[24px] rounded-md flex px-2.5 py-1 items-center border border-custom-border-100 gap-1 text-custom-text-100 text-xs font-medium 
     ${validDate(due_date, state)}`}
   >
     {renderDateFormat(due_date)}
diff --git a/apps/space/components/issues/board-views/kanban/block.tsx b/apps/space/components/issues/board-views/kanban/block.tsx
index 5ca3205232d..0a0181b614c 100644
--- a/apps/space/components/issues/board-views/kanban/block.tsx
+++ b/apps/space/components/issues/board-views/kanban/block.tsx
@@ -2,20 +2,22 @@
 
 // mobx react lite
 import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+
 // components
 import { IssueBlockPriority } from "components/issues/board-views/block-priority";
 import { IssueBlockState } from "components/issues/board-views/block-state";
 import { IssueBlockLabels } from "components/issues/board-views/block-labels";
 import { IssueBlockDueDate } from "components/issues/board-views/block-due-date";
-// mobx hook
-import { useMobxStore } from "lib/mobx/store-provider";
 // interfaces
 import { IIssue } from "store/types/issue";
 import { RootStore } from "store/root";
 
-export const IssueListBlock = ({ issue }: { issue: IIssue }) => {
+export const IssueListBlock = observer(({ issue }: { issue: IIssue }) => {
   const store: RootStore = useMobxStore();
 
+  const { issue: issueStore } = store;
+
   return (
     <div className="p-3.5 h-[118px] flex flex-col justify-between bg-custom-background-100 space-y-2 rounded shadow">
       {/* id */}
@@ -24,7 +26,12 @@ export const IssueListBlock = ({ issue }: { issue: IIssue }) => {
       </div>
 
       {/* name */}
-      <div className="text-custom-text-100 text-sm font-medium h-full break-words line-clamp-2">{issue.name}</div>
+      <div
+        onClick={() => issueStore?.setActivePeekOverviewIssueId(issue?.id)}
+        className="text-custom-text-100 text-sm font-medium h-full break-words line-clamp-2 cursor-pointer"
+      >
+        {issue.name}
+      </div>
 
       {/* priority */}
       <div className="relative flex flex-wrap items-center gap-2 w-full">
@@ -54,4 +61,4 @@ export const IssueListBlock = ({ issue }: { issue: IIssue }) => {
       </div>
     </div>
   );
-};
+});
diff --git a/apps/space/components/issues/board-views/list/block.tsx b/apps/space/components/issues/board-views/list/block.tsx
index 19ae55178cb..fb95bf5f36f 100644
--- a/apps/space/components/issues/board-views/list/block.tsx
+++ b/apps/space/components/issues/board-views/list/block.tsx
@@ -13,7 +13,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
 import { IIssue } from "store/types/issue";
 import { RootStore } from "store/root";
 
-export const IssueListBlock = ({ issue }: { issue: IIssue }) => {
+export const IssueListBlock = observer(({ issue }: { issue: IIssue }) => {
   const store: RootStore = useMobxStore();
 
   return (
@@ -24,8 +24,15 @@ export const IssueListBlock = ({ issue }: { issue: IIssue }) => {
           {store?.project?.project?.identifier}-{issue?.sequence_id}
         </div>
         {/* name */}
-        <div className="h-full line-clamp-1 w-full overflow-ellipsis">
-          <p className="text-[0.825rem] font-medium text-sm truncate text-custom-text-100">{issue.name}</p>
+        <div className="h-full line-clamp-1 w-full overflow-ellipsis cursor-pointer">
+          <p
+            onClick={() => {
+              store.issue.setActivePeekOverviewIssueId(issue.id);
+            }}
+            className="text-[0.825rem] font-medium text-sm truncate text-custom-text-100"
+          >
+            {issue.name}
+          </p>
         </div>
       </div>
 
@@ -60,4 +67,4 @@ export const IssueListBlock = ({ issue }: { issue: IIssue }) => {
       </div>
     </div>
   );
-};
+});
diff --git a/apps/space/components/issues/filters-render/index.tsx b/apps/space/components/issues/filters-render/index.tsx
index cc9382f2750..74493a4c85f 100644
--- a/apps/space/components/issues/filters-render/index.tsx
+++ b/apps/space/components/issues/filters-render/index.tsx
@@ -33,7 +33,7 @@ const IssueFilter = observer(() => {
 
   return (
     <div className="flex-shrink-0 min-h-[50px] h-auto py-1.5 border-b border-custom-border-200 relative flex items-center shadow-md bg-whiate select-none">
-      <div className="container mx-auto px-5 flex justify-start items-center flex-wrap gap-2 text-sm">
+      <div className="px-5 flex justify-start items-center flex-wrap gap-2 text-sm">
         {/* state */}
         {store.issue.checkIfFilterExistsForKey("state") && <IssueStateFilter />}
         {/* labels */}
diff --git a/apps/space/components/issues/navbar/index.tsx b/apps/space/components/issues/navbar/index.tsx
index 033bb0fcee8..3e9091fa47a 100644
--- a/apps/space/components/issues/navbar/index.tsx
+++ b/apps/space/components/issues/navbar/index.tsx
@@ -62,9 +62,9 @@ const IssueNavbar = observer(() => {
       </div>
 
       {/* theming */}
-      {/* <div className="flex-shrink-0 relative">
+      <div className="flex-shrink-0 relative">
         <NavbarTheme />
-      </div> */}
+      </div>
     </div>
   );
 });
diff --git a/apps/space/components/issues/navbar/theme.tsx b/apps/space/components/issues/navbar/theme.tsx
index c122f847841..7dd504a4a45 100644
--- a/apps/space/components/issues/navbar/theme.tsx
+++ b/apps/space/components/issues/navbar/theme.tsx
@@ -1,5 +1,11 @@
 "use client";
 
+// react
+import { useEffect } from "react";
+
+// next theme
+import { useTheme } from "next-themes";
+
 // mobx react lite
 import { observer } from "mobx-react-lite";
 // mobx
@@ -9,16 +15,24 @@ import { RootStore } from "store/root";
 export const NavbarTheme = observer(() => {
   const store: RootStore = useMobxStore();
 
+  const { setTheme, theme } = useTheme();
+
   const handleTheme = () => {
     store?.theme?.setTheme(store?.theme?.theme === "light" ? "dark" : "light");
+    setTheme(theme === "light" ? "dark" : "light");
+    document?.documentElement.setAttribute("data-theme", theme ?? store?.theme?.theme);
   };
 
+  useEffect(() => {
+    document?.documentElement.setAttribute("data-theme", theme ?? store?.theme?.theme);
+  }, [theme, store]);
+
   return (
     <div
-      className="relative w-[28px] h-[28px] flex justify-center items-center rounded-sm cursor-pointer bg-gray-100 hover:bg-gray-200 hover:bg-gray-200/60 text-gray-600 transition-all"
+      className="relative w-[28px] h-[28px] flex justify-center rounded-md items-center rounded-sm cursor-pointer bg-custom-background-100 hover:bg-custom-background-200 hover:bg-custom-background-200/60 text-custom-text-100 transition-all"
       onClick={handleTheme}
     >
-      {store?.theme?.theme === "light" ? (
+      {theme === "light" ? (
         <span className={`material-symbols-rounded text-[18px]`}>dark_mode</span>
       ) : (
         <span className={`material-symbols-rounded text-[18px]`}>light_mode</span>
diff --git a/apps/space/components/issues/peek-overview/add-comment.tsx b/apps/space/components/issues/peek-overview/add-comment.tsx
new file mode 100644
index 00000000000..ede25f32d93
--- /dev/null
+++ b/apps/space/components/issues/peek-overview/add-comment.tsx
@@ -0,0 +1,126 @@
+import React, { useRef } from "react";
+
+import { useParams } from "next/navigation";
+
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+// react-hook-form
+import { useForm, Controller } from "react-hook-form";
+
+// hooks
+import useToast from "hooks/use-toast";
+
+// ui
+import { SecondaryButton } from "components/ui";
+
+// types
+import { Comment } from "store/types";
+
+// components
+import Tiptap, { ITiptapRichTextEditor } from "components/tiptap";
+
+const TiptapEditor = React.forwardRef<ITiptapRichTextEditor, ITiptapRichTextEditor>((props, ref) => (
+  <Tiptap {...props} forwardedRef={ref} />
+));
+
+TiptapEditor.displayName = "TiptapEditor";
+
+const defaultValues: Partial<Comment> = {
+  comment_json: "",
+  comment_html: "",
+};
+
+type Props = {
+  issueId: string | null;
+  disabled?: boolean;
+};
+
+export const AddComment: React.FC<Props> = observer((props) => {
+  const { issueId, disabled = false } = props;
+
+  const {
+    handleSubmit,
+    control,
+    setValue,
+    watch,
+    formState: { isSubmitting },
+    reset,
+  } = useForm<Comment>({ defaultValues });
+
+  const routerParams = useParams();
+  const { workspace_slug, project_slug } = routerParams as { workspace_slug: string; project_slug: string };
+
+  const { issue: issueStore, user: userStore } = useMobxStore();
+
+  const editorRef = useRef<any>(null);
+
+  const { setToastAlert } = useToast();
+
+  const onSubmit = async (formData: Comment) => {
+    if (
+      !workspace_slug ||
+      !project_slug ||
+      !issueId ||
+      isSubmitting ||
+      !formData.comment_html ||
+      !formData.comment_json
+    )
+      return;
+
+    await issueStore
+      .createIssueCommentAsync(workspace_slug, project_slug, issueId, formData)
+      .then(() => {
+        reset(defaultValues);
+        editorRef.current?.clearEditor();
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Comment could not be posted. Please try again.",
+        });
+      });
+  };
+
+  return (
+    <div>
+      <div className="issue-comments-section">
+        <Controller
+          name="comment_html"
+          control={control}
+          render={({ field: { value, onChange } }) => (
+            <TiptapEditor
+              workspaceSlug={workspace_slug as string}
+              ref={editorRef}
+              value={
+                !value || value === "" || (typeof value === "object" && Object.keys(value).length === 0)
+                  ? watch("comment_html")
+                  : value
+              }
+              customClassName="p-3 min-h-[50px] shadow-sm"
+              debouncedUpdatesEnabled={false}
+              onChange={(comment_json: Object, comment_html: string) => {
+                onChange(comment_html);
+                setValue("comment_json", comment_json);
+              }}
+            />
+          )}
+        />
+
+        <SecondaryButton
+          onClick={(e) => {
+            userStore.requiredLogin(() => {
+              handleSubmit(onSubmit)(e);
+            });
+          }}
+          type="submit"
+          disabled={isSubmitting || disabled}
+          className="mt-2"
+        >
+          {isSubmitting ? "Adding..." : "Comment"}
+        </SecondaryButton>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/space/components/issues/peek-overview/comment-detail-card.tsx b/apps/space/components/issues/peek-overview/comment-detail-card.tsx
new file mode 100644
index 00000000000..27ba36918ca
--- /dev/null
+++ b/apps/space/components/issues/peek-overview/comment-detail-card.tsx
@@ -0,0 +1,228 @@
+import React, { useEffect, useState, useRef } from "react";
+
+// react-hook-form
+import { useForm } from "react-hook-form";
+
+// mobx
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+// headless ui
+import { Menu, Transition } from "@headlessui/react";
+
+// icons
+import { ChatBubbleLeftEllipsisIcon, CheckIcon, XMarkIcon, EllipsisVerticalIcon } from "@heroicons/react/24/outline";
+
+// helpers
+import { timeAgo } from "helpers/date-time.helper";
+// types
+import { Comment } from "store/types";
+import Tiptap, { ITiptapRichTextEditor } from "components/tiptap";
+
+const TiptapEditor = React.forwardRef<ITiptapRichTextEditor, ITiptapRichTextEditor>((props, ref) => (
+  <Tiptap {...props} forwardedRef={ref} />
+));
+
+TiptapEditor.displayName = "TiptapEditor";
+
+type Props = {
+  workspaceSlug: string;
+  comment: Comment;
+};
+
+export const CommentCard: React.FC<Props> = observer((props) => {
+  const { comment, workspaceSlug } = props;
+
+  const { user: userStore, issue: issueStore } = useMobxStore();
+
+  const editorRef = useRef<any>(null);
+  const showEditorRef = useRef<any>(null);
+
+  const [isEditing, setIsEditing] = useState(false);
+
+  const {
+    formState: { isSubmitting },
+    handleSubmit,
+    setFocus,
+    watch,
+    setValue,
+  } = useForm<Comment>({
+    defaultValues: comment,
+  });
+
+  const handleDelete = async () => {
+    if (!workspaceSlug || !issueStore.activePeekOverviewIssueId) return;
+
+    await issueStore.deleteIssueCommentAsync(
+      workspaceSlug,
+      comment.project,
+      issueStore.activePeekOverviewIssueId,
+      comment.id
+    );
+  };
+
+  const handleCommentUpdate = async (formData: Comment) => {
+    if (!workspaceSlug || !issueStore.activePeekOverviewIssueId) return;
+
+    const response = await issueStore.updateIssueCommentAsync(
+      workspaceSlug,
+      comment.project,
+      issueStore.activePeekOverviewIssueId,
+      comment.id,
+      formData
+    );
+
+    if (response) {
+      editorRef.current?.setEditorValue(response.comment_html);
+      showEditorRef.current?.setEditorValue(response.comment_html);
+    }
+
+    setIsEditing(false);
+  };
+
+  useEffect(() => {
+    isEditing && setFocus("comment_html");
+  }, [isEditing, setFocus]);
+
+  return (
+    <div className="relative flex items-start space-x-3">
+      <div className="relative px-1">
+        {comment.actor_detail.avatar && comment.actor_detail.avatar !== "" ? (
+          <img
+            src={comment.actor_detail.avatar}
+            alt={
+              comment.actor_detail.is_bot ? comment.actor_detail.first_name + " Bot" : comment.actor_detail.display_name
+            }
+            height={30}
+            width={30}
+            className="grid h-7 w-7 place-items-center rounded-full border-2 border-custom-border-200"
+          />
+        ) : (
+          <div className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-white`}>
+            {comment.actor_detail.is_bot
+              ? comment.actor_detail.first_name.charAt(0)
+              : comment.actor_detail.display_name.charAt(0)}
+          </div>
+        )}
+
+        <span className="absolute -bottom-0.5 -right-1 rounded-tl bg-custom-background-80 px-0.5 py-px">
+          <ChatBubbleLeftEllipsisIcon className="h-3.5 w-3.5 text-custom-text-200" aria-hidden="true" />
+        </span>
+      </div>
+      <div className="min-w-0 flex-1">
+        <div>
+          <div className="text-xs">
+            {comment.actor_detail.is_bot ? comment.actor_detail.first_name + " Bot" : comment.actor_detail.display_name}
+          </div>
+          <p className="mt-0.5 text-xs text-custom-text-200">
+            <>Commented {timeAgo(comment.created_at)}</>
+          </p>
+        </div>
+        <div className="issue-comments-section p-0">
+          <form
+            onSubmit={handleSubmit(handleCommentUpdate)}
+            className={`flex-col gap-2 ${isEditing ? "flex" : "hidden"}`}
+          >
+            <div>
+              <TiptapEditor
+                workspaceSlug={workspaceSlug as string}
+                ref={editorRef}
+                value={watch("comment_html")}
+                debouncedUpdatesEnabled={false}
+                customClassName="min-h-[50px] p-3 shadow-sm"
+                onChange={(comment_json: Object, comment_html: string) => {
+                  setValue("comment_json", comment_json);
+                  setValue("comment_html", comment_html);
+                }}
+              />
+            </div>
+            <div className="flex gap-1 self-end">
+              <button
+                type="submit"
+                disabled={isSubmitting}
+                className="group rounded border border-green-500 bg-green-500/20 p-2 shadow-md duration-300 hover:bg-green-500"
+              >
+                <CheckIcon className="h-3 w-3 text-green-500 duration-300 group-hover:text-white" />
+              </button>
+              <button
+                type="button"
+                className="group rounded border border-red-500 bg-red-500/20 p-2 shadow-md duration-300 hover:bg-red-500"
+                onClick={() => setIsEditing(false)}
+              >
+                <XMarkIcon className="h-3 w-3 text-red-500 duration-300 group-hover:text-white" />
+              </button>
+            </div>
+          </form>
+          <div className={`${isEditing ? "hidden" : ""}`}>
+            <TiptapEditor
+              workspaceSlug={workspaceSlug as string}
+              ref={showEditorRef}
+              value={comment.comment_html}
+              editable={false}
+              customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
+            />
+          </div>
+        </div>
+      </div>
+
+      {userStore?.currentUser?.id === comment?.actor_detail?.id && (
+        <Menu as="div" className="relative w-min text-left">
+          <Menu.Button
+            type="button"
+            onClick={() => {}}
+            className="relative grid place-items-center rounded p-1 text-custom-text-200 hover:text-custom-text-100 outline-none cursor-pointer hover:bg-custom-background-80"
+          >
+            <EllipsisVerticalIcon className="h-5 w-5 text-custom-text-200 duration-300" />
+          </Menu.Button>
+
+          <Transition
+            as={React.Fragment}
+            enter="transition ease-out duration-100"
+            enterFrom="transform opacity-0 scale-95"
+            enterTo="transform opacity-100 scale-100"
+            leave="transition ease-in duration-75"
+            leaveFrom="transform opacity-100 scale-100"
+            leaveTo="transform opacity-0 scale-95"
+          >
+            <Menu.Items className="absolute z-10 overflow-y-scroll whitespace-nowrap rounded-md max-h-36 border right-0 origin-top-right mt-1 overflow-auto min-w-[8rem] border-custom-border-300 p-1 text-xs shadow-lg focus:outline-none bg-custom-background-90">
+              <Menu.Item>
+                {({ active }) => (
+                  <div className="py-1">
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setIsEditing(true);
+                      }}
+                      className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80 ${
+                        active ? "bg-custom-background-80" : ""
+                      }`}
+                    >
+                      Edit
+                    </button>
+                  </div>
+                )}
+              </Menu.Item>
+              <Menu.Item>
+                {({ active }) => (
+                  <div className="py-1">
+                    <button
+                      type="button"
+                      onClick={() => {
+                        handleDelete();
+                      }}
+                      className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80 ${
+                        active ? "bg-custom-background-80" : ""
+                      }`}
+                    >
+                      Delete
+                    </button>
+                  </div>
+                )}
+              </Menu.Item>
+            </Menu.Items>
+          </Transition>
+        </Menu>
+      )}
+    </div>
+  );
+});
diff --git a/apps/space/components/issues/peek-overview/full-screen-peek-view.tsx b/apps/space/components/issues/peek-overview/full-screen-peek-view.tsx
index cb622628bfe..27080d37f46 100644
--- a/apps/space/components/issues/peek-overview/full-screen-peek-view.tsx
+++ b/apps/space/components/issues/peek-overview/full-screen-peek-view.tsx
@@ -1,3 +1,9 @@
+import { useEffect } from "react";
+
+// mobx
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+
 import {
   PeekOverviewHeader,
   PeekOverviewIssueActivity,
@@ -7,55 +13,58 @@ import {
 } from "components/issues/peek-overview";
 
 type Props = {
+  issueId: string;
+  workspaceSlug: string;
+  projectId: string;
   handleClose: () => void;
-  handleDeleteIssue: () => void;
-  handleUpdateIssue: (issue: Partial<any>) => Promise<void>;
-  issue: any;
   mode: TPeekOverviewModes;
-  readOnly: boolean;
   setMode: (mode: TPeekOverviewModes) => void;
-  workspaceSlug: string;
 };
 
-export const FullScreenPeekView: React.FC<Props> = ({
-  handleClose,
-  handleDeleteIssue,
-  handleUpdateIssue,
-  issue,
-  mode,
-  readOnly,
-  setMode,
-  workspaceSlug,
-}) => (
-  <div className="h-full w-full grid grid-cols-10 divide-x divide-custom-border-200 overflow-hidden">
-    <div className="h-full w-full flex flex-col col-span-7 overflow-hidden">
-      <div className="w-full p-5">
-        <PeekOverviewHeader
-          handleClose={handleClose}
-          issue={issue}
-          mode={mode}
-          setMode={setMode}
-          workspaceSlug={workspaceSlug}
-        />
-      </div>
-      <div className="h-full w-full px-6 overflow-y-auto">
-        {/* issue title and description */}
-        <div className="w-full">
-          <PeekOverviewIssueDetails issue={issue} workspaceSlug={workspaceSlug} />
-        </div>
-        {/* divider */}
-        <div className="h-[1] w-full border-t border-custom-border-200 my-5" />
-        {/* issue activity/comments */}
-        <div className="w-full">
-          <PeekOverviewIssueActivity workspaceSlug={workspaceSlug} issue={issue} />
-        </div>
-      </div>
-    </div>
-    <div className="col-span-3 h-full w-full overflow-y-auto">
-      {/* issue properties */}
-      <div className="w-full px-6 py-5">
-        <PeekOverviewIssueProperties issue={issue} mode="full" workspaceSlug={workspaceSlug} />
-      </div>
-    </div>
-  </div>
-);
+export const FullScreenPeekView: React.FC<Props> = observer((props) => {
+  const { handleClose, issueId, mode, setMode, workspaceSlug , projectId } = props;
+
+  const { issue: issueStore } = useMobxStore();
+
+  const issue = issueStore.issue_detail[issueId]?.issue;
+
+  useEffect(() => {
+    if (!workspaceSlug || !projectId || !issueId) return;
+
+    issueStore.getIssueByIdAsync(workspaceSlug, projectId, issueId);
+  }, [workspaceSlug, projectId, issueId, issueStore]);
+
+  return (
+    <div className="h-full w-full grid grid-cols-10 divide-x divide-custom-border-200 overflow-hidden">
+            <div className="h-full w-full flex flex-col col-span-7 overflow-hidden">
+              <div className="w-full p-5">
+                <PeekOverviewHeader
+                  handleClose={handleClose}
+                  issue={issue}
+                  mode={mode}
+                  setMode={setMode}
+                  workspaceSlug={workspaceSlug}
+                />
+              </div>
+              <div className="h-full w-full px-6 overflow-y-auto">
+                {/* issue title and description */}
+                <div className="w-full">
+                  <PeekOverviewIssueDetails issue={issue} />
+                </div>
+                {/* divider */}
+                <div className="h-[1] w-full border-t border-custom-border-200 my-5" />
+                {/* issue activity/comments */}
+                <div className="w-full">
+                  <PeekOverviewIssueActivity workspaceSlug={workspaceSlug} />
+                </div>
+              </div>
+            </div>
+            <div className="col-span-3 h-full w-full overflow-y-auto">
+              {/* issue properties */}
+              <div className="w-full px-6 py-5">
+                <PeekOverviewIssueProperties issue={issue} mode="full" workspaceSlug={workspaceSlug} />
+              </div>
+            </div>
+          </div>
+  )
+})
diff --git a/apps/space/components/issues/peek-overview/header.tsx b/apps/space/components/issues/peek-overview/header.tsx
index f05b8ed1f33..86b7fdffc84 100644
--- a/apps/space/components/issues/peek-overview/header.tsx
+++ b/apps/space/components/issues/peek-overview/header.tsx
@@ -40,7 +40,7 @@ export const PeekOverviewHeader: React.FC<Props> = ({ issue, handleClose, mode,
   const handleCopyLink = () => {
     const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
 
-    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`).then(() => {
+    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${issue.project}/`).then(() => {
       setToastAlert({
         type: "success",
         title: "Link copied!",
@@ -53,7 +53,12 @@ export const PeekOverviewHeader: React.FC<Props> = ({ issue, handleClose, mode,
     <div className="flex justify-between items-center">
       <div className="flex items-center gap-4">
         {mode === "side" && (
-          <button type="button" onClick={handleClose}>
+          <button
+            type="button"
+            onClick={() => {
+              handleClose();
+            }}
+          >
             <East
               sx={{
                 fontSize: "14px",
diff --git a/apps/space/components/issues/peek-overview/index.ts b/apps/space/components/issues/peek-overview/index.ts
index 168f63cf59c..44ab04b88a4 100644
--- a/apps/space/components/issues/peek-overview/index.ts
+++ b/apps/space/components/issues/peek-overview/index.ts
@@ -6,3 +6,7 @@ export * from "./issue-properties";
 export * from "./layout";
 export * from "./side-peek-view";
 export * from "./issue-reaction";
+export * from "./issue-vote-reactions";
+export * from "./issue-emoji-reactions";
+export * from "./comment-detail-card";
+export * from "./add-comment";
diff --git a/apps/space/components/issues/peek-overview/issue-activity.tsx b/apps/space/components/issues/peek-overview/issue-activity.tsx
index 1496bfc30c8..266f2ed3c9d 100644
--- a/apps/space/components/issues/peek-overview/issue-activity.tsx
+++ b/apps/space/components/issues/peek-overview/issue-activity.tsx
@@ -1,92 +1,42 @@
-import useSWR, { mutate } from "swr";
-
+import React, { useEffect } from "react";
 // mobx
 import { observer } from "mobx-react-lite";
 import { useMobxStore } from "lib/mobx/store-provider";
 
-// services
-// import issuesService from "services/issues.service";
-// hooks
-import useToast from "hooks/use-toast";
-// components
-// import { AddComment, IssueActivitySection } from "components/issues";
-// fetch-keys
-// import { PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
+import { CommentCard, AddComment } from "components/issues/peek-overview";
 
 type Props = {
   workspaceSlug: string;
-  issue: any;
 };
 
-export const PeekOverviewIssueActivity: React.FC<Props> = observer(({ workspaceSlug, issue }) => {
-  const { setToastAlert } = useToast();
-
-  const { user: userStore } = useMobxStore();
-
-  const user = userStore?.currentUser;
-
-  // const { data: issueActivity, mutate: mutateIssueActivity } = useSWR(
-  //   workspaceSlug && issue ? PROJECT_ISSUES_ACTIVITY(issue.id) : null,
-  //   workspaceSlug && issue
-  //     ? () => issuesService.getIssueActivities(workspaceSlug.toString(), issue?.project, issue?.id)
-  //     : null
-  // );
-
-  // const handleCommentUpdate = async (comment: any) => {
-  //   if (!workspaceSlug || !issue) return;
+export const PeekOverviewIssueActivity: React.FC<Props> = observer((props) => {
+  const { workspaceSlug } = props;
 
-  //   await issuesService
-  //     .patchIssueComment(
-  //       workspaceSlug as string,
-  //       issue.project,
-  //       issue.id,
-  //       comment.id,
-  //       comment,
-  //       user
-  //     )
-  //     .then(() => mutateIssueActivity());
-  // };
+  const { issue: issueStore, user: userStore } = useMobxStore();
 
-  // const handleCommentDelete = async (commentId: string) => {
-  //   if (!workspaceSlug || !issue) return;
+  const issueId = issueStore?.activePeekOverviewIssueId;
+  const comments = issueStore?.issue_detail[issueId ?? ""]?.comments ?? [];
 
-  //   mutateIssueActivity((prevData: any) => prevData?.filter((p: any) => p.id !== commentId), false);
+  useEffect(() => {
+    if (userStore.currentUser) return;
 
-  //   await issuesService
-  //     .deleteIssueComment(workspaceSlug as string, issue.project, issue.id, commentId, user)
-  //     .then(() => mutateIssueActivity());
-  // };
-
-  // const handleAddComment = async (formData: IIssueComment) => {
-  //   if (!workspaceSlug || !issue) return;
-
-  //   await issuesService
-  //     .createIssueComment(workspaceSlug.toString(), issue.project, issue.id, formData, user)
-  //     .then(() => {
-  //       mutate(PROJECT_ISSUES_ACTIVITY(issue.id));
-  //     })
-  //     .catch(() =>
-  //       setToastAlert({
-  //         type: "error",
-  //         title: "Error!",
-  //         message: "Comment could not be posted. Please try again.",
-  //       })
-  //     );
-  // };
+    userStore.getUserAsync();
+  }, [userStore]);
 
   return (
     <div>
       <h4 className="font-medium">Activity</h4>
-      {/* <div className="mt-4">
-        <IssueActivitySection
-          activity={issueActivity}
-          handleCommentUpdate={handleCommentUpdate}
-          handleCommentDelete={handleCommentDelete}
-        />
+
+      <div className="mt-4">
+        <div className="space-y-4">
+          {comments.map((comment) => (
+            <CommentCard comment={comment} workspaceSlug={workspaceSlug} />
+          ))}
+        </div>
         <div className="mt-4">
-          <AddComment onSubmit={handleAddComment} />
+          <AddComment disabled={!userStore.currentUser} issueId={issueId} />
         </div>
-      </div> */}
+      </div>
     </div>
   );
 });
diff --git a/apps/space/components/issues/peek-overview/issue-details.tsx b/apps/space/components/issues/peek-overview/issue-details.tsx
index b5b19db19f7..192a9d96974 100644
--- a/apps/space/components/issues/peek-overview/issue-details.tsx
+++ b/apps/space/components/issues/peek-overview/issue-details.tsx
@@ -1,18 +1,18 @@
 // components
-import { IssueReaction } from "components/issues/peek-overview";
+import { IssueReactions } from "components/issues/peek-overview";
 // types
+import { IIssue } from "store/types";
 
 type Props = {
-  issue: any;
-  workspaceSlug: string;
+  issue: IIssue;
 };
 
-export const PeekOverviewIssueDetails: React.FC<Props> = ({ issue, workspaceSlug }) => (
+export const PeekOverviewIssueDetails: React.FC<Props> = ({ issue }) => (
   <div className="space-y-2">
     <h6 className="font-medium text-custom-text-200">
       {issue.project_detail.identifier}-{issue.sequence_id}
     </h6>
     <h4 className="break-words text-2xl font-semibold">{issue.name}</h4>
-    {/* <IssueReaction workspaceSlug={workspaceSlug} issueId={issue.id} projectId={issue.project} /> */}
+    <IssueReactions />
   </div>
 );
diff --git a/apps/space/components/issues/peek-overview/issue-emoji-reactions.tsx b/apps/space/components/issues/peek-overview/issue-emoji-reactions.tsx
new file mode 100644
index 00000000000..e89eb987993
--- /dev/null
+++ b/apps/space/components/issues/peek-overview/issue-emoji-reactions.tsx
@@ -0,0 +1,94 @@
+"use client";
+
+// react
+import { useEffect } from "react";
+
+// next
+import { useParams } from "next/navigation";
+
+// mobx
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+// helpers
+import { groupReactions, renderEmoji } from "helpers/emoji.helper";
+
+// ui
+import { ReactionSelector } from "components/ui";
+
+export const IssueEmojiReactions: React.FC = observer(() => {
+  const routerParams = useParams();
+
+  const { workspace_slug, project_slug } = routerParams as { workspace_slug: string; project_slug: string };
+
+  const { user: userStore, issue: issueStore } = useMobxStore();
+
+  const user = userStore?.currentUser;
+  const issueId = issueStore.activePeekOverviewIssueId;
+
+  const reactions = issueId ? issueStore.issue_detail[issueId]?.reactions || [] : [];
+  const groupedReactions = groupReactions(reactions, "reaction");
+
+  const handleReactionClick = (reactionHexa: string) => {
+    if (!workspace_slug || !project_slug || !issueId) return;
+
+    const userReaction = reactions?.find((r) => r.created_by === user?.id && r.reaction === reactionHexa);
+
+    if (userReaction)
+      issueStore.deleteIssueReactionAsync(workspace_slug, userReaction.project, userReaction.issue, reactionHexa);
+    else
+      issueStore.createIssueReactionAsync(workspace_slug, project_slug, issueId, {
+        reaction: reactionHexa,
+      });
+  };
+
+  useEffect(() => {
+    if (user) return;
+
+    userStore.getUserAsync();
+  }, [user, userStore]);
+
+  return (
+    <>
+      <ReactionSelector
+        onSelect={(value) => {
+          userStore.requiredLogin(() => {
+            handleReactionClick(value);
+          });
+        }}
+      />
+
+      {Object.keys(groupedReactions || {}).map(
+        (reaction) =>
+          groupedReactions?.[reaction]?.length &&
+          groupedReactions[reaction].length > 0 && (
+            <button
+              type="button"
+              onClick={() => {
+                userStore.requiredLogin(() => {
+                  handleReactionClick(reaction);
+                });
+              }}
+              key={reaction}
+              className={`flex items-center gap-1 text-custom-text-100 text-sm h-full px-2 py-1 rounded-md border ${
+                reactions?.some((r) => r.actor === user?.id && r.reaction === reaction)
+                  ? "bg-custom-primary-100/10 border-custom-primary-100"
+                  : "bg-custom-background-80 border-transparent"
+              }`}
+            >
+              <span>{renderEmoji(reaction)}</span>
+              <span
+                className={
+                  reactions?.some((r) => r.actor === user?.id && r.reaction === reaction)
+                    ? "text-custom-primary-100"
+                    : ""
+                }
+              >
+                {groupedReactions?.[reaction].length}{" "}
+              </span>
+            </button>
+          )
+      )}
+    </>
+  );
+});
diff --git a/apps/space/components/issues/peek-overview/issue-properties.tsx b/apps/space/components/issues/peek-overview/issue-properties.tsx
index d23cdcc255c..75e5e4608d8 100644
--- a/apps/space/components/issues/peek-overview/issue-properties.tsx
+++ b/apps/space/components/issues/peek-overview/issue-properties.tsx
@@ -1,19 +1,40 @@
 // headless ui
 import { Disclosure } from "@headlessui/react";
 // import { getStateGroupIcon } from "components/icons";
+// hooks
+import useToast from "hooks/use-toast";
 // components
 import { TPeekOverviewModes } from "components/issues/peek-overview";
 // icons
 import { Icon } from "components/ui";
 import { copyTextToClipboard, addSpaceIfCamelCase } from "helpers/string.helper";
-import useToast from "hooks/use-toast";
+
+// types
+import { IIssue } from "store/types";
+
+// constants
+import { issueGroupFilter, issuePriorityFilter } from "constants/data";
+import { useEffect } from "react";
+import { renderDateFormat } from "constants/helpers";
 
 type Props = {
-  issue: any;
+  issue: IIssue;
   mode: TPeekOverviewModes;
   workspaceSlug: string;
 };
 
+const validDate = (date: any, state: string): string => {
+  if (date === null || ["backlog", "unstarted", "cancelled"].includes(state))
+    return `bg-gray-500/10 text-gray-500 border-gray-500/50`;
+  else {
+    const today = new Date();
+    const dueDate = new Date(date);
+
+    if (dueDate < today) return `bg-red-500/10 text-red-500 border-red-500/50`;
+    else return `bg-green-500/10 text-green-500 border-green-500/50`;
+  }
+};
+
 export const PeekOverviewIssueProperties: React.FC<Props> = ({ issue, mode, workspaceSlug }) => {
   const { setToastAlert } = useToast();
 
@@ -26,6 +47,11 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({ issue, mode, work
   const maxDate = targetDate ? new Date(targetDate) : null;
   maxDate?.setDate(maxDate.getDate());
 
+  const state = issue.state_detail;
+  const stateGroup = issueGroupFilter(state.group);
+
+  const priority = issue.priority ? issuePriorityFilter(issue.priority) : null;
+
   const handleCopyLink = () => {
     const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
 
@@ -60,20 +86,14 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({ issue, mode, work
             <span className="flex-grow truncate">State</span>
           </div>
           <div className="w-3/4">
-            <button type="button" className="bg-custom-background-80 text-sm rounded px-2.5 py-0.5">
-              {issue.state && (
+            {stateGroup && (
+              <div className="inline-flex bg-custom-background-80 text-sm rounded px-2.5 py-0.5">
                 <div className="flex items-center gap-1.5 text-left text-custom-text-100">
-                  {/* {getStateGroupIcon(issue.state?.group ?? "backlog", "14", "14", issue.state?.color ?? "")}
-                  {addSpaceIfCamelCase(selectedState?.name ?? "")} */}
+                  <stateGroup.icon />
+                  {addSpaceIfCamelCase(state?.name ?? "")}
                 </div>
-              )}
-            </button>
-
-            {/* <SidebarStateSelect
-              value={issue.state}
-              onChange={(val: string) => onChange({ state: val })}
-              disabled={readOnly}
-            /> */}
+              </div>
+            )}
           </div>
         </div>
 
@@ -83,23 +103,26 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({ issue, mode, work
             <span className="flex-grow truncate">Priority</span>
           </div>
           <div className="w-3/4">
-            {/* <button
-              type="button"
-              className={`flex items-center gap-1.5 text-left text-sm capitalize rounded px-2.5 py-0.5 ${
-                value === "urgent"
+            <div
+              className={`inline-flex items-center gap-1.5 text-left text-sm capitalize rounded px-2.5 py-0.5 ${
+                priority?.key === "urgent"
                   ? "border-red-500/20 bg-red-500/20 text-red-500"
-                  : value === "high"
+                  : priority?.key === "high"
                   ? "border-orange-500/20 bg-orange-500/20 text-orange-500"
-                  : value === "medium"
+                  : priority?.key === "medium"
                   ? "border-yellow-500/20 bg-yellow-500/20 text-yellow-500"
-                  : value === "low"
+                  : priority?.key === "low"
                   ? "border-green-500/20 bg-green-500/20 text-green-500"
                   : "bg-custom-background-80 border-custom-border-200"
               }`}
             >
-              <span className="grid place-items-center -my-1">{getPriorityIcon(value ?? "None", "!text-sm")}</span>
-              <span>{value ?? "None"}</span>
-            </button> */}
+              {priority && (
+                <span className="grid place-items-center -my-1">
+                  <Icon iconName={priority?.icon!} />
+                </span>
+              )}
+              <span>{priority?.title ?? "None"}</span>
+            </div>
           </div>
         </div>
         <div className="flex items-center gap-2 text-sm">
@@ -107,56 +130,19 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({ issue, mode, work
             <Icon iconName="calendar_today" className="!text-base flex-shrink-0" />
             <span className="flex-grow truncate">Due date</span>
           </div>
-          {/* <div>
+          <div>
             {issue.target_date ? (
-              <CustomDatePicker
-                placeholder="Due date"
-                value={issue.target_date}
-                onChange={(val) =>
-                  onChange({
-                    target_date: val,
-                  })
-                }
-                className="bg-custom-background-100"
-                wrapperClassName="w-full"
-                minDate={minDate ?? undefined}
-                disabled={readOnly}
-              />
+              <div
+                className={`h-[24px] rounded-md flex px-2.5 py-1 items-center border border-custom-border-100 gap-1 text-custom-text-100 text-xs font-medium 
+                ${validDate(issue.target_date, state)}`}
+              >
+                {renderDateFormat(issue.target_date)}
+              </div>
             ) : (
               <span className="text-custom-text-200">Empty</span>
             )}
-          </div> */}
-        </div>
-        {/* <div className="flex items-center gap-2 text-sm">
-          <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
-            <Icon iconName="change_history" className="!text-base flex-shrink-0" />
-            <span className="flex-grow truncate">Estimate</span>
-          </div>
-          <div className="w-3/4">
-            <SidebarEstimateSelect
-              value={issue.estimate_point}
-              onChange={(val: number | null) => onChange({ estimate_point: val })}
-              disabled={readOnly}
-            />
           </div>
-        </div> */}
-        {/* <Disclosure as="div">
-          {({ open }) => (
-            <>
-              <Disclosure.Button
-                as="button"
-                type="button"
-                className="flex items-center gap-1 text-sm text-custom-text-200"
-              >
-                Show {open ? "Less" : "More"}
-                <Icon iconName={open ? "expand_less" : "expand_more"} className="!text-base" />
-              </Disclosure.Button>
-              <Disclosure.Panel as="div" className="mt-4 space-y-4">
-                Disclosure Panel
-              </Disclosure.Panel>
-            </>
-          )}
-        </Disclosure> */}
+        </div>
       </div>
     </div>
   );
diff --git a/apps/space/components/issues/peek-overview/issue-reaction.tsx b/apps/space/components/issues/peek-overview/issue-reaction.tsx
index 0005b541728..9dc1fac4037 100644
--- a/apps/space/components/issues/peek-overview/issue-reaction.tsx
+++ b/apps/space/components/issues/peek-overview/issue-reaction.tsx
@@ -1,90 +1,18 @@
-// hooks
+"use client";
 
-// import useIssueReaction from "hooks/use-issue-reaction";
+// ui
+import { IssueEmojiReactions, IssueVotes } from "components/issues/peek-overview";
 
-// mobx
-import { observer } from "mobx-react-lite";
-import { useMobxStore } from "lib/mobx/store-provider";
-
-// components
-import { ReactionSelector } from "components/ui";
-// string helpers
-import { renderEmoji } from "helpers/emoji.helper";
-
-// types
-type Props = {
-  workspaceSlug?: string | string[];
-  projectId?: string | string[];
-  issueId?: string | string[];
-};
-
-export const IssueReaction: React.FC<Props> = observer((props) => {
-  const { workspaceSlug, projectId, issueId } = props;
-
-  // const { user } = useUserAuth();
-
-  const { user: userStore } = useMobxStore();
-
-  const user = userStore?.currentUser;
-
-  return null;
-
-  const { reactions, groupedReactions, handleReactionCreate, handleReactionDelete } = useIssueReaction(
-    workspaceSlug,
-    projectId,
-    issueId
-  );
-
-  const handleReactionClick = (reaction: string) => {
-    if (!workspaceSlug || !projectId || !issueId) return;
-
-    const isSelected = reactions?.some((r) => r.actor === user?.id && r.reaction === reaction);
-
-    if (isSelected) {
-      handleReactionDelete(reaction);
-    } else {
-      handleReactionCreate(reaction);
-    }
-  };
+export const IssueReactions: React.FC = () => (
+  <div className="flex gap-3 items-center mt-4">
+    <div className="flex gap-2 items-center">
+      <IssueVotes />
+    </div>
 
-  return (
-    <div className="flex gap-1.5 items-center mt-4">
-      <ReactionSelector
-        size="md"
-        position="top"
-        value={reactions?.filter((reaction) => reaction.actor === user?.id).map((r) => r.reaction) || []}
-        onSelect={handleReactionClick}
-      />
+    <div className="w-0.5 h-8 bg-custom-background-200" />
 
-      {Object.keys(groupedReactions || {}).map(
-        (reaction) =>
-          groupedReactions?.[reaction]?.length &&
-          groupedReactions[reaction].length > 0 && (
-            <button
-              type="button"
-              onClick={() => {
-                handleReactionClick(reaction);
-              }}
-              key={reaction}
-              className={`flex items-center gap-1 text-custom-text-100 text-sm h-full px-2 py-1 rounded-md ${
-                reactions?.some((r) => r.actor === user?.id && r.reaction === reaction)
-                  ? "bg-custom-primary-100/10"
-                  : "bg-custom-background-80"
-              }`}
-            >
-              <span>{renderEmoji(reaction)}</span>
-              <span
-                className={
-                  reactions?.some((r) => r.actor === user?.id && r.reaction === reaction)
-                    ? "text-custom-primary-100"
-                    : ""
-                }
-              >
-                {groupedReactions?.[reaction].length}{" "}
-              </span>
-            </button>
-          )
-      )}
+    <div className="flex gap-2 items-center">
+      <IssueEmojiReactions />
     </div>
-  );
-});
+  </div>
+);
diff --git a/apps/space/components/issues/peek-overview/issue-vote-reactions.tsx b/apps/space/components/issues/peek-overview/issue-vote-reactions.tsx
new file mode 100644
index 00000000000..f02c242218c
--- /dev/null
+++ b/apps/space/components/issues/peek-overview/issue-vote-reactions.tsx
@@ -0,0 +1,102 @@
+"use client";
+
+// react
+import { useState, useEffect, useRef } from "react";
+
+// next
+import { useParams } from "next/navigation";
+
+// mobx
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+export const IssueVotes: React.FC = observer(() => {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const routerParams = useParams();
+
+  const { workspace_slug, project_slug } = routerParams as { workspace_slug: string; project_slug: string };
+
+  const { user: userStore, issue: issueStore } = useMobxStore();
+
+  const user = userStore?.currentUser;
+  const issueId = issueStore.activePeekOverviewIssueId;
+
+  const votes = issueId ? issueStore.issue_detail[issueId]?.votes : [];
+
+  const upVoteCount = votes?.filter((vote) => vote.vote === 1).length || 0;
+  const downVoteCount = votes?.filter((vote) => vote.vote === -1).length || 0;
+
+  const isUpVotedByUser = votes?.some((vote) => vote.actor === user?.id && vote.vote === 1);
+  const isDownVotedByUser = votes?.some((vote) => vote.actor === user?.id && vote.vote === -1);
+
+  const handleVote = async (e: any, voteValue: 1 | -1) => {
+    if (!workspace_slug || !project_slug || !issueId) return;
+
+    setIsSubmitting(true);
+
+    const actionPerformed = votes?.find((vote) => vote.actor === user?.id && vote.vote === voteValue);
+
+    if (actionPerformed) await issueStore.deleteIssueVoteAsync(workspace_slug, project_slug, issueId);
+    else
+      await issueStore.createIssueVoteAsync(workspace_slug, project_slug, issueId, {
+        vote: voteValue,
+      });
+
+    setIsSubmitting(false);
+  };
+
+  useEffect(() => {
+    if (user) return;
+
+    userStore.getUserAsync();
+  }, [user, userStore]);
+
+  return (
+    <div className="flex gap-2 items-center">
+      {/* upvote button 👇 */}
+      <button
+        type="button"
+        disabled={isSubmitting}
+        onClick={(e) => {
+          userStore.requiredLogin(() => {
+            handleVote(e, 1);
+          });
+        }}
+        className={`flex items-center justify-center overflow-hidden px-2 py-1 gap-x-1 border rounded focus:outline-none ${
+          isUpVotedByUser ? "border-custom-primary-200 text-custom-primary-200" : "border-custom-border-300"
+        }`}
+      >
+        <svg className="w-2.5" viewBox="0 0 8 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M3.44122 2.35988L0.952108 4.84898C0.848405 4.95268 0.718049 5.00574 0.561041 5.00815C0.404044 5.01054 0.271292 4.95749 0.162783 4.84898C0.0542613 4.74047 0 4.60891 0 4.45431C0 4.2997 0.0542613 4.16814 0.162783 4.05963L3.52908 0.693333C3.66448 0.557934 3.82245 0.490234 4.00297 0.490234C4.1835 0.490234 4.34147 0.557934 4.47687 0.693333L7.84316 4.05963C7.94688 4.16335 7.99994 4.2937 8.00233 4.4507C8.00474 4.60771 7.95169 4.74047 7.84316 4.84898C7.73466 4.95749 7.6031 5.01174 7.4485 5.01174C7.2939 5.01174 7.16235 4.95749 7.05384 4.84898L4.56473 2.35988V8.94848C4.56473 9.10787 4.51095 9.24135 4.4034 9.34891C4.29586 9.45646 4.16238 9.51023 4.00297 9.51023C3.84357 9.51023 3.71009 9.45646 3.60254 9.34891C3.495 9.24135 3.44122 9.10787 3.44122 8.94848V2.35988Z"
+            fill="currentColor"
+          />
+        </svg>
+        <span className="text-sm font-normal transition-opacity ease-in-out">{upVoteCount}</span>
+      </button>
+
+      {/* downvote button 👇 */}
+      <button
+        type="button"
+        disabled={isSubmitting}
+        onClick={(e) => {
+          userStore.requiredLogin(() => {
+            handleVote(e, -1);
+          });
+        }}
+        className={`flex items-center justify-center overflow-hidden px-2 py-1 gap-x-1 border rounded focus:outline-none ${
+          isDownVotedByUser ? "border-red-600 text-red-600" : "border-custom-border-300"
+        }`}
+      >
+        <svg className="w-2.5" viewBox="0 0 8 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M4.55878 7.6406L7.04789 5.15151C7.15159 5.04781 7.28195 4.99475 7.43896 4.99234C7.59596 4.98994 7.72871 5.043 7.83722 5.15151C7.94574 5.26002 8 5.39157 8 5.54617C8 5.70079 7.94574 5.83235 7.83722 5.94085L4.47092 9.30715C4.33552 9.44255 4.17755 9.51025 3.99703 9.51025C3.8165 9.51025 3.65853 9.44255 3.52313 9.30715L0.156836 5.94085C0.0531201 5.83714 6.34193e-05 5.70678 -0.00233364 5.54979C-0.00474262 5.39278 0.0483136 5.26002 0.156836 5.15151C0.265345 5.043 0.396898 4.98875 0.551497 4.98875C0.706097 4.98875 0.837651 5.043 0.946161 5.15151L3.43527 7.6406L3.43527 1.05201C3.43527 0.892613 3.48905 0.759136 3.5966 0.651576C3.70414 0.544028 3.83762 0.490253 3.99703 0.490253C4.15643 0.490253 4.28991 0.544028 4.39746 0.651576C4.505 0.759136 4.55878 0.892613 4.55878 1.05201L4.55878 7.6406Z"
+            fill="currentColor"
+          />
+        </svg>
+        <span className="text-sm font-normal transition-opacity ease-in-out">{downVoteCount}</span>
+      </button>
+    </div>
+  );
+});
diff --git a/apps/space/components/issues/peek-overview/layout.tsx b/apps/space/components/issues/peek-overview/layout.tsx
index 5da30125c24..3aac687e21d 100644
--- a/apps/space/components/issues/peek-overview/layout.tsx
+++ b/apps/space/components/issues/peek-overview/layout.tsx
@@ -4,26 +4,23 @@ import React, { useState } from "react";
 import { Dialog, Transition } from "@headlessui/react";
 import { FullScreenPeekView, SidePeekView } from "components/issues/peek-overview";
 
+// types
+import type { IIssue } from "store/types";
+
 type Props = {
-  handleDeleteIssue: () => void;
-  handleUpdateIssue: (issue: Partial<any>) => Promise<void>;
-  issue: any | null;
+  issue: IIssue | null;
   isOpen: boolean;
   onClose: () => void;
   workspaceSlug: string;
-  readOnly: boolean;
 };
 
 export type TPeekOverviewModes = "side" | "modal" | "full";
 
 export const IssuePeekOverview: React.FC<Props> = ({
-  handleDeleteIssue,
-  handleUpdateIssue,
   issue,
   isOpen,
   onClose,
   workspaceSlug,
-  readOnly,
 }) => {
   const [peekOverviewMode, setPeekOverviewMode] = useState<TPeekOverviewModes>("side");
 
@@ -74,25 +71,21 @@ export const IssuePeekOverview: React.FC<Props> = ({
                 {(peekOverviewMode === "side" || peekOverviewMode === "modal") && (
                   <SidePeekView
                     handleClose={handleClose}
-                    handleDeleteIssue={handleDeleteIssue}
-                    handleUpdateIssue={handleUpdateIssue}
-                    issue={issue}
+                    issueId={issue.id}
+                    projectId={issue.project}
                     mode={peekOverviewMode}
-                    readOnly={readOnly}
                     setMode={(mode) => setPeekOverviewMode(mode)}
                     workspaceSlug={workspaceSlug}
                   />
                 )}
                 {peekOverviewMode === "full" && (
                   <FullScreenPeekView
+                    issueId={issue.id}
+                    workspaceSlug={workspaceSlug}
+                    projectId={issue.project}
                     handleClose={handleClose}
-                    handleDeleteIssue={handleDeleteIssue}
-                    handleUpdateIssue={handleUpdateIssue}
-                    issue={issue}
                     mode={peekOverviewMode}
-                    readOnly={readOnly}
                     setMode={(mode) => setPeekOverviewMode(mode)}
-                    workspaceSlug={workspaceSlug}
                   />
                 )}
               </Dialog.Panel>
diff --git a/apps/space/components/issues/peek-overview/side-peek-view.tsx b/apps/space/components/issues/peek-overview/side-peek-view.tsx
index c573eec7855..7547f91e935 100644
--- a/apps/space/components/issues/peek-overview/side-peek-view.tsx
+++ b/apps/space/components/issues/peek-overview/side-peek-view.tsx
@@ -1,3 +1,7 @@
+// mobx
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+
 import {
   PeekOverviewHeader,
   PeekOverviewIssueActivity,
@@ -5,41 +9,59 @@ import {
   PeekOverviewIssueProperties,
   TPeekOverviewModes,
 } from "components/issues/peek-overview";
+import { useEffect } from "react";
 
 type Props = {
+  issueId: string;
+  projectId: string;
+  workspaceSlug: string;
   handleClose: () => void;
-  issue: any;
   mode: TPeekOverviewModes;
   setMode: (mode: TPeekOverviewModes) => void;
-  workspaceSlug: string;
 };
 
-export const SidePeekView: React.FC<Props> = ({ handleClose, issue, mode, setMode, workspaceSlug }) => (
-  <div className="h-full w-full flex flex-col overflow-hidden">
-    <div className="w-full p-5">
-      <PeekOverviewHeader
-        handleClose={handleClose}
-        issue={issue}
-        mode={mode}
-        setMode={setMode}
-        workspaceSlug={workspaceSlug}
-      />
-    </div>
-    <div className="h-full w-full px-6 overflow-y-auto">
-      {/* issue title and description */}
-      <div className="w-full">
-        <PeekOverviewIssueDetails issue={issue} workspaceSlug={workspaceSlug} />
-      </div>
-      {/* issue properties */}
-      <div className="w-full mt-10">
-        <PeekOverviewIssueProperties issue={issue} mode={mode} workspaceSlug={workspaceSlug} />
-      </div>
-      {/* divider */}
-      <div className="h-[1] w-full border-t border-custom-border-200 my-5" />
-      {/* issue activity/comments */}
-      <div className="w-full pb-5">
-        <PeekOverviewIssueActivity workspaceSlug={workspaceSlug} issue={issue} />
+export const SidePeekView: React.FC<Props> = observer((props) => {
+  const { handleClose, issueId, mode, setMode, workspaceSlug, projectId } = props;
+
+  const { issue: issueStore } = useMobxStore();
+
+  const issue = issueStore.issue_detail[issueId]?.issue;
+
+  useEffect(() => {
+    if (!workspaceSlug || !projectId || !issueId) return;
+
+    issueStore.getIssueByIdAsync(workspaceSlug, projectId, issueId);
+  }, [workspaceSlug, projectId, issueId, issueStore]);
+
+  return (
+    <div className="h-full w-full flex flex-col overflow-hidden">
+      <div className="w-full p-5">
+        <PeekOverviewHeader
+          handleClose={handleClose}
+          issue={issue}
+          mode={mode}
+          setMode={setMode}
+          workspaceSlug={workspaceSlug}
+        />
       </div>
+      {issue && (
+        <div className="h-full w-full px-6 overflow-y-auto">
+          {/* issue title and description */}
+          <div className="w-full">
+            <PeekOverviewIssueDetails issue={issue} />
+          </div>
+          {/* issue properties */}
+          <div className="w-full mt-10">
+            <PeekOverviewIssueProperties issue={issue} mode={mode} workspaceSlug={workspaceSlug} />
+          </div>
+          {/* divider */}
+          <div className="h-[1] w-full border-t border-custom-border-200 my-5" />
+          {/* issue activity/comments */}
+          <div className="w-full pb-5">
+            <PeekOverviewIssueActivity workspaceSlug={workspaceSlug} />
+          </div>
+        </div>
+      )}
     </div>
-  </div>
-);
+  );
+});
diff --git a/apps/space/components/tiptap/bubble-menu/index.tsx b/apps/space/components/tiptap/bubble-menu/index.tsx
new file mode 100644
index 00000000000..e689007829b
--- /dev/null
+++ b/apps/space/components/tiptap/bubble-menu/index.tsx
@@ -0,0 +1,119 @@
+import { BubbleMenu, BubbleMenuProps } from "@tiptap/react";
+import { FC, useState } from "react";
+import { BoldIcon, ItalicIcon, UnderlineIcon, StrikethroughIcon, CodeIcon } from "lucide-react";
+
+import { NodeSelector } from "./node-selector";
+import { LinkSelector } from "./link-selector";
+import { cn } from "../utils";
+
+export interface BubbleMenuItem {
+  name: string;
+  isActive: () => boolean;
+  command: () => void;
+  icon: typeof BoldIcon;
+}
+
+type EditorBubbleMenuProps = Omit<BubbleMenuProps, "children">;
+
+export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: any) => {
+  const items: BubbleMenuItem[] = [
+    {
+      name: "bold",
+      isActive: () => props.editor?.isActive("bold"),
+      command: () => props.editor?.chain().focus().toggleBold().run(),
+      icon: BoldIcon,
+    },
+    {
+      name: "italic",
+      isActive: () => props.editor?.isActive("italic"),
+      command: () => props.editor?.chain().focus().toggleItalic().run(),
+      icon: ItalicIcon,
+    },
+    {
+      name: "underline",
+      isActive: () => props.editor?.isActive("underline"),
+      command: () => props.editor?.chain().focus().toggleUnderline().run(),
+      icon: UnderlineIcon,
+    },
+    {
+      name: "strike",
+      isActive: () => props.editor?.isActive("strike"),
+      command: () => props.editor?.chain().focus().toggleStrike().run(),
+      icon: StrikethroughIcon,
+    },
+    {
+      name: "code",
+      isActive: () => props.editor?.isActive("code"),
+      command: () => props.editor?.chain().focus().toggleCode().run(),
+      icon: CodeIcon,
+    },
+  ];
+
+  const bubbleMenuProps: EditorBubbleMenuProps = {
+    ...props,
+    shouldShow: ({ editor }) => {
+      if (!editor.isEditable) {
+        return false;
+      }
+      if (editor.isActive("image")) {
+        return false;
+      }
+      return editor.view.state.selection.content().size > 0;
+    },
+    tippyOptions: {
+      moveTransition: "transform 0.15s ease-out",
+      onHidden: () => {
+        setIsNodeSelectorOpen(false);
+        setIsLinkSelectorOpen(false);
+      },
+    },
+  };
+
+  const [isNodeSelectorOpen, setIsNodeSelectorOpen] = useState(false);
+  const [isLinkSelectorOpen, setIsLinkSelectorOpen] = useState(false);
+
+  return (
+    <BubbleMenu
+      {...bubbleMenuProps}
+      className="flex w-fit divide-x divide-custom-border-300 rounded border border-custom-border-300 bg-custom-background-100 shadow-xl"
+    >
+      <NodeSelector
+        editor={props.editor!}
+        isOpen={isNodeSelectorOpen}
+        setIsOpen={() => {
+          setIsNodeSelectorOpen(!isNodeSelectorOpen);
+          setIsLinkSelectorOpen(false);
+        }}
+      />
+      <LinkSelector
+        editor={props.editor!!}
+        isOpen={isLinkSelectorOpen}
+        setIsOpen={() => {
+          setIsLinkSelectorOpen(!isLinkSelectorOpen);
+          setIsNodeSelectorOpen(false);
+        }}
+      />
+      <div className="flex">
+        {items.map((item, index) => (
+          <button
+            key={index}
+            type="button"
+            onClick={item.command}
+            className={cn(
+              "p-2 text-custom-text-300 hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5 transition-colors",
+              {
+                "text-custom-text-100 bg-custom-primary-100/5": item.isActive(),
+              }
+            )}
+          >
+            <item.icon
+              className={cn("h-4 w-4", {
+                "text-custom-text-100": item.isActive(),
+              })}
+            />
+          </button>
+        ))}
+      </div>
+    </BubbleMenu>
+  );
+};
diff --git a/apps/space/components/tiptap/bubble-menu/link-selector.tsx b/apps/space/components/tiptap/bubble-menu/link-selector.tsx
new file mode 100644
index 00000000000..1596870f704
--- /dev/null
+++ b/apps/space/components/tiptap/bubble-menu/link-selector.tsx
@@ -0,0 +1,90 @@
+import { Editor } from "@tiptap/core";
+import { Check, Trash } from "lucide-react";
+import { Dispatch, FC, SetStateAction, useCallback, useEffect, useRef } from "react";
+import { cn } from "../utils";
+import isValidHttpUrl from "./utils/link-validator";
+interface LinkSelectorProps {
+  editor: Editor;
+  isOpen: boolean;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+}
+
+
+export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen }) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const onLinkSubmit = useCallback(() => {
+    const input = inputRef.current;
+    const url = input?.value;
+    if (url && isValidHttpUrl(url)) {
+      editor.chain().focus().setLink({ href: url }).run();
+      setIsOpen(false);
+    }
+  }, [editor, inputRef, setIsOpen]);
+
+  useEffect(() => {
+    inputRef.current && inputRef.current?.focus();
+  });
+
+  return (
+    <div className="relative">
+      <button
+        type="button"
+        className={cn(
+          "flex h-full items-center space-x-2 px-3 py-1.5 text-sm font-medium text-custom-text-300 hover:bg-custom-background-100 active:bg-custom-background-100",
+          { "bg-custom-background-100": isOpen }
+        )}
+        onClick={() => {
+          setIsOpen(!isOpen);
+        }}
+      >
+        <p className="text-base">↗</p>
+        <p
+          className={cn("underline underline-offset-4", {
+            "text-custom-text-100": editor.isActive("link"),
+          })}
+        >
+          Link
+        </p>
+      </button>
+      {isOpen && (
+        <div
+          className="fixed top-full z-[99999] mt-1 flex w-60 overflow-hidden rounded border border-custom-border-300 bg-custom-background-100 dow-xl animate-in fade-in slide-in-from-top-1"
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              e.preventDefault(); onLinkSubmit();
+            }
+          }}
+        >
+          <input
+            ref={inputRef}
+            type="url"
+            placeholder="Paste a link"
+            className="flex-1 bg-custom-background-100 border-r border-custom-border-300 p-1 text-sm outline-none placeholder:text-custom-text-400"
+            defaultValue={editor.getAttributes("link").href || ""}
+          />
+          {editor.getAttributes("link").href ? (
+            <button
+              type="button"
+              className="flex items-center rounded-sm p-1 text-red-600 transition-all hover:bg-red-100 dark:hover:bg-red-800"
+              onClick={() => {
+                editor.chain().focus().unsetLink().run();
+                setIsOpen(false);
+              }}
+            >
+              <Trash className="h-4 w-4" />
+            </button>
+          ) : (
+            <button className="flex items-center rounded-sm p-1 text-custom-text-300 transition-all hover:bg-custom-background-90" type="button"
+              onClick={() => {
+                onLinkSubmit();
+              }}
+            >
+              <Check className="h-4 w-4" />
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/apps/space/components/tiptap/bubble-menu/node-selector.tsx b/apps/space/components/tiptap/bubble-menu/node-selector.tsx
new file mode 100644
index 00000000000..f6f1f18dc5a
--- /dev/null
+++ b/apps/space/components/tiptap/bubble-menu/node-selector.tsx
@@ -0,0 +1,130 @@
+import { Editor } from "@tiptap/core";
+import {
+  Check,
+  ChevronDown,
+  Heading1,
+  Heading2,
+  Heading3,
+  TextQuote,
+  ListOrdered,
+  TextIcon,
+  Code,
+  CheckSquare,
+} from "lucide-react";
+import { Dispatch, FC, SetStateAction } from "react";
+
+import { BubbleMenuItem } from "../bubble-menu";
+import { cn } from "../utils";
+
+interface NodeSelectorProps {
+  editor: Editor;
+  isOpen: boolean;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+}
+
+export const NodeSelector: FC<NodeSelectorProps> = ({ editor, isOpen, setIsOpen }) => {
+  const items: BubbleMenuItem[] = [
+    {
+      name: "Text",
+      icon: TextIcon,
+      command: () => editor.chain().focus().toggleNode("paragraph", "paragraph").run(),
+      isActive: () =>
+        editor.isActive("paragraph") &&
+        !editor.isActive("bulletList") &&
+        !editor.isActive("orderedList"),
+    },
+    {
+      name: "H1",
+      icon: Heading1,
+      command: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
+      isActive: () => editor.isActive("heading", { level: 1 }),
+    },
+    {
+      name: "H2",
+      icon: Heading2,
+      command: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
+      isActive: () => editor.isActive("heading", { level: 2 }),
+    },
+    {
+      name: "H3",
+      icon: Heading3,
+      command: () => editor.chain().focus().toggleHeading({ level: 3 }).run(),
+      isActive: () => editor.isActive("heading", { level: 3 }),
+    },
+    {
+      name: "To-do List",
+      icon: CheckSquare,
+      command: () => editor.chain().focus().toggleTaskList().run(),
+      isActive: () => editor.isActive("taskItem"),
+    },
+    {
+      name: "Bullet List",
+      icon: ListOrdered,
+      command: () => editor.chain().focus().toggleBulletList().run(),
+      isActive: () => editor.isActive("bulletList"),
+    },
+    {
+      name: "Numbered List",
+      icon: ListOrdered,
+      command: () => editor.chain().focus().toggleOrderedList().run(),
+      isActive: () => editor.isActive("orderedList"),
+    },
+    {
+      name: "Quote",
+      icon: TextQuote,
+      command: () =>
+        editor.chain().focus().toggleNode("paragraph", "paragraph").toggleBlockquote().run(),
+      isActive: () => editor.isActive("blockquote"),
+    },
+    {
+      name: "Code",
+      icon: Code,
+      command: () => editor.chain().focus().toggleCodeBlock().run(),
+      isActive: () => editor.isActive("codeBlock"),
+    },
+  ];
+
+  const activeItem = items.filter((item) => item.isActive()).pop() ?? {
+    name: "Multiple",
+  };
+
+  return (
+    <div className="relative h-full">
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex h-full items-center gap-1 whitespace-nowrap p-2 text-sm font-medium text-custom-text-300 hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5"
+      >
+        <span>{activeItem?.name}</span>
+        <ChevronDown className="h-4 w-4" />
+      </button>
+
+      {isOpen && (
+        <section className="fixed top-full z-[99999] mt-1 flex w-48 flex-col overflow-hidden rounded border border-custom-border-300 bg-custom-background-100 p-1 shadow-xl animate-in fade-in slide-in-from-top-1">
+          {items.map((item, index) => (
+            <button
+              key={index}
+              type="button"
+              onClick={() => {
+                item.command();
+                setIsOpen(false);
+              }}
+              className={cn(
+                "flex items-center justify-between rounded-sm px-2 py-1 text-sm text-custom-text-200 hover:bg-custom-primary-100/5 hover:text-custom-text-100",
+                { "bg-custom-primary-100/5 text-custom-text-100": activeItem.name === item.name }
+              )}
+            >
+              <div className="flex items-center space-x-2">
+                <div className="rounded-sm border border-custom-border-300 p-1">
+                  <item.icon className="h-3 w-3" />
+                </div>
+                <span>{item.name}</span>
+              </div>
+              {activeItem.name === item.name && <Check className="h-4 w-4" />}
+            </button>
+          ))}
+        </section>
+      )}
+    </div>
+  );
+};
diff --git a/apps/space/components/tiptap/bubble-menu/utils/link-validator.tsx b/apps/space/components/tiptap/bubble-menu/utils/link-validator.tsx
new file mode 100644
index 00000000000..5b05811d63f
--- /dev/null
+++ b/apps/space/components/tiptap/bubble-menu/utils/link-validator.tsx
@@ -0,0 +1,12 @@
+export default function isValidHttpUrl(string: string): boolean {
+  let url;
+
+  try {
+    url = new URL(string);
+  } catch (_) {
+    return false;
+  }
+
+  return url.protocol === "http:" || url.protocol === "https:";
+}
+
diff --git a/apps/space/components/tiptap/extensions/image-resize.tsx b/apps/space/components/tiptap/extensions/image-resize.tsx
new file mode 100644
index 00000000000..7b2d1a2d336
--- /dev/null
+++ b/apps/space/components/tiptap/extensions/image-resize.tsx
@@ -0,0 +1,57 @@
+import { Editor } from "@tiptap/react";
+import Moveable from "react-moveable";
+
+export const ImageResizer = ({ editor }: { editor: Editor }) => {
+  const updateMediaSize = () => {
+    const imageInfo = document.querySelector(
+      ".ProseMirror-selectednode",
+    ) as HTMLImageElement;
+    if (imageInfo) {
+      const selection = editor.state.selection;
+      editor.commands.setImage({
+        src: imageInfo.src,
+        width: Number(imageInfo.style.width.replace("px", "")),
+        height: Number(imageInfo.style.height.replace("px", "")),
+      } as any);
+      editor.commands.setNodeSelection(selection.from);
+    }
+  };
+
+  return (
+    <>
+      <Moveable
+        target={document.querySelector(".ProseMirror-selectednode") as any}
+        container={null}
+        origin={false}
+        edge={false}
+        throttleDrag={0}
+        keepRatio={true}
+        resizable={true}
+        throttleResize={0}
+        onResize={({
+          target,
+          width,
+          height,
+          delta,
+        }:
+          any) => {
+          delta[0] && (target!.style.width = `${width}px`);
+          delta[1] && (target!.style.height = `${height}px`);
+        }}
+        onResizeEnd={() => {
+          updateMediaSize();
+        }}
+        scalable={true}
+        renderDirections={["w", "e"]}
+        onScale={({
+          target,
+          transform,
+        }:
+          any) => {
+          target!.style.transform = transform;
+        }}
+      />
+    </>
+  );
+};
+
diff --git a/apps/space/components/tiptap/extensions/index.tsx b/apps/space/components/tiptap/extensions/index.tsx
new file mode 100644
index 00000000000..2c5ffd10a43
--- /dev/null
+++ b/apps/space/components/tiptap/extensions/index.tsx
@@ -0,0 +1,137 @@
+import StarterKit from "@tiptap/starter-kit";
+import HorizontalRule from "@tiptap/extension-horizontal-rule";
+import TiptapLink from "@tiptap/extension-link";
+import Placeholder from "@tiptap/extension-placeholder";
+import TiptapUnderline from "@tiptap/extension-underline";
+import TextStyle from "@tiptap/extension-text-style";
+import { Color } from "@tiptap/extension-color";
+import TaskItem from "@tiptap/extension-task-item";
+import TaskList from "@tiptap/extension-task-list";
+import { Markdown } from "tiptap-markdown";
+import Highlight from "@tiptap/extension-highlight";
+import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
+import { lowlight } from "lowlight/lib/core";
+import SlashCommand from "../slash-command";
+import { InputRule } from "@tiptap/core";
+
+import ts from "highlight.js/lib/languages/typescript";
+
+import "highlight.js/styles/github-dark.css";
+import UniqueID from "@tiptap-pro/extension-unique-id";
+import UpdatedImage from "./updated-image";
+import isValidHttpUrl from "../bubble-menu/utils/link-validator";
+
+lowlight.registerLanguage("ts", ts);
+
+export const TiptapExtensions = (workspaceSlug: string, setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void) => [
+  StarterKit.configure({
+    bulletList: {
+      HTMLAttributes: {
+        class: "list-disc list-outside leading-3 -mt-2",
+      },
+    },
+    orderedList: {
+      HTMLAttributes: {
+        class: "list-decimal list-outside leading-3 -mt-2",
+      },
+    },
+    listItem: {
+      HTMLAttributes: {
+        class: "leading-normal -mb-2",
+      },
+    },
+    blockquote: {
+      HTMLAttributes: {
+        class: "border-l-4 border-custom-border-300",
+      },
+    },
+    code: {
+      HTMLAttributes: {
+        class:
+          "rounded-md bg-custom-primary-30 mx-1 px-1 py-1 font-mono font-medium text-custom-text-1000",
+        spellcheck: "false",
+      },
+    },
+    codeBlock: false,
+    horizontalRule: false,
+    dropcursor: {
+      color: "#DBEAFE",
+      width: 2,
+    },
+    gapcursor: false,
+  }),
+  CodeBlockLowlight.configure({
+    lowlight,
+  }),
+  HorizontalRule.extend({
+    addInputRules() {
+      return [
+        new InputRule({
+          find: /^(?:---|—-|___\s|\*\*\*\s)$/,
+          handler: ({ state, range, commands }) => {
+            commands.splitBlock();
+
+            const attributes = {};
+            const { tr } = state;
+            const start = range.from;
+            const end = range.to;
+            // @ts-ignore
+            tr.replaceWith(start - 1, end, this.type.create(attributes));
+          },
+        }),
+      ];
+    },
+  }).configure({
+    HTMLAttributes: {
+      class: "mb-6 border-t border-custom-border-300",
+    },
+  }),
+  TiptapLink.configure({
+    protocols: ["http", "https"],
+    validate: (url) => isValidHttpUrl(url),
+    HTMLAttributes: {
+      class:
+        "text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer",
+    },
+  }),
+  UpdatedImage.configure({
+    HTMLAttributes: {
+      class: "rounded-lg border border-custom-border-300",
+    },
+  }),
+  Placeholder.configure({
+    placeholder: ({ node }) => {
+      if (node.type.name === "heading") {
+        return `Heading ${node.attrs.level}`;
+      }
+
+      return "Press '/' for commands...";
+    },
+    includeChildren: true,
+  }),
+  UniqueID.configure({
+    types: ["image"],
+  }),
+  SlashCommand(workspaceSlug, setIsSubmitting),
+  TiptapUnderline,
+  TextStyle,
+  Color,
+  Highlight.configure({
+    multicolor: true,
+  }),
+  TaskList.configure({
+    HTMLAttributes: {
+      class: "not-prose pl-2",
+    },
+  }),
+  TaskItem.configure({
+    HTMLAttributes: {
+      class: "flex items-start my-4",
+    },
+    nested: true,
+  }),
+  Markdown.configure({
+    html: true,
+    transformCopiedText: true,
+  }),
+];
diff --git a/apps/space/components/tiptap/extensions/updated-image.tsx b/apps/space/components/tiptap/extensions/updated-image.tsx
new file mode 100644
index 00000000000..01648dcd701
--- /dev/null
+++ b/apps/space/components/tiptap/extensions/updated-image.tsx
@@ -0,0 +1,22 @@
+import Image from "@tiptap/extension-image";
+import TrackImageDeletionPlugin from "../plugins/delete-image";
+import UploadImagesPlugin from "../plugins/upload-image";
+
+const UpdatedImage = Image.extend({
+  addProseMirrorPlugins() {
+    return [UploadImagesPlugin(), TrackImageDeletionPlugin()];
+  },
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      width: {
+        default: '35%',
+      },
+      height: {
+        default: null,
+      },
+    };
+  },
+});
+
+export default UpdatedImage;
diff --git a/apps/space/components/tiptap/index.tsx b/apps/space/components/tiptap/index.tsx
new file mode 100644
index 00000000000..418449c0890
--- /dev/null
+++ b/apps/space/components/tiptap/index.tsx
@@ -0,0 +1,100 @@
+import { useEditor, EditorContent, Editor } from "@tiptap/react";
+import { useDebouncedCallback } from "use-debounce";
+import { EditorBubbleMenu } from "./bubble-menu";
+import { TiptapExtensions } from "./extensions";
+import { TiptapEditorProps } from "./props";
+import { useImperativeHandle, useRef } from "react";
+import { ImageResizer } from "./extensions/image-resize";
+
+export interface ITiptapRichTextEditor {
+  value: string;
+  noBorder?: boolean;
+  borderOnFocus?: boolean;
+  customClassName?: string;
+  editorContentCustomClassNames?: string;
+  onChange?: (json: any, html: string) => void;
+  setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void;
+  setShouldShowAlert?: (showAlert: boolean) => void;
+  workspaceSlug: string;
+  editable?: boolean;
+  forwardedRef?: any;
+  debouncedUpdatesEnabled?: boolean;
+}
+
+const Tiptap = (props: ITiptapRichTextEditor) => {
+  const {
+    onChange,
+    debouncedUpdatesEnabled,
+    forwardedRef,
+    editable,
+    setIsSubmitting,
+    setShouldShowAlert,
+    editorContentCustomClassNames,
+    value,
+    noBorder,
+    workspaceSlug,
+    borderOnFocus,
+    customClassName,
+  } = props;
+
+  const editor = useEditor({
+    editable: editable ?? true,
+    editorProps: TiptapEditorProps(workspaceSlug, setIsSubmitting),
+    extensions: TiptapExtensions(workspaceSlug, setIsSubmitting),
+    content: value,
+    onUpdate: async ({ editor }) => {
+      // for instant feedback loop
+      setIsSubmitting?.("submitting");
+      setShouldShowAlert?.(true);
+      if (debouncedUpdatesEnabled) {
+        debouncedUpdates({ onChange, editor });
+      } else {
+        onChange?.(editor.getJSON(), editor.getHTML());
+      }
+    },
+  });
+
+  const editorRef: React.MutableRefObject<Editor | null> = useRef(null);
+
+  useImperativeHandle(forwardedRef, () => ({
+    clearEditor: () => {
+      editorRef.current?.commands.clearContent();
+    },
+    setEditorValue: (content: string) => {
+      editorRef.current?.commands.setContent(content);
+    },
+  }));
+
+  const debouncedUpdates = useDebouncedCallback(async ({ onChange, editor }) => {
+    setTimeout(async () => {
+      if (onChange) {
+        onChange(editor.getJSON(), editor.getHTML());
+      }
+    }, 500);
+  }, 1000);
+
+  const editorClassNames = `relative w-full max-w-screen-lg sm:rounded-lg mt-2 p-3 relative focus:outline-none rounded-md
+      ${noBorder ? "" : "border border-custom-border-200"} ${borderOnFocus ? "focus:border border-custom-border-300" : "focus:border-0"
+    } ${customClassName}`;
+
+  if (!editor) return null;
+  editorRef.current = editor;
+
+  return (
+    <div
+      id="tiptap-container"
+      onClick={() => {
+        editor?.chain().focus().run();
+      }}
+      className={`tiptap-editor-container cursor-text ${editorClassNames}`}
+    >
+      {editor && <EditorBubbleMenu editor={editor} />}
+      <div className={`${editorContentCustomClassNames}`}>
+        <EditorContent editor={editor} />
+        {editor?.isActive("image") && <ImageResizer editor={editor} />}
+      </div>
+    </div>
+  );
+};
+
+export default Tiptap;
diff --git a/apps/space/components/tiptap/plugins/delete-image.tsx b/apps/space/components/tiptap/plugins/delete-image.tsx
new file mode 100644
index 00000000000..57ab65c6379
--- /dev/null
+++ b/apps/space/components/tiptap/plugins/delete-image.tsx
@@ -0,0 +1,56 @@
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Node as ProseMirrorNode } from '@tiptap/pm/model';
+import fileService from "services/file.service";
+
+const deleteKey = new PluginKey("delete-image");
+
+const TrackImageDeletionPlugin = () =>
+  new Plugin({
+    key: deleteKey,
+    appendTransaction: (transactions, oldState, newState) => {
+      transactions.forEach((transaction) => {
+        if (!transaction.docChanged) return;
+
+        const removedImages: ProseMirrorNode[] = [];
+
+        oldState.doc.descendants((oldNode, oldPos) => {
+          if (oldNode.type.name !== 'image') return;
+
+          if (!newState.doc.resolve(oldPos).parent) return;
+          const newNode = newState.doc.nodeAt(oldPos);
+
+          // Check if the node has been deleted or replaced
+          if (!newNode || newNode.type.name !== 'image') {
+            // Check if the node still exists elsewhere in the document
+            let nodeExists = false;
+            newState.doc.descendants((node) => {
+              if (node.attrs.id === oldNode.attrs.id) {
+                nodeExists = true;
+              }
+            });
+
+            if (!nodeExists) {
+              removedImages.push(oldNode as ProseMirrorNode);
+            }
+          }
+        });
+
+        removedImages.forEach((node) => {
+          const src = node.attrs.src;
+          onNodeDeleted(src);
+        });
+      });
+
+      return null;
+    },
+  });
+
+export default TrackImageDeletionPlugin;
+
+async function onNodeDeleted(src: string) {
+  const assetUrlWithWorkspaceId = new URL(src).pathname.substring(1);
+  const resStatus = await fileService.deleteImage(assetUrlWithWorkspaceId);
+  if (resStatus === 204) {
+    console.log("Image deleted successfully");
+  }
+}
diff --git a/apps/space/components/tiptap/plugins/upload-image.tsx b/apps/space/components/tiptap/plugins/upload-image.tsx
new file mode 100644
index 00000000000..0657bc82bf4
--- /dev/null
+++ b/apps/space/components/tiptap/plugins/upload-image.tsx
@@ -0,0 +1,127 @@
+// @ts-nocheck
+import { EditorState, Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet, EditorView } from "@tiptap/pm/view";
+import fileService from "services/file.service";
+
+const uploadKey = new PluginKey("upload-image");
+
+const UploadImagesPlugin = () =>
+  new Plugin({
+    key: uploadKey,
+    state: {
+      init() {
+        return DecorationSet.empty;
+      },
+      apply(tr, set) {
+        set = set.map(tr.mapping, tr.doc);
+        // See if the transaction adds or removes any placeholders
+        const action = tr.getMeta(uploadKey);
+        if (action && action.add) {
+          const { id, pos, src } = action.add;
+
+          const placeholder = document.createElement("div");
+          placeholder.setAttribute("class", "img-placeholder");
+          const image = document.createElement("img");
+          image.setAttribute(
+            "class",
+            "opacity-10 rounded-lg border border-custom-border-300",
+          );
+          image.src = src;
+          placeholder.appendChild(image);
+          const deco = Decoration.widget(pos + 1, placeholder, {
+            id,
+          });
+          set = set.add(tr.doc, [deco]);
+        } else if (action && action.remove) {
+          set = set.remove(set.find(undefined, undefined, (spec) => spec.id == action.remove.id));
+        }
+        return set;
+      },
+    },
+    props: {
+      decorations(state) {
+        return this.getState(state);
+      },
+    },
+  });
+
+export default UploadImagesPlugin;
+
+function findPlaceholder(state: EditorState, id: {}) {
+  const decos = uploadKey.getState(state);
+  const found = decos.find(
+    undefined,
+    undefined,
+    (spec: { id: number | undefined }) => spec.id == id
+  );
+  return found.length ? found[0].from : null;
+}
+
+export async function startImageUpload(file: File, view: EditorView, pos: number, workspaceSlug: string, setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void) {
+  if (!file.type.includes("image/")) {
+    return;
+  } else if (file.size / 1024 / 1024 > 20) {
+    return;
+  }
+
+  const id = {};
+
+  const tr = view.state.tr;
+  if (!tr.selection.empty) tr.deleteSelection();
+
+  const reader = new FileReader();
+  reader.readAsDataURL(file);
+  reader.onload = () => {
+    tr.setMeta(uploadKey, {
+      add: {
+        id,
+        pos,
+        src: reader.result,
+      },
+    });
+    view.dispatch(tr);
+  };
+
+  if (!workspaceSlug) {
+    return;
+  }
+  setIsSubmitting?.("submitting")
+  const src = await UploadImageHandler(file, workspaceSlug);
+  const { schema } = view.state;
+  pos = findPlaceholder(view.state, id);
+
+  if (pos == null) return;
+  const imageSrc = typeof src === "object" ? reader.result : src;
+
+  const node = schema.nodes.image.create({ src: imageSrc });
+  const transaction = view.state.tr
+    .replaceWith(pos, pos, node)
+    .setMeta(uploadKey, { remove: { id } });
+  view.dispatch(transaction);
+}
+
+const UploadImageHandler = (file: File, workspaceSlug: string): Promise<string> => {
+  if (!workspaceSlug) {
+    return Promise.reject("Workspace slug is missing");
+  }
+  try {
+    const formData = new FormData();
+    formData.append("asset", file);
+    formData.append("attributes", JSON.stringify({}));
+
+    return new Promise(async (resolve, reject) => {
+      const imageUrl = await fileService
+        .uploadFile(workspaceSlug, formData)
+        .then((response) => response.asset);
+
+      const image = new Image();
+      image.src = imageUrl;
+      image.onload = () => {
+        resolve(imageUrl);
+      };
+    });
+  } catch (error) {
+    console.log(error);
+    return Promise.reject(error);
+  }
+};
diff --git a/apps/space/components/tiptap/props.tsx b/apps/space/components/tiptap/props.tsx
new file mode 100644
index 00000000000..d50fc29b0b3
--- /dev/null
+++ b/apps/space/components/tiptap/props.tsx
@@ -0,0 +1,56 @@
+import { EditorProps } from "@tiptap/pm/view";
+import { startImageUpload } from "./plugins/upload-image";
+
+export function TiptapEditorProps(workspaceSlug: string, setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void): EditorProps {
+  return {
+    attributes: {
+      class: `prose prose-brand max-w-full prose-headings:font-display font-default focus:outline-none`,
+    },
+    handleDOMEvents: {
+      keydown: (_view, event) => {
+        // prevent default event listeners from firing when slash command is active
+        if (["ArrowUp", "ArrowDown", "Enter"].includes(event.key)) {
+          const slashCommand = document.querySelector("#slash-command");
+          if (slashCommand) {
+            return true;
+          }
+        }
+      },
+    },
+    handlePaste: (view, event) => {
+      if (
+        event.clipboardData &&
+        event.clipboardData.files &&
+        event.clipboardData.files[0]
+      ) {
+        event.preventDefault();
+        const file = event.clipboardData.files[0];
+        const pos = view.state.selection.from;
+        startImageUpload(file, view, pos, workspaceSlug, setIsSubmitting);
+        return true;
+      }
+      return false;
+    },
+    handleDrop: (view, event, _slice, moved) => {
+      if (
+        !moved &&
+        event.dataTransfer &&
+        event.dataTransfer.files &&
+        event.dataTransfer.files[0]
+      ) {
+        event.preventDefault();
+        const file = event.dataTransfer.files[0];
+        const coordinates = view.posAtCoords({
+          left: event.clientX,
+          top: event.clientY,
+        });
+        // here we deduct 1 from the pos or else the image will create an extra node
+        if (coordinates) {
+          startImageUpload(file, view, coordinates.pos - 1, workspaceSlug, setIsSubmitting);
+        }
+        return true;
+      }
+      return false;
+    },
+  };
+}
diff --git a/apps/space/components/tiptap/slash-command/index.tsx b/apps/space/components/tiptap/slash-command/index.tsx
new file mode 100644
index 00000000000..38f5c9c0ad9
--- /dev/null
+++ b/apps/space/components/tiptap/slash-command/index.tsx
@@ -0,0 +1,339 @@
+import React, { useState, useEffect, useCallback, ReactNode, useRef, useLayoutEffect } from "react";
+import { Editor, Range, Extension } from "@tiptap/core";
+import Suggestion from "@tiptap/suggestion";
+import { ReactRenderer } from "@tiptap/react";
+import tippy from "tippy.js";
+import {
+  Heading1,
+  Heading2,
+  Heading3,
+  List,
+  ListOrdered,
+  Text,
+  TextQuote,
+  Code,
+  MinusSquare,
+  CheckSquare,
+  ImageIcon,
+} from "lucide-react";
+import { startImageUpload } from "../plugins/upload-image";
+import { cn } from "../utils";
+
+interface CommandItemProps {
+  title: string;
+  description: string;
+  icon: ReactNode;
+}
+
+interface CommandProps {
+  editor: Editor;
+  range: Range;
+}
+
+const Command = Extension.create({
+  name: "slash-command",
+  addOptions() {
+    return {
+      suggestion: {
+        char: "/",
+        command: ({ editor, range, props }: { editor: Editor; range: Range; props: any }) => {
+          props.command({ editor, range });
+        },
+      },
+    };
+  },
+  addProseMirrorPlugins() {
+    return [
+      Suggestion({
+        editor: this.editor,
+        ...this.options.suggestion,
+      }),
+    ];
+  },
+});
+
+const getSuggestionItems = (workspaceSlug: string, setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void) => ({ query }: { query: string }) =>
+  [
+    {
+      title: "Text",
+      description: "Just start typing with plain text.",
+      searchTerms: ["p", "paragraph"],
+      icon: <Text size={18} />,
+      command: ({ editor, range }: CommandProps) => {
+        editor.chain().focus().deleteRange(range).toggleNode("paragraph", "paragraph").run();
+      },
+    },
+    {
+      title: "Heading 1",
+      description: "Big section heading.",
+      searchTerms: ["title", "big", "large"],
+      icon: <Heading1 size={18} />,
+      command: ({ editor, range }: CommandProps) => {
+        editor.chain().focus().deleteRange(range).setNode("heading", { level: 1 }).run();
+      },
+    },
+    {
+      title: "Heading 2",
+      description: "Medium section heading.",
+      searchTerms: ["subtitle", "medium"],
+      icon: <Heading2 size={18} />,
+      command: ({ editor, range }: CommandProps) => {
+        editor.chain().focus().deleteRange(range).setNode("heading", { level: 2 }).run();
+      },
+    },
+    {
+      title: "Heading 3",
+      description: "Small section heading.",
+      searchTerms: ["subtitle", "small"],
+      icon: <Heading3 size={18} />,
+      command: ({ editor, range }: CommandProps) => {
+        editor.chain().focus().deleteRange(range).setNode("heading", { level: 3 }).run();
+      },
+    },
+    {
+      title: "To-do List",
+      description: "Track tasks with a to-do list.",
+      searchTerms: ["todo", "task", "list", "check", "checkbox"],
+      icon: <CheckSquare size={18} />,
+      command: ({ editor, range }: CommandProps) => {
+        editor.chain().focus().deleteRange(range).toggleTaskList().run();
+      },
+    },
+    {
+      title: "Bullet List",
+      description: "Create a simple bullet list.",
+      searchTerms: ["unordered", "point"],
+      icon: <List size={18} />,
+      command: ({ editor, range }: CommandProps) => {
+        editor.chain().focus().deleteRange(range).toggleBulletList().run();
+      },
+    },
+    {
+      title: "Divider",
+      description: "Visually divide blocks",
+      searchTerms: ["line", "divider", "horizontal", "rule", "separate"],
+      icon: <MinusSquare size={18} />,
+      command: ({ editor, range }: CommandProps) => {
+        editor.chain().focus().deleteRange(range).setHorizontalRule().run();
+      },
+    },
+    {
+      title: "Numbered List",
+      description: "Create a list with numbering.",
+      searchTerms: ["ordered"],
+      icon: <ListOrdered size={18} />,
+      command: ({ editor, range }: CommandProps) => {
+        editor.chain().focus().deleteRange(range).toggleOrderedList().run();
+      },
+    },
+    {
+      title: "Quote",
+      description: "Capture a quote.",
+      searchTerms: ["blockquote"],
+      icon: <TextQuote size={18} />,
+      command: ({ editor, range }: CommandProps) =>
+        editor
+          .chain()
+          .focus()
+          .deleteRange(range)
+          .toggleNode("paragraph", "paragraph")
+          .toggleBlockquote()
+          .run(),
+    },
+    {
+      title: "Code",
+      description: "Capture a code snippet.",
+      searchTerms: ["codeblock"],
+      icon: <Code size={18} />,
+      command: ({ editor, range }: CommandProps) =>
+        editor.chain().focus().deleteRange(range).toggleCodeBlock().run(),
+    },
+    {
+      title: "Image",
+      description: "Upload an image from your computer.",
+      searchTerms: ["photo", "picture", "media"],
+      icon: <ImageIcon size={18} />,
+      command: ({ editor, range }: CommandProps) => {
+        editor.chain().focus().deleteRange(range).run();
+        // upload image
+        const input = document.createElement("input");
+        input.type = "file";
+        input.accept = "image/*";
+        input.onchange = async () => {
+          if (input.files?.length) {
+            const file = input.files[0];
+            const pos = editor.view.state.selection.from;
+            startImageUpload(file, editor.view, pos, workspaceSlug, setIsSubmitting);
+          }
+        };
+        input.click();
+      },
+    },
+  ].filter((item) => {
+    if (typeof query === "string" && query.length > 0) {
+      const search = query.toLowerCase();
+      return (
+        item.title.toLowerCase().includes(search) ||
+        item.description.toLowerCase().includes(search) ||
+        (item.searchTerms && item.searchTerms.some((term: string) => term.includes(search)))
+      );
+    }
+    return true;
+  });
+
+export const updateScrollView = (container: HTMLElement, item: HTMLElement) => {
+  const containerHeight = container.offsetHeight;
+  const itemHeight = item ? item.offsetHeight : 0;
+
+  const top = item.offsetTop;
+  const bottom = top + itemHeight;
+
+  if (top < container.scrollTop) {
+    container.scrollTop -= container.scrollTop - top + 5;
+  } else if (bottom > containerHeight + container.scrollTop) {
+    container.scrollTop += bottom - containerHeight - container.scrollTop + 5;
+  }
+};
+
+const CommandList = ({
+  items,
+  command,
+}: {
+  items: CommandItemProps[];
+  command: any;
+  editor: any;
+  range: any;
+}) => {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  const selectItem = useCallback(
+    (index: number) => {
+      const item = items[index];
+      if (item) {
+        command(item);
+      }
+    },
+    [command, items]
+  );
+
+  useEffect(() => {
+    const navigationKeys = ["ArrowUp", "ArrowDown", "Enter"];
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (navigationKeys.includes(e.key)) {
+        e.preventDefault();
+        if (e.key === "ArrowUp") {
+          setSelectedIndex((selectedIndex + items.length - 1) % items.length);
+          return true;
+        }
+        if (e.key === "ArrowDown") {
+          setSelectedIndex((selectedIndex + 1) % items.length);
+          return true;
+        }
+        if (e.key === "Enter") {
+          selectItem(selectedIndex);
+          return true;
+        }
+        return false;
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [items, selectedIndex, setSelectedIndex, selectItem]);
+
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [items]);
+
+  const commandListContainer = useRef<HTMLDivElement>(null);
+
+  useLayoutEffect(() => {
+    const container = commandListContainer?.current;
+
+    const item = container?.children[selectedIndex] as HTMLElement;
+
+    if (item && container) updateScrollView(container, item);
+  }, [selectedIndex]);
+
+  return items.length > 0 ? (
+    <div
+      id="slash-command"
+      ref={commandListContainer}
+      className="z-50 fixed h-auto max-h-[330px] w-72 overflow-y-auto rounded-md border border-custom-border-300 bg-custom-background-100 px-1 py-2 shadow-md transition-all"
+    >
+      {items.map((item: CommandItemProps, index: number) => (
+        <button
+          className={cn(
+            `flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm text-custom-text-200 hover:bg-custom-primary-100/5 hover:text-custom-text-100`,
+            { "bg-custom-primary-100/5  text-custom-text-100": index === selectedIndex }
+          )}
+          key={index}
+          onClick={() => selectItem(index)}
+        >
+          <div>
+            <p className="font-medium">{item.title}</p>
+            <p className="text-xs text-custom-text-300">{item.description}</p>
+          </div>
+        </button>
+      ))}
+    </div>
+  ) : null;
+};
+
+const renderItems = () => {
+  let component: ReactRenderer | null = null;
+  let popup: any | null = null;
+
+  return {
+    onStart: (props: { editor: Editor; clientRect: DOMRect }) => {
+      component = new ReactRenderer(CommandList, {
+        props,
+        editor: props.editor,
+      });
+
+      // @ts-ignore
+      popup = tippy("body", {
+        getReferenceClientRect: props.clientRect,
+        appendTo: () => document.querySelector("#tiptap-container"),
+        content: component.element,
+        showOnCreate: true,
+        interactive: true,
+        trigger: "manual",
+        placement: "bottom-start",
+      });
+    },
+    onUpdate: (props: { editor: Editor; clientRect: DOMRect }) => {
+      component?.updateProps(props);
+
+      popup &&
+        popup[0].setProps({
+          getReferenceClientRect: props.clientRect,
+        });
+    },
+    onKeyDown: (props: { event: KeyboardEvent }) => {
+      if (props.event.key === "Escape") {
+        popup?.[0].hide();
+
+        return true;
+      }
+
+      // @ts-ignore
+      return component?.ref?.onKeyDown(props);
+    },
+    onExit: () => {
+      popup?.[0].destroy();
+      component?.destroy();
+    },
+  };
+};
+
+export const SlashCommand = (workspaceSlug: string, setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void) =>
+  Command.configure({
+    suggestion: {
+      items: getSuggestionItems(workspaceSlug, setIsSubmitting),
+      render: renderItems,
+    },
+  });
+
+export default SlashCommand;
diff --git a/apps/space/components/tiptap/utils.ts b/apps/space/components/tiptap/utils.ts
new file mode 100644
index 00000000000..a5ef193506d
--- /dev/null
+++ b/apps/space/components/tiptap/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/apps/space/components/ui/reaction-selector.tsx b/apps/space/components/ui/reaction-selector.tsx
index 8cbdef38ddb..70994460c50 100644
--- a/apps/space/components/ui/reaction-selector.tsx
+++ b/apps/space/components/ui/reaction-selector.tsx
@@ -14,12 +14,11 @@ const reactionEmojis = ["128077", "128078", "128516", "128165", "128533", "12950
 interface Props {
   size?: "sm" | "md" | "lg";
   position?: "top" | "bottom";
-  value?: string | string[] | null;
   onSelect: (emoji: string) => void;
 }
 
 export const ReactionSelector: React.FC<Props> = (props) => {
-  const { value, onSelect, position, size } = props;
+  const { onSelect, position, size } = props;
 
   return (
     <Popover className="relative">
@@ -64,7 +63,7 @@ export const ReactionSelector: React.FC<Props> = (props) => {
                       }}
                       className="flex select-none items-center justify-between rounded-md text-sm p-1 hover:bg-custom-sidebar-background-90"
                     >
-                      {() => renderEmoji(emoji)}
+                      {renderEmoji(emoji)}
                     </button>
                   ))}
                 </div>
diff --git a/apps/space/components/ui/secondary-button.tsx b/apps/space/components/ui/secondary-button.tsx
index 39f55c81a67..2a9b3d528ac 100644
--- a/apps/space/components/ui/secondary-button.tsx
+++ b/apps/space/components/ui/secondary-button.tsx
@@ -16,14 +16,16 @@ export const SecondaryButton: React.FC<ButtonProps> = ({
 }) => (
   <button
     type={type}
-    className={`${className} border border-gray-200 font-medium duration-300 ${
+    className={`${className} border border-custom-border-200 font-medium duration-300 ${
       size === "sm"
         ? "rounded px-3 py-2 text-xs"
         : size === "md"
         ? "rounded-md px-3.5 py-2 text-sm"
         : "rounded-lg px-4 py-2 text-base"
-    } ${disabled ? "cursor-not-allowed border-gray-200 bg-gray-100" : ""} ${
-      outline ? "bg-transparent hover:bg-gray-100" : "bg-gray-100 hover:border-opacity-70 hover:bg-opacity-70"
+    } ${disabled ? "cursor-not-allowed border-custom-border-200 bg-custom-background-90" : ""} ${
+      outline
+        ? "bg-transparent hover:bg-custom-background-80"
+        : "bg-custom-background-100 hover:border-opacity-70 hover:bg-opacity-70"
     } ${loading ? "cursor-wait" : ""}`}
     onClick={onClick}
     disabled={disabled || loading}
diff --git a/apps/space/helpers/date-time.helper.ts b/apps/space/helpers/date-time.helper.ts
new file mode 100644
index 00000000000..625871625e2
--- /dev/null
+++ b/apps/space/helpers/date-time.helper.ts
@@ -0,0 +1,14 @@
+export const timeAgo = (time: any) => {
+  switch (typeof time) {
+    case "number":
+      break;
+    case "string":
+      time = +new Date(time);
+      break;
+    case "object":
+      if (time.constructor === Date) time = time.getTime();
+      break;
+    default:
+      time = +new Date();
+  }
+};
diff --git a/apps/space/package.json b/apps/space/package.json
index e37dfa54a76..3bb064e79cc 100644
--- a/apps/space/package.json
+++ b/apps/space/package.json
@@ -21,6 +21,7 @@
     "mobx": "^6.10.0",
     "mobx-react-lite": "^4.0.3",
     "next": "^13.4.16",
+    "next-theme": "^0.1.5",
     "nprogress": "^0.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -28,6 +29,7 @@
     "uuid": "^9.0.0"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.9",
     "@types/js-cookie": "^3.0.3",
     "@types/uuid": "^9.0.1",
     "autoprefixer": "^10.4.13",
diff --git a/apps/space/services/api.service.ts b/apps/space/services/api.service.ts
index 4cf26d9ee62..d3ad3949bac 100644
--- a/apps/space/services/api.service.ts
+++ b/apps/space/services/api.service.ts
@@ -90,6 +90,16 @@ abstract class APIService {
     });
   }
 
+  mediaUpload(url: string, data = {}, config = {}): Promise<any> {
+    return axios({
+      method: "post",
+      url: this.baseURL + url,
+      data,
+      headers: this.getAccessToken() ? { ...this.getHeaders(), "Content-Type": "multipart/form-data" } : {},
+      ...config,
+    });
+  }
+
   request(config = {}) {
     return axios(config);
   }
diff --git a/apps/space/services/authentication.service.ts b/apps/space/services/authentication.service.ts
index d1453b8ddc2..a6f1ec90fb1 100644
--- a/apps/space/services/authentication.service.ts
+++ b/apps/space/services/authentication.service.ts
@@ -3,7 +3,6 @@ import APIService from "services/api.service";
 
 class AuthService extends APIService {
   constructor() {
-    console.log("NEXT_PUBLIC_API_BASE_URL: ", process.env.NEXT_PUBLIC_API_BASE_URL);
     super(process.env.NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
   }
 
diff --git a/apps/space/services/file.service.ts b/apps/space/services/file.service.ts
new file mode 100644
index 00000000000..5ef34fc760c
--- /dev/null
+++ b/apps/space/services/file.service.ts
@@ -0,0 +1,101 @@
+// services
+import APIService from "services/api.service";
+
+const { NEXT_PUBLIC_API_BASE_URL } = process.env;
+
+interface UnSplashImage {
+  id: string;
+  created_at: Date;
+  updated_at: Date;
+  promoted_at: Date;
+  width: number;
+  height: number;
+  color: string;
+  blur_hash: string;
+  description: null;
+  alt_description: string;
+  urls: UnSplashImageUrls;
+  [key: string]: any;
+}
+
+interface UnSplashImageUrls {
+  raw: string;
+  full: string;
+  regular: string;
+  small: string;
+  thumb: string;
+  small_s3: string;
+}
+
+class FileServices extends APIService {
+  constructor() {
+    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
+  }
+
+  async uploadFile(workspaceSlug: string, file: FormData): Promise<any> {
+    return this.mediaUpload(`/api/workspaces/${workspaceSlug}/file-assets/`, file)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteImage(assetUrlWithWorkspaceId: string): Promise<any> {
+    return this.delete(`/api/workspaces/file-assets/${assetUrlWithWorkspaceId}/`)
+      .then((response) => response?.status)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteFile(workspaceId: string, assetUrl: string): Promise<any> {
+    const lastIndex = assetUrl.lastIndexOf("/");
+    const assetId = assetUrl.substring(lastIndex + 1);
+
+    return this.delete(`/api/workspaces/file-assets/${workspaceId}/${assetId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+  async uploadUserFile(file: FormData): Promise<any> {
+    return this.mediaUpload(`/api/users/file-assets/`, file)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteUserFile(assetUrl: string): Promise<any> {
+    const lastIndex = assetUrl.lastIndexOf("/");
+    const assetId = assetUrl.substring(lastIndex + 1);
+
+    return this.delete(`/api/users/file-assets/${assetId}`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getUnsplashImages(page: number = 1, query?: string): Promise<UnSplashImage[]> {
+    const url = "/api/unsplash";
+
+    return this.request({
+      method: "get",
+      url,
+      params: {
+        page,
+        per_page: 20,
+        query,
+      },
+    })
+      .then((response) => response?.data?.results ?? response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
+
+const fileServices = new FileServices();
+
+export default fileServices;
diff --git a/apps/space/services/issue.service.ts b/apps/space/services/issue.service.ts
index 6d4787ec422..03a94654ba2 100644
--- a/apps/space/services/issue.service.ts
+++ b/apps/space/services/issue.service.ts
@@ -6,8 +6,10 @@ class IssueService extends APIService {
     super(process.env.NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
   }
 
-  async getPublicIssues(workspace_slug: string, project_slug: string): Promise<any> {
-    return this.get(`/api/public/workspaces/${workspace_slug}/project-boards/${project_slug}/issues/`)
+  async getPublicIssues(workspace_slug: string, project_slug: string, params: any): Promise<any> {
+    return this.get(`/api/public/workspaces/${workspace_slug}/project-boards/${project_slug}/issues/`, {
+      params,
+    })
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response;
@@ -30,8 +32,11 @@ class IssueService extends APIService {
       });
   }
 
-  async createIssueVote(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
-    return this.post(`/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/issues/${issueId}/votes/`)
+  async createIssueVote(workspaceSlug: string, projectId: string, issueId: string, data: any): Promise<any> {
+    return this.post(
+      `/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/issues/${issueId}/votes/`,
+      data
+    )
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response;
diff --git a/apps/space/store/issue.ts b/apps/space/store/issue.ts
index 861ee35697d..3b61800ce49 100644
--- a/apps/space/store/issue.ts
+++ b/apps/space/store/issue.ts
@@ -1,12 +1,13 @@
 // mobx
-import { observable, action, computed, makeObservable, runInAction } from "mobx";
+import { observable, action, computed, makeObservable, runInAction, reaction } from "mobx";
 // service
 import IssueService from "services/issue.service";
 // types
-import { TIssueBoardKeys } from "store/types/issue";
+import { IssueDetailType, TIssueBoardKeys } from "store/types/issue";
 import { IIssueStore, IIssue, IIssueState, IIssueLabel } from "./types";
 
-class IssueStore implements IIssueStore {
+// class IssueStore implements IIssueStore {
+class IssueStore {
   currentIssueBoardView: TIssueBoardKeys | null = null;
 
   loader: boolean = false;
@@ -16,6 +17,10 @@ class IssueStore implements IIssueStore {
   labels: IIssueLabel[] | null = null;
   issues: IIssue[] | null = null;
 
+  issue_detail: IssueDetailType = {};
+
+  activePeekOverviewIssueId: string | null = null;
+
   userSelectedStates: string[] = [];
   userSelectedLabels: string[] = [];
   userSelectedPriorities: string[] = [];
@@ -35,6 +40,9 @@ class IssueStore implements IIssueStore {
       states: observable.ref,
       labels: observable.ref,
       issues: observable.ref,
+      issue_detail: observable.ref,
+
+      activePeekOverviewIssueId: observable.ref,
 
       userSelectedStates: observable.ref,
       userSelectedLabels: observable.ref,
@@ -58,6 +66,8 @@ class IssueStore implements IIssueStore {
     return this.issues?.filter((issue) => issue.state == state_id) || [];
   }
 
+  setActivePeekOverviewIssueId = (issueId: string | null) => (this.activePeekOverviewIssueId = issueId);
+
   /**
    *
    * @param key Is the key of the filter, i.e. state, label, priority
@@ -157,12 +167,12 @@ class IssueStore implements IIssueStore {
     this.currentIssueBoardView = view;
   };
 
-  getIssuesAsync = async (workspace_slug: string, project_slug: string) => {
+  getIssuesAsync = async (workspaceSlug: string, projectId: string, params: any) => {
     try {
       this.loader = true;
       this.error = null;
 
-      const response = await this.issueService.getPublicIssues(workspace_slug, project_slug);
+      const response = await this.issueService.getPublicIssues(workspaceSlug, projectId, params);
 
       if (response) {
         const _states: IIssueState[] = [...response?.states];
@@ -182,6 +192,344 @@ class IssueStore implements IIssueStore {
       return error;
     }
   };
+
+  getIssueByIdAsync = async (workspaceSlug: string, projectId: string, issueId: string): Promise<IssueDetailType> => {
+    try {
+      const response = this.issues?.find((issue) => issue.id === issueId);
+
+      if (response) {
+        const _issue_detail = {
+          ...this.issue_detail,
+          [issueId]: {
+            issue: response,
+            comments: [],
+            reactions: [],
+            votes: [],
+          },
+        };
+        runInAction(() => {
+          this.issue_detail = _issue_detail;
+        });
+
+        this.getIssueReactionsAsync(workspaceSlug, projectId, issueId);
+        this.getIssueVotesAsync(workspaceSlug, projectId, issueId);
+        this.getIssueCommentsAsync(workspaceSlug, projectId, issueId);
+      }
+
+      return this.issue_detail[issueId] as any;
+    } catch (error) {
+      this.loader = false;
+      this.error = error;
+      throw error;
+    }
+  };
+
+  getIssueVotesAsync = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    try {
+      const response = await this.issueService.getIssueVotes(workspaceSlug, projectId, issueId);
+
+      if (response) {
+        const _issue_detail = {
+          ...this.issue_detail,
+          [issueId]: {
+            ...this.issue_detail[issueId],
+            votes: response,
+          },
+        };
+        runInAction(() => {
+          this.issue_detail = _issue_detail;
+        });
+      }
+
+      return response;
+    } catch (error) {
+      this.loader = false;
+      this.error = error;
+      throw error;
+    }
+  };
+
+  createIssueVoteAsync = async (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    data: {
+      vote: 1 | -1;
+    }
+  ) => {
+    try {
+      const response = await this.issueService.createIssueVote(workspaceSlug, projectId, issueId, data);
+
+      if (response) {
+        const _issue_detail = {
+          ...this.issue_detail,
+          [issueId]: {
+            ...this.issue_detail[issueId],
+            votes: [
+              ...{ ...this.issue_detail }[issueId].votes.filter(
+                (vote) => vote.actor !== this.rootStore?.user?.currentUser?.id
+              ),
+              response,
+            ],
+          },
+        };
+        runInAction(() => {
+          this.issue_detail = _issue_detail;
+        });
+      }
+
+      return response;
+    } catch (error) {
+      this.loader = false;
+      this.error = error;
+      throw error;
+    }
+  };
+
+  deleteIssueVoteAsync = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    try {
+      const _votes = (this.issue_detail[issueId].votes = this.issue_detail[issueId].votes.filter(
+        (vote) => vote.actor !== this.rootStore?.user?.user?.id
+      ));
+
+      runInAction(() => {
+        this.issue_detail[issueId].votes = _votes;
+      });
+
+      const response = await this.issueService.deleteIssueVote(workspaceSlug, projectId, issueId);
+
+      const votesAfterCall = await this.issueService.getIssueVotes(workspaceSlug, projectId, issueId);
+
+      if (votesAfterCall)
+        runInAction(() => {
+          this.issue_detail[issueId].votes = votesAfterCall;
+        });
+
+      return response;
+    } catch (error) {
+      this.loader = false;
+      this.error = error;
+      throw error;
+    }
+  };
+
+  getIssueReactionsAsync = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    try {
+      const response = await this.issueService.getIssueReactions(workspaceSlug, projectId, issueId);
+
+      if (response) {
+        const _issue_detail = {
+          ...this.issue_detail,
+          [issueId]: {
+            ...this.issue_detail[issueId],
+            reactions: response,
+          },
+        };
+        runInAction(() => {
+          this.issue_detail = _issue_detail;
+        });
+      }
+
+      return response;
+    } catch (error) {
+      this.loader = false;
+      this.error = error;
+      throw error;
+    }
+  };
+
+  createIssueReactionAsync = async (workspaceSlug: string, projectId: string, issueId: string, data: any) => {
+    try {
+      const response = await this.issueService.createIssueReaction(workspaceSlug, projectId, issueId, data);
+
+      if (response) {
+        const _issue_detail = {
+          ...this.issue_detail,
+          [issueId]: {
+            ...this.issue_detail[issueId],
+            reactions: [...this.issue_detail[issueId].reactions, response],
+          },
+        };
+        runInAction(() => {
+          this.issue_detail = _issue_detail;
+        });
+      }
+
+      return response;
+    } catch (error) {
+      this.loader = false;
+      this.error = error;
+      throw error;
+    }
+  };
+
+  deleteIssueReactionAsync = async (workspaceSlug: string, projectId: string, issueId: string, reactionHex: string) => {
+    try {
+      const newReactionsList = this.issue_detail[issueId].reactions.filter(
+        (reaction) => reaction.reaction !== reactionHex
+      );
+
+      const _issue_detail = {
+        ...this.issue_detail,
+        [issueId]: {
+          ...this.issue_detail[issueId],
+          reactions: newReactionsList,
+        },
+      };
+
+      runInAction(() => {
+        this.issue_detail = _issue_detail;
+      });
+
+      const response = await this.issueService.deleteIssueReaction(workspaceSlug, projectId, issueId, reactionHex);
+
+      const reactionsAfterCall = await this.issueService.getIssueReactions(workspaceSlug, projectId, issueId);
+
+      if (reactionsAfterCall) {
+        const _issue_detail = {
+          ...this.issue_detail,
+          [issueId]: {
+            ...this.issue_detail[issueId],
+            reactions: reactionsAfterCall,
+          },
+        };
+        runInAction(() => {
+          this.issue_detail = _issue_detail;
+        });
+      }
+
+      return response;
+    } catch (error) {
+      this.loader = false;
+      this.error = error;
+      throw error;
+    }
+  };
+
+  getIssueCommentsAsync = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    try {
+      const response = await this.issueService.getIssueComments(workspaceSlug, projectId, issueId);
+
+      if (response) {
+        const _issue_detail = {
+          ...this.issue_detail,
+          [issueId]: {
+            ...this.issue_detail[issueId],
+            comments: response,
+          },
+        };
+        runInAction(() => {
+          this.issue_detail = _issue_detail;
+        });
+      }
+
+      return response;
+    } catch (error) {
+      this.loader = false;
+      this.error = error;
+      throw error;
+    }
+  };
+
+  createIssueCommentAsync = async (workspaceSlug: string, projectId: string, issueId: string, data: any) => {
+    try {
+      const response = await this.issueService.createIssueComment(workspaceSlug, projectId, issueId, data);
+
+      if (response) {
+        const _issue_detail = {
+          ...this.issue_detail,
+          [issueId]: {
+            ...this.issue_detail[issueId],
+            comments: [...this.issue_detail[issueId].comments, response],
+          },
+        };
+        runInAction(() => {
+          this.issue_detail = _issue_detail;
+        });
+      }
+
+      return response;
+    } catch (error) {
+      this.loader = false;
+      this.error = error;
+      throw error;
+    }
+  };
+
+  updateIssueCommentAsync = async (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    commentId: string,
+    data: any
+  ) => {
+    try {
+      const response = await this.issueService.updateIssueComment(workspaceSlug, projectId, issueId, commentId, data);
+
+      if (response) {
+        const _issue_detail = {
+          ...this.issue_detail,
+          [issueId]: {
+            ...this.issue_detail[issueId],
+            comments: [
+              ...this.issue_detail[issueId].comments.filter((comment) => comment.id !== response.id),
+              response,
+            ],
+          },
+        };
+        runInAction(() => {
+          this.issue_detail = _issue_detail;
+        });
+      }
+
+      return response;
+    } catch (error) {
+      this.loader = false;
+      this.error = error;
+      throw error;
+    }
+  };
+
+  deleteIssueCommentAsync = async (workspaceSlug: string, projectId: string, issueId: string, commentId: string) => {
+    try {
+      const newCommentsList = this.issue_detail[issueId].comments.filter((comment) => comment.id !== commentId);
+
+      const _issue_detail = {
+        ...this.issue_detail,
+        [issueId]: {
+          ...this.issue_detail[issueId],
+          comments: newCommentsList,
+        },
+      };
+
+      runInAction(() => {
+        this.issue_detail = _issue_detail;
+      });
+
+      const response = await this.issueService.deleteIssueComment(workspaceSlug, projectId, issueId, commentId);
+
+      const commentsAfterCall = await this.issueService.getIssueComments(workspaceSlug, projectId, issueId);
+
+      if (commentsAfterCall) {
+        const _issue_detail = {
+          ...this.issue_detail,
+          [issueId]: {
+            ...this.issue_detail[issueId],
+            comments: commentsAfterCall,
+          },
+        };
+        runInAction(() => {
+          this.issue_detail = _issue_detail;
+        });
+      }
+
+      return response;
+    } catch (error) {
+      this.loader = false;
+      this.error = error;
+      throw error;
+    }
+  };
 }
 
 export default IssueStore;
diff --git a/apps/space/store/root.ts b/apps/space/store/root.ts
index 162fcddc0ce..3e4497aaafe 100644
--- a/apps/space/store/root.ts
+++ b/apps/space/store/root.ts
@@ -5,7 +5,6 @@ import UserStore from "./user";
 import ThemeStore from "./theme";
 import IssueStore from "./issue";
 import ProjectStore from "./project";
-import IssueDetailStore from "./issue-detail";
 // types
 import { IIssueStore, IProjectStore, IThemeStore } from "./types";
 
@@ -14,8 +13,7 @@ enableStaticRendering(typeof window === "undefined");
 export class RootStore {
   user: UserStore;
   theme: IThemeStore;
-  issue: IIssueStore;
-  issueDetail: IssueDetailStore;
+  issue: IssueStore;
   project: IProjectStore;
 
   constructor() {
@@ -23,6 +21,5 @@ export class RootStore {
     this.theme = new ThemeStore(this);
     this.issue = new IssueStore(this);
     this.project = new ProjectStore(this);
-    this.issueDetail = new IssueDetailStore(this);
   }
 }
diff --git a/apps/space/store/types/issue.ts b/apps/space/store/types/issue.ts
index bfbcd2d6f7b..0b3a6107c0f 100644
--- a/apps/space/store/types/issue.ts
+++ b/apps/space/store/types/issue.ts
@@ -32,11 +32,14 @@ export interface IIssue {
   sequence_id: number;
   name: string;
   description_html: string;
+  project: string;
+  project_detail: any;
   priority: TIssuePriorityKey | null;
   state: string;
   state_detail: any;
   label_details: any;
   target_date: any;
+  start_date: any;
 }
 
 export interface IIssueState {
@@ -52,6 +55,95 @@ export interface IIssueLabel {
   color: string;
 }
 
+export interface Comment {
+  id: string;
+  actor_detail: ActorDetail;
+  issue_detail: IssueDetail;
+  project_detail: ProjectDetail;
+  workspace_detail: WorkspaceDetail;
+  comment_reactions: any[];
+  is_member: boolean;
+  created_at: Date;
+  updated_at: Date;
+  comment_stripped: string;
+  comment_json: any;
+  comment_html: string;
+  attachments: any[];
+  access: string;
+  created_by: string;
+  updated_by: string;
+  project: string;
+  workspace: string;
+  issue: string;
+  actor: string;
+}
+
+export interface ActorDetail {
+  id: string;
+  first_name: string;
+  last_name: string;
+  avatar: string;
+  is_bot: boolean;
+  display_name: string;
+}
+
+export interface IssueDetail {
+  id: string;
+  name: string;
+  description: Description;
+  description_html: string;
+  priority: string;
+  start_date: null;
+  target_date: null;
+  sequence_id: number;
+  sort_order: number;
+}
+
+export interface Description {
+  type: string;
+  content: DescriptionContent[];
+}
+
+export interface DescriptionContent {
+  type: string;
+  attrs?: Attrs;
+  content: ContentContent[];
+}
+
+export interface Attrs {
+  level: number;
+}
+
+export interface ContentContent {
+  text: string;
+  type: string;
+}
+
+export interface ProjectDetail {
+  id: string;
+  identifier: string;
+  name: string;
+  cover_image: string;
+  icon_prop: null;
+  emoji: string;
+  description: string;
+}
+
+export interface WorkspaceDetail {
+  name: string;
+  slug: string;
+  id: string;
+}
+
+export interface IssueDetailType {
+  [issueId: string]: {
+    issue: IIssue;
+    comments: Comment[];
+    reactions: any[];
+    votes: any[];
+  };
+}
+
 export interface IIssueStore {
   currentIssueBoardView: TIssueBoardKeys | null;
   loader: boolean;
@@ -61,6 +153,8 @@ export interface IIssueStore {
   labels: IIssueLabel[] | null;
   issues: IIssue[] | null;
 
+  issue_detail: IssueDetailType;
+
   userSelectedStates: string[];
   userSelectedLabels: string[];
   userSelectedPriorities: string[];
@@ -87,5 +181,7 @@ export interface IIssueStore {
   ) => string;
 
   setCurrentIssueBoardView: (view: TIssueBoardKeys) => void;
-  getIssuesAsync: (workspace_slug: string, project_slug: string) => Promise<void>;
+  getIssuesAsync: (workspaceSlug: string, projectId: string, params: any) => Promise<void>;
+
+  getIssueByIdAsync: (workspaceSlug: string, projectId: string, issueId: string) => Promise<IssueDetailType>;
 }
diff --git a/apps/space/tailwind.config.js b/apps/space/tailwind.config.js
index b12d7339363..7a75028cc8c 100644
--- a/apps/space/tailwind.config.js
+++ b/apps/space/tailwind.config.js
@@ -179,5 +179,7 @@ module.exports = {
       custom: ["Inter", "sans-serif"],
     },
   },
-  plugins: [],
+  plugins: [
+    require("@tailwindcss/typography"),
+  ],
 };
diff --git a/yarn.lock b/yarn.lock
index ac134d60f39..d7dee1e3332 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -44,30 +44,30 @@
     "@babel/highlight" "^7.22.10"
     chalk "^2.4.2"
 
-"@babel/compat-data@^7.22.5", "@babel/compat-data@^7.22.6", "@babel/compat-data@^7.22.9":
+"@babel/compat-data@^7.22.6", "@babel/compat-data@^7.22.9":
   version "7.22.9"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.22.9.tgz#71cdb00a1ce3a329ce4cbec3a44f9fef35669730"
   integrity sha512-5UamI7xkUcJ3i9qVDS+KFDEK8/7oJ55/sJMB1Ge7IEapr7KfdfV/HErR+koZwOfd+SgtFKOKRhRakdg++DcJpQ==
 
 "@babel/core@^7.11.1":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.22.10.tgz#aad442c7bcd1582252cb4576747ace35bc122f35"
-  integrity sha512-fTmqbbUBAwCcre6zPzNngvsI0aNrPZe77AeqvDxWM9Nm+04RrJ3CAmGHA9f7lJQY6ZMhRztNemy4uslDxTX4Qw==
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.22.11.tgz#8033acaa2aa24c3f814edaaa057f3ce0ba559c24"
+  integrity sha512-lh7RJrtPdhibbxndr6/xx0w8+CVlY5FJZiaSz908Fpy+G0xkBFTvwLcKJFF4PJxVfGhVWNebikpWGnOoC71juQ==
   dependencies:
     "@ampproject/remapping" "^2.2.0"
     "@babel/code-frame" "^7.22.10"
     "@babel/generator" "^7.22.10"
     "@babel/helper-compilation-targets" "^7.22.10"
     "@babel/helper-module-transforms" "^7.22.9"
-    "@babel/helpers" "^7.22.10"
-    "@babel/parser" "^7.22.10"
+    "@babel/helpers" "^7.22.11"
+    "@babel/parser" "^7.22.11"
     "@babel/template" "^7.22.5"
-    "@babel/traverse" "^7.22.10"
-    "@babel/types" "^7.22.10"
+    "@babel/traverse" "^7.22.11"
+    "@babel/types" "^7.22.11"
     convert-source-map "^1.7.0"
     debug "^4.1.0"
     gensync "^1.0.0-beta.2"
-    json5 "^2.2.2"
+    json5 "^2.2.3"
     semver "^6.3.1"
 
 "@babel/generator@^7.22.10":
@@ -105,10 +105,10 @@
     lru-cache "^5.1.1"
     semver "^6.3.1"
 
-"@babel/helper-create-class-features-plugin@^7.22.5":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.22.10.tgz#dd2612d59eac45588021ac3d6fa976d08f4e95a3"
-  integrity sha512-5IBb77txKYQPpOEdUdIhBx8VrZyDCQ+H82H0+5dX1TmuscP5vJKEE3cKurjtIw/vFwzbVH48VweE78kVDBrqjA==
+"@babel/helper-create-class-features-plugin@^7.22.11", "@babel/helper-create-class-features-plugin@^7.22.5":
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.22.11.tgz#4078686740459eeb4af3494a273ac09148dfb213"
+  integrity sha512-y1grdYL4WzmUDBRGK0pDbIoFd7UZKoDurDzWEoNMYoj1EL+foGRQNyPWDcC+YyegN5y1DUsFFmzjGijB3nSVAQ==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.22.5"
     "@babel/helper-environment-visitor" "^7.22.5"
@@ -260,14 +260,14 @@
     "@babel/template" "^7.22.5"
     "@babel/types" "^7.22.10"
 
-"@babel/helpers@^7.22.10":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.22.10.tgz#ae6005c539dfbcb5cd71fb51bfc8a52ba63bc37a"
-  integrity sha512-a41J4NW8HyZa1I1vAndrraTlPZ/eZoga2ZgS7fEr0tZJGVU4xqdE80CEm0CcNjha5EZ8fTBYLKHF0kqDUuAwQw==
+"@babel/helpers@^7.22.11":
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.22.11.tgz#b02f5d5f2d7abc21ab59eeed80de410ba70b056a"
+  integrity sha512-vyOXC8PBWaGc5h7GMsNx68OH33cypkEDJCHvYVVgVbbxJDROYVtexSk0gK5iCF1xNjRIN2s8ai7hwkWDq5szWg==
   dependencies:
     "@babel/template" "^7.22.5"
-    "@babel/traverse" "^7.22.10"
-    "@babel/types" "^7.22.10"
+    "@babel/traverse" "^7.22.11"
+    "@babel/types" "^7.22.11"
 
 "@babel/highlight@^7.10.4", "@babel/highlight@^7.22.10":
   version "7.22.10"
@@ -278,10 +278,10 @@
     chalk "^2.4.2"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.22.10", "@babel/parser@^7.22.5":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.22.10.tgz#e37634f9a12a1716136c44624ef54283cabd3f55"
-  integrity sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==
+"@babel/parser@^7.22.11", "@babel/parser@^7.22.5":
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.22.11.tgz#becf8ee33aad2a35ed5607f521fe6e72a615f905"
+  integrity sha512-R5zb8eJIBPJriQtbH/htEQy4k7E2dHWlD2Y2VT07JCzwYZHBxV5ZYtM0UhXSNMT74LyxuM+b1jdL7pSesXbC/g==
 
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.22.5":
   version "7.22.5"
@@ -439,9 +439,9 @@
     "@babel/helper-plugin-utils" "^7.22.5"
 
 "@babel/plugin-transform-async-generator-functions@^7.22.10":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.22.10.tgz#45946cd17f915b10e65c29b8ed18a0a50fc648c8"
-  integrity sha512-eueE8lvKVzq5wIObKK/7dvoeKJ+xc6TvRn6aysIjS6pSCeLy7S/eVi7pEQknZqyqvzaNKdDtem8nUNTBgDVR2g==
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.22.11.tgz#dbe3b1ff5a52e2e5edc4b19a60d325a675ed2649"
+  integrity sha512-0pAlmeRJn6wU84zzZsEOx1JV1Jf8fqO9ok7wofIJwUnplYo247dcd24P+cMJht7ts9xkzdtB0EPHmOb7F+KzXw==
   dependencies:
     "@babel/helper-environment-visitor" "^7.22.5"
     "@babel/helper-plugin-utils" "^7.22.5"
@@ -480,11 +480,11 @@
     "@babel/helper-plugin-utils" "^7.22.5"
 
 "@babel/plugin-transform-class-static-block@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.22.5.tgz#3e40c46f048403472d6f4183116d5e46b1bff5ba"
-  integrity sha512-SPToJ5eYZLxlnp1UzdARpOGeC2GbHvr9d/UV0EukuVx8atktg194oe+C5BqQ8jRTkgLRVOPYeXRSBg1IlMoVRA==
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.22.11.tgz#dc8cc6e498f55692ac6b4b89e56d87cec766c974"
+  integrity sha512-GMM8gGmqI7guS/llMFk1bJDkKfn3v3C4KHK9Yg1ey5qcHcOlKb0QvcMrgzvxo+T03/4szNh5lghY+fEC98Kq9g==
   dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.22.5"
+    "@babel/helper-create-class-features-plugin" "^7.22.11"
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-class-static-block" "^7.14.5"
 
@@ -534,9 +534,9 @@
     "@babel/helper-plugin-utils" "^7.22.5"
 
 "@babel/plugin-transform-dynamic-import@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.22.5.tgz#d6908a8916a810468c4edff73b5b75bda6ad393e"
-  integrity sha512-0MC3ppTB1AMxd8fXjSrbPa7LT9hrImt+/fcj+Pg5YMD7UQyWp/02+JWpdnCymmsXwIx5Z+sYn1bwCn4ZJNvhqQ==
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.22.11.tgz#2c7722d2a5c01839eaf31518c6ff96d408e447aa"
+  integrity sha512-g/21plo58sfteWjaO0ZNVb+uEOkJNjAaHhbejrnBmu011l/eNDScmkbjCC3l4FKb10ViaGU4aOkFznSu2zRHgA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-dynamic-import" "^7.8.3"
@@ -550,9 +550,9 @@
     "@babel/helper-plugin-utils" "^7.22.5"
 
 "@babel/plugin-transform-export-namespace-from@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.22.5.tgz#57c41cb1d0613d22f548fddd8b288eedb9973a5b"
-  integrity sha512-X4hhm7FRnPgd4nDA4b/5V280xCx6oL7Oob5+9qVS5C13Zq4bh1qq7LU0GgRU6b5dBWBvhGaXYVB4AcN6+ol6vg==
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.22.11.tgz#b3c84c8f19880b6c7440108f8929caf6056db26c"
+  integrity sha512-xa7aad7q7OiT8oNZ1mU7NrISjlSkVdMbNxn9IuLZyL9AJEhs1Apba3I+u5riX1dIkdptP5EKDG5XDPByWxtehw==
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
@@ -574,9 +574,9 @@
     "@babel/helper-plugin-utils" "^7.22.5"
 
 "@babel/plugin-transform-json-strings@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.22.5.tgz#14b64352fdf7e1f737eed68de1a1468bd2a77ec0"
-  integrity sha512-DuCRB7fu8MyTLbEQd1ew3R85nx/88yMoqo2uPSjevMj3yoN7CDM8jkgrY0wmVxfJZyJ/B9fE1iq7EQppWQmR5A==
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.22.11.tgz#689a34e1eed1928a40954e37f74509f48af67835"
+  integrity sha512-CxT5tCqpA9/jXFlme9xIBCc5RPtdDq3JpkkhgHQqtDdiTnTI0jtZ0QzXhr5DILeYifDPp2wvY2ad+7+hLMW5Pw==
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-json-strings" "^7.8.3"
@@ -589,9 +589,9 @@
     "@babel/helper-plugin-utils" "^7.22.5"
 
 "@babel/plugin-transform-logical-assignment-operators@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.22.5.tgz#66ae5f068fd5a9a5dc570df16f56c2a8462a9d6c"
-  integrity sha512-MQQOUW1KL8X0cDWfbwYP+TbVbZm16QmQXJQ+vndPtH/BoO0lOKpVoEDMI7+PskYxH+IiE0tS8xZye0qr1lGzSA==
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.22.11.tgz#24c522a61688bde045b7d9bc3c2597a4d948fc9c"
+  integrity sha512-qQwRTP4+6xFCDV5k7gZBF3C31K34ut0tbEcTKxlX/0KXxm9GLcO14p570aWxFvVzx6QAfPgq7gaeIHXJC8LswQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
@@ -612,21 +612,21 @@
     "@babel/helper-plugin-utils" "^7.22.5"
 
 "@babel/plugin-transform-modules-commonjs@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.22.5.tgz#7d9875908d19b8c0536085af7b053fd5bd651bfa"
-  integrity sha512-B4pzOXj+ONRmuaQTg05b3y/4DuFz3WcCNAXPLb2Q0GT0TrGKGxNKV4jwsXts+StaM0LQczZbOpj8o1DLPDJIiA==
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.22.11.tgz#d7991d3abad199c03b68ee66a64f216c47ffdfae"
+  integrity sha512-o2+bg7GDS60cJMgz9jWqRUsWkMzLCxp+jFDeDUT5sjRlAxcJWZ2ylNdI7QQ2+CH5hWu7OnN+Cv3htt7AkSf96g==
   dependencies:
-    "@babel/helper-module-transforms" "^7.22.5"
+    "@babel/helper-module-transforms" "^7.22.9"
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/helper-simple-access" "^7.22.5"
 
 "@babel/plugin-transform-modules-systemjs@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.22.5.tgz#18c31410b5e579a0092638f95c896c2a98a5d496"
-  integrity sha512-emtEpoaTMsOs6Tzz+nbmcePl6AKVtS1yC4YNAeMun9U8YCsgadPNxnOPQ8GhHFB2qdx+LZu9LgoC0Lthuu05DQ==
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.22.11.tgz#3386be5875d316493b517207e8f1931d93154bb1"
+  integrity sha512-rIqHmHoMEOhI3VkVf5jQ15l539KrwhzqcBO6wdCNWPWc/JWt9ILNYNUssbRpeq0qWns8svuw8LnMNCvWBIJ8wA==
   dependencies:
     "@babel/helper-hoist-variables" "^7.22.5"
-    "@babel/helper-module-transforms" "^7.22.5"
+    "@babel/helper-module-transforms" "^7.22.9"
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/helper-validator-identifier" "^7.22.5"
 
@@ -654,28 +654,28 @@
     "@babel/helper-plugin-utils" "^7.22.5"
 
 "@babel/plugin-transform-nullish-coalescing-operator@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.22.5.tgz#f8872c65776e0b552e0849d7596cddd416c3e381"
-  integrity sha512-6CF8g6z1dNYZ/VXok5uYkkBBICHZPiGEl7oDnAx2Mt1hlHVHOSIKWJaXHjQJA5VB43KZnXZDIexMchY4y2PGdA==
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.22.11.tgz#debef6c8ba795f5ac67cd861a81b744c5d38d9fc"
+  integrity sha512-YZWOw4HxXrotb5xsjMJUDlLgcDXSfO9eCmdl1bgW4+/lAGdkjaEvOnQ4p5WKKdUgSzO39dgPl0pTnfxm0OAXcg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
 
 "@babel/plugin-transform-numeric-separator@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.22.5.tgz#57226a2ed9e512b9b446517ab6fa2d17abb83f58"
-  integrity sha512-NbslED1/6M+sXiwwtcAB/nieypGw02Ejf4KtDeMkCEpP6gWFMX1wI9WKYua+4oBneCCEmulOkRpwywypVZzs/g==
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.22.11.tgz#498d77dc45a6c6db74bb829c02a01c1d719cbfbd"
+  integrity sha512-3dzU4QGPsILdJbASKhF/V2TVP+gJya1PsueQCxIPCEcerqF21oEcrob4mzjsp2Py/1nLfF5m+xYNMDpmA8vffg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-numeric-separator" "^7.10.4"
 
 "@babel/plugin-transform-object-rest-spread@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.22.5.tgz#9686dc3447df4753b0b2a2fae7e8bc33cdc1f2e1"
-  integrity sha512-Kk3lyDmEslH9DnvCDA1s1kkd3YWQITiBOHngOtDL9Pt6BZjzqb6hiOlb8VfjiiQJ2unmegBqZu0rx5RxJb5vmQ==
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.22.11.tgz#dbbb06ce783cd994a8f430d8cefa553e9b42ca62"
+  integrity sha512-nX8cPFa6+UmbepISvlf5jhQyaC7ASs/7UxHmMkuJ/k5xSHvDPPaibMo+v3TXwU/Pjqhep/nFNpd3zn4YR59pnw==
   dependencies:
-    "@babel/compat-data" "^7.22.5"
-    "@babel/helper-compilation-targets" "^7.22.5"
+    "@babel/compat-data" "^7.22.9"
+    "@babel/helper-compilation-targets" "^7.22.10"
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
     "@babel/plugin-transform-parameters" "^7.22.5"
@@ -689,17 +689,17 @@
     "@babel/helper-replace-supers" "^7.22.5"
 
 "@babel/plugin-transform-optional-catch-binding@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.22.5.tgz#842080be3076703be0eaf32ead6ac8174edee333"
-  integrity sha512-pH8orJahy+hzZje5b8e2QIlBWQvGpelS76C63Z+jhZKsmzfNaPQ+LaW6dcJ9bxTpo1mtXbgHwy765Ro3jftmUg==
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.22.11.tgz#461cc4f578a127bb055527b3e77404cad38c08e0"
+  integrity sha512-rli0WxesXUeCJnMYhzAglEjLWVDF6ahb45HuprcmQuLidBJFWjNnOzssk2kuc6e33FlLaiZhG/kUIzUMWdBKaQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
 
 "@babel/plugin-transform-optional-chaining@^7.22.10", "@babel/plugin-transform-optional-chaining@^7.22.5":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.22.10.tgz#076d28a7e074392e840d4ae587d83445bac0372a"
-  integrity sha512-MMkQqZAZ+MGj+jGTG3OTuhKeBpNcO+0oCEbrGNEaOmiEn+1MzRyQlYsruGiU8RTK3zV6XwrVJTmwiDOyYK6J9g==
+  version "7.22.12"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.22.12.tgz#d7ebf6a88cd2f4d307b0e000ab630acd8124b333"
+  integrity sha512-7XXCVqZtyFWqjDsYDY4T45w4mlx1rf7aOgkc/Ww76xkgBiOlmjPkx36PBLHa1k1rwWvVgYMPsbuVnIamx2ZQJw==
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
@@ -721,12 +721,12 @@
     "@babel/helper-plugin-utils" "^7.22.5"
 
 "@babel/plugin-transform-private-property-in-object@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.22.5.tgz#07a77f28cbb251546a43d175a1dda4cf3ef83e32"
-  integrity sha512-/9xnaTTJcVoBtSSmrVyhtSvO3kbqS2ODoh2juEU72c3aYonNF0OMGiaz2gjukyKM2wBBYJP38S4JiE0Wfb5VMQ==
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.22.11.tgz#ad45c4fc440e9cb84c718ed0906d96cf40f9a4e1"
+  integrity sha512-sSCbqZDBKHetvjSwpyWzhuHkmW5RummxJBVbYLkGkaiTOWGxml7SXt0iWa03bzxFIx7wOj3g/ILRd0RcJKBeSQ==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.22.5"
-    "@babel/helper-create-class-features-plugin" "^7.22.5"
+    "@babel/helper-create-class-features-plugin" "^7.22.11"
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
 
@@ -919,10 +919,10 @@
   resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.15.4", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.6", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.10.tgz#ae3e9631fd947cb7e3610d3e9d8fef5f76696682"
-  integrity sha512-21t/fkKLMZI4pqP2wlmsQAWnYW1PDyKyyUV4vCi+B25ydmdaYTKXPwCj0BzSUnZf4seIiYvSA3jcZ3gdsMFkLQ==
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.15.4", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.10", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.11.tgz#7a9ba3bbe406ad6f9e8dd4da2ece453eb23a77a4"
+  integrity sha512-ee7jVNlWN09+KftVOu9n7S8gQzD/Z6hN/I8VBRXW4P1+Xe7kJGXMwu8vds4aGIMHZnNbdpSWCfZZtinytpcAvA==
   dependencies:
     regenerator-runtime "^0.14.0"
 
@@ -935,10 +935,10 @@
     "@babel/parser" "^7.22.5"
     "@babel/types" "^7.22.5"
 
-"@babel/traverse@^7.22.10":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.22.10.tgz#20252acb240e746d27c2e82b4484f199cf8141aa"
-  integrity sha512-Q/urqV4pRByiNNpb/f5OSv28ZlGJiFiiTh+GAHktbIrkPhPbl90+uW6SmpoLyZqutrg9AEaEf3Q/ZBRHBXgxig==
+"@babel/traverse@^7.22.11":
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.22.11.tgz#71ebb3af7a05ff97280b83f05f8865ac94b2027c"
+  integrity sha512-mzAenteTfomcB7mfPtyi+4oe5BZ6MXxWcn4CX+h4IRJ+OOGXBrWU6jDQavkQI9Vuc5P+donFabBfFCcmWka9lQ==
   dependencies:
     "@babel/code-frame" "^7.22.10"
     "@babel/generator" "^7.22.10"
@@ -946,15 +946,15 @@
     "@babel/helper-function-name" "^7.22.5"
     "@babel/helper-hoist-variables" "^7.22.5"
     "@babel/helper-split-export-declaration" "^7.22.6"
-    "@babel/parser" "^7.22.10"
-    "@babel/types" "^7.22.10"
+    "@babel/parser" "^7.22.11"
+    "@babel/types" "^7.22.11"
     debug "^4.1.0"
     globals "^11.1.0"
 
-"@babel/types@^7.22.10", "@babel/types@^7.22.5", "@babel/types@^7.4.4":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.22.10.tgz#4a9e76446048f2c66982d1a989dd12b8a2d2dc03"
-  integrity sha512-obaoigiLrlDZ7TUQln/8m4mSqIW2QFeOrCQc9r+xsaHGNoplVNYlRVpsfE8Vj35GEm2ZH4ZhrNYogs/3fj85kg==
+"@babel/types@^7.22.10", "@babel/types@^7.22.11", "@babel/types@^7.22.5", "@babel/types@^7.4.4":
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.22.11.tgz#0e65a6a1d4d9cbaa892b2213f6159485fe632ea2"
+  integrity sha512-siazHiGuZRz9aB9NpHy9GOs9xiQPKnMzgdr493iI1M67vRXpnEq8ZOOKzezC5q7zwuQ6sDhdSp4SD9ixKSqKZg==
   dependencies:
     "@babel/helper-string-parser" "^7.22.5"
     "@babel/helper-validator-identifier" "^7.22.5"
@@ -1155,9 +1155,9 @@
     eslint-visitor-keys "^3.3.0"
 
 "@eslint-community/regexpp@^4.4.0", "@eslint-community/regexpp@^4.6.1":
-  version "4.6.2"
-  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.6.2.tgz#1816b5f6948029c5eaacb0703b850ee0cb37d8f8"
-  integrity sha512-pPTNuaAG3QMH+buKyBIGJs3g/S5y0caxw0ygM3YyE6yJFySwiGGSzA+mM3KJ8QQvzeLh3blwgSonkFjgQdxzMw==
+  version "4.8.0"
+  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.8.0.tgz#11195513186f68d42fbf449f9a7136b2c0c92005"
+  integrity sha512-JylOEEzDiOryeUnFbQz+oViCXS0KsvR1mvHkoMiu5+UiBvy+RYX7tzlIIIEstF/gVa2tj9AQXk3dgnxv6KxhFg==
 
 "@eslint/eslintrc@^0.4.3":
   version "0.4.3"
@@ -1204,15 +1204,42 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
-"@eslint/js@^8.47.0":
-  version "8.47.0"
-  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.47.0.tgz#5478fdf443ff8158f9de171c704ae45308696c7d"
-  integrity sha512-P6omY1zv5MItm93kLM8s2vr1HICJH8v0dvddDhysbIuZ+vcjOHg5Zbkf1mTkcmi2JA9oBG2anOkRnW8WJTS8Og==
+"@eslint/js@8.48.0":
+  version "8.48.0"
+  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.48.0.tgz#642633964e217905436033a2bd08bf322849b7fb"
+  integrity sha512-ZSjtmelB7IJfWD2Fvb7+Z+ChTIKWq6kjda95fLcQKNS5aheVHn4IkfgRQE3sIIzTcSLwLcLZUD9UBt+V7+h+Pw==
+
+"@floating-ui/core@^1.4.1":
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.4.1.tgz#0d633f4b76052668afb932492ac452f7ebe97f17"
+  integrity sha512-jk3WqquEJRlcyu7997NtR5PibI+y5bi+LS3hPmguVClypenMsCY3CBa3LAQnozRCtCrYWSEtAdiskpamuJRFOQ==
+  dependencies:
+    "@floating-ui/utils" "^0.1.1"
+
+"@floating-ui/dom@^1.3.0":
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.1.tgz#88b70defd002fe851f17b4a25efb2d3c04d7a8d7"
+  integrity sha512-KwvVcPSXg6mQygvA1TjbN/gh///36kKtllIF8SUm0qpFj8+rvYrpvlYdL1JoA71SHpDqgSSdGOSoQ0Mp3uY5aw==
+  dependencies:
+    "@floating-ui/core" "^1.4.1"
+    "@floating-ui/utils" "^0.1.1"
+
+"@floating-ui/react-dom@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.1.tgz#7972a4fc488a8c746cded3cfe603b6057c308a91"
+  integrity sha512-rZtAmSht4Lry6gdhAJDrCp/6rKN7++JnL1/Anbr/DdeyYXQPxvg/ivrbYvJulbRf4vL8b212suwMM2lxbv+RQA==
+  dependencies:
+    "@floating-ui/dom" "^1.3.0"
+
+"@floating-ui/utils@^0.1.1":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.1.tgz#1a5b1959a528e374e8037c4396c3e825d6cf4a83"
+  integrity sha512-m0G6wlnhm/AX0H12IOWtK8gASEMffnX08RtKkCgTdHb9JpHKGloI7icFfLg9ZmQeavcvR0PKmzxClyuFPSjKWw==
 
 "@headlessui/react@^1.7.13", "@headlessui/react@^1.7.3":
-  version "1.7.16"
-  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.16.tgz#9c458c9c4dbb708258c9e8da3fe5363f915f7b11"
-  integrity sha512-2MphIAZdSUacZBT6EXk8AJkj+EuvaaJbtCyHTJrPsz8inhzCl7qeNPI1uk1AUvCgWylVtdN8cVVmnhUDPxPy3g==
+  version "1.7.17"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.17.tgz#a0ec23af21b527c030967245fd99776aa7352bc6"
+  integrity sha512-4am+tzvkqDSSgiwrsEpGWqgGo9dz8qU5M3znCkC4PgkpY4HcCZzEDEvozltGGGHIKl9jbXbZPSH5TWn4sWJdow==
   dependencies:
     client-only "^0.0.1"
 
@@ -1320,43 +1347,44 @@
   resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
   integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
 
-"@mui/base@5.0.0-beta.10":
-  version "5.0.0-beta.10"
-  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.10.tgz#b9a2de21c7de45aa4275c7ecf5aa803ecc236ba6"
-  integrity sha512-moTAhGwFfQffj7hsu61FnqcGqVcd53A1CrOhnskM9TF0Uh2rnLDMCuar4JRUWWpaJofAfQEbQBBFPadFQLI4PA==
+"@mui/base@5.0.0-beta.12":
+  version "5.0.0-beta.12"
+  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.12.tgz#131882930bdbe236dd835867bf6222a993b8d219"
+  integrity sha512-tZjjXNAyUpwSDT1uRliZMhRQkWYzELJ8Qi61EuOMRpi36HIwnK2T7Nr4RI423Sv8G2EEikDAZj7je33eNd73NQ==
   dependencies:
-    "@babel/runtime" "^7.22.6"
+    "@babel/runtime" "^7.22.10"
     "@emotion/is-prop-valid" "^1.2.1"
+    "@floating-ui/react-dom" "^2.0.1"
     "@mui/types" "^7.2.4"
-    "@mui/utils" "^5.14.4"
+    "@mui/utils" "^5.14.6"
     "@popperjs/core" "^2.11.8"
     clsx "^2.0.0"
     prop-types "^15.8.1"
     react-is "^18.2.0"
 
-"@mui/core-downloads-tracker@^5.14.4":
-  version "5.14.4"
-  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.4.tgz#a517265647ee9660170107d68905db5e400576c5"
-  integrity sha512-pW2XghSi3hpYKX57Wu0SCWMTSpzvXZmmucj3TcOJWaCiFt4xr05w2gcwBZi36dAp9uvd9//9N51qbblmnD+GPg==
+"@mui/core-downloads-tracker@^5.14.6":
+  version "5.14.6"
+  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.6.tgz#8cbc3441a630e1810a945e408e5025bdc99ea2f7"
+  integrity sha512-QZEU3pyGWLuaHbxvOlShol7U1FVgzWBR0OH9H8D7L8w4/vto5N5jJVvlqFQS3T0zbR6YGHxFaiL6Ky87jQg7aw==
 
 "@mui/icons-material@^5.14.1":
-  version "5.14.3"
-  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.14.3.tgz#26a84d52ab2fceea2856adf7a139527b3a51ae90"
-  integrity sha512-XkxWPhageu1OPUm2LWjo5XqeQ0t2xfGe8EiLkRW9oz2LHMMZmijvCxulhgquUVTF1DnoSh+3KoDLSsoAFtVNVw==
+  version "5.14.6"
+  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.14.6.tgz#0efdcba2c30d6b22e6ead787b67247da173bd11a"
+  integrity sha512-7Cujy7lRGTj2T3SvY9C9ZOTFDtrXJogeNnRcU/ODyNoxwskMNPFOcc15F+98MAdJenBVLJPYu+vPP6DUvEpNrA==
   dependencies:
-    "@babel/runtime" "^7.22.6"
+    "@babel/runtime" "^7.22.10"
 
 "@mui/material@^5.14.1":
-  version "5.14.4"
-  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.14.4.tgz#9d4d1834a929a4acc59e550e34ca64c0fd60b3a6"
-  integrity sha512-2XUV3KyRC07BQPPzEgd+ss3x/ezXtHeKtOGCMCNmx3MauZojPYUpSwFkE0fYgYCD9dMQMVG4DY/VF38P0KShsg==
-  dependencies:
-    "@babel/runtime" "^7.22.6"
-    "@mui/base" "5.0.0-beta.10"
-    "@mui/core-downloads-tracker" "^5.14.4"
-    "@mui/system" "^5.14.4"
+  version "5.14.6"
+  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.14.6.tgz#12cbb716a7f70859764be310bb9b2f5ffc0da818"
+  integrity sha512-C3UgGrmtvcGkQkm0ONBU7bTdapTjQc2Se3b2354xMmU7lgSgW7VM6EP9wIH5XqqoJ60m9l/s9kbTWX0Y+EaWvA==
+  dependencies:
+    "@babel/runtime" "^7.22.10"
+    "@mui/base" "5.0.0-beta.12"
+    "@mui/core-downloads-tracker" "^5.14.6"
+    "@mui/system" "^5.14.6"
     "@mui/types" "^7.2.4"
-    "@mui/utils" "^5.14.4"
+    "@mui/utils" "^5.14.6"
     "@types/react-transition-group" "^4.4.6"
     clsx "^2.0.0"
     csstype "^3.1.2"
@@ -1364,35 +1392,35 @@
     react-is "^18.2.0"
     react-transition-group "^4.4.5"
 
-"@mui/private-theming@^5.14.4":
-  version "5.14.4"
-  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.14.4.tgz#0ec5510da05047f94984344360c7f457f3a0e19e"
-  integrity sha512-ISXsHDiQ3z1XA4IuKn+iXDWvDjcz/UcQBiFZqtdoIsEBt8CB7wgdQf3LwcwqO81dl5ofg/vNQBEnXuKfZHrnYA==
+"@mui/private-theming@^5.14.6":
+  version "5.14.6"
+  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.14.6.tgz#bd80c91bea94b6e54a74764f8d3fb0d4ec418acb"
+  integrity sha512-3VBLFGizBXfofyk33bwRg6t9L648aKnLmOKPfY1wFuiXq3AEYwobK65iDci/tHKxm/VKbZ6A7PFjLejvB3EvRQ==
   dependencies:
-    "@babel/runtime" "^7.22.6"
-    "@mui/utils" "^5.14.4"
+    "@babel/runtime" "^7.22.10"
+    "@mui/utils" "^5.14.6"
     prop-types "^15.8.1"
 
-"@mui/styled-engine@^5.13.2":
-  version "5.13.2"
-  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.13.2.tgz#c87bd61c0ab8086d34828b6defe97c02bcd642ef"
-  integrity sha512-VCYCU6xVtXOrIN8lcbuPmoG+u7FYuOERG++fpY74hPpEWkyFQG97F+/XfTQVYzlR2m7nPjnwVUgATcTCMEaMvw==
+"@mui/styled-engine@^5.14.6":
+  version "5.14.6"
+  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.14.6.tgz#a4034ab51981ecf673275b2c1d1da71deb94317f"
+  integrity sha512-I6zeu/OP1Hk4NsX1Oj85TiYl1dER0JMsLJVn76J1Ihl24A5EbiZQKJp3Mn+ufA79ypkdAvM9aQCAQyiVBFcUHg==
   dependencies:
-    "@babel/runtime" "^7.21.0"
+    "@babel/runtime" "^7.22.10"
     "@emotion/cache" "^11.11.0"
     csstype "^3.1.2"
     prop-types "^15.8.1"
 
-"@mui/system@^5.14.4":
-  version "5.14.4"
-  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.14.4.tgz#306a2fdd41ab6f4912ea689316f834db8461bb86"
-  integrity sha512-oPgfWS97QNfHcDBapdkZIs4G5i85BJt69Hp6wbXF6s7vi3Evcmhdk8AbCRW6n0sX4vTj8oe0mh0RIm1G2A1KDA==
+"@mui/system@^5.14.6":
+  version "5.14.6"
+  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.14.6.tgz#621eae10c4dde0a2ab566ac09c26f7becfb7ba80"
+  integrity sha512-/n0ae1MegWjiV1BpRU8jgg4E0zBjeB2VYsT/68ag/xaDuq3/TaDKJeT9REIvyBvwlG3CI3S2O+tRELktxCD1kg==
   dependencies:
-    "@babel/runtime" "^7.22.6"
-    "@mui/private-theming" "^5.14.4"
-    "@mui/styled-engine" "^5.13.2"
+    "@babel/runtime" "^7.22.10"
+    "@mui/private-theming" "^5.14.6"
+    "@mui/styled-engine" "^5.14.6"
     "@mui/types" "^7.2.4"
-    "@mui/utils" "^5.14.4"
+    "@mui/utils" "^5.14.6"
     clsx "^2.0.0"
     csstype "^3.1.2"
     prop-types "^15.8.1"
@@ -1402,12 +1430,12 @@
   resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.4.tgz#b6fade19323b754c5c6de679a38f068fd50b9328"
   integrity sha512-LBcwa8rN84bKF+f5sDyku42w1NTxaPgPyYKODsh01U1fVstTClbUoSA96oyRBnSNyEiAVjKm6Gwx9vjR+xyqHA==
 
-"@mui/utils@^5.14.4":
-  version "5.14.4"
-  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.14.4.tgz#498cc2b08e46776c1e4327bfd8c23ad2f5890bc6"
-  integrity sha512-4ANV0txPD3x0IcTCSEHKDWnsutg1K3m6Vz5IckkbLXVYu17oOZCVUdOKsb/txUmaCd0v0PmSRe5PW+Mlvns5dQ==
+"@mui/utils@^5.14.6":
+  version "5.14.6"
+  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.14.6.tgz#614338f781faf21535fbf1094b6691aaee1ff472"
+  integrity sha512-AznpqLu6hrFnpHgcvsSSMCG+cDbkcCYfo+daUwBVReNYv4l+NQ8+wvBAF4aUMi155N7xWbbgh0cyKs6Wdsm3aA==
   dependencies:
-    "@babel/runtime" "^7.22.6"
+    "@babel/runtime" "^7.22.10"
     "@types/prop-types" "^15.7.5"
     "@types/react-is" "^18.2.1"
     prop-types "^15.8.1"
@@ -1418,10 +1446,10 @@
   resolved "https://registry.yarnpkg.com/@next/env/-/env-12.3.2.tgz#fb819366771f5721e9438ca3a42ad18684f0949b"
   integrity sha512-upwtMaHxlv/udAWGq0kE+rg8huwmcxQPsKZFhS1R5iVO323mvxEBe1YrSXe1awLbg9sTIuEHbgxjLLt7JbeuAQ==
 
-"@next/env@13.4.16":
-  version "13.4.16"
-  resolved "https://registry.yarnpkg.com/@next/env/-/env-13.4.16.tgz#382b565b35a2a69bd0e6b50f74c7b95f0c4b1097"
-  integrity sha512-pCU0sJBqdfKP9mwDadxvZd+eLz3fZrTlmmDHY12Hdpl3DD0vy8ou5HWKVfG0zZS6tqhL4wnQqRbspdY5nqa7MA==
+"@next/env@13.4.19":
+  version "13.4.19"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-13.4.19.tgz#46905b4e6f62da825b040343cbc233144e9578d3"
+  integrity sha512-FsAT5x0jF2kkhNkKkukhsyYOrRqtSxrEhfliniIq0bwWbuXLgyt3Gv0Ml+b91XwjwArmuP7NxCiGd++GGKdNMQ==
 
 "@next/eslint-plugin-next@12.2.2":
   version "12.2.2"
@@ -1459,20 +1487,20 @@
   resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.3.2.tgz#97c532d35c66ce6b6941ae24b5b8b267b9b0d0d8"
   integrity sha512-PTUfe1ZrwjsiuTmr3bOM9lsoy5DCmfYsLOUF9ZVhtbi5MNJVmUTy4VZ06GfrvnCO5hGCr48z3vpFE9QZ0qLcPw==
 
-"@next/swc-darwin-arm64@13.4.16":
-  version "13.4.16"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.16.tgz#ed6a342f95e5f21213fdadbceb65b40ae678cee0"
-  integrity sha512-Rl6i1uUq0ciRa3VfEpw6GnWAJTSKo9oM2OrkGXPsm7rMxdd2FR5NkKc0C9xzFCI4+QtmBviWBdF2m3ur3Nqstw==
+"@next/swc-darwin-arm64@13.4.19":
+  version "13.4.19"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.19.tgz#77ad462b5ced4efdc26cb5a0053968d2c7dac1b6"
+  integrity sha512-vv1qrjXeGbuF2mOkhkdxMDtv9np7W4mcBtaDnHU+yJG+bBwa6rYsYSCI/9Xm5+TuF5SbZbrWO6G1NfTh1TMjvQ==
 
 "@next/swc-darwin-x64@12.3.2":
   version "12.3.2"
   resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-12.3.2.tgz#e0cb4ff4b11faaff3a891bd1d18ed72f71e30ebe"
   integrity sha512-1HkjmS9awwlaeEY8Y01nRSNkSv3y+qnC/mjMPe/W66hEh3QKa/LQHqHeS7NOdEs19B2mhZ7w+EgMRXdLQ0Su8w==
 
-"@next/swc-darwin-x64@13.4.16":
-  version "13.4.16"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-13.4.16.tgz#36c16066a1a3ef8211e84a6a5d72bef15826b291"
-  integrity sha512-o1vIKYbZORyDmTrPV1hApt9NLyWrS5vr2p5hhLGpOnkBY1cz6DAXjv8Lgan8t6X87+83F0EUDlu7klN8ieZ06A==
+"@next/swc-darwin-x64@13.4.19":
+  version "13.4.19"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-13.4.19.tgz#aebe38713a4ce536ee5f2a291673e14b715e633a"
+  integrity sha512-jyzO6wwYhx6F+7gD8ddZfuqO4TtpJdw3wyOduR4fxTUCm3aLw7YmHGYNjS0xRSYGAkLpBkH1E0RcelyId6lNsw==
 
 "@next/swc-freebsd-x64@12.3.2":
   version "12.3.2"
@@ -1489,70 +1517,70 @@
   resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.3.2.tgz#26df7d7cdc18cf413f12a408179ee4ac315f383a"
   integrity sha512-T9GCFyOIb4S3acA9LqflUYD+QZ94iZketHCqKdoO0Nx0OCHIgGJV5rotDe8TDXwh/goYpIfyHU4j1qqw4w4VnA==
 
-"@next/swc-linux-arm64-gnu@13.4.16":
-  version "13.4.16"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.4.16.tgz#a5b5500737f07e3aa7f184014d8df7973420df26"
-  integrity sha512-JRyAl8lCfyTng4zoOmE6hNI2f1MFUr7JyTYCHl1RxX42H4a5LMwJhDVQ7a9tmDZ/yj+0hpBn+Aan+d6lA3v0UQ==
+"@next/swc-linux-arm64-gnu@13.4.19":
+  version "13.4.19"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.4.19.tgz#ec54db65b587939c7b94f9a84800f003a380f5a6"
+  integrity sha512-vdlnIlaAEh6H+G6HrKZB9c2zJKnpPVKnA6LBwjwT2BTjxI7e0Hx30+FoWCgi50e+YO49p6oPOtesP9mXDRiiUg==
 
 "@next/swc-linux-arm64-musl@12.3.2":
   version "12.3.2"
   resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.3.2.tgz#fd42232a6b10d9f9a4f71433d59c280a4532d06f"
   integrity sha512-hxNVZS6L3c2z3l9EH2GP0MGQ9exu6O8cohYNZyqC9WUl6C03sEn8xzDH1y+NgD3fVurvYkGU5F0PDddJJLfDIw==
 
-"@next/swc-linux-arm64-musl@13.4.16":
-  version "13.4.16"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.4.16.tgz#381b7662c5b10ed5750dce41dd57841aa0713e77"
-  integrity sha512-9gqVqNzUMWbUDgDiND18xoUqhwSm2gmksqXgCU0qaOKt6oAjWz8cWYjgpPVD0WICKFylEY/gvPEP1fMZDVFZ/g==
+"@next/swc-linux-arm64-musl@13.4.19":
+  version "13.4.19"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.4.19.tgz#1f5e2c1ea6941e7d530d9f185d5d64be04279d86"
+  integrity sha512-aU0HkH2XPgxqrbNRBFb3si9Ahu/CpaR5RPmN2s9GiM9qJCiBBlZtRTiEca+DC+xRPyCThTtWYgxjWHgU7ZkyvA==
 
 "@next/swc-linux-x64-gnu@12.3.2":
   version "12.3.2"
   resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.3.2.tgz#5307579e3d8fbdb03adbe6cfc915b51548e0a103"
   integrity sha512-fCPkLuwDwY8/QeXxciJJjDHG09liZym/Bhb4A+RLFQ877wUkwFsNWDUTSdUx0YXlYK/1gf67BKauqKkOKp6CYw==
 
-"@next/swc-linux-x64-gnu@13.4.16":
-  version "13.4.16"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.4.16.tgz#6e0b0eab1c316506950aeb4a09a5ea5c38edabe7"
-  integrity sha512-KcQGwchAKmZVPa8i5PLTxvTs1/rcFnSltfpTm803Tr/BtBV3AxCkHLfhtoyVtVzx/kl/oue8oS+DSmbepQKwhw==
+"@next/swc-linux-x64-gnu@13.4.19":
+  version "13.4.19"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.4.19.tgz#96b0882492a2f7ffcce747846d3680730f69f4d1"
+  integrity sha512-htwOEagMa/CXNykFFeAHHvMJeqZfNQEoQvHfsA4wgg5QqGNqD5soeCer4oGlCol6NGUxknrQO6VEustcv+Md+g==
 
 "@next/swc-linux-x64-musl@12.3.2":
   version "12.3.2"
   resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.3.2.tgz#d5cb920a825a8dc80ffba8a6b797fb845af0b84c"
   integrity sha512-o+GifBIQ2K+/MEFxHsxUZoU3bsuVFLXZYWd3idimFHiVdDCVYiKsY6mYMmKDlucX+9xRyOCkKL9Tjf+3tuXJpw==
 
-"@next/swc-linux-x64-musl@13.4.16":
-  version "13.4.16"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.4.16.tgz#36b84e4509168a5cadf9dfd728c239002d4311fe"
-  integrity sha512-2RbMZNxYnJmW8EPHVBsGZPq5zqWAyBOc/YFxq/jIQ/Yn3RMFZ1dZVCjtIcsiaKmgh7mjA/W0ApbumutHNxRqqQ==
+"@next/swc-linux-x64-musl@13.4.19":
+  version "13.4.19"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.4.19.tgz#f276b618afa321d2f7b17c81fc83f429fb0fd9d8"
+  integrity sha512-4Gj4vvtbK1JH8ApWTT214b3GwUh9EKKQjY41hH/t+u55Knxi/0wesMzwQRhppK6Ddalhu0TEttbiJ+wRcoEj5Q==
 
 "@next/swc-win32-arm64-msvc@12.3.2":
   version "12.3.2"
   resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.3.2.tgz#2a0d619e5bc0cec17ed093afd1ca6b1c37c2690c"
   integrity sha512-crii66irzGGMSUR0L8r9+A06eTv7FTXqw4rgzJ33M79EwQJOdpY7RVKXLQMurUhniEeQEEOfamiEdPIi/qxisw==
 
-"@next/swc-win32-arm64-msvc@13.4.16":
-  version "13.4.16"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.4.16.tgz#52d36f909ccdefa2761617b6d4e9ae65f99880a9"
-  integrity sha512-thDcGonELN7edUKzjzlHrdoKkm7y8IAdItQpRvvMxNUXa4d9r0ElofhTZj5emR7AiXft17hpen+QAkcWpqG7Jg==
+"@next/swc-win32-arm64-msvc@13.4.19":
+  version "13.4.19"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.4.19.tgz#1599ae0d401da5ffca0947823dac577697cce577"
+  integrity sha512-bUfDevQK4NsIAHXs3/JNgnvEY+LRyneDN788W2NYiRIIzmILjba7LaQTfihuFawZDhRtkYCv3JDC3B4TwnmRJw==
 
 "@next/swc-win32-ia32-msvc@12.3.2":
   version "12.3.2"
   resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.3.2.tgz#769bef60d0d678c3d7606a4dc7fee018d6199227"
   integrity sha512-5hRUSvn3MdQ4nVRu1rmKxq5YJzpTtZfaC/NyGw6wa4NSF1noUn/pdQGUr+I5Qz3CZkd1gZzzC0eaXQHlrk0E2g==
 
-"@next/swc-win32-ia32-msvc@13.4.16":
-  version "13.4.16"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.4.16.tgz#a9cb0556d19c33fbb39ac9bef195fd490d6c7673"
-  integrity sha512-f7SE1Mo4JAchUWl0LQsbtySR9xCa+x55C0taetjUApKtcLR3AgAjASrrP+oE1inmLmw573qRnE1eZN8YJfEBQw==
+"@next/swc-win32-ia32-msvc@13.4.19":
+  version "13.4.19"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.4.19.tgz#55cdd7da90818f03e4da16d976f0cb22045d16fd"
+  integrity sha512-Y5kikILFAr81LYIFaw6j/NrOtmiM4Sf3GtOc0pn50ez2GCkr+oejYuKGcwAwq3jiTKuzF6OF4iT2INPoxRycEA==
 
 "@next/swc-win32-x64-msvc@12.3.2":
   version "12.3.2"
   resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.3.2.tgz#45beb4b9d28e6dd6abf63cab1c5b92dc84323a6b"
   integrity sha512-tpQJYUH+TzPMIsdVl9fH8uDg47iwiNjKY+8e9da3dXqlkztKzjSw0OwSADoqh3KrifplXeKSta+BBGLdBqg3sg==
 
-"@next/swc-win32-x64-msvc@13.4.16":
-  version "13.4.16"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.4.16.tgz#79a151d94583e03992c80df3d3e7f7686390ddac"
-  integrity sha512-WamDZm1M/OEM4QLce3lOmD1XdLEl37zYZwlmOLhmF7qYJ2G6oYm9+ejZVv+LakQIsIuXhSpVlOvrxIAHqwRkPQ==
+"@next/swc-win32-x64-msvc@13.4.19":
+  version "13.4.19"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.4.19.tgz#648f79c4e09279212ac90d871646ae12d80cdfce"
+  integrity sha512-YzA78jBDXMYiINdPdJJwGgPNT3YqBNNGhsthsDoWHL9p24tEJn9ViQf/ZqTbwSpX/RrkPupLfuuTH2sf73JBAw==
 
 "@nivo/annotations@0.80.0":
   version "0.80.0"
@@ -2011,9 +2039,9 @@
     picomatch "^2.2.2"
 
 "@rollup/pluginutils@^5.0.1":
-  version "5.0.3"
-  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.0.3.tgz#183126d69aeb1cfa23401d5a71cb4b8c16c4a4e0"
-  integrity sha512-hfllNN4a80rwNQ9QCxhxuHCGHMAvabXqxNdaChUSSadMre7t4iEUI6fFAhBOn/eIYTgYVhBv7vCLsAJ4u3lf3g==
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.0.4.tgz#74f808f9053d33bafec0cc98e7b835c9667d32ba"
+  integrity sha512-0KJnIoRI8A+a1dqOYLxH8vBf8bphDmty5QvIm2hqm7oFCFYKCAZWWd2hXgMibaPsNDhI0AtpYfQZJG47pt/k4g==
   dependencies:
     "@types/estree" "^1.0.0"
     estree-walker "^2.0.2"
@@ -2046,26 +2074,26 @@
   dependencies:
     "@daybrush/utils" "^1.4.0"
 
-"@sentry-internal/tracing@7.63.0":
-  version "7.63.0"
-  resolved "https://registry.yarnpkg.com/@sentry-internal/tracing/-/tracing-7.63.0.tgz#58903b2205456034611cc5bc1b5b2479275f89c7"
-  integrity sha512-Fxpc53p6NGvLSURg3iRvZA0k10K9yfeVhtczvJnpX30POBuV41wxpkLHkb68fjksirjEma1K3Ut1iLOEEDpPQg==
+"@sentry-internal/tracing@7.64.0":
+  version "7.64.0"
+  resolved "https://registry.yarnpkg.com/@sentry-internal/tracing/-/tracing-7.64.0.tgz#3e110473b8edf805b799cc91d6ee592830237bb4"
+  integrity sha512-1XE8W6ki7hHyBvX9hfirnGkKDBKNq3bDJyXS86E0bYVDl94nvbRM9BD9DHsCFetqYkVm1yDGEK+6aUVs4CztoQ==
   dependencies:
-    "@sentry/core" "7.63.0"
-    "@sentry/types" "7.63.0"
-    "@sentry/utils" "7.63.0"
+    "@sentry/core" "7.64.0"
+    "@sentry/types" "7.64.0"
+    "@sentry/utils" "7.64.0"
     tslib "^2.4.1 || ^1.9.3"
 
-"@sentry/browser@7.63.0":
-  version "7.63.0"
-  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-7.63.0.tgz#d7eee4be7bfff015f050bca83cafb111dc13d40d"
-  integrity sha512-P1Iw/2281C/7CUCRsN4jgXvjMNKnrwKqxRg7JqN8eVeCDPMpOeEPHNJ6YatEXdVLTKVn0JB7L63Q1prhFr8+SQ==
+"@sentry/browser@7.64.0":
+  version "7.64.0"
+  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-7.64.0.tgz#76db08a5d32ffe7c5aa907f258e6c845ce7f10d7"
+  integrity sha512-lB2IWUkZavEDclxfLBp554dY10ZNIEvlDZUWWathW+Ws2wRb6PNLtuPUNu12R7Q7z0xpkOLrM1kRNN0OdldgKA==
   dependencies:
-    "@sentry-internal/tracing" "7.63.0"
-    "@sentry/core" "7.63.0"
-    "@sentry/replay" "7.63.0"
-    "@sentry/types" "7.63.0"
-    "@sentry/utils" "7.63.0"
+    "@sentry-internal/tracing" "7.64.0"
+    "@sentry/core" "7.64.0"
+    "@sentry/replay" "7.64.0"
+    "@sentry/types" "7.64.0"
+    "@sentry/utils" "7.64.0"
     tslib "^2.4.1 || ^1.9.3"
 
 "@sentry/cli@^1.74.6":
@@ -2080,88 +2108,88 @@
     proxy-from-env "^1.1.0"
     which "^2.0.2"
 
-"@sentry/core@7.63.0":
-  version "7.63.0"
-  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.63.0.tgz#8c38da6ef3a1de6e364463a09bc703b196ecbba4"
-  integrity sha512-13Ljiq8hv6ieCkO+Am99/PljYJO5ynKT/hRQrWgGy9IIEgUr8sV3fW+1W6K4/3MCeOJou0HsiGBjOD1mASItVg==
+"@sentry/core@7.64.0":
+  version "7.64.0"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.64.0.tgz#9d61cdc29ba299dedbdcbe01cfadf94bd0b7df48"
+  integrity sha512-IzmEyl5sNG7NyEFiyFHEHC+sizsZp9MEw1+RJRLX6U5RITvcsEgcajSkHQFafaBPzRrcxZMdm47Cwhl212LXcw==
   dependencies:
-    "@sentry/types" "7.63.0"
-    "@sentry/utils" "7.63.0"
+    "@sentry/types" "7.64.0"
+    "@sentry/utils" "7.64.0"
     tslib "^2.4.1 || ^1.9.3"
 
-"@sentry/integrations@7.63.0":
-  version "7.63.0"
-  resolved "https://registry.yarnpkg.com/@sentry/integrations/-/integrations-7.63.0.tgz#bf4268b524670fdbc290dc489de0069143b499c6"
-  integrity sha512-+P8GNqFZNH/yS/KPbvUfUDERneoRNUrqp9ayvvp8aq4cTtrBdM72CYgI21oG6cti42SSM1VDLYZomTV3ElPzSg==
+"@sentry/integrations@7.64.0":
+  version "7.64.0"
+  resolved "https://registry.yarnpkg.com/@sentry/integrations/-/integrations-7.64.0.tgz#a392ddeebeec0c08ae5ca1f544c80ab15977fe10"
+  integrity sha512-6gbSGiruOifAmLtXw//Za19GWiL5qugDMEFxSvc5WrBWb+A8UK+foPn3K495OcivLS68AmqAQCUGb+6nlVowwA==
   dependencies:
-    "@sentry/types" "7.63.0"
-    "@sentry/utils" "7.63.0"
+    "@sentry/types" "7.64.0"
+    "@sentry/utils" "7.64.0"
     localforage "^1.8.1"
     tslib "^2.4.1 || ^1.9.3"
 
 "@sentry/nextjs@^7.36.0":
-  version "7.63.0"
-  resolved "https://registry.yarnpkg.com/@sentry/nextjs/-/nextjs-7.63.0.tgz#79bca799d451e1570c7873474e295660218cadea"
-  integrity sha512-pf1kEt2oqxe84+DdmGkI6BEe1KMUcUFU4PZKg5GRFY7e2ZqHoS8hTJF5rBkScqVlQoXDTiGpfI+vU8Ie3snUcQ==
+  version "7.64.0"
+  resolved "https://registry.yarnpkg.com/@sentry/nextjs/-/nextjs-7.64.0.tgz#5c0bd7ccc6637e0b925dec25ca247dcb8476663c"
+  integrity sha512-hKlIQpFugdRlWj0wcEG9I8JyVm/osdsE72zwMBGnmCw/jf7U63vjOjfxMe/gRuvllCf/AvoGHEkR5jPufcO+bw==
   dependencies:
     "@rollup/plugin-commonjs" "24.0.0"
-    "@sentry/core" "7.63.0"
-    "@sentry/integrations" "7.63.0"
-    "@sentry/node" "7.63.0"
-    "@sentry/react" "7.63.0"
-    "@sentry/types" "7.63.0"
-    "@sentry/utils" "7.63.0"
+    "@sentry/core" "7.64.0"
+    "@sentry/integrations" "7.64.0"
+    "@sentry/node" "7.64.0"
+    "@sentry/react" "7.64.0"
+    "@sentry/types" "7.64.0"
+    "@sentry/utils" "7.64.0"
     "@sentry/webpack-plugin" "1.20.0"
     chalk "3.0.0"
     rollup "2.78.0"
     stacktrace-parser "^0.1.10"
     tslib "^2.4.1 || ^1.9.3"
 
-"@sentry/node@7.63.0":
-  version "7.63.0"
-  resolved "https://registry.yarnpkg.com/@sentry/node/-/node-7.63.0.tgz#38508a440c04c0e98d00f5a1855e5448ee70c8d6"
-  integrity sha512-tSMyfQNbfjX1w8vJDZtvWeaD4QQ/Z4zVW/TLXfL/JZFIIksPgDZmqLdF+NJS4bSGTU5JiHiUh4pYhME4mHgNBQ==
+"@sentry/node@7.64.0":
+  version "7.64.0"
+  resolved "https://registry.yarnpkg.com/@sentry/node/-/node-7.64.0.tgz#c6f7a67c1442324298f0525e7191bc18572ee1ce"
+  integrity sha512-wRi0uTnp1WSa83X2yLD49tV9QPzGh5e42IKdIDBiQ7lV9JhLILlyb34BZY1pq6p4dp35yDasDrP3C7ubn7wo6A==
   dependencies:
-    "@sentry-internal/tracing" "7.63.0"
-    "@sentry/core" "7.63.0"
-    "@sentry/types" "7.63.0"
-    "@sentry/utils" "7.63.0"
+    "@sentry-internal/tracing" "7.64.0"
+    "@sentry/core" "7.64.0"
+    "@sentry/types" "7.64.0"
+    "@sentry/utils" "7.64.0"
     cookie "^0.4.1"
     https-proxy-agent "^5.0.0"
     lru_map "^0.3.3"
     tslib "^2.4.1 || ^1.9.3"
 
-"@sentry/react@7.63.0":
-  version "7.63.0"
-  resolved "https://registry.yarnpkg.com/@sentry/react/-/react-7.63.0.tgz#6d318191e13ccf7ebba4897d7258b4ea3bcf6c51"
-  integrity sha512-KFRjgADVE4aMI7gJmGnoSz65ZErQlz9xRB3vETWSyNOLprWXuQLPPtcDEn39BROtsDG4pLyYFaSDiD7o0+DyjQ==
+"@sentry/react@7.64.0":
+  version "7.64.0"
+  resolved "https://registry.yarnpkg.com/@sentry/react/-/react-7.64.0.tgz#edee24ac232990204e0fb43dd83994642d4b0f54"
+  integrity sha512-wOyJUQi7OoT1q+F/fVVv1fzbyO4OYbTu6m1DliLOGQPGEHPBsgPc722smPIExd1/rAMK/FxOuNN5oNhubH8nhg==
   dependencies:
-    "@sentry/browser" "7.63.0"
-    "@sentry/types" "7.63.0"
-    "@sentry/utils" "7.63.0"
+    "@sentry/browser" "7.64.0"
+    "@sentry/types" "7.64.0"
+    "@sentry/utils" "7.64.0"
     hoist-non-react-statics "^3.3.2"
     tslib "^2.4.1 || ^1.9.3"
 
-"@sentry/replay@7.63.0":
-  version "7.63.0"
-  resolved "https://registry.yarnpkg.com/@sentry/replay/-/replay-7.63.0.tgz#989ae32ea028a5eca323786cc07294fedb1f0d45"
-  integrity sha512-ikeFVojuP9oDF103blZcj0Vvb4S50dV54BESMrMW2lYBoMMjvOd7AdL+iDHjn1OL05/mv1C6Oc8MovmvdjILVA==
+"@sentry/replay@7.64.0":
+  version "7.64.0"
+  resolved "https://registry.yarnpkg.com/@sentry/replay/-/replay-7.64.0.tgz#bdf09b0c4712f9dc6b24b3ebefa55a4ac76708e6"
+  integrity sha512-alaMCZDZhaAVmEyiUnszZnvfdbiZx5MmtMTGrlDd7tYq3K5OA9prdLqqlmfIJYBfYtXF3lD0iZFphOZQD+4CIw==
   dependencies:
-    "@sentry/core" "7.63.0"
-    "@sentry/types" "7.63.0"
-    "@sentry/utils" "7.63.0"
+    "@sentry/core" "7.64.0"
+    "@sentry/types" "7.64.0"
+    "@sentry/utils" "7.64.0"
 
-"@sentry/types@7.63.0":
-  version "7.63.0"
-  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.63.0.tgz#8032029fee6f70e04b667646626a674b03e2f79b"
-  integrity sha512-pZNwJVW7RqNLGuTUAhoygt0c9zmc0js10eANAz0MstygJRhQI1tqPDuiELVdujPrbeL+IFKF+7NvRDAydR2Niw==
+"@sentry/types@7.64.0":
+  version "7.64.0"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.64.0.tgz#21fc545ea05c3c8c4c3e518583eca1a8c5429506"
+  integrity sha512-LqjQprWXjUFRmzIlUjyA+KL+38elgIYmAeoDrdyNVh8MK5IC1W2Lh1Q87b4yOiZeMiIhIVNBd7Ecoh2rodGrGA==
 
-"@sentry/utils@7.63.0":
-  version "7.63.0"
-  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.63.0.tgz#7c598553b4dbb6e3740dc96bc7f112ec32edbe69"
-  integrity sha512-7FQv1RYAwnuTuarruP+1+Jd6YQuN7i/Y7KltwPMVEwU7j5mzYQaexLr/Jz1XIdR2KYVdkbXQyP8jj8BmA6u9Jw==
+"@sentry/utils@7.64.0":
+  version "7.64.0"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.64.0.tgz#6fe3ce9a56d3433ed32119f914907361a54cc184"
+  integrity sha512-HRlM1INzK66Gt+F4vCItiwGKAng4gqzCR4C5marsL3qv6SrKH98dQnCGYgXluSWaaa56h97FRQu7TxCk6jkSvQ==
   dependencies:
-    "@sentry/types" "7.63.0"
+    "@sentry/types" "7.64.0"
     tslib "^2.4.1 || ^1.9.3"
 
 "@sentry/webpack-plugin@1.20.0":
@@ -2207,177 +2235,177 @@
     postcss-selector-parser "6.0.10"
 
 "@tiptap-pro/extension-unique-id@^2.1.0":
-  version "2.1.0"
-  resolved "https://registry.tiptap.dev/@tiptap-pro%2fextension-unique-id/-/extension-unique-id-2.1.0.tgz#7f5e7cc2d068eff11531e2b8c894ddf13c8d41d8"
-  integrity sha512-RdkDqFV0adN/NXJ31I64mD3VmoGhQfNMmOyF5X92fbIymHaonAGzDeoXoindd+6MUUd6e3cm75x5VQLdsddG4Q==
+  version "2.2.1"
+  resolved "https://registry.tiptap.dev/@tiptap-pro%2fextension-unique-id/-/extension-unique-id-2.2.1.tgz#656803254760314d4e1b453dc5b75c86023048a6"
+  integrity sha512-B0GNLrWDVcfhbUOOi/lJfow6I4Y8xwJYXnSlhAENnGgOGERjinY1J5nZaR5dDMu1chcJYqAt3I7vkVLA/UMwmQ==
   dependencies:
     uuid "^8.3.2"
 
-"@tiptap/core@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/core/-/core-2.0.4.tgz#0a2047150ae537e75f96841a603699526f7b4ec5"
-  integrity sha512-2YOMjRqoBGEP4YGgYpuPuBBJHMeqKOhLnS0WVwjVP84zOmMgZ7A8M6ILC9Xr7Q/qHZCvyBGWOSsI7+3HsEzzYQ==
+"@tiptap/core@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/core/-/core-2.1.7.tgz#9823a3712d176849cfd281dd8229ad0719c9eb9e"
+  integrity sha512-1pqTwlTnwTKQSNQmmTWhs2lwdvd+hFFNFZnrRAfvZhQZA6qPmPmKMNTcYmK38Tn4axKth6mhBamzTJgMZFI7ng==
 
-"@tiptap/extension-blockquote@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-blockquote/-/extension-blockquote-2.0.4.tgz#1e87f8f157573deec65b54d8a8b5568d79066a86"
-  integrity sha512-z5qfuLi04OgCBI6/odzB2vhulT/wpjymYOnON65vLXGZZbUw4cbPloykhqgWvQp+LzKH+HBhl4fz53d5CgnbOA==
+"@tiptap/extension-blockquote@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-blockquote/-/extension-blockquote-2.1.7.tgz#fe25ec1dedd1f7e3eb1a851a6ac8738ca4691a17"
+  integrity sha512-oAsUU1c0DDZKHwK7/uCtYpnTUQt0o3w+SsJSv4S2vlSHidiFl9gCQGozUQ/Alzc7GO1Y95rOscL28DJXgXESQg==
 
-"@tiptap/extension-bold@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-bold/-/extension-bold-2.0.4.tgz#debba8b0d957fe0b6943354834d8f1f0f8c0695c"
-  integrity sha512-CWSQy1uWkVsen8HUsqhm+oEIxJrCiCENABUbhaVcJL/MqhnP4Trrh1B6O00Yfoc0XToPRRibDaHMFs4A3MSO0g==
+"@tiptap/extension-bold@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-bold/-/extension-bold-2.1.7.tgz#c5d89284235d75c2e65745b50a5c0681be1cbab6"
+  integrity sha512-GZV2D91WENkWd1W29vM4kyGWObcxOKQrY8MuCvTdxni1kobEc/LPZzQ1XiQmiNTvXTMcBz5ckLpezdjASV1dNg==
 
-"@tiptap/extension-bubble-menu@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-bubble-menu/-/extension-bubble-menu-2.0.4.tgz#f9dde09d3984e9879b1fe13d3e8c1859f0779ef5"
-  integrity sha512-+cRZwj0YINNNDElSAiX1pvY2K98S2j9MQW2dXV5oLqsJhqGPZsKxVo8I1u7ZtqUla3QE1V18RYPAzVgTiMRkBg==
+"@tiptap/extension-bubble-menu@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-bubble-menu/-/extension-bubble-menu-2.1.7.tgz#62616c9ee456c8413ad6c120757978266052a1a0"
+  integrity sha512-VcwwUgiG17TEDZda1JBbyKCHLIBTu8B2OAzYrnd4ZqeRs5KTVAB279o/TVjsLVgEfC+c7IWwhhaPPMoXn/lJ3g==
   dependencies:
     tippy.js "^6.3.7"
 
-"@tiptap/extension-bullet-list@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-bullet-list/-/extension-bullet-list-2.0.4.tgz#d192767d39e45253c5e9d974e949f271e09c72d7"
-  integrity sha512-JSZKBVTaKSuLl5fR4EKE4dOINOrgeRHYA25Vj6cWjgdvpTw5ef7vcUdn9yP4JwTmLRI+VnnMlYL3rqigU3iZNg==
+"@tiptap/extension-bullet-list@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-bullet-list/-/extension-bullet-list-2.1.7.tgz#3a7356824a931122314a6bd73b5f9d8a8a313791"
+  integrity sha512-BReix1wkGNH12DSWGnWPKNu4do92Avh98aLkRS1o1V1Y49/+YGMYtfBXB9obq40o0WqKvk4MoM+rhKbfEc44Gg==
 
 "@tiptap/extension-code-block-lowlight@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-code-block-lowlight/-/extension-code-block-lowlight-2.0.4.tgz#e641f08d2ea77271722e848c6efa819b63638b1a"
-  integrity sha512-fKM/4MY9R75IJJVt7P+aD+GX3yzzL6oHo1dn4hNFJlYp2x5+yH6kneaqKcTglVicBCGc8Ks6wJLEZTxxG35MOA==
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-code-block-lowlight/-/extension-code-block-lowlight-2.1.7.tgz#713dad4324c9ce25c66768fc4cfdb514ecea21c7"
+  integrity sha512-GOmpe3bwjlhMC79vFICInkJwaHx5dTiKQCTzdjZ5qRsvKgk/0YTrmWaN+w+JW5BBUaChj8IrgAPy7VZ20l7GKQ==
 
-"@tiptap/extension-code-block@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-code-block/-/extension-code-block-2.0.4.tgz#d551ee7c13fef379bbbad298f1be757d1125cd54"
-  integrity sha512-In2tV3rgm/MznVF0N7qYsYugPWSzhZHaCRCWcFKNvllMExpo91bUWvk+hXaIhhPxvuqGIVezjybwrYuU3bJW0g==
+"@tiptap/extension-code-block@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-code-block/-/extension-code-block-2.1.7.tgz#c087c22c305f3c87645228ad32f32595dde7f2a2"
+  integrity sha512-uiasfWCIQuk34vGoIENqAJOHf9m3hAkcELnb9T6+uNxA3O7PUZQqBVN/27oEipj7j15pqua50D6C1jql9kFe0g==
 
-"@tiptap/extension-code@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-code/-/extension-code-2.0.4.tgz#6952d402e7372dd2d129e962bf9bd54d68ee6183"
-  integrity sha512-HuwJSJkipZf4hkns9witv1CABNIPiB9C8lgAQXK4xJKcoUQChcnljEL+PQ2NqeEeMTEeV3nG3A/0QafH0pgTgg==
+"@tiptap/extension-code@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-code/-/extension-code-2.1.7.tgz#bad3b1aedc23123a2094f8810801edb0c13acbff"
+  integrity sha512-g0IA6Q6DFZE0AEOMXAV1mktl/XzIO3s1h/haPIKZ8GNes522qhBr9FYc5OUPQCCbgYjL7soTGzxA/W5Jk3f2AQ==
 
 "@tiptap/extension-color@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-color/-/extension-color-2.0.4.tgz#564265c2bcadd268e6b5745d2a06571744cb4090"
-  integrity sha512-7Eb5Gk9v3sj2i1Q8dfqmpnc5aDPC/t0ZEsSLRi4C6SNo1nBeUxteXzpzxWwYjTvK+Um40STR89Z6PY14FIYXSA==
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-color/-/extension-color-2.1.7.tgz#7f436aed2f41087d8de6af6a4dd4cb7d964354dd"
+  integrity sha512-NLspH5taSpZP60rXJjDKu8AP9VDd+dlqz4guxvijtuPEePw87Fzidxx9w6X0uYQfx1O0xdPFq3UodlDz591scA==
 
-"@tiptap/extension-document@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-document/-/extension-document-2.0.4.tgz#f94e6da23a7d93a8ea34c6767d4e2e31f5ab8849"
-  integrity sha512-mCj2fAhnNhIHttPSqfTPSSTGwClGaPYvhT56Ij/Pi4iCrWjPXzC4XnIkIHSS34qS2tJN4XJzr/z7lm3NeLkF1w==
+"@tiptap/extension-document@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-document/-/extension-document-2.1.7.tgz#5e1d56e899fdca8ebfad1b7cb358d5ace664b851"
+  integrity sha512-tZyoPPmvzti7PEnyulXomEtINd/Oi2S84uOt6gw7DTCnDq5bF5sn1IfN8Icqp9t4jDwyLXy2TL0Zg/sR0a2Ibg==
 
-"@tiptap/extension-dropcursor@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-dropcursor/-/extension-dropcursor-2.0.4.tgz#f4a7542866c9100fee8e78eca5eebefff58989ca"
-  integrity sha512-1OmKBv/E+nJo2vsosvu8KwFiBB+gZM1pY61qc7JbwEKHSYAxUFHfvLkIA0IQ53Z0DHMrFSKgWmHEcbnqtGevCA==
+"@tiptap/extension-dropcursor@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-dropcursor/-/extension-dropcursor-2.1.7.tgz#a3f79b7453579f36f326852b16e421601e881a28"
+  integrity sha512-hNk2BuLnNSXlGOQphlzdpFKCKo7uHUFjWuBfzF1S9FMAQgcN7eTia+cCClmXABYfVLW4fT14PC1KiuGjxi9MuA==
 
-"@tiptap/extension-floating-menu@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-floating-menu/-/extension-floating-menu-2.0.4.tgz#82f12c2415b7ddbfd782a03b100f717e9905bab0"
-  integrity sha512-0YRE738k+kNKuSHhAb3jj9ZQ7Kda78RYRr+cX2jrQVueIMKebPIY07eBt6JcKmob9V9vcNn9qLtBfmygfcPUQg==
+"@tiptap/extension-floating-menu@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-floating-menu/-/extension-floating-menu-2.1.7.tgz#fe2def740b3136d38101634ae60d2fec5468c57e"
+  integrity sha512-K0bO7JKHAvgLM5MkhNgoYcD6SB0Z2tNIFhZHs5SCTuhg7dwduMSM3pC6QBrJGUk99DGsKuMPYQn3c2oG7MLbyQ==
   dependencies:
     tippy.js "^6.3.7"
 
-"@tiptap/extension-gapcursor@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-gapcursor/-/extension-gapcursor-2.0.4.tgz#c100a792fd41535ad6382aa8133d0d9c0b2cb2b8"
-  integrity sha512-VxmKfBQjSSu1mNvHlydA4dJW/zawGKyqmnryiFNcUV9s+/HWLR5i9SiUl4wJM/B8sG8cQxClne5/LrCAeGNYuA==
+"@tiptap/extension-gapcursor@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-gapcursor/-/extension-gapcursor-2.1.7.tgz#5c0303ba37b4c066f3a3c5835fd0b298f0d3e919"
+  integrity sha512-7eoInzzk1sssoD3RMkwFC86U15Ja4ANve+8wIC+xhN4R3Oe3PY3lFbp1GQxCmaJj8b3rtjNKIQZ2zO0PH58afA==
 
-"@tiptap/extension-hard-break@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-hard-break/-/extension-hard-break-2.0.4.tgz#a4f70fa9a473270f7ec89f20a14b9122af5657bc"
-  integrity sha512-4j8BZa6diuoRytWoIc7j25EYWWut5TZDLbb+OVURdkHnsF8B8zeNTo55W40CdwSaSyTtXtxbTIldV80ShQarGQ==
+"@tiptap/extension-hard-break@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-hard-break/-/extension-hard-break-2.1.7.tgz#1cd783adfe2788d41614f8851b8d7a52ec027cce"
+  integrity sha512-6gFXXlCGAdXjy27BW29q4yfCQPAEFd18k7zRTnbd4aE/zIWUtLqdiTfI3kotUMab9Tt9/z1BRmCbEUxRsf1Nww==
 
-"@tiptap/extension-heading@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-heading/-/extension-heading-2.0.4.tgz#5372e346c5d69cfa0060d7238d1a0bf440442f6f"
-  integrity sha512-EfitUbew5ljH3xVlBXAxqqcJ4rjv15b8379LYOV6KQCf+Y1wY0gy9Q8wXSnrsAagqrvqipja4Ihn3OZeyIM+CA==
+"@tiptap/extension-heading@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-heading/-/extension-heading-2.1.7.tgz#26d16227eab95b1f381e977f7aa1685f493c6fb5"
+  integrity sha512-jMeTqtq3kbMFtMvUb3SeIt4FFM3W+b6TAw5H4Qd6z3gYsAU3GahRK67MtbJfPmznUkZfimrqW9VCaBezScfrsQ==
 
 "@tiptap/extension-highlight@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-highlight/-/extension-highlight-2.0.4.tgz#5d54232ac573d0b04c3e705ca38f207fb6cf7270"
-  integrity sha512-z1hcpf0eHHdaBE0pewXiNIu+QBodw4IAbZykTXMaY1xCsbYWfOJxeIb5o+CEG5HBsmaoJrCYenQw71xzgV0hKA==
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-highlight/-/extension-highlight-2.1.7.tgz#0f9434eedfdcb95a22ca5b6f601d13f4343a7e5c"
+  integrity sha512-3EXrnf1BQSdOe/iqzcTIr5Tf0NOhPQ+y1B9nMi/40v3MD8WzRBLaqj0lvpwO7xMAdgxm6IiL/XFYU41n9yFl/Q==
 
-"@tiptap/extension-history@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-history/-/extension-history-2.0.4.tgz#761a9c4b2a875817acc73137660552bd49e94fca"
-  integrity sha512-3GAUszn1xZx3vniHMiX9BSKmfvb5QOb0oSLXInN+hx80CgJDIHqIFuhx2dyV9I/HWpa0cTxaLWj64kfDzb1JVg==
+"@tiptap/extension-history@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-history/-/extension-history-2.1.7.tgz#baa566875ef1278c5dd8821970362d85348b266c"
+  integrity sha512-8SIEKSImrIkqJThym1bPD13sC4/76UrG+piQ30xKQU4B7zUFCbutvrwYuQHSRvaEt8BPdTv2LWIK+wBkIgbWVA==
 
-"@tiptap/extension-horizontal-rule@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-2.0.4.tgz#6988dd63fb00ca144feb1baac84142782e8ebe38"
-  integrity sha512-OMx2ImQseKbSUjPbbRCuYGOJshxYedh9giWAqwgWWokhYkH4nGxXn5m7+Laj+1wLre4bnWgHWVY4wMGniEj3aw==
+"@tiptap/extension-horizontal-rule@^2.0.4", "@tiptap/extension-horizontal-rule@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-2.1.7.tgz#7c21bc4917e4ced9382e81626e0f0068b224bfbb"
+  integrity sha512-hJupsDxDVmjmKI/Ewl/gtiyUx52Y3wRUhT8dCXNOA5eldmPXN23E2Fa2BC8XB47dyc5pubyNcLuqaLeaZ5hedw==
 
 "@tiptap/extension-image@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-image/-/extension-image-2.0.4.tgz#a41d5ca246bd41dd293194e359a80cb97f477ab3"
-  integrity sha512-5iQ96pt9xppM8sWzwhGgc99PPoYPQuokTaCXAQKDI0Y1CFCjZ+/duUG3al1VUMpBXsjJw3/RVO1+7CEhRTd3mA==
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-image/-/extension-image-2.1.7.tgz#597129fb072f6b0014c980892c367a283077f564"
+  integrity sha512-aWa/NPMc1U9Z6xuV0gk1O1nk4H7BAwQMwqXWdvUQCJhmW5+LJPdEiKvt3P6j+ClIN7sdyokZCgr6eGr817qTLA==
 
-"@tiptap/extension-italic@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-italic/-/extension-italic-2.0.4.tgz#4c6d0938542e4f7276f9dd18db395c040f76dcd8"
-  integrity sha512-C/6+qs4Jh8xERRP0wcOopA1+emK8MOkBE4RQx5NbPnT2iCpERP0GlmHBFQIjaYPctZgKFHxsCfRnneS5Xe76+A==
+"@tiptap/extension-italic@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-italic/-/extension-italic-2.1.7.tgz#d077683597d4282ae272c48b313d768d71985b67"
+  integrity sha512-7e37f+OFqisdY19nWIthbSNHMJy4+4dec06rUICPrkiuFaADj5HjUQr0dyWpL/LkZh92Wf/rWgp4V/lEwon3jA==
 
 "@tiptap/extension-link@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-link/-/extension-link-2.0.4.tgz#2899f9060ca722f11bd10ceb572ceb5178f111d6"
-  integrity sha512-CliImI1hmC+J6wHxqgz9P4wMjoNSSgm3fnNHsx5z0Bn6JRA4Evh2E3KZAdMaE8xCTx89rKxMYNbamZf4VLSoqQ==
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-link/-/extension-link-2.1.7.tgz#2705c212d105ccf411d505e334ece4a723971ee4"
+  integrity sha512-NDfoMCkThng1B530pMg5y69+eWoghZXK2uCntrJH7Rs8jNeGMyt9wGIOd7N8ZYz0oJ2ZYKzZjS0RANdBDS17DA==
   dependencies:
     linkifyjs "^4.1.0"
 
-"@tiptap/extension-list-item@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-list-item/-/extension-list-item-2.0.4.tgz#8ca7c9959a07bf94602f8957d784d526568f2069"
-  integrity sha512-tSkbLgRo1QMNDJttWs9FeRywkuy5T2HdLKKfUcUNzT3s0q5AqIJl7VyimsBL4A6MUfN1qQMZCMHB4pM9Mkluww==
+"@tiptap/extension-list-item@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-list-item/-/extension-list-item-2.1.7.tgz#dc24045e445d0f91baec9b113f711dc90c6682ac"
+  integrity sha512-hd/E4qQopBXWa6kdFY19qFVgqj4fzdPgAnzdXJ2XW7bC6O2CusmHphRRZ5FBsuspYTN/6/fv0i0jK9rSGlsEyA==
 
-"@tiptap/extension-ordered-list@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-ordered-list/-/extension-ordered-list-2.0.4.tgz#e3e220e9c15114b07c952c32fa58e96601db6bd7"
-  integrity sha512-Kfg+8k9p4iJCUKP/yIa18LfUpl9trURSMP/HX3/yQTz9Ul1vDrjxeFjSE5uWNvupcXRAM24js+aYrCmV7zpU+Q==
+"@tiptap/extension-ordered-list@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-ordered-list/-/extension-ordered-list-2.1.7.tgz#72d9ddc432ecf0fd19c8acd3c6b44f5358d8e0d0"
+  integrity sha512-3XIXqbZmYkNzF+8PQ2jcCOCj0lpC3y9HGM/+joPIunhiUiktrIgpbUDv2E1Gq5lJHYqthIeujniI2dB85tkwJQ==
 
-"@tiptap/extension-paragraph@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-paragraph/-/extension-paragraph-2.0.4.tgz#9cffa3f8a980349ca068b1b3c12596bf5f3aef0f"
-  integrity sha512-nDxpopi9WigVqpfi8nU3B0fWYB14EMvKIkutNZo8wJvKGTZufNI8hw66wupIx/jZH1gFxEa5dHerw6aSYuWjgQ==
+"@tiptap/extension-paragraph@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-paragraph/-/extension-paragraph-2.1.7.tgz#76408706f0037a510a384b86780bd50c6e8ffeea"
+  integrity sha512-cLqX27hNrXrwZCKrIW8OC3rW2+MT8hhS37+cdqOxZo5hUqQ9EF/puwS0w8uUZ7B3awX9Jm1QZDMjjERLkcmobw==
 
 "@tiptap/extension-placeholder@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-placeholder/-/extension-placeholder-2.0.4.tgz#74259783757c59751d78fcdd1aade7e928809187"
-  integrity sha512-Y8hjUYBGTbytgrsplSZdHGciqbuVHQX+h0JcuvVaIlAy1kR7hmbxJLqL8tNa7qLtTqo2MfS2942OtSv85JOCzA==
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-placeholder/-/extension-placeholder-2.1.7.tgz#8477cf5116c89f0f75e8e2e3b8528e146a7f0f24"
+  integrity sha512-IiBoItYYNS7hb/zmPitw3w6Cylmp9qX+zW+QKe3lDkCNPeKxyQr86AnVLcQYOuXg62cLV9dp+4azZzHoz9SOcg==
 
-"@tiptap/extension-strike@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-strike/-/extension-strike-2.0.4.tgz#13286dcf8780c55610ed65b24238b8395a5be824"
-  integrity sha512-Men7LK6N/Dh3/G4/z2Z9WkDHM2Gxx1XyxYix2ZMf5CnqY37SeDNUnGDqit65pdIN3Y/TQnOZTkKSBilSAtXfJA==
+"@tiptap/extension-strike@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-strike/-/extension-strike-2.1.7.tgz#b7b7f49254f1de22416b1415ca88a2a20edd0627"
+  integrity sha512-ONLXYnuZGM2EoGcxkyvJSDMBeAp7K6l83UXkK9TSj+VpEEDdeV7m8mJs8/vACJjJxD5HMN61+EPgU7VTEukQCA==
 
 "@tiptap/extension-task-item@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-task-item/-/extension-task-item-2.0.4.tgz#71f46d35ac629ca10c5c23d4ad170007338a436e"
-  integrity sha512-0FfYWrOslDzzN7Ehnt3yBekOSH45tiB/3gzFRvGdLBUv0PiYQolUpyfHGsdNzeKYuWLF1yiacJkCeLgNDgCLDw==
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-task-item/-/extension-task-item-2.1.7.tgz#384a55308f3524f36388560486a2508a4b3c5413"
+  integrity sha512-4wFLZmhYqr87SEI/Qgk3FiH+qfp6IOmuYVhpL5zGLa6p+ytUdmPH3+zOaD1rthn5JiRU9KwYWFvTo2f+/O0NAg==
 
 "@tiptap/extension-task-list@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-task-list/-/extension-task-list-2.0.4.tgz#69b2b23d1e757044c05f3d7dcbd30194c71f9324"
-  integrity sha512-3RGoEgGJdWpGf8aWl7O7+jnnvfpF0or2YHYYvJv13t5G4dNIS9E7QXT3/rU9QtHNYkbcJYFjHligIFuBTAhZNg==
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-task-list/-/extension-task-list-2.1.7.tgz#abaad3a7b964e58dac6b96b08000a50a06a071b4"
+  integrity sha512-eerV8pbGuYoFji6arWk+LBsIfURXPWNSLi1ZCuPfXP6N8sAV3fNT+VDm6RlGQwadQNae7rnibNClk67+55h9Zg==
 
 "@tiptap/extension-text-style@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-text-style/-/extension-text-style-2.0.4.tgz#4ba3fd6b204badc43ac6a00285315fe868f07e52"
-  integrity sha512-HQk8c7HasDdeAJxlHrztkgprxocZecZVUMlvPvFAhkq8E/5+nfmr/Gm9qudiStEARZrIYBATNA2PbnQuIGMx3A==
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-text-style/-/extension-text-style-2.1.7.tgz#57f5dc5b223a855e782f24e09dc7fc53d9bd4b00"
+  integrity sha512-0QhEMDiDqMpyBGRt6o4GvbN9cUibZe4LT9e0ujarT6ElSe2fbtwGPnXSXApUtgHDDwHw95M5ZVxX/H5cjyjw1g==
 
-"@tiptap/extension-text@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-text/-/extension-text-2.0.4.tgz#318b0105491a5976d220871dccabe6c4d2cbeedd"
-  integrity sha512-i8/VFlVZh7TkAI49KKX5JmC0tM8RGwyg5zUpozxYbLdCOv07AkJt+E1fLJty9mqH4Y5HJMNnyNxsuZ9Ol/ySRA==
+"@tiptap/extension-text@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-text/-/extension-text-2.1.7.tgz#071053ab0a8804a3bce36d1488a603b7446dff4e"
+  integrity sha512-3xaMMMNydLgoS+o+yOvaZF04ui9spJwJZl8VyYgcJKVGGLGRlWHrireXN5/OqXG2jLb/jWqXVx5idppQjX+PMA==
 
 "@tiptap/extension-underline@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-underline/-/extension-underline-2.0.4.tgz#c1e5df75a4c9f2d9e691d48438ee0894f8bb01f1"
-  integrity sha512-Hvhy3iV5dWs0SFTww6sIzyQSSgVzcQuiozhDs11iP+gvFjK7ejg86KZ8wAVvyCi9K3bOMhohsw1Q2b8JSnIxcg==
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-underline/-/extension-underline-2.1.7.tgz#ab815645770f7d2013ac69327975837b4937c8df"
+  integrity sha512-mL95afyEJvg+C2yrTVn7QltfyE9ja1+94+OUkRBbB8PN3N6HvfSL4K/QSqecOLQ38bSQm/6ZGPkBLDkDGhGPdw==
 
 "@tiptap/pm@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/pm/-/pm-2.0.4.tgz#c3df31a29120e1e3334f8f063df23ccb1ace7851"
-  integrity sha512-DNgxntpEaiW7ciW0BTNTL0TFqAreZTrAROWakI4XaYRAyi5H9NfZW8jmwGwMBkoZ1KB3pfy+jT/Bisy4okEQGQ==
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/pm/-/pm-2.1.7.tgz#91e1b87d4ddbddca3cfe46e3c052b0072e4e1d97"
+  integrity sha512-RBVb/k9OjmClwdVl7fpekFgUsLAm1U+5I4w1qA2tj7L/hSPOuPzaEHwCqDYe0b2PR5dd8h0nylS9qXuXVlfwfQ==
   dependencies:
     prosemirror-changeset "^2.2.0"
     prosemirror-collab "^1.3.0"
@@ -2399,42 +2427,42 @@
     prosemirror-view "^1.28.2"
 
 "@tiptap/react@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/react/-/react-2.0.4.tgz#b879faeabd67859254d594eafe0f8232f5d78116"
-  integrity sha512-NcrZL4Tu3+1Xfj/us5AOD7+kJhwYo2XViOB2iRRnfwS80PUtiLWDis6o3ngMGot/jBWzaMn4gofXnMWHtFdIAw==
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/react/-/react-2.1.7.tgz#0c5a5407bcb398ff75234dd9c7a3f8878d943088"
+  integrity sha512-jCs5z/rXZ7mEOTPcJ+r/OSTtLOGBahS7D3xDu3pRX4P0wtWHlprsdptxxlWjkBHLav01XXJ+OtGZTfhWBio1QQ==
   dependencies:
-    "@tiptap/extension-bubble-menu" "^2.0.4"
-    "@tiptap/extension-floating-menu" "^2.0.4"
+    "@tiptap/extension-bubble-menu" "^2.1.7"
+    "@tiptap/extension-floating-menu" "^2.1.7"
 
 "@tiptap/starter-kit@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/starter-kit/-/starter-kit-2.0.4.tgz#20456eb4a4ae0ac8d5bf2ac5e9771b3c617c51a6"
-  integrity sha512-9WtVXhujyp5cOlE7qlcQMFr0FEx3Cvo1isvfQGzhKKPzXa3rR7FT8bnOFsten31/Ia/uwvGXAvRDQy24YfHdNA==
-  dependencies:
-    "@tiptap/core" "^2.0.4"
-    "@tiptap/extension-blockquote" "^2.0.4"
-    "@tiptap/extension-bold" "^2.0.4"
-    "@tiptap/extension-bullet-list" "^2.0.4"
-    "@tiptap/extension-code" "^2.0.4"
-    "@tiptap/extension-code-block" "^2.0.4"
-    "@tiptap/extension-document" "^2.0.4"
-    "@tiptap/extension-dropcursor" "^2.0.4"
-    "@tiptap/extension-gapcursor" "^2.0.4"
-    "@tiptap/extension-hard-break" "^2.0.4"
-    "@tiptap/extension-heading" "^2.0.4"
-    "@tiptap/extension-history" "^2.0.4"
-    "@tiptap/extension-horizontal-rule" "^2.0.4"
-    "@tiptap/extension-italic" "^2.0.4"
-    "@tiptap/extension-list-item" "^2.0.4"
-    "@tiptap/extension-ordered-list" "^2.0.4"
-    "@tiptap/extension-paragraph" "^2.0.4"
-    "@tiptap/extension-strike" "^2.0.4"
-    "@tiptap/extension-text" "^2.0.4"
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/starter-kit/-/starter-kit-2.1.7.tgz#a33a7928b7051ac9cd89d1798745f9855b7b72d9"
+  integrity sha512-z2cmJRSC7ImaTGWrHv+xws9y1wIG0OCPosBYpmpwlEfA3JG3axWFmVRJlWnsQV4eSMi3QY3vaPgBAnrR4IxRhQ==
+  dependencies:
+    "@tiptap/core" "^2.1.7"
+    "@tiptap/extension-blockquote" "^2.1.7"
+    "@tiptap/extension-bold" "^2.1.7"
+    "@tiptap/extension-bullet-list" "^2.1.7"
+    "@tiptap/extension-code" "^2.1.7"
+    "@tiptap/extension-code-block" "^2.1.7"
+    "@tiptap/extension-document" "^2.1.7"
+    "@tiptap/extension-dropcursor" "^2.1.7"
+    "@tiptap/extension-gapcursor" "^2.1.7"
+    "@tiptap/extension-hard-break" "^2.1.7"
+    "@tiptap/extension-heading" "^2.1.7"
+    "@tiptap/extension-history" "^2.1.7"
+    "@tiptap/extension-horizontal-rule" "^2.1.7"
+    "@tiptap/extension-italic" "^2.1.7"
+    "@tiptap/extension-list-item" "^2.1.7"
+    "@tiptap/extension-ordered-list" "^2.1.7"
+    "@tiptap/extension-paragraph" "^2.1.7"
+    "@tiptap/extension-strike" "^2.1.7"
+    "@tiptap/extension-text" "^2.1.7"
 
 "@tiptap/suggestion@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/suggestion/-/suggestion-2.0.4.tgz#08e6c47a723200d02238d845cb09684c481f0066"
-  integrity sha512-C5LGGjH8VFET34V7vKkqlwpSzrPl+7oAcj9h+P3jvJQ076iYpmpnMtz6dNLSFGKpHp5mtyl4RoJzh7lTvlfyiA==
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/suggestion/-/suggestion-2.1.7.tgz#ac88deef2ade8d836ca9084c276cc9d64c6e604a"
+  integrity sha512-FKlXFMWf9rCnNJQsUfeX6WpS2VUs2O98ENkyhfV8ehCB7X5+57mkkxJxl/88SMbjZL+FbWPBKLaiOvsXfIUoww==
 
 "@types/debug@^4.0.0":
   version "4.1.8"
@@ -2544,9 +2572,9 @@
   integrity sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==
 
 "@types/node@*":
-  version "20.5.0"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.5.0.tgz#7fc8636d5f1aaa3b21e6245e97d56b7f56702313"
-  integrity sha512-Mgq7eCtoTjT89FqNoTzzXg2XvCi5VMhRV6+I2aYanc6kQCBImeNaAYRs/DyoVqk1YEUJK5gN9VO7HRIdz4Wo3Q==
+  version "20.5.7"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.5.7.tgz#4b8ecac87fbefbc92f431d09c30e176fc0a7c377"
+  integrity sha512-dP7f3LdZIysZnmvP3ANJYTSwg+wLLl8p7RqniVlV7j+oXSXAbt9h0WIBFmJy5inWZoX9wZN6eXx+YXd9Rh3RBA==
 
 "@types/node@18.0.6":
   version "18.0.6"
@@ -2637,9 +2665,9 @@
     "@types/react" "*"
 
 "@types/react-redux@^7.1.20":
-  version "7.1.25"
-  resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.25.tgz#de841631205b24f9dfb4967dd4a7901e048f9a88"
-  integrity sha512-bAGh4e+w5D8dajd6InASVIyCo4pZLJ66oLb80F9OBLO1gKESbZcRCJpTT6uLXX+HAB57zw1WTdwJdAsewuTweg==
+  version "7.1.26"
+  resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.26.tgz#84149f5614e40274bb70fcbe8f7cae6267d548b1"
+  integrity sha512-UKPo7Cm7rswYU6PH6CmTNCRv5NYF3HrgKuHEYTK8g/3czYLrUux50gQ2pkxc9c7ZpQZi+PNhgmI8oNIRoiVIxg==
   dependencies:
     "@types/hoist-non-react-statics" "^3.3.0"
     "@types/react" "*"
@@ -2654,9 +2682,9 @@
     "@types/react" "*"
 
 "@types/react@*", "@types/react@^18.0.17":
-  version "18.2.20"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.20.tgz#1605557a83df5c8a2cc4eeb743b3dfc0eb6aaeb2"
-  integrity sha512-WKNtmsLWJM/3D5mG4U84cysVY31ivmyw85dE84fOCk5Hx78wezB/XEjVPWl2JTZ5FkEeaTJf+VgUAUn3PE7Isw==
+  version "18.2.21"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.21.tgz#774c37fd01b522d0b91aed04811b58e4e0514ed9"
+  integrity sha512-neFKG/sBAwGxHgXiIxnbm3/AAVQ/cMRS93hvBpg8xYRbeQSPVABp9U2bRnPf0iI4+Ucdv3plSxKK+3CW2ENJxA==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
@@ -3033,6 +3061,13 @@ async@^3.2.3:
   resolved "https://registry.yarnpkg.com/async/-/async-3.2.4.tgz#2d22e00f8cddeb5fde5dd33522b56d1cf569a81c"
   integrity sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==
 
+asynciterator.prototype@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/asynciterator.prototype/-/asynciterator.prototype-1.0.0.tgz#8c5df0514936cdd133604dfcc9d3fb93f09b2b62"
+  integrity sha512-wwHYEIS0Q80f5mosx3L/dfG5t5rjEa9Ft51GTaNt862EnpyGHpgz2RkZvLPp1oF5TnAiTohkEKVEu8pQPJI7Vg==
+  dependencies:
+    has-symbols "^1.0.3"
+
 asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
@@ -3071,9 +3106,9 @@ axe-core@^4.6.2:
   integrity sha512-zIURGIS1E1Q4pcrMjp+nnEh+16G56eG/MUllJH8yEvw7asDo7Ac9uhC9KIH5jzpITueEZolfYglnCGIuSBz39g==
 
 axios@^1.1.3, axios@^1.3.4:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-1.4.0.tgz#38a7bf1224cd308de271146038b551d725f0be1f"
-  integrity sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.5.0.tgz#f02e4af823e2e46a9768cfc74691fdd0517ea267"
+  integrity sha512-D4DdjDo5CY50Qms0qGQTTw6Q44jl7zRwY7bthds06pUGfChBCTcQs+N743eFWGEd6pRTMd6A+I87aWyFV5wiZQ==
   dependencies:
     follow-redirects "^1.15.0"
     form-data "^4.0.0"
@@ -3252,9 +3287,9 @@ camelcase-css@^2.0.1:
   integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
 
 caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001517, caniuse-lite@^1.0.30001520:
-  version "1.0.30001520"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001520.tgz#62e2b7a1c7b35269594cf296a80bdf8cb9565006"
-  integrity sha512-tahF5O9EiiTzwTUqAeFjIZbn4Dnqxzz7ktrgGlMYNLH43Ul26IgTMH/zvL3DG0lZxBYnlT04axvInszUsZULdA==
+  version "1.0.30001524"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001524.tgz#1e14bce4f43c41a7deaeb5ebfe86664fe8dadb80"
+  integrity sha512-Jj917pJtYg9HSJBF95HVX3Cdr89JUyLT4IZ8SvM5aDRni95swKgYi3TgYLH5hnGfPE/U1dg6IfZ50UsIlLkwSA==
 
 capital-case@^1.0.4:
   version "1.0.4"
@@ -3475,11 +3510,11 @@ cookie@^0.5.0:
   integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
 
 core-js-compat@^3.31.0:
-  version "3.32.0"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.32.0.tgz#f41574b6893ab15ddb0ac1693681bd56c8550a90"
-  integrity sha512-7a9a3D1k4UCVKnLhrgALyFcP7YCsLOQIxPd0dKjf/6GuPcgyiGP70ewWdCGrSK7evyhymi0qO4EqCmSJofDeYw==
+  version "3.32.1"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.32.1.tgz#55f9a7d297c0761a8eb1d31b593e0f5b6ffae964"
+  integrity sha512-GSvKDv4wE0bPnQtjklV101juQ85g6H3rm5PDP20mqlS5j0kXF3pP97YvAu5hl+uFHqMictp3b2VxOHljWMAtuA==
   dependencies:
-    browserslist "^4.21.9"
+    browserslist "^4.21.10"
 
 cosmiconfig@^7.0.0:
   version "7.1.0"
@@ -3822,9 +3857,9 @@ ejs@^3.1.6:
     jake "^10.8.5"
 
 electron-to-chromium@^1.4.477:
-  version "1.4.490"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.490.tgz#d99286f6e915667fa18ea4554def1aa60eb4d5f1"
-  integrity sha512-6s7NVJz+sATdYnIwhdshx/N/9O6rvMxmhVoDSDFdj6iA45gHR8EQje70+RYsF4GeB+k0IeNSBnP7yG9ZXJFr7A==
+  version "1.4.503"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.503.tgz#7bd43927ea9b4198697672d28d8fbd0da016a7a1"
+  integrity sha512-LF2IQit4B0VrUHFeQkWhZm97KuJSGF2WJqq1InpY+ECpFRkXd8yTIaTtJxsO0OKDmiBYwWqcrNaXOurn2T2wiA==
 
 emoji-regex@^8.0.0:
   version "8.0.0"
@@ -3876,7 +3911,7 @@ error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
-es-abstract@^1.19.0, es-abstract@^1.20.4, es-abstract@^1.21.2:
+es-abstract@^1.19.0, es-abstract@^1.20.4, es-abstract@^1.21.2, es-abstract@^1.22.1:
   version "1.22.1"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.22.1.tgz#8b4e5fc5cefd7f1660f0f8e1a52900dfbc9d9ccc"
   integrity sha512-ioRRcXMO6OFyRpyzV3kE1IIBd4WG5/kltnzdxSCqoP8CMGs/Li+M1uF5o7lOkZVFjDs+NLesthnF66Pg/0q0Lw==
@@ -3921,6 +3956,26 @@ es-abstract@^1.19.0, es-abstract@^1.20.4, es-abstract@^1.21.2:
     unbox-primitive "^1.0.2"
     which-typed-array "^1.1.10"
 
+es-iterator-helpers@^1.0.12:
+  version "1.0.14"
+  resolved "https://registry.yarnpkg.com/es-iterator-helpers/-/es-iterator-helpers-1.0.14.tgz#19cd7903697d97e21198f3293b55e8985791c365"
+  integrity sha512-JgtVnwiuoRuzLvqelrvN3Xu7H9bu2ap/kQ2CrM62iidP8SKuD99rWU3CJy++s7IVL2qb/AjXPGR/E7i9ngd/Cw==
+  dependencies:
+    asynciterator.prototype "^1.0.0"
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    es-set-tostringtag "^2.0.1"
+    function-bind "^1.1.1"
+    get-intrinsic "^1.2.1"
+    globalthis "^1.0.3"
+    has-property-descriptors "^1.0.0"
+    has-proto "^1.0.1"
+    has-symbols "^1.0.3"
+    internal-slot "^1.0.5"
+    iterator.prototype "^1.1.0"
+    safe-array-concat "^1.0.0"
+
 es-set-tostringtag@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz#338d502f6f674301d710b80c8592de8a15f09cd8"
@@ -4012,11 +4067,11 @@ eslint-config-prettier@^8.3.0:
   integrity sha512-SM8AMJdeQqRYT9O9zguiruQZaN7+z+E4eAP9oiLNGKMtomwaB1E9dcgUD6ZAn/eQAb52USbvezbiljfZUhbJcg==
 
 eslint-config-turbo@latest:
-  version "1.10.12"
-  resolved "https://registry.yarnpkg.com/eslint-config-turbo/-/eslint-config-turbo-1.10.12.tgz#5868252d6833dd2b5cab4414751ed31ebe2177c3"
-  integrity sha512-z3jfh+D7UGYlzMWGh+Kqz++hf8LOE96q3o5R8X4HTjmxaBWlLAWG+0Ounr38h+JLR2TJno0hU9zfzoPNkR9BdA==
+  version "1.10.13"
+  resolved "https://registry.yarnpkg.com/eslint-config-turbo/-/eslint-config-turbo-1.10.13.tgz#3743def3c76e27c3969c16222137f5bd913a10e2"
+  integrity sha512-Ffa0SxkRCPMtfUX/HDanEqsWoLwZTQTAXO9W4IsOtycb2MzJDrVcLmoFW5sMwCrg7gjqbrC4ZJoD+1SPPzIVqg==
   dependencies:
-    eslint-plugin-turbo "1.10.12"
+    eslint-plugin-turbo "1.10.13"
 
 eslint-import-resolver-node@^0.3.6, eslint-import-resolver-node@^0.3.7:
   version "0.3.9"
@@ -4059,9 +4114,9 @@ eslint-module-utils@^2.7.4, eslint-module-utils@^2.8.0:
     debug "^3.2.7"
 
 eslint-plugin-import@^2.26.0:
-  version "2.28.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.28.0.tgz#8d66d6925117b06c4018d491ae84469eb3cb1005"
-  integrity sha512-B8s/n+ZluN7sxj9eUf7/pRFERX0r5bnFA2dCaLHy2ZeaQEAz0k+ZZkFWRFHJAqxfxQDx6KLv9LeIki7cFdwW+Q==
+  version "2.28.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.28.1.tgz#63b8b5b3c409bfc75ebaf8fb206b07ab435482c4"
+  integrity sha512-9I9hFlITvOV55alzoKBI+K9q74kv0iKMeY6av5+umsNwayt59fz692daGyjR+oStBQgx6nwR9rXldDev3Clw+A==
   dependencies:
     array-includes "^3.1.6"
     array.prototype.findlastindex "^1.2.2"
@@ -4072,13 +4127,12 @@ eslint-plugin-import@^2.26.0:
     eslint-import-resolver-node "^0.3.7"
     eslint-module-utils "^2.8.0"
     has "^1.0.3"
-    is-core-module "^2.12.1"
+    is-core-module "^2.13.0"
     is-glob "^4.0.3"
     minimatch "^3.1.2"
     object.fromentries "^2.0.6"
     object.groupby "^1.0.0"
     object.values "^1.1.6"
-    resolve "^1.22.3"
     semver "^6.3.1"
     tsconfig-paths "^3.14.2"
 
@@ -4130,14 +4184,15 @@ eslint-plugin-react@7.31.8:
     string.prototype.matchall "^4.0.7"
 
 eslint-plugin-react@^7.29.4, eslint-plugin-react@^7.31.7:
-  version "7.33.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.33.1.tgz#bc27cccf860ae45413a4a4150bf0977345c1ceab"
-  integrity sha512-L093k0WAMvr6VhNwReB8VgOq5s2LesZmrpPdKz/kZElQDzqS7G7+DnKoqT+w4JwuiGeAhAvHO0fvy0Eyk4ejDA==
+  version "7.33.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.33.2.tgz#69ee09443ffc583927eafe86ffebb470ee737608"
+  integrity sha512-73QQMKALArI8/7xGLNI/3LylrEYrlKZSb5C9+q3OtOewTnMQi5cT+aE9E41sLCmli3I9PGGmD1yiZydyo4FEPw==
   dependencies:
     array-includes "^3.1.6"
     array.prototype.flatmap "^1.3.1"
     array.prototype.tosorted "^1.1.1"
     doctrine "^2.1.0"
+    es-iterator-helpers "^1.0.12"
     estraverse "^5.3.0"
     jsx-ast-utils "^2.4.1 || ^3.0.0"
     minimatch "^3.1.2"
@@ -4150,10 +4205,10 @@ eslint-plugin-react@^7.29.4, eslint-plugin-react@^7.31.7:
     semver "^6.3.1"
     string.prototype.matchall "^4.0.8"
 
-eslint-plugin-turbo@1.10.12:
-  version "1.10.12"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-turbo/-/eslint-plugin-turbo-1.10.12.tgz#3f95884faf35b56e0855d939585fa6cd457bb128"
-  integrity sha512-uNbdj+ohZaYo4tFJ6dStRXu2FZigwulR1b3URPXe0Q8YaE7thuekKNP+54CHtZPH9Zey9dmDx5btAQl9mfzGOw==
+eslint-plugin-turbo@1.10.13:
+  version "1.10.13"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-turbo/-/eslint-plugin-turbo-1.10.13.tgz#d2c14c7e733ee1462c94d79dce29d75f42ced275"
+  integrity sha512-el4AAmn0zXmvHEyp1h0IQMfse10Vy8g5Vbg4IU3+vD9CSj5sDbX07iFVt8sCKg7og9Q5FAa9mXzlCf7t4vYgzg==
   dependencies:
     dotenv "16.0.3"
 
@@ -4294,14 +4349,14 @@ eslint@^7.23.0, eslint@^7.32.0:
     v8-compile-cache "^2.0.3"
 
 eslint@^8.31.0:
-  version "8.47.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.47.0.tgz#c95f9b935463fb4fad7005e626c7621052e90806"
-  integrity sha512-spUQWrdPt+pRVP1TTJLmfRNJJHHZryFmptzcafwSvHsceV81djHOdnEeDmkdotZyLNjDhrOasNK8nikkoG1O8Q==
+  version "8.48.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.48.0.tgz#bf9998ba520063907ba7bfe4c480dc8be03c2155"
+  integrity sha512-sb6DLeIuRXxeM1YljSe1KEx9/YYeZFQWcV8Rq9HfigmdDEugjLEVEa1ozDjL6YDjBpQHPJxJzze+alxi4T3OLg==
   dependencies:
     "@eslint-community/eslint-utils" "^4.2.0"
     "@eslint-community/regexpp" "^4.6.1"
     "@eslint/eslintrc" "^2.1.2"
-    "@eslint/js" "^8.47.0"
+    "@eslint/js" "8.48.0"
     "@humanwhocodes/config-array" "^0.11.10"
     "@humanwhocodes/module-importer" "^1.0.1"
     "@nodelib/fs.walk" "^1.2.8"
@@ -4414,9 +4469,9 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
 fast-fifo@^1.1.0, fast-fifo@^1.2.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/fast-fifo/-/fast-fifo-1.3.0.tgz#03e381bcbfb29932d7c3afde6e15e83e05ab4d8b"
-  integrity sha512-IgfweLvEpwyA4WgiQe9Nx6VV2QkML2NkvZnk1oKnIzXgXdWxuhF7zw4DvLTPZJn6PIUneiAXPF24QmoEqHTjyw==
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/fast-fifo/-/fast-fifo-1.3.2.tgz#286e31de96eb96d38a97899815740ba2a4f3640c"
+  integrity sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==
 
 fast-glob@^3.2.12, fast-glob@^3.2.9, fast-glob@^3.3.1:
   version "3.3.1"
@@ -4512,14 +4567,15 @@ find-up@^5.0.0:
     path-exists "^4.0.0"
 
 flat-cache@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.0.4.tgz#61b0338302b2fe9f957dcc32fc2a87f1c3048b11"
-  integrity sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.1.0.tgz#0e54ab4a1a60fe87e2946b6b00657f1c99e1af3f"
+  integrity sha512-OHx4Qwrrt0E4jEIcI5/Xb+f+QmJYNj2rrK8wiIdQOIrB9WrrJL8cjZvXdXuBTkkEwEqLycb5BeZDV1o2i9bTew==
   dependencies:
-    flatted "^3.1.0"
+    flatted "^3.2.7"
+    keyv "^4.5.3"
     rimraf "^3.0.2"
 
-flatted@^3.1.0:
+flatted@^3.2.7:
   version "3.2.7"
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.7.tgz#609f39207cb614b89d0765b477cb2d437fbf9787"
   integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
@@ -4551,9 +4607,9 @@ format@^0.2.0:
   integrity sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==
 
 fraction.js@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.2.0.tgz#448e5109a313a3527f5a3ab2119ec4cf0e0e2950"
-  integrity sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.2.1.tgz#14b4cc886575a5684f8d5fd5759c5db376bb7bb8"
+  integrity sha512-/KxoyCnPM0GwYI4NN0Iag38Tqt+od3/mLuguepLgCAKPn0ZhC544nssAW0tG2/00zXEYl9W+7hwAIpLHo6Oc7Q==
 
 framework-utils@^1.1.0:
   version "1.1.0"
@@ -4581,9 +4637,9 @@ fs.realpath@^1.0.0:
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
 fsevents@~2.3.2:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
-  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
+  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
 
 function-bind@^1.1.1:
   version "1.1.1"
@@ -4986,6 +5042,13 @@ is-arrayish@^0.3.1:
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
   integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
 
+is-async-function@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-async-function/-/is-async-function-2.0.0.tgz#8e4418efd3e5d3a6ebb0164c05ef5afb69aa9646"
+  integrity sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
 is-bigint@^1.0.1:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.4.tgz#08147a1875bc2b32005d41ccd8291dffc6691df3"
@@ -5018,14 +5081,14 @@ is-callable@^1.1.3, is-callable@^1.1.4, is-callable@^1.2.7:
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055"
   integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==
 
-is-core-module@^2.11.0, is-core-module@^2.12.1, is-core-module@^2.13.0, is-core-module@^2.9.0:
+is-core-module@^2.11.0, is-core-module@^2.13.0, is-core-module@^2.9.0:
   version "2.13.0"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.13.0.tgz#bb52aa6e2cbd49a30c2ba68c42bf3435ba6072db"
   integrity sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==
   dependencies:
     has "^1.0.3"
 
-is-date-object@^1.0.1:
+is-date-object@^1.0.1, is-date-object@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.5.tgz#0841d5536e724c25597bf6ea62e1bd38298df31f"
   integrity sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==
@@ -5044,11 +5107,25 @@ is-extglob@^2.1.1:
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
   integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
 
+is-finalizationregistry@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-finalizationregistry/-/is-finalizationregistry-1.0.2.tgz#c8749b65f17c133313e661b1289b95ad3dbd62e6"
+  integrity sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==
+  dependencies:
+    call-bind "^1.0.2"
+
 is-fullwidth-code-point@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
   integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
 
+is-generator-function@^1.0.10:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/is-generator-function/-/is-generator-function-1.0.10.tgz#f1558baf1ac17e0deea7c0415c438351ff2b3c72"
+  integrity sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
 is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
@@ -5056,6 +5133,11 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
+is-map@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.2.tgz#00922db8c9bf73e81b7a335827bc2a43f2b91127"
+  integrity sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==
+
 is-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
@@ -5139,6 +5221,11 @@ is-regexp@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-regexp/-/is-regexp-1.0.0.tgz#fd2d883545c46bac5a633e7b9a09e87fa2cb5069"
   integrity sha512-7zjFAPO4/gwyQAAgRRmqeEeyIICSdmCqa3tsVHMdBzaXXRiqopZL4Cyghg/XulGWrtABTpbnYYzzIRffLkP4oA==
 
+is-set@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.2.tgz#90755fa4c2562dc1c5d4024760d6119b94ca18ec"
+  integrity sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==
+
 is-shared-array-buffer@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz#8f259c573b60b6a32d4058a1a07430c0a7344c79"
@@ -5172,6 +5259,11 @@ is-typed-array@^1.1.10, is-typed-array@^1.1.9:
   dependencies:
     which-typed-array "^1.1.11"
 
+is-weakmap@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2"
+  integrity sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==
+
 is-weakref@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.0.2.tgz#9529f383a9338205e89765e0392efc2f100f06f2"
@@ -5179,6 +5271,14 @@ is-weakref@^1.0.2:
   dependencies:
     call-bind "^1.0.2"
 
+is-weakset@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.2.tgz#4569d67a747a1ce5a994dfd4ef6dcea76e7c0a1d"
+  integrity sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.1.1"
+
 isarray@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
@@ -5194,6 +5294,17 @@ isobject@^3.0.1:
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==
 
+iterator.prototype@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/iterator.prototype/-/iterator.prototype-1.1.0.tgz#690c88b043d821f783843aaf725d7ac3b62e3b46"
+  integrity sha512-rjuhAk1AJ1fssphHD0IFV6TWL40CwRZ53FrztKx43yk2v6rguBYsY4Bj1VU4HmoMmKwZUlx7mfnhDf9cOp4YTw==
+  dependencies:
+    define-properties "^1.1.4"
+    get-intrinsic "^1.1.3"
+    has-symbols "^1.0.3"
+    has-tostringtag "^1.0.0"
+    reflect.getprototypeof "^1.0.3"
+
 jake@^10.8.5:
   version "10.8.7"
   resolved "https://registry.yarnpkg.com/jake/-/jake-10.8.7.tgz#63a32821177940c33f356e0ba44ff9d34e1c7d8f"
@@ -5223,9 +5334,9 @@ jest-worker@^27.4.5:
     supports-color "^8.0.0"
 
 jiti@^1.18.2:
-  version "1.19.1"
-  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.19.1.tgz#fa99e4b76a23053e0e7cde098efe1704a14c16f1"
-  integrity sha512-oVhqoRDaBXf7sjkll95LHVS6Myyyb1zaunVwk4Z0+WPSW4gjS0pl01zYKHScTuyEhQsFxV5L4DR5r+YqSyqyyg==
+  version "1.19.3"
+  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.19.3.tgz#ef554f76465b3c2b222dc077834a71f0d4a37569"
+  integrity sha512-5eEbBDQT/jF1xg6l36P+mWGGoH9Spuy0PCdSr2dtWRDGC6ph/w9ZCL4lmESW8f8F7MwT3XKescfP0wnZWAKL9w==
 
 js-cookie@^3.0.1:
   version "3.0.5"
@@ -5267,6 +5378,11 @@ jsesc@~0.5.0:
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
   integrity sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==
 
+json-buffer@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"
+  integrity sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==
+
 json-parse-even-better-errors@^2.3.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
@@ -5299,7 +5415,7 @@ json5@^1.0.2:
   dependencies:
     minimist "^1.2.0"
 
-json5@^2.1.2, json5@^2.2.0, json5@^2.2.2:
+json5@^2.1.2, json5@^2.2.0, json5@^2.2.3:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
@@ -5343,6 +5459,13 @@ keycon@^1.2.0:
     "@scena/event-emitter" "^1.0.2"
     keycode "^2.2.0"
 
+keyv@^4.5.3:
+  version "4.5.3"
+  resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.5.3.tgz#00873d2b046df737963157bd04f294ca818c9c25"
+  integrity sha512-QCiSav9WaX1PgETJ+SpNnx2PRRapJ/oRSXM4VO5OGYGSjrxbKPVFVhB3l2OCbLCk329N8qyAtsJjSjvVBWzEug==
+  dependencies:
+    json-buffer "3.0.1"
+
 kleur@^4.0.3:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/kleur/-/kleur-4.1.5.tgz#95106101795f7050c6c650f350c683febddb1780"
@@ -5885,9 +6008,9 @@ mkdirp@^0.5.5:
     minimist "^1.2.6"
 
 mobx-react-lite@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/mobx-react-lite/-/mobx-react-lite-4.0.3.tgz#f7aa5ac3be558ca19a53b2929d9599679769c2a8"
-  integrity sha512-wEE1oT5zvDdvplG4HnRrFgPwg5GFVVrEtl42Er85k23zeu3om8H8wbDPgdbQP88zAihVsik6xJfw6VnzUl8fQw==
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/mobx-react-lite/-/mobx-react-lite-4.0.4.tgz#eee3c55dfa6841365d5a7764971c456db12570fb"
+  integrity sha512-68uNYvQC/5Dazs3sIBv+bnpzRwcWde8y4ujHiLizhq8yeQtJ2tlNUGSh4r40gyE5M0utACIofBDsAj2hplcovQ==
   dependencies:
     use-sync-external-store "^1.2.0"
 
@@ -5952,6 +6075,11 @@ next-pwa@^5.6.0:
     workbox-webpack-plugin "^6.5.4"
     workbox-window "^6.5.4"
 
+next-theme@^0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/next-theme/-/next-theme-0.1.5.tgz#aa6655c516892925e577349d7715a8ed54bad727"
+  integrity sha512-WR8UCLEFjWvRl+UO2lTM4pGo7R4jzGZqQ6YL3hiL1Ns587Qb91GhJZLPu/Aa4ExtGQ/5wlcDX8zDYZoCN9oDPw==
+
 next-themes@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.2.1.tgz#0c9f128e847979daf6c67f70b38e6b6567856e45"
@@ -5984,11 +6112,11 @@ next@12.3.2:
     "@next/swc-win32-x64-msvc" "12.3.2"
 
 next@^13.4.16:
-  version "13.4.16"
-  resolved "https://registry.yarnpkg.com/next/-/next-13.4.16.tgz#327ef6885b22161ed001cd5943c20b5e409a9406"
-  integrity sha512-1xaA/5DrfpPu0eV31Iro7JfPeqO8uxQWb1zYNTe+KDKdzqkAGapLcDYHMLNKXKB7lHjZ7LfKUOf9dyuzcibrhA==
+  version "13.4.19"
+  resolved "https://registry.yarnpkg.com/next/-/next-13.4.19.tgz#2326e02aeedee2c693d4f37b90e4f0ed6882b35f"
+  integrity sha512-HuPSzzAbJ1T4BD8e0bs6B9C1kWQ6gv8ykZoRWs5AQoiIuqbGHHdQO7Ljuvg05Q0Z24E2ABozHe6FxDvI6HfyAw==
   dependencies:
-    "@next/env" "13.4.16"
+    "@next/env" "13.4.19"
     "@swc/helpers" "0.5.1"
     busboy "1.6.0"
     caniuse-lite "^1.0.30001406"
@@ -5997,15 +6125,15 @@ next@^13.4.16:
     watchpack "2.4.0"
     zod "3.21.4"
   optionalDependencies:
-    "@next/swc-darwin-arm64" "13.4.16"
-    "@next/swc-darwin-x64" "13.4.16"
-    "@next/swc-linux-arm64-gnu" "13.4.16"
-    "@next/swc-linux-arm64-musl" "13.4.16"
-    "@next/swc-linux-x64-gnu" "13.4.16"
-    "@next/swc-linux-x64-musl" "13.4.16"
-    "@next/swc-win32-arm64-msvc" "13.4.16"
-    "@next/swc-win32-ia32-msvc" "13.4.16"
-    "@next/swc-win32-x64-msvc" "13.4.16"
+    "@next/swc-darwin-arm64" "13.4.19"
+    "@next/swc-darwin-x64" "13.4.19"
+    "@next/swc-linux-arm64-gnu" "13.4.19"
+    "@next/swc-linux-arm64-musl" "13.4.19"
+    "@next/swc-linux-x64-gnu" "13.4.19"
+    "@next/swc-linux-x64-musl" "13.4.19"
+    "@next/swc-win32-arm64-msvc" "13.4.19"
+    "@next/swc-win32-ia32-msvc" "13.4.19"
+    "@next/swc-win32-x64-msvc" "13.4.19"
 
 no-case@^3.0.4:
   version "3.0.4"
@@ -6016,9 +6144,9 @@ no-case@^3.0.4:
     tslib "^2.0.3"
 
 node-abi@^3.3.0:
-  version "3.45.0"
-  resolved "https://registry.yarnpkg.com/node-abi/-/node-abi-3.45.0.tgz#f568f163a3bfca5aacfce1fbeee1fa2cc98441f5"
-  integrity sha512-iwXuFrMAcFVi/ZoZiqq8BzAdsLw9kxDfTC0HMyjXfSL/6CSDAGD5UmR7azrAgWV1zKYq7dUUMj4owusBWKLsiQ==
+  version "3.47.0"
+  resolved "https://registry.yarnpkg.com/node-abi/-/node-abi-3.47.0.tgz#6cbfa2916805ae25c2b7156ca640131632eb05e8"
+  integrity sha512-2s6B2CWZM//kPgwnuI0KrYwNjfdByE25zvAaEpq9IH4zcNsarH8Ihu/UuX6XMPEogDAxkuUFeZn60pXNHAqn3A==
   dependencies:
     semver "^7.3.5"
 
@@ -6028,9 +6156,9 @@ node-addon-api@^6.1.0:
   integrity sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA==
 
 node-fetch@^2.6.7:
-  version "2.6.12"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.12.tgz#02eb8e22074018e3d5a83016649d04df0e348fba"
-  integrity sha512-C/fGU2E8ToujUivIO0H+tpQ6HWo4eEmchoPIoXtxCrVghxdKq+QOHqEZW7tuP3KlV3bC8FRMO5nMCC7Zm1VP6g==
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.7.0.tgz#d0f0fa6e3e2dc1d27efcd8ad99d550bda94d187d"
+  integrity sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==
   dependencies:
     whatwg-url "^5.0.0"
 
@@ -6098,13 +6226,13 @@ object.assign@^4.1.4:
     object-keys "^1.1.1"
 
 object.entries@^1.1.5, object.entries@^1.1.6:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.6.tgz#9737d0e5b8291edd340a3e3264bb8a3b00d5fa23"
-  integrity sha512-leTPzo4Zvg3pmbQ3rDK69Rl8GQvIqMWubrkxONG9/ojtFE2rD9fjMKfSI5BxW3osRH1m6VdzmqK8oAY9aT4x5w==
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.7.tgz#2b47760e2a2e3a752f39dd874655c61a7f03c131"
+  integrity sha512-jCBs/0plmPsOnrKAfFQXRG2NFjlhZgjjcBLSmTnEhU8U6vVTsVe8ANeQJCHTl3gSsI4J+0emOoCgoKlmQPMgmA==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
 
 object.fromentries@^2.0.5, object.fromentries@^2.0.6:
   version "2.0.6"
@@ -6407,9 +6535,9 @@ postcss@8.4.14:
     source-map-js "^1.0.2"
 
 postcss@^8.4.14, postcss@^8.4.21, postcss@^8.4.23:
-  version "8.4.27"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.27.tgz#234d7e4b72e34ba5a92c29636734349e0d9c3057"
-  integrity sha512-gY/ACJtJPSmUFPDCHtX78+01fHa64FaU4zaaWfuh1MhGJISufJAH4cun6k/8fwsHYeK4UQmENQK+tRLCFJE8JQ==
+  version "8.4.28"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.28.tgz#c6cc681ed00109072816e1557f889ef51cf950a5"
+  integrity sha512-Z7V5j0cq8oEKyejIKfpD8b4eBy9cwW2JWPk0+fB1HOAMsfHbnAXLLS+PfVWlzMSLQaWttKDt607I0XHmpE67Vw==
   dependencies:
     nanoid "^3.3.6"
     picocolors "^1.0.0"
@@ -6444,9 +6572,9 @@ prettier@^2.8.7:
   integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
 
 prettier@latest:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.0.1.tgz#65271fc9320ce4913c57747a70ce635b30beaa40"
-  integrity sha512-fcOWSnnpCrovBsmFZIGIy9UqK2FaI7Hqax+DIO0A9UxeVoY4iweyaFjS5TavZN97Hfehph0nhsZnjlVKzEQSrQ==
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.0.2.tgz#78fcecd6d870551aa5547437cdae39d4701dca5b"
+  integrity sha512-o2YR9qtniXvwEZlOKbveKfDQVyqxbEIWn48Z8m3ZJjBjcCmUy3xZGIv+7AkaeuaTr6yPXJjwv07ZWlsWbEy1rQ==
 
 pretty-bytes@^5.3.0, pretty-bytes@^5.4.1:
   version "5.6.0"
@@ -6549,23 +6677,16 @@ prosemirror-markdown@^1.10.1, prosemirror-markdown@^1.11.1:
     prosemirror-model "^1.0.0"
 
 prosemirror-menu@^1.2.1:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/prosemirror-menu/-/prosemirror-menu-1.2.2.tgz#c545a2de0b8cb79babc07682b1d93de0f273aa33"
-  integrity sha512-437HIWTq4F9cTX+kPfqZWWm+luJm95Aut/mLUy+9OMrOml0bmWDS26ceC6SNfb2/S94et1sZ186vLO7pDHzxSw==
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/prosemirror-menu/-/prosemirror-menu-1.2.4.tgz#3cfdc7c06d10f9fbd1bce29082c498bd11a0a79a"
+  integrity sha512-S/bXlc0ODQup6aiBbWVsX/eM+xJgCTAfMq/nLqaO5ID/am4wS0tTCIkzwytmao7ypEtjj39i7YbJjAgO20mIqA==
   dependencies:
     crelt "^1.0.0"
     prosemirror-commands "^1.0.0"
     prosemirror-history "^1.0.0"
     prosemirror-state "^1.0.0"
 
-prosemirror-model@^1.0.0, prosemirror-model@^1.16.0, prosemirror-model@^1.18.1, prosemirror-model@^1.8.1:
-  version "1.18.1"
-  resolved "https://registry.yarnpkg.com/prosemirror-model/-/prosemirror-model-1.18.1.tgz#1d5d6b6de7b983ee67a479dc607165fdef3935bd"
-  integrity sha512-IxSVBKAEMjD7s3n8cgtwMlxAXZrC7Mlag7zYsAKDndAqnDScvSmp/UdnRTV/B33lTCVU3CCm7dyAn/rVVD0mcw==
-  dependencies:
-    orderedmap "^2.0.0"
-
-prosemirror-model@^1.19.0:
+prosemirror-model@^1.0.0, prosemirror-model@^1.16.0, prosemirror-model@^1.18.1, prosemirror-model@^1.19.0, prosemirror-model@^1.8.1:
   version "1.19.3"
   resolved "https://registry.yarnpkg.com/prosemirror-model/-/prosemirror-model-1.19.3.tgz#f0d55285487fefd962d0ac695f716f4ec6705006"
   integrity sha512-tgSnwN7BS7/UM0sSARcW+IQryx2vODKX4MI7xpqY2X+iaepJdKBPc7I4aACIsDV/LTaTjt12Z56MhDr9LsyuZQ==
@@ -6618,9 +6739,9 @@ prosemirror-trailing-node@^2.0.2:
     escape-string-regexp "^4.0.0"
 
 prosemirror-transform@^1.0.0, prosemirror-transform@^1.1.0, prosemirror-transform@^1.2.1, prosemirror-transform@^1.7.0, prosemirror-transform@^1.7.3:
-  version "1.7.4"
-  resolved "https://registry.yarnpkg.com/prosemirror-transform/-/prosemirror-transform-1.7.4.tgz#ea878c90563f3586064dd5ccf6cabb50b2753fd9"
-  integrity sha512-GO38mvqJ2yeI0BbL5E1CdHcly032Dlfn9nHqlnCHqlNf9e9jZwJixxp6VRtOeDZ1uTDpDIziezMKbA41LpAx3A==
+  version "1.7.5"
+  resolved "https://registry.yarnpkg.com/prosemirror-transform/-/prosemirror-transform-1.7.5.tgz#c62aac8645bd4f8cf447d6d53dda80abe8489f03"
+  integrity sha512-U/fWB6frEzY7dzwJUo+ir8dU1JEanaI/RwL12Imy9js/527N0v/IRUKewocP1kTq998JNT18IGtThaDLwLOBxQ==
   dependencies:
     prosemirror-model "^1.0.0"
 
@@ -6943,6 +7064,18 @@ redux@^4.0.0, redux@^4.0.4:
   dependencies:
     "@babel/runtime" "^7.9.2"
 
+reflect.getprototypeof@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.3.tgz#2738fd896fcc3477ffbd4190b40c2458026b6928"
+  integrity sha512-TTAOZpkJ2YLxl7mVHWrNo3iDMEkYlva/kgFcXndqMgbo/AZUmmavEkdXV+hXtE4P8xdyEKRzalaFqZVuwIk/Nw==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+    get-intrinsic "^1.1.1"
+    globalthis "^1.0.3"
+    which-builtin-type "^1.1.3"
+
 regenerate-unicode-properties@^10.1.0:
   version "10.1.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz#7c3192cab6dd24e21cb4461e5ddd7dd24fa8374c"
@@ -7034,7 +7167,7 @@ resolve-pkg-maps@^1.0.0:
   resolved "https://registry.yarnpkg.com/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz#616b3dc2c57056b5588c31cdf4b3d64db133720f"
   integrity sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==
 
-resolve@^1.1.7, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.22.0, resolve@^1.22.2, resolve@^1.22.3, resolve@^1.22.4:
+resolve@^1.1.7, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.22.0, resolve@^1.22.2, resolve@^1.22.4:
   version "1.22.4"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.4.tgz#1dc40df46554cdaf8948a486a10f6ba1e2026c34"
   integrity sha512-PXNdCiPqDqeUou+w1C2eTQbNfxKSuMxqTCuvlmmMsk1NWHL5fRrhY6Pl0qEYYc6+QqGClco1Qj8XnjPego4wfg==
@@ -7215,9 +7348,9 @@ serialize-javascript@^6.0.1:
     randombytes "^2.1.0"
 
 sharp@^0.32.1:
-  version "0.32.4"
-  resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.32.4.tgz#0354653b7924f2520b2264ac9bcd10a58bf411b6"
-  integrity sha512-exUnZewqVZC6UXqXuQ8fyJJv0M968feBi04jb9GcUHrWtkRoAKnbJt8IfwT4NJs7FskArbJ14JAFGVuooszoGg==
+  version "0.32.5"
+  resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.32.5.tgz#9ddc78ead6446094f51e50355a2d4ec6e7220cd4"
+  integrity sha512-0dap3iysgDkNaPOaOL4X/0akdu0ma62GcdC2NBQ+93eqpePdDdr2/LM0sFdDSMmN7yS+odyZtPsb7tx/cYBKnQ==
   dependencies:
     color "^4.2.3"
     detect-libc "^2.0.2"
@@ -7524,9 +7657,9 @@ supports-preserve-symlinks-flag@^1.0.0:
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
 swr@^2.1.3:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/swr/-/swr-2.2.1.tgz#19b89a9034a62a73c30dbf06857a0a31981cd60a"
-  integrity sha512-KJVA7dGtOBeZ+2sycEuzUfVIP5lZ/cd0xjevv85n2YG0x1uHJQicjAtahVZL6xG3+TjqhbBqimwYzVo3saeVXQ==
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/swr/-/swr-2.2.2.tgz#abcb1f9c97e10527789884169d58b878472d4c98"
+  integrity sha512-CbR41AoMD4TQBQw9ic3GTXspgfM9Y8Mdhb5Ob4uIKXhWqnRLItwA5fpGvB7SmSw3+zEjb0PdhiEumtUvYoQ+bQ==
   dependencies:
     client-only "^0.0.1"
     use-sync-external-store "^1.2.0"
@@ -7771,9 +7904,9 @@ tslib@^1.8.1:
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
 tslib@^2.0.0, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.4.0, "tslib@^2.4.1 || ^1.9.3":
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.1.tgz#fd8c9a0ff42590b25703c0acb3de3d3f4ede0410"
-  integrity sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig==
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
+  integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
 
 tslib@~2.5.0:
   version "2.5.3"
@@ -7794,47 +7927,47 @@ tunnel-agent@^0.6.0:
   dependencies:
     safe-buffer "^5.0.1"
 
-turbo-darwin-64@1.10.12:
-  version "1.10.12"
-  resolved "https://registry.yarnpkg.com/turbo-darwin-64/-/turbo-darwin-64-1.10.12.tgz#a3d9d6bd3436e795254865bc3d76a9c79aff8085"
-  integrity sha512-vmDfGVPl5/aFenAbOj3eOx3ePNcWVUyZwYr7taRl0ZBbmv2TzjRiFotO4vrKCiTVnbqjQqAFQWY2ugbqCI1kOQ==
+turbo-darwin-64@1.10.13:
+  version "1.10.13"
+  resolved "https://registry.yarnpkg.com/turbo-darwin-64/-/turbo-darwin-64-1.10.13.tgz#7abc33838bf74c7e7ba2955cb6acc40342d6964c"
+  integrity sha512-vmngGfa2dlYvX7UFVncsNDMuT4X2KPyPJ2Jj+xvf5nvQnZR/3IeDEGleGVuMi/hRzdinoxwXqgk9flEmAYp0Xw==
 
-turbo-darwin-arm64@1.10.12:
-  version "1.10.12"
-  resolved "https://registry.yarnpkg.com/turbo-darwin-arm64/-/turbo-darwin-arm64-1.10.12.tgz#ff1d9466935687ca68c0dee88a909c34cc654357"
-  integrity sha512-3JliEESLNX2s7g54SOBqqkqJ7UhcOGkS0ywMr5SNuvF6kWVTbuUq7uBU/sVbGq8RwvK1ONlhPvJne5MUqBCTCQ==
+turbo-darwin-arm64@1.10.13:
+  version "1.10.13"
+  resolved "https://registry.yarnpkg.com/turbo-darwin-arm64/-/turbo-darwin-arm64-1.10.13.tgz#89f2d14a28789e5eaf276a17fecd4116d61fd16d"
+  integrity sha512-eMoJC+k7gIS4i2qL6rKmrIQGP6Wr9nN4odzzgHFngLTMimok2cGLK3qbJs5O5F/XAtEeRAmuxeRnzQwTl/iuAw==
 
-turbo-linux-64@1.10.12:
-  version "1.10.12"
-  resolved "https://registry.yarnpkg.com/turbo-linux-64/-/turbo-linux-64-1.10.12.tgz#d184a491cc67c07672d339e36427378d0fc6b82e"
-  integrity sha512-siYhgeX0DidIfHSgCR95b8xPee9enKSOjCzx7EjTLmPqPaCiVebRYvbOIYdQWRqiaKh9yfhUtFmtMOMScUf1gg==
+turbo-linux-64@1.10.13:
+  version "1.10.13"
+  resolved "https://registry.yarnpkg.com/turbo-linux-64/-/turbo-linux-64-1.10.13.tgz#803e2b351984ec81034dc4b6935cdfb0a7d7d572"
+  integrity sha512-0CyYmnKTs6kcx7+JRH3nPEqCnzWduM0hj8GP/aodhaIkLNSAGAa+RiYZz6C7IXN+xUVh5rrWTnU2f1SkIy7Gdg==
 
-turbo-linux-arm64@1.10.12:
-  version "1.10.12"
-  resolved "https://registry.yarnpkg.com/turbo-linux-arm64/-/turbo-linux-arm64-1.10.12.tgz#44e6ca10b20fd4c59f8c85acf8366c7c09ebca81"
-  integrity sha512-K/ZhvD9l4SslclaMkTiIrnfcACgos79YcAo4kwc8bnMQaKuUeRpM15sxLpZp3xDjDg8EY93vsKyjaOhdFG2UbA==
+turbo-linux-arm64@1.10.13:
+  version "1.10.13"
+  resolved "https://registry.yarnpkg.com/turbo-linux-arm64/-/turbo-linux-arm64-1.10.13.tgz#92439a927ec98801be1be266016736be5730e40c"
+  integrity sha512-0iBKviSGQQlh2OjZgBsGjkPXoxvRIxrrLLbLObwJo3sOjIH0loGmVIimGS5E323soMfi/o+sidjk2wU1kFfD7Q==
 
-turbo-windows-64@1.10.12:
-  version "1.10.12"
-  resolved "https://registry.yarnpkg.com/turbo-windows-64/-/turbo-windows-64-1.10.12.tgz#36380eca8e7b0505d08b87a084efab1500b2a80e"
-  integrity sha512-7FSgSwvktWDNOqV65l9AbZwcoueAILeE4L7JvjauNASAjjbuzXGCEq5uN8AQU3U5BOFj4TdXrVmO2dX+lLu8Zg==
+turbo-windows-64@1.10.13:
+  version "1.10.13"
+  resolved "https://registry.yarnpkg.com/turbo-windows-64/-/turbo-windows-64-1.10.13.tgz#870815cdcb20f2480296c208778f9127be61eec6"
+  integrity sha512-S5XySRfW2AmnTeY1IT+Jdr6Goq7mxWganVFfrmqU+qqq3Om/nr0GkcUX+KTIo9mPrN0D3p5QViBRzulwB5iuUQ==
 
-turbo-windows-arm64@1.10.12:
-  version "1.10.12"
-  resolved "https://registry.yarnpkg.com/turbo-windows-arm64/-/turbo-windows-arm64-1.10.12.tgz#757ad59b9abf1949f22280bee6e8aad253743ba5"
-  integrity sha512-gCNXF52dwom1HLY9ry/cneBPOKTBHhzpqhMylcyvJP0vp9zeMQQkt6yjYv+6QdnmELC92CtKNp2FsNZo+z0pyw==
+turbo-windows-arm64@1.10.13:
+  version "1.10.13"
+  resolved "https://registry.yarnpkg.com/turbo-windows-arm64/-/turbo-windows-arm64-1.10.13.tgz#2da38b71b1716732541dfc5bd7475dc0903921f8"
+  integrity sha512-nKol6+CyiExJIuoIc3exUQPIBjP9nIq5SkMJgJuxsot2hkgGrafAg/izVDRDrRduQcXj2s8LdtxJHvvnbI8hEQ==
 
 turbo@latest:
-  version "1.10.12"
-  resolved "https://registry.yarnpkg.com/turbo/-/turbo-1.10.12.tgz#cd6f56b92da0600dae9fd94230483556a5c83187"
-  integrity sha512-WM3+jTfQWnB9W208pmP4oeehZcC6JQNlydb/ZHMRrhmQa+htGhWLCzd6Q9rLe0MwZLPpSPFV2/bN5egCLyoKjQ==
+  version "1.10.13"
+  resolved "https://registry.yarnpkg.com/turbo/-/turbo-1.10.13.tgz#8050bcd09f8a20d5a626f41e86cd8760e49a0df6"
+  integrity sha512-vOF5IPytgQPIsgGtT0n2uGZizR2N3kKuPIn4b5p5DdeLoI0BV7uNiydT7eSzdkPRpdXNnO8UwS658VaI4+YSzQ==
   optionalDependencies:
-    turbo-darwin-64 "1.10.12"
-    turbo-darwin-arm64 "1.10.12"
-    turbo-linux-64 "1.10.12"
-    turbo-linux-arm64 "1.10.12"
-    turbo-windows-64 "1.10.12"
-    turbo-windows-arm64 "1.10.12"
+    turbo-darwin-64 "1.10.13"
+    turbo-darwin-arm64 "1.10.13"
+    turbo-linux-64 "1.10.13"
+    turbo-linux-arm64 "1.10.13"
+    turbo-windows-64 "1.10.13"
+    turbo-windows-arm64 "1.10.13"
 
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"
@@ -8113,9 +8246,9 @@ uvu@^0.5.0:
     sade "^1.7.3"
 
 v8-compile-cache@^2.0.3:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
-  integrity sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.4.0.tgz#cdada8bec61e15865f05d097c5f4fd30e94dc128"
+  integrity sha512-ocyWc3bAHBB/guyqJQVI5o4BZkPhznPYUG2ea80Gond/BgNWpap8TOmLSeeQG7bnh2KMISxskdADG59j7zruhw==
 
 vfile-message@^3.0.0:
   version "3.1.4"
@@ -8206,7 +8339,35 @@ which-boxed-primitive@^1.0.2:
     is-string "^1.0.5"
     is-symbol "^1.0.3"
 
-which-typed-array@^1.1.10, which-typed-array@^1.1.11:
+which-builtin-type@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/which-builtin-type/-/which-builtin-type-1.1.3.tgz#b1b8443707cc58b6e9bf98d32110ff0c2cbd029b"
+  integrity sha512-YmjsSMDBYsM1CaFiayOVT06+KJeXf0o5M/CAd4o1lTadFAtacTUM49zoYxr/oroopFDfhvN6iEcBxUyc3gvKmw==
+  dependencies:
+    function.prototype.name "^1.1.5"
+    has-tostringtag "^1.0.0"
+    is-async-function "^2.0.0"
+    is-date-object "^1.0.5"
+    is-finalizationregistry "^1.0.2"
+    is-generator-function "^1.0.10"
+    is-regex "^1.1.4"
+    is-weakref "^1.0.2"
+    isarray "^2.0.5"
+    which-boxed-primitive "^1.0.2"
+    which-collection "^1.0.1"
+    which-typed-array "^1.1.9"
+
+which-collection@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906"
+  integrity sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==
+  dependencies:
+    is-map "^2.0.1"
+    is-set "^2.0.1"
+    is-weakmap "^2.0.1"
+    is-weakset "^2.0.1"
+
+which-typed-array@^1.1.10, which-typed-array@^1.1.11, which-typed-array@^1.1.9:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.11.tgz#99d691f23c72aab6768680805a271b69761ed61a"
   integrity sha512-qe9UWWpkeG5yzZ0tNYxDmd7vo58HDBc39mZ0xWWpolAGADdFOzkfamWLDxkOWcvHQKVmdTyQdLD4NOfjLWTKew==