diff --git a/apiserver/plane/api/serializers/issue.py b/apiserver/plane/api/serializers/issue.py
index b2dca6625..696e27169 100644
--- a/apiserver/plane/api/serializers/issue.py
+++ b/apiserver/plane/api/serializers/issue.py
@@ -37,6 +37,7 @@ class IssueFlatSerializer(BaseSerializer):
             "priority",
             "start_date",
             "target_date",
+            "sequence_id",
         ]
 
 
diff --git a/apiserver/plane/api/urls.py b/apiserver/plane/api/urls.py
index d4a9faa6f..b04f9dc3a 100644
--- a/apiserver/plane/api/urls.py
+++ b/apiserver/plane/api/urls.py
@@ -52,7 +52,6 @@ from plane.api.views import (
     AddMemberToProjectEndpoint,
     ProjectJoinEndpoint,
     BulkDeleteIssuesEndpoint,
-    BulkAssignIssuesToCycleEndpoint,
     ProjectUserViewsEndpoint,
     ModuleViewSet,
     ModuleIssueViewSet,
@@ -444,11 +443,6 @@ urlpatterns = [
         ),
         name="project-cycle",
     ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/cycles/<uuid:cycle_id>/bulk-assign-issues/",
-        BulkAssignIssuesToCycleEndpoint.as_view(),
-        name="bulk-assign-cycle-issues",
-    ),
     ## End Cycles
     # Issue
     path(
diff --git a/apiserver/plane/api/views/__init__.py b/apiserver/plane/api/views/__init__.py
index 5706b1994..b641d6e2c 100644
--- a/apiserver/plane/api/views/__init__.py
+++ b/apiserver/plane/api/views/__init__.py
@@ -38,7 +38,7 @@ from .workspace import (
 from .state import StateViewSet
 from .shortcut import ShortCutViewSet
 from .view import ViewViewSet
-from .cycle import CycleViewSet, CycleIssueViewSet, BulkAssignIssuesToCycleEndpoint
+from .cycle import CycleViewSet, CycleIssueViewSet
 from .asset import FileAssetEndpoint
 from .issue import (
     IssueViewSet,
diff --git a/apiserver/plane/api/views/cycle.py b/apiserver/plane/api/views/cycle.py
index 8b74f2a10..aca7fb641 100644
--- a/apiserver/plane/api/views/cycle.py
+++ b/apiserver/plane/api/views/cycle.py
@@ -1,9 +1,10 @@
 # Third party imports
 from rest_framework.response import Response
 from rest_framework import status
+from sentry_sdk import capture_exception
 
 # Module imports
-from . import BaseViewSet, BaseAPIView
+from . import BaseViewSet
 from plane.api.serializers import CycleSerializer, CycleIssueSerializer
 from plane.api.permissions import ProjectEntityPermission
 from plane.db.models import Cycle, CycleIssue, Issue
@@ -66,26 +67,27 @@ class CycleIssueViewSet(BaseViewSet):
             .distinct()
         )
 
-
-class BulkAssignIssuesToCycleEndpoint(BaseAPIView):
-
-    permission_classes = [
-        ProjectEntityPermission,
-    ]
-
-    def post(self, request, slug, project_id, cycle_id):
+    def create(self, request, slug, project_id, cycle_id):
         try:
 
-            issue_ids = request.data.get("issue_ids")
+            issues = request.data.get("issues", [])
+
+            if not len(issues):
+                return Response(
+                    {"error": "Issues are required"}, status=status.HTTP_400_BAD_REQUEST
+                )
 
             cycle = Cycle.objects.get(
                 workspace__slug=slug, project_id=project_id, pk=cycle_id
             )
 
             issues = Issue.objects.filter(
-                pk__in=issue_ids, workspace__slug=slug, project_id=project_id
+                pk__in=issues, workspace__slug=slug, project_id=project_id
             )
 
+            # Delete old records in order to maintain the database integrity
+            CycleIssue.objects.filter(issue_id__in=issues).delete()
+
             CycleIssue.objects.bulk_create(
                 [
                     CycleIssue(
@@ -107,3 +109,9 @@ class BulkAssignIssuesToCycleEndpoint(BaseAPIView):
             return Response(
                 {"error": "Cycle not found"}, status=status.HTTP_404_NOT_FOUND
             )
+        except Exception as e:
+            capture_exception(e)
+            return Response(
+                {"error": "Something went wrong please try again later"},
+                status=status.HTTP_500_INTERNAL_SERVER_ERROR,
+            )
diff --git a/apiserver/plane/api/views/module.py b/apiserver/plane/api/views/module.py
index 4ff914890..bec21fcd8 100644
--- a/apiserver/plane/api/views/module.py
+++ b/apiserver/plane/api/views/module.py
@@ -5,6 +5,7 @@ from django.db.models import Prefetch
 # Third party imports
 from rest_framework.response import Response
 from rest_framework import status
+from sentry_sdk import capture_exception
 
 # Module imports
 from . import BaseViewSet
@@ -14,7 +15,7 @@ from plane.api.serializers import (
     ModuleIssueSerializer,
 )
 from plane.api.permissions import ProjectEntityPermission
-from plane.db.models import Module, ModuleIssue, Project
+from plane.db.models import Module, ModuleIssue, Project, Issue
 
 
 class ModuleViewSet(BaseViewSet):
@@ -71,6 +72,12 @@ class ModuleViewSet(BaseViewSet):
                     {"name": "The module name is already taken"},
                     status=status.HTTP_410_GONE,
                 )
+        except Exception as e:
+            capture_exception(e)
+            return Response(
+                {"error": "Something went wrong please try again later"},
+                status=status.HTTP_500_INTERNAL_SERVER_ERROR,
+            )
 
 
 class ModuleIssueViewSet(BaseViewSet):
@@ -107,3 +114,45 @@ class ModuleIssueViewSet(BaseViewSet):
             .select_related("issue")
             .distinct()
         )
+
+    def create(self, request, slug, project_id, module_id):
+        try:
+            issues = request.data.get("issues", [])
+            if not len(issues):
+                return Response(
+                    {"error": "Issues are required"}, status=status.HTTP_400_BAD_REQUEST
+                )
+            module = Module.objects.get(
+                workspace__slug=slug, project_id=project_id, pk=module_id
+            )
+
+            issues = Issue.objects.filter(
+                pk__in=issues, workspace__slug=slug, project_id=project_id
+            )
+
+            ModuleIssue.objects.bulk_create(
+                [
+                    ModuleIssue(
+                        module=module,
+                        issue=issue,
+                        project_id=project_id,
+                        workspace=module.workspace,
+                        created_by=request.user,
+                        updated_by=request.user,
+                    )
+                    for issue in issues
+                ],
+                batch_size=10,
+                ignore_conflicts=True,
+            )
+            return Response({"message": "Success"}, status=status.HTTP_200_OK)
+        except Module.DoesNotExist:
+            return Response(
+                {"error": "Module Does not exists"}, status=status.HTTP_400_BAD_REQUEST
+            )
+        except Exception as e:
+            capture_exception(e)
+            return Response(
+                {"error": "Something went wrong please try again later"},
+                status=status.HTTP_500_INTERNAL_SERVER_ERROR,
+            )
diff --git a/apiserver/plane/api/views/people.py b/apiserver/plane/api/views/people.py
index 1612e0bc7..81118484c 100644
--- a/apiserver/plane/api/views/people.py
+++ b/apiserver/plane/api/views/people.py
@@ -52,7 +52,6 @@ class PeopleEndpoint(BaseAPIView):
 class UserEndpoint(BaseViewSet):
     serializer_class = UserSerializer
     model = User
-    serializers = {}
 
     def get_object(self):
         return self.request.user
diff --git a/apiserver/plane/api/views/project.py b/apiserver/plane/api/views/project.py
index 3a18ef85d..7799c0e69 100644
--- a/apiserver/plane/api/views/project.py
+++ b/apiserver/plane/api/views/project.py
@@ -609,7 +609,13 @@ class ProjectUserViewsEndpoint(BaseAPIView):
                     {"error": "Forbidden"}, status=status.HTTP_403_FORBIDDEN
                 )
 
-            project_member.view_props = request.data
+            view_props = project_member.view_props
+            default_props = project_member.default_props
+
+            project_member.view_props = request.data.get("view_props", view_props)
+            project_member.default_props = request.data.get(
+                "default_props", default_props
+            )
 
             project_member.save()
 
@@ -632,7 +638,7 @@ class ProjectMemberUserEndpoint(BaseAPIView):
         try:
 
             project_member = ProjectMember.objects.get(
-                project=project_id, workpsace__slug=slug, member=request.user
+                project_id=project_id, workspace__slug=slug, member=request.user
             )
             serializer = ProjectMemberSerializer(project_member)
 
diff --git a/apiserver/plane/db/migrations/0012_user_my_issues_prop.py b/apiserver/plane/db/migrations/0012_user_my_issues_prop.py
new file mode 100644
index 000000000..96c8a33c1
--- /dev/null
+++ b/apiserver/plane/db/migrations/0012_user_my_issues_prop.py
@@ -0,0 +1,18 @@
+# Generated by Django 3.2.14 on 2022-12-20 09:48
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('db', '0011_auto_20221216_0259'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='user',
+            name='my_issues_prop',
+            field=models.JSONField(null=True),
+        ),
+    ]
diff --git a/apiserver/plane/db/migrations/0013_projectmember_default_props.py b/apiserver/plane/db/migrations/0013_projectmember_default_props.py
new file mode 100644
index 000000000..2369e1863
--- /dev/null
+++ b/apiserver/plane/db/migrations/0013_projectmember_default_props.py
@@ -0,0 +1,19 @@
+# Generated by Django 3.2.14 on 2022-12-20 11:29
+
+from django.db import migrations, models
+import plane.db.models.project
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('db', '0012_user_my_issues_prop'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='projectmember',
+            name='default_props',
+            field=models.JSONField(default=plane.db.models.project.get_default_props),
+        ),
+    ]
diff --git a/apiserver/plane/db/models/project.py b/apiserver/plane/db/models/project.py
index d8e46869f..a84d36854 100644
--- a/apiserver/plane/db/models/project.py
+++ b/apiserver/plane/db/models/project.py
@@ -19,6 +19,15 @@ ROLE_CHOICES = (
 )
 
 
+def get_default_props():
+    return {
+        "issueView": "list",
+        "groupByProperty": None,
+        "orderBy": None,
+        "filterIssue": None,
+    }
+
+
 class Project(BaseModel):
 
     NETWORK_CHOICES = ((0, "Secret"), (2, "Public"))
@@ -119,6 +128,7 @@ class ProjectMember(ProjectBaseModel):
     comment = models.TextField(blank=True, null=True)
     role = models.PositiveSmallIntegerField(choices=ROLE_CHOICES, default=10)
     view_props = models.JSONField(null=True)
+    default_props = models.JSONField(default=get_default_props)
 
     class Meta:
         unique_together = ["project", "member"]
diff --git a/apiserver/plane/db/models/user.py b/apiserver/plane/db/models/user.py
index 7efa4be49..1b08c8d69 100644
--- a/apiserver/plane/db/models/user.py
+++ b/apiserver/plane/db/models/user.py
@@ -66,6 +66,7 @@ class User(AbstractBaseUser, PermissionsMixin):
     last_login_uagent = models.TextField(blank=True)
     token_updated_at = models.DateTimeField(null=True)
     last_workspace_id = models.UUIDField(null=True)
+    my_issues_prop = models.JSONField(null=True)
 
     USERNAME_FIELD = "email"
 
diff --git a/.eslintrc.json b/apps/app/.eslintrc.json
similarity index 100%
rename from .eslintrc.json
rename to apps/app/.eslintrc.json
diff --git a/apps/app/components/command-palette/index.tsx b/apps/app/components/command-palette/index.tsx
index 8aafbf6da..ea520cd3d 100644
--- a/apps/app/components/command-palette/index.tsx
+++ b/apps/app/components/command-palette/index.tsx
@@ -23,7 +23,7 @@ import {
 // components
 import ShortcutsModal from "components/command-palette/shortcuts";
 import CreateProjectModal from "components/project/create-project-modal";
-import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal";
+import CreateUpdateIssuesModal from "components/project/issues/create-update-issue-modal";
 import CreateUpdateCycleModal from "components/project/cycles/create-update-cycle-modal";
 // ui
 import { Button } from "ui";
@@ -260,7 +260,7 @@ const CommandPalette: React.FC = () => {
                           <li className="p-2">
                             {query === "" && (
                               <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-gray-900">
-                                Issues
+                                Select issues
                               </h2>
                             )}
                             <ul className="text-sm text-gray-700">
@@ -376,9 +376,9 @@ const CommandPalette: React.FC = () => {
                     )}
                   </Combobox>
 
-                  <div className="flex justify-between items-center gap-2 p-3">
+                  <div className="flex justify-end items-center gap-2 p-3">
                     <Button onClick={handleSubmit(handleDelete)} theme="danger" size="sm">
-                      Delete selected
+                      Delete selected issues
                     </Button>
                     <div>
                       <Button type="button" size="sm" onClick={handleCommandPaletteClose}>
diff --git a/apps/app/components/command-palette/shortcuts.tsx b/apps/app/components/command-palette/shortcuts.tsx
index dcba28c82..e4521b25a 100644
--- a/apps/app/components/command-palette/shortcuts.tsx
+++ b/apps/app/components/command-palette/shortcuts.tsx
@@ -1,15 +1,53 @@
-import React from "react";
+import React, { useState } from "react";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // icons
 import { XMarkIcon } from "@heroicons/react/20/solid";
+// ui
+import { Input } from "ui";
 
 type Props = {
   isOpen: boolean;
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
+const shortcuts = [
+  {
+    title: "Navigation",
+    shortcuts: [
+      { keys: "ctrl,/", description: "To open navigator" },
+      { keys: "↑", description: "Move up" },
+      { keys: "↓", description: "Move down" },
+      { keys: "←", description: "Move left" },
+      { keys: "→", description: "Move right" },
+      { keys: "Enter", description: "Select" },
+      { keys: "Esc", description: "Close" },
+    ],
+  },
+  {
+    title: "Common",
+    shortcuts: [
+      { keys: "ctrl,p", description: "To create project" },
+      { keys: "ctrl,i", description: "To create issue" },
+      { keys: "ctrl,q", description: "To create cycle" },
+      { keys: "ctrl,h", description: "To open shortcuts guide" },
+      {
+        keys: "ctrl,alt,c",
+        description: "To copy issue url when on issue detail page.",
+      },
+    ],
+  },
+];
+
 const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
+  const [query, setQuery] = useState("");
+
+  const filteredShortcuts = shortcuts.filter((shortcut) =>
+    shortcut.shortcuts.some((item) => item.description.includes(query.trim())) || query === ""
+      ? true
+      : false
+  );
+
   return (
     <Transition.Root show={isOpen} as={React.Fragment}>
       <Dialog as="div" className="relative z-10" onClose={setIsOpen}>
@@ -39,7 +77,7 @@ const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
               <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
                 <div className="bg-white p-5">
                   <div className="sm:flex sm:items-start">
-                    <div className="text-center sm:text-left w-full">
+                    <div className="flex flex-col gap-y-4 text-center sm:text-left w-full">
                       <Dialog.Title
                         as="h3"
                         className="text-lg font-medium leading-6 text-gray-900 flex justify-between"
@@ -54,58 +92,50 @@ const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                           </button>
                         </span>
                       </Dialog.Title>
-                      <div className="mt-2 pt-5 flex flex-col gap-y-3 w-full">
-                        {[
-                          {
-                            title: "Navigation",
-                            shortcuts: [
-                              { keys: "ctrl,/", description: "To open navigator" },
-                              { keys: "↑", description: "Move up" },
-                              { keys: "↓", description: "Move down" },
-                              { keys: "←", description: "Move left" },
-                              { keys: "→", description: "Move right" },
-                              { keys: "Enter", description: "Select" },
-                              { keys: "Esc", description: "Close" },
-                            ],
-                          },
-                          {
-                            title: "Common",
-                            shortcuts: [
-                              { keys: "ctrl,p", description: "To create project" },
-                              { keys: "ctrl,i", description: "To create issue" },
-                              { keys: "ctrl,q", description: "To create cycle" },
-                              { keys: "ctrl,m", description: "To create module" },
-                              { keys: "ctrl,h", description: "To open shortcuts guide" },
-                              {
-                                keys: "ctrl,alt,c",
-                                description: "To copy issue url when on issue detail page.",
-                              },
-                            ],
-                          },
-                        ].map(({ title, shortcuts }) => (
-                          <div key={title} className="w-full flex flex-col">
-                            <p className="font-medium mb-4">{title}</p>
-                            <div className="flex flex-col gap-y-3">
-                              {shortcuts.map(({ keys, description }, index) => (
-                                <div key={index} className="flex justify-between">
-                                  <p className="text-sm text-gray-500">{description}</p>
-                                  <div className="flex items-center gap-x-1">
-                                    {keys.split(",").map((key, index) => (
-                                      <span key={index} className="flex items-center gap-1">
-                                        <kbd className="bg-gray-200 text-sm px-1 rounded">
-                                          {key}
-                                        </kbd>
-                                        {/* {index !== keys.split(",").length - 1 ? (
-                                          <span className="text-xs">+</span>
-                                        ) : null} */}
-                                      </span>
-                                    ))}
+                      <div>
+                        <Input
+                          id="search"
+                          name="search"
+                          type="text"
+                          placeholder="Search for shortcuts"
+                          onChange={(e) => setQuery(e.target.value)}
+                        />
+                      </div>
+                      <div className="flex flex-col gap-y-3 w-full">
+                        {filteredShortcuts.length > 0 ? (
+                          filteredShortcuts.map(({ title, shortcuts }) => (
+                            <div key={title} className="w-full flex flex-col">
+                              <p className="font-medium mb-4">{title}</p>
+                              <div className="flex flex-col gap-y-3">
+                                {shortcuts.map(({ keys, description }, index) => (
+                                  <div key={index} className="flex justify-between">
+                                    <p className="text-sm text-gray-500">{description}</p>
+                                    <div className="flex items-center gap-x-1">
+                                      {keys.split(",").map((key, index) => (
+                                        <span key={index} className="flex items-center gap-1">
+                                          <kbd className="bg-gray-200 text-sm px-1 rounded">
+                                            {key}
+                                          </kbd>
+                                        </span>
+                                      ))}
+                                    </div>
                                   </div>
-                                </div>
-                              ))}
+                                ))}
+                              </div>
                             </div>
+                          ))
+                        ) : (
+                          <div className="flex flex-col gap-y-3">
+                            <p className="text-sm text-gray-500">
+                              No shortcuts found for{" "}
+                              <span className="font-semibold italic">
+                                {`"`}
+                                {query}
+                                {`"`}
+                              </span>
+                            </p>
                           </div>
-                        ))}
+                        )}
                       </div>
                     </div>
                   </div>
diff --git a/apps/app/components/common/board-view/single-board.tsx b/apps/app/components/common/board-view/single-board.tsx
new file mode 100644
index 000000000..aa6baf9a8
--- /dev/null
+++ b/apps/app/components/common/board-view/single-board.tsx
@@ -0,0 +1,5 @@
+const SingleBoard = () => {
+  return <></>;
+};
+
+export default SingleBoard;
diff --git a/apps/app/components/common/board-view/single-issue.tsx b/apps/app/components/common/board-view/single-issue.tsx
new file mode 100644
index 000000000..3fde79ae1
--- /dev/null
+++ b/apps/app/components/common/board-view/single-issue.tsx
@@ -0,0 +1,394 @@
+// next
+import Link from "next/link";
+import Image from "next/image";
+// react-beautiful-dnd
+import { DraggableStateSnapshot } from "react-beautiful-dnd";
+// headless ui
+import { Listbox, Transition } from "@headlessui/react";
+// icons
+import { TrashIcon } from "@heroicons/react/24/outline";
+import { CalendarDaysIcon } from "@heroicons/react/20/solid";
+import User from "public/user.png";
+// types
+import { IIssue, IWorkspaceMember, Properties } from "types";
+// common
+import {
+  addSpaceIfCamelCase,
+  classNames,
+  findHowManyDaysLeft,
+  renderShortNumericDateFormat,
+} from "constants/common";
+// constants
+import { PRIORITIES } from "constants/";
+import useUser from "lib/hooks/useUser";
+import React from "react";
+
+type Props = {
+  issue: IIssue;
+  properties: Properties;
+  snapshot?: DraggableStateSnapshot;
+  assignees: {
+    avatar: string | undefined;
+    first_name: string | undefined;
+    email: string | undefined;
+  }[];
+  people: IWorkspaceMember[] | undefined;
+  handleDeleteIssue?: React.Dispatch<React.SetStateAction<string | undefined>>;
+  partialUpdateIssue: (formData: Partial<IIssue>, childIssueId: string) => void;
+};
+
+const SingleIssue: React.FC<Props> = ({
+  issue,
+  properties,
+  snapshot,
+  assignees,
+  people,
+  handleDeleteIssue,
+  partialUpdateIssue,
+}) => {
+  const { activeProject, states } = useUser();
+
+  return (
+    <div
+      className={`border rounded bg-white shadow-sm ${
+        snapshot && snapshot.isDragging ? "border-theme shadow-lg bg-indigo-50" : ""
+      }`}
+    >
+      <div className="group/card relative p-2 select-none">
+        {handleDeleteIssue && (
+          <div className="opacity-0 group-hover/card:opacity-100 absolute top-1.5 right-1.5 z-10">
+            <button
+              type="button"
+              className="h-7 w-7 p-1 grid place-items-center rounded text-red-500 bg-white hover:bg-red-50 duration-300 outline-none"
+              onClick={() => handleDeleteIssue(issue.id)}
+            >
+              <TrashIcon className="h-4 w-4" />
+            </button>
+          </div>
+        )}
+        <Link href={`/projects/${issue.project}/issues/${issue.id}`}>
+          <a>
+            {properties.key && (
+              <div className="text-xs font-medium text-gray-500 mb-2">
+                {activeProject?.identifier}-{issue.sequence_id}
+              </div>
+            )}
+            <h5
+              className="group-hover:text-theme text-sm mb-3"
+              style={{ lineClamp: 3, WebkitLineClamp: 3 }}
+            >
+              {issue.name}
+            </h5>
+          </a>
+        </Link>
+        <div className="flex items-center gap-x-1 gap-y-2 text-xs flex-wrap">
+          {properties.priority && (
+            <Listbox
+              as="div"
+              value={issue.priority}
+              onChange={(data: string) => {
+                partialUpdateIssue({ priority: data }, issue.id);
+              }}
+              className="group relative flex-shrink-0"
+            >
+              {({ open }) => (
+                <>
+                  <div>
+                    <Listbox.Button
+                      className={`rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 capitalize ${
+                        issue.priority === "urgent"
+                          ? "bg-red-100 text-red-600"
+                          : issue.priority === "high"
+                          ? "bg-orange-100 text-orange-500"
+                          : issue.priority === "medium"
+                          ? "bg-yellow-100 text-yellow-500"
+                          : issue.priority === "low"
+                          ? "bg-green-100 text-green-500"
+                          : "bg-gray-100"
+                      }`}
+                    >
+                      {issue.priority ?? "None"}
+                    </Listbox.Button>
+
+                    <Transition
+                      show={open}
+                      as={React.Fragment}
+                      leave="transition ease-in duration-100"
+                      leaveFrom="opacity-100"
+                      leaveTo="opacity-0"
+                    >
+                      <Listbox.Options className="absolute z-20 mt-1 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
+                        {PRIORITIES?.map((priority) => (
+                          <Listbox.Option
+                            key={priority}
+                            className={({ active }) =>
+                              classNames(
+                                active ? "bg-indigo-50" : "bg-white",
+                                "cursor-pointer capitalize select-none px-3 py-2"
+                              )
+                            }
+                            value={priority}
+                          >
+                            {priority}
+                          </Listbox.Option>
+                        ))}
+                      </Listbox.Options>
+                    </Transition>
+                  </div>
+                  <div className="absolute bottom-full right-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
+                    <h5 className="font-medium mb-1 text-gray-900">Priority</h5>
+                    <div
+                      className={`capitalize ${
+                        issue.priority === "urgent"
+                          ? "text-red-600"
+                          : issue.priority === "high"
+                          ? "text-orange-500"
+                          : issue.priority === "medium"
+                          ? "text-yellow-500"
+                          : issue.priority === "low"
+                          ? "text-green-500"
+                          : ""
+                      }`}
+                    >
+                      {issue.priority ?? "None"}
+                    </div>
+                  </div>
+                </>
+              )}
+            </Listbox>
+          )}
+          {properties.state && (
+            <Listbox
+              as="div"
+              value={issue.state}
+              onChange={(data: string) => {
+                partialUpdateIssue({ state: data }, issue.id);
+              }}
+              className="group relative flex-shrink-0"
+            >
+              {({ open }) => (
+                <>
+                  <div>
+                    <Listbox.Button className="flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300">
+                      <span
+                        className="flex-shrink-0 h-1.5 w-1.5 rounded-full"
+                        style={{
+                          backgroundColor: issue.state_detail.color,
+                        }}
+                      ></span>
+                      {addSpaceIfCamelCase(issue.state_detail.name)}
+                    </Listbox.Button>
+
+                    <Transition
+                      show={open}
+                      as={React.Fragment}
+                      leave="transition ease-in duration-100"
+                      leaveFrom="opacity-100"
+                      leaveTo="opacity-0"
+                    >
+                      <Listbox.Options className="absolute z-20 mt-1 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
+                        {states?.map((state) => (
+                          <Listbox.Option
+                            key={state.id}
+                            className={({ active }) =>
+                              classNames(
+                                active ? "bg-indigo-50" : "bg-white",
+                                "flex items-center gap-2 cursor-pointer select-none px-3 py-2"
+                              )
+                            }
+                            value={state.id}
+                          >
+                            <span
+                              className="flex-shrink-0 h-1.5 w-1.5 rounded-full"
+                              style={{
+                                backgroundColor: state.color,
+                              }}
+                            ></span>
+                            {addSpaceIfCamelCase(state.name)}
+                          </Listbox.Option>
+                        ))}
+                      </Listbox.Options>
+                    </Transition>
+                  </div>
+                  <div className="absolute bottom-full right-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
+                    <h5 className="font-medium mb-1">State</h5>
+                    <div>{issue.state_detail.name}</div>
+                  </div>
+                </>
+              )}
+            </Listbox>
+          )}
+          {properties.start_date && (
+            <div className="group flex-shrink-0 flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300">
+              <CalendarDaysIcon className="h-4 w-4" />
+              {issue.start_date ? renderShortNumericDateFormat(issue.start_date) : "N/A"}
+              <div className="fixed -translate-y-3/4 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
+                <h5 className="font-medium mb-1">Started at</h5>
+                <div>{renderShortNumericDateFormat(issue.start_date ?? "")}</div>
+              </div>
+            </div>
+          )}
+          {properties.due_date && (
+            <div
+              className={`group flex-shrink-0 group flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300 ${
+                issue.target_date === null
+                  ? ""
+                  : issue.target_date < new Date().toISOString()
+                  ? "text-red-600"
+                  : findHowManyDaysLeft(issue.target_date) <= 3 && "text-orange-400"
+              }`}
+            >
+              <CalendarDaysIcon className="h-4 w-4" />
+              {issue.target_date ? renderShortNumericDateFormat(issue.target_date) : "N/A"}
+              <div className="fixed -translate-y-3/4 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
+                <h5 className="font-medium mb-1 text-gray-900">Target date</h5>
+                <div>{renderShortNumericDateFormat(issue.target_date ?? "")}</div>
+                <div>
+                  {issue.target_date &&
+                    (issue.target_date < new Date().toISOString()
+                      ? `Due date has passed by ${findHowManyDaysLeft(issue.target_date)} days`
+                      : findHowManyDaysLeft(issue.target_date) <= 3
+                      ? `Due date is in ${findHowManyDaysLeft(issue.target_date)} days`
+                      : "Due date")}
+                </div>
+              </div>
+            </div>
+          )}
+          {properties.assignee && (
+            <Listbox
+              as="div"
+              value={issue.assignees}
+              onChange={(data: any) => {
+                const newData = issue.assignees ?? [];
+                if (newData.includes(data)) {
+                  newData.splice(newData.indexOf(data), 1);
+                } else {
+                  newData.push(data);
+                }
+                partialUpdateIssue({ assignees_list: newData }, issue.id);
+              }}
+              className="group relative flex-shrink-0"
+            >
+              {({ open }) => (
+                <>
+                  <div>
+                    <Listbox.Button>
+                      <div className="flex items-center gap-1 text-xs cursor-pointer">
+                        {assignees.length > 0 ? (
+                          assignees.map((assignee, index: number) => (
+                            <div
+                              key={index}
+                              className={`relative z-[1] h-5 w-5 rounded-full ${
+                                index !== 0 ? "-ml-2.5" : ""
+                              }`}
+                            >
+                              {assignee.avatar && assignee.avatar !== "" ? (
+                                <div className="h-5 w-5 border-2 bg-white border-white rounded-full">
+                                  <Image
+                                    src={assignee.avatar}
+                                    height="100%"
+                                    width="100%"
+                                    className="rounded-full"
+                                    alt={assignee?.first_name}
+                                  />
+                                </div>
+                              ) : (
+                                <div className="h-5 w-5 bg-gray-700 text-white border-2 border-white grid place-items-center rounded-full capitalize">
+                                  {assignee.first_name && assignee.first_name !== ""
+                                    ? assignee.first_name.charAt(0)
+                                    : assignee?.email?.charAt(0)}
+                                </div>
+                              )}
+                            </div>
+                          ))
+                        ) : (
+                          <div className="h-5 w-5 border-2 bg-white border-white rounded-full">
+                            <Image
+                              src={User}
+                              height="100%"
+                              width="100%"
+                              className="rounded-full"
+                              alt="No user"
+                            />
+                          </div>
+                        )}
+                      </div>
+                    </Listbox.Button>
+
+                    <Transition
+                      show={open}
+                      as={React.Fragment}
+                      leave="transition ease-in duration-100"
+                      leaveFrom="opacity-100"
+                      leaveTo="opacity-0"
+                    >
+                      <Listbox.Options className="absolute left-0 z-20 mt-1 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
+                        {people?.map((person) => (
+                          <Listbox.Option
+                            key={person.id}
+                            className={({ active }) =>
+                              classNames(
+                                active ? "bg-indigo-50" : "bg-white",
+                                "cursor-pointer select-none p-2"
+                              )
+                            }
+                            value={person.member.id}
+                          >
+                            <div
+                              className={`flex items-center gap-x-1 ${
+                                assignees.includes({
+                                  avatar: person.member.avatar,
+                                  first_name: person.member.first_name,
+                                  email: person.member.email,
+                                })
+                                  ? "font-medium"
+                                  : "font-normal"
+                              }`}
+                            >
+                              {person.member.avatar && person.member.avatar !== "" ? (
+                                <div className="relative h-4 w-4">
+                                  <Image
+                                    src={person.member.avatar}
+                                    alt="avatar"
+                                    className="rounded-full"
+                                    layout="fill"
+                                    objectFit="cover"
+                                  />
+                                </div>
+                              ) : (
+                                <div className="h-4 w-4 bg-gray-700 text-white grid place-items-center capitalize rounded-full">
+                                  {person.member.first_name && person.member.first_name !== ""
+                                    ? person.member.first_name.charAt(0)
+                                    : person.member.email.charAt(0)}
+                                </div>
+                              )}
+                              <p>
+                                {person.member.first_name && person.member.first_name !== ""
+                                  ? person.member.first_name
+                                  : person.member.email}
+                              </p>
+                            </div>
+                          </Listbox.Option>
+                        ))}
+                      </Listbox.Options>
+                    </Transition>
+                  </div>
+                  <div className="absolute bottom-full left-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
+                    <h5 className="font-medium mb-1">Assigned to</h5>
+                    <div>
+                      {issue.assignee_details?.length > 0
+                        ? issue.assignee_details.map((assignee) => assignee.first_name).join(", ")
+                        : "No one"}
+                    </div>
+                  </div>
+                </>
+              )}
+            </Listbox>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SingleIssue;
diff --git a/apps/app/components/project/ConfirmProjectMemberRemove.tsx b/apps/app/components/project/confirm-project-member-remove.tsx
similarity index 100%
rename from apps/app/components/project/ConfirmProjectMemberRemove.tsx
rename to apps/app/components/project/confirm-project-member-remove.tsx
diff --git a/apps/app/components/project/create-project-modal.tsx b/apps/app/components/project/create-project-modal.tsx
index 5d4d9edb8..e93fa6d10 100644
--- a/apps/app/components/project/create-project-modal.tsx
+++ b/apps/app/components/project/create-project-modal.tsx
@@ -2,14 +2,14 @@ import React, { useState, useEffect } from "react";
 // swr
 import useSWR, { mutate } from "swr";
 // react hook form
-import { useForm } from "react-hook-form";
+import { useForm, Controller } from "react-hook-form";
 // headless
 import { Dialog, Transition } from "@headlessui/react";
 // services
 import projectServices from "lib/services/project.service";
 import workspaceService from "lib/services/workspace.service";
 // common
-import { createSimilarString } from "constants/common";
+import { createSimilarString, getRandomEmoji } from "constants/common";
 // constants
 import { NETWORK_CHOICES } from "constants/";
 // fetch keys
@@ -18,7 +18,7 @@ import { PROJECTS_LIST, WORKSPACE_MEMBERS } from "constants/fetch-keys";
 import useUser from "lib/hooks/useUser";
 import useToast from "lib/hooks/useToast";
 // ui
-import { Button, Input, TextArea, Select } from "ui";
+import { Button, Input, TextArea, Select, EmojiIconPicker } from "ui";
 // types
 import { IProject } from "types";
 
@@ -32,6 +32,7 @@ const defaultValues: Partial<IProject> = {
   identifier: "",
   description: "",
   network: 0,
+  icon: getRandomEmoji(),
 };
 
 const IsGuestCondition: React.FC<{
@@ -83,6 +84,7 @@ const CreateProjectModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
     reset,
     setError,
     clearErrors,
+    control,
     watch,
     setValue,
   } = useForm<IProject>({
@@ -201,6 +203,22 @@ const CreateProjectModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                       </p>
                     </div>
                     <div className="space-y-3">
+                      <div>
+                        <label htmlFor="icon" className="text-gray-500 mb-2">
+                          Icon
+                        </label>
+                        <Controller
+                          control={control}
+                          name="icon"
+                          render={({ field: { value, onChange } }) => (
+                            <EmojiIconPicker
+                              label={value ? String.fromCodePoint(parseInt(value)) : "Select Icon"}
+                              value={value}
+                              onChange={onChange}
+                            />
+                          )}
+                        />
+                      </div>
                       <div>
                         <Input
                           id="name"
diff --git a/apps/app/components/project/cycles/board-view/index.tsx b/apps/app/components/project/cycles/board-view/index.tsx
index 97ecd8290..3fa6af001 100644
--- a/apps/app/components/project/cycles/board-view/index.tsx
+++ b/apps/app/components/project/cycles/board-view/index.tsx
@@ -16,6 +16,16 @@ type Props = {
   openCreateIssueModal: (issue?: IIssue, actionType?: "create" | "edit" | "delete") => void;
   openIssuesListModal: () => void;
   removeIssueFromCycle: (bridgeId: string) => void;
+  partialUpdateIssue: (formData: Partial<IIssue>, issueId: string) => void;
+  handleDeleteIssue: React.Dispatch<React.SetStateAction<string | undefined>>;
+  setPreloadedData: React.Dispatch<
+    React.SetStateAction<
+      | (Partial<IIssue> & {
+          actionType: "createIssue" | "edit" | "delete";
+        })
+      | undefined
+    >
+  >;
 };
 
 const CyclesBoardView: React.FC<Props> = ({
@@ -26,6 +36,9 @@ const CyclesBoardView: React.FC<Props> = ({
   openCreateIssueModal,
   openIssuesListModal,
   removeIssueFromCycle,
+  partialUpdateIssue,
+  handleDeleteIssue,
+  setPreloadedData,
 }) => {
   const { states } = useUser();
 
@@ -57,6 +70,14 @@ const CyclesBoardView: React.FC<Props> = ({
                     removeIssueFromCycle={removeIssueFromCycle}
                     openIssuesListModal={openIssuesListModal}
                     openCreateIssueModal={openCreateIssueModal}
+                    partialUpdateIssue={partialUpdateIssue}
+                    handleDeleteIssue={handleDeleteIssue}
+                    setPreloadedData={setPreloadedData}
+                    stateId={
+                      selectedGroup === "state_detail.name"
+                        ? states?.find((s) => s.name === singleGroup)?.id ?? null
+                        : null
+                    }
                   />
                 ))}
               </div>
diff --git a/apps/app/components/project/cycles/board-view/single-board.tsx b/apps/app/components/project/cycles/board-view/single-board.tsx
index 16b9cd0b4..d40b4ac97 100644
--- a/apps/app/components/project/cycles/board-view/single-board.tsx
+++ b/apps/app/components/project/cycles/board-view/single-board.tsx
@@ -1,44 +1,25 @@
 // react
 import React, { useState } from "react";
-// next
-import Link from "next/link";
-import Image from "next/image";
 // swr
 import useSWR from "swr";
 // services
-import cycleServices from "lib/services/cycles.service";
+import workspaceService from "lib/services/workspace.service";
 // hooks
 import useUser from "lib/hooks/useUser";
-// ui
-import { Spinner } from "ui";
-// icons
-import {
-  ArrowsPointingInIcon,
-  ArrowsPointingOutIcon,
-  CalendarDaysIcon,
-  PlusIcon,
-  EllipsisHorizontalIcon,
-  TrashIcon,
-} from "@heroicons/react/24/outline";
-import User from "public/user.png";
-// types
-import {
-  CycleIssueResponse,
-  ICycle,
-  IIssue,
-  IWorkspaceMember,
-  NestedKeyOf,
-  Properties,
-} from "types";
-// constants
-import { CYCLE_ISSUES, WORKSPACE_MEMBERS } from "constants/fetch-keys";
-import {
-  addSpaceIfCamelCase,
-  findHowManyDaysLeft,
-  renderShortNumericDateFormat,
-} from "constants/common";
+// components
+import SingleIssue from "components/common/board-view/single-issue";
+// headless ui
 import { Menu, Transition } from "@headlessui/react";
-import workspaceService from "lib/services/workspace.service";
+// ui
+import { CustomMenu } from "ui";
+// icons
+import { PlusIcon } from "@heroicons/react/24/outline";
+// types
+import { IIssue, IWorkspaceMember, NestedKeyOf, Properties } from "types";
+// fetch-keys
+import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
+// common
+import { addSpaceIfCamelCase, classNames } from "constants/common";
 
 type Props = {
   properties: Properties;
@@ -52,6 +33,17 @@ type Props = {
   openCreateIssueModal: (issue?: IIssue, actionType?: "create" | "edit" | "delete") => void;
   openIssuesListModal: () => void;
   removeIssueFromCycle: (bridgeId: string) => void;
+  partialUpdateIssue: (formData: Partial<IIssue>, issueId: string) => void;
+  handleDeleteIssue: React.Dispatch<React.SetStateAction<string | undefined>>;
+  setPreloadedData: React.Dispatch<
+    React.SetStateAction<
+      | (Partial<IIssue> & {
+          actionType: "createIssue" | "edit" | "delete";
+        })
+      | undefined
+    >
+  >;
+  stateId: string | null;
 };
 
 const SingleCycleBoard: React.FC<Props> = ({
@@ -64,11 +56,15 @@ const SingleCycleBoard: React.FC<Props> = ({
   openCreateIssueModal,
   openIssuesListModal,
   removeIssueFromCycle,
+  partialUpdateIssue,
+  handleDeleteIssue,
+  setPreloadedData,
+  stateId,
 }) => {
   // Collapse/Expand
   const [show, setState] = useState(true);
 
-  const { activeWorkspace, activeProject } = useUser();
+  const { activeWorkspace } = useUser();
 
   if (selectedGroup === "priority")
     groupTitle === "high"
@@ -123,48 +119,25 @@ const SingleCycleBoard: React.FC<Props> = ({
               </span>
             </div>
 
-            <Menu as="div" className="relative inline-block">
-              <Menu.Button className="h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none">
-                <EllipsisHorizontalIcon className="h-4 w-4" />
-              </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"
+            <CustomMenu width="auto" ellipsis>
+              <CustomMenu.MenuItem
+                onClick={() => {
+                  openCreateIssueModal();
+                  if (selectedGroup !== null) {
+                    setPreloadedData({
+                      state: stateId !== null ? stateId : undefined,
+                      [selectedGroup]: groupTitle,
+                      actionType: "createIssue",
+                    });
+                  }
+                }}
               >
-                <Menu.Items className="absolute right-0 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10 text-xs">
-                  <div className="py-1">
-                    <Menu.Item as="div">
-                      {(active) => (
-                        <button
-                          type="button"
-                          className="w-full text-left p-2 text-gray-900 hover:bg-indigo-50 whitespace-nowrap"
-                          onClick={() => openCreateIssueModal()}
-                        >
-                          Create new
-                        </button>
-                      )}
-                    </Menu.Item>
-                    <Menu.Item as="div">
-                      {(active) => (
-                        <button
-                          type="button"
-                          className="w-full text-left p-2 text-gray-900 hover:bg-indigo-50 whitespace-nowrap"
-                          onClick={() => openIssuesListModal()}
-                        >
-                          Add an existing issue
-                        </button>
-                      )}
-                    </Menu.Item>
-                  </div>
-                </Menu.Items>
-              </Transition>
-            </Menu>
+                Create new
+              </CustomMenu.MenuItem>
+              <CustomMenu.MenuItem onClick={() => openIssuesListModal()}>
+                Add an existing issue
+              </CustomMenu.MenuItem>
+            </CustomMenu>
           </div>
         </div>
         <div
@@ -187,181 +160,47 @@ const SingleCycleBoard: React.FC<Props> = ({
             });
 
             return (
-              <div key={childIssue.id} className={`border rounded bg-white shadow-sm`}>
-                <div className="relative p-2 select-none">
-                  <Link href={`/projects/${childIssue.project}/issues/${childIssue.id}`}>
-                    <a>
-                      {properties.key && (
-                        <div className="text-xs font-medium text-gray-500 mb-2">
-                          {activeProject?.identifier}-{childIssue.sequence_id}
-                        </div>
-                      )}
-                      <h5
-                        className="group-hover:text-theme text-sm break-all mb-3"
-                        style={{ lineClamp: 3, WebkitLineClamp: 3 }}
-                      >
-                        {childIssue.name}
-                      </h5>
-                    </a>
-                  </Link>
-                  <div className="flex items-center gap-x-1 gap-y-2 text-xs flex-wrap">
-                    {properties.priority && (
-                      <div
-                        className={`group flex-shrink-0 flex items-center gap-1 rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 capitalize ${
-                          childIssue.priority === "urgent"
-                            ? "bg-red-100 text-red-600"
-                            : childIssue.priority === "high"
-                            ? "bg-orange-100 text-orange-500"
-                            : childIssue.priority === "medium"
-                            ? "bg-yellow-100 text-yellow-500"
-                            : childIssue.priority === "low"
-                            ? "bg-green-100 text-green-500"
-                            : "bg-gray-100"
-                        }`}
-                      >
-                        {/* {getPriorityIcon(childIssue.priority ?? "")} */}
-                        {childIssue.priority ?? "None"}
-                        <div className="fixed -translate-y-3/4 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
-                          <h5 className="font-medium mb-1 text-gray-900">Priority</h5>
-                          <div
-                            className={`capitalize ${
-                              childIssue.priority === "urgent"
-                                ? "text-red-600"
-                                : childIssue.priority === "high"
-                                ? "text-orange-500"
-                                : childIssue.priority === "medium"
-                                ? "text-yellow-500"
-                                : childIssue.priority === "low"
-                                ? "text-green-500"
-                                : ""
-                            }`}
-                          >
-                            {childIssue.priority ?? "None"}
-                          </div>
-                        </div>
-                      </div>
-                    )}
-                    {properties.state && (
-                      <div className="group flex-shrink-0 flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300">
-                        <span
-                          className="flex-shrink-0 h-1.5 w-1.5 rounded-full"
-                          style={{ backgroundColor: childIssue.state_detail.color }}
-                        ></span>
-                        {addSpaceIfCamelCase(childIssue.state_detail.name)}
-                        <div className="fixed -translate-y-3/4 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
-                          <h5 className="font-medium mb-1">State</h5>
-                          <div>{childIssue.state_detail.name}</div>
-                        </div>
-                      </div>
-                    )}
-                    {properties.start_date && (
-                      <div className="group flex-shrink-0 flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300">
-                        <CalendarDaysIcon className="h-4 w-4" />
-                        {childIssue.start_date
-                          ? renderShortNumericDateFormat(childIssue.start_date)
-                          : "N/A"}
-                        <div className="fixed -translate-y-3/4 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
-                          <h5 className="font-medium mb-1">Started at</h5>
-                          <div>{renderShortNumericDateFormat(childIssue.start_date ?? "")}</div>
-                        </div>
-                      </div>
-                    )}
-                    {properties.target_date && (
-                      <div
-                        className={`group flex-shrink-0 group flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300 ${
-                          childIssue.target_date === null
-                            ? ""
-                            : childIssue.target_date < new Date().toISOString()
-                            ? "text-red-600"
-                            : findHowManyDaysLeft(childIssue.target_date) <= 3 && "text-orange-400"
-                        }`}
-                      >
-                        <CalendarDaysIcon className="h-4 w-4" />
-                        {childIssue.target_date
-                          ? renderShortNumericDateFormat(childIssue.target_date)
-                          : "N/A"}
-                        <div className="fixed -translate-y-3/4 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
-                          <h5 className="font-medium mb-1 text-gray-900">Target date</h5>
-                          <div>{renderShortNumericDateFormat(childIssue.target_date ?? "")}</div>
-                          <div>
-                            {childIssue.target_date &&
-                              (childIssue.target_date < new Date().toISOString()
-                                ? `Target date has passed by ${findHowManyDaysLeft(
-                                    childIssue.target_date
-                                  )} days`
-                                : findHowManyDaysLeft(childIssue.target_date) <= 3
-                                ? `Target date is in ${findHowManyDaysLeft(
-                                    childIssue.target_date
-                                  )} days`
-                                : "Target date")}
-                          </div>
-                        </div>
-                      </div>
-                    )}
-                    {properties.assignee && (
-                      <div className="group flex items-center gap-1 text-xs">
-                        {childIssue.assignee_details?.length > 0 ? (
-                          childIssue.assignee_details?.map((assignee, index: number) => (
-                            <div
-                              key={index}
-                              className={`relative z-[1] h-5 w-5 rounded-full ${
-                                index !== 0 ? "-ml-2.5" : ""
-                              }`}
-                            >
-                              {assignee.avatar && assignee.avatar !== "" ? (
-                                <div className="h-5 w-5 border-2 bg-white border-white rounded-full">
-                                  <Image
-                                    src={assignee.avatar}
-                                    height="100%"
-                                    width="100%"
-                                    className="rounded-full"
-                                    alt={assignee.name}
-                                  />
-                                </div>
-                              ) : (
-                                <div
-                                  className={`h-5 w-5 bg-gray-700 text-white border-2 border-white grid place-items-center rounded-full`}
-                                >
-                                  {assignee.first_name.charAt(0)}
-                                </div>
-                              )}
-                            </div>
-                          ))
-                        ) : (
-                          <div className="h-5 w-5 border-2 bg-white border-white rounded-full">
-                            <Image
-                              src={User}
-                              height="100%"
-                              width="100%"
-                              className="rounded-full"
-                              alt="No user"
-                            />
-                          </div>
-                        )}
-                        <div className="fixed -translate-y-3/4 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
-                          <h5 className="font-medium mb-1">Assigned to</h5>
-                          <div>
-                            {childIssue.assignee_details?.length > 0
-                              ? childIssue.assignee_details
-                                  .map((assignee) => assignee.first_name)
-                                  .join(", ")
-                              : "No one"}
-                          </div>
-                        </div>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              </div>
+              <SingleIssue
+                key={childIssue.id}
+                issue={childIssue}
+                properties={properties}
+                assignees={assignees}
+                people={people}
+                partialUpdateIssue={partialUpdateIssue}
+                handleDeleteIssue={handleDeleteIssue}
+              />
             );
           })}
-          <button
-            type="button"
-            className="flex items-center text-xs font-medium hover:bg-gray-100 p-2 rounded duration-300 outline-none"
+
+          <CustomMenu
+            label={
+              <span className="flex items-center gap-1">
+                <PlusIcon className="h-3 w-3" />
+                Add issue
+              </span>
+            }
+            className="mt-1"
+            optionsPosition="left"
+            withoutBorder
           >
-            <PlusIcon className="h-3 w-3 mr-1" />
-            Create
-          </button>
+            <CustomMenu.MenuItem
+              onClick={() => {
+                openCreateIssueModal();
+                if (selectedGroup !== null) {
+                  setPreloadedData({
+                    state: stateId !== null ? stateId : undefined,
+                    [selectedGroup]: groupTitle,
+                    actionType: "createIssue",
+                  });
+                }
+              }}
+            >
+              Create new
+            </CustomMenu.MenuItem>
+            <CustomMenu.MenuItem onClick={() => openIssuesListModal()}>
+              Add an existing issue
+            </CustomMenu.MenuItem>
+          </CustomMenu>
         </div>
       </div>
     </div>
diff --git a/apps/app/components/project/cycles/create-update-cycle-modal.tsx b/apps/app/components/project/cycles/create-update-cycle-modal.tsx
index 3f3127082..5d52183b8 100644
--- a/apps/app/components/project/cycles/create-update-cycle-modal.tsx
+++ b/apps/app/components/project/cycles/create-update-cycle-modal.tsx
@@ -195,6 +195,9 @@ const CreateUpdateCycleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, proj
                             placeholder="Enter start date"
                             error={errors.start_date}
                             register={register}
+                            validations={{
+                              required: "Start date is required",
+                            }}
                           />
                         </div>
                         <div className="w-full">
@@ -206,6 +209,9 @@ const CreateUpdateCycleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, proj
                             placeholder="Enter end date"
                             error={errors.end_date}
                             register={register}
+                            validations={{
+                              required: "End date is required",
+                            }}
                           />
                         </div>
                       </div>
diff --git a/apps/app/components/project/cycles/cycle-issues-list-modal.tsx b/apps/app/components/project/cycles/cycle-issues-list-modal.tsx
index 8132ca19f..54e526d8b 100644
--- a/apps/app/components/project/cycles/cycle-issues-list-modal.tsx
+++ b/apps/app/components/project/cycles/cycle-issues-list-modal.tsx
@@ -17,6 +17,8 @@ import { MagnifyingGlassIcon, RectangleStackIcon } from "@heroicons/react/24/out
 import { IIssue, IssueResponse } from "types";
 // constants
 import { classNames } from "constants/common";
+import { mutate } from "swr";
+import { CYCLE_ISSUES } from "constants/fetch-keys";
 
 type Props = {
   isOpen: boolean;
@@ -26,7 +28,7 @@ type Props = {
 };
 
 type FormInput = {
-  issue_ids: string[];
+  issues: string[];
 };
 
 const CycleIssuesListModal: React.FC<Props> = ({
@@ -54,12 +56,12 @@ const CycleIssuesListModal: React.FC<Props> = ({
     formState: { isSubmitting },
   } = useForm<FormInput>({
     defaultValues: {
-      issue_ids: [],
+      issues: [],
     },
   });
 
   const handleAddToCycle: SubmitHandler<FormInput> = (data) => {
-    if (!data.issue_ids || data.issue_ids.length === 0) {
+    if (!data.issues || data.issues.length === 0) {
       setToastAlert({
         title: "Error",
         type: "error",
@@ -70,9 +72,10 @@ const CycleIssuesListModal: React.FC<Props> = ({
 
     if (activeWorkspace && activeProject) {
       issuesServices
-        .bulkAddIssuesToCycle(activeWorkspace.slug, activeProject.id, cycleId, data)
+        .addIssueToCycle(activeWorkspace.slug, activeProject.id, cycleId, data)
         .then((res) => {
           console.log(res);
+          mutate(CYCLE_ISSUES(cycleId));
           handleClose();
         })
         .catch((e) => {
@@ -117,7 +120,7 @@ const CycleIssuesListModal: React.FC<Props> = ({
                 <form>
                   <Controller
                     control={control}
-                    name="issue_ids"
+                    name="issues"
                     render={({ field }) => (
                       <Combobox as="div" {...field} multiple>
                         <div className="relative m-1">
diff --git a/apps/app/components/project/cycles/list-view/index.tsx b/apps/app/components/project/cycles/list-view/index.tsx
index aa658f2a6..8c34e3109 100644
--- a/apps/app/components/project/cycles/list-view/index.tsx
+++ b/apps/app/components/project/cycles/list-view/index.tsx
@@ -6,22 +6,21 @@ import Link from "next/link";
 import useSWR from "swr";
 // headless ui
 import { Disclosure, Transition, Menu } from "@headlessui/react";
-// services
-import cycleServices from "lib/services/cycles.service";
 // hooks
 import useUser from "lib/hooks/useUser";
 // ui
 import { CustomMenu, Spinner } from "ui";
 // icons
-import { PlusIcon, EllipsisHorizontalIcon, ChevronDownIcon } from "@heroicons/react/20/solid";
+import { PlusIcon, ChevronDownIcon } from "@heroicons/react/20/solid";
 import { CalendarDaysIcon } from "@heroicons/react/24/outline";
 // types
-import { IIssue, IWorkspaceMember, NestedKeyOf, Properties, SelectSprintType } from "types";
+import { IIssue, IWorkspaceMember, NestedKeyOf, Properties } from "types";
 // fetch keys
-import { CYCLE_ISSUES, WORKSPACE_MEMBERS } from "constants/fetch-keys";
+import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
 // constants
 import {
   addSpaceIfCamelCase,
+  classNames,
   findHowManyDaysLeft,
   renderShortNumericDateFormat,
 } from "constants/common";
@@ -29,13 +28,21 @@ import workspaceService from "lib/services/workspace.service";
 
 type Props = {
   groupedByIssues: {
-    [key: string]: IIssue[];
+    [key: string]: (IIssue & { bridge?: string })[];
   };
   properties: Properties;
   selectedGroup: NestedKeyOf<IIssue> | null;
   openCreateIssueModal: (issue?: IIssue, actionType?: "create" | "edit" | "delete") => void;
-  openIssuesListModal: (cycleId: string) => void;
+  openIssuesListModal: () => void;
   removeIssueFromCycle: (bridgeId: string) => void;
+  setPreloadedData: React.Dispatch<
+    React.SetStateAction<
+      | (Partial<IIssue> & {
+          actionType: "createIssue" | "edit" | "delete";
+        })
+      | undefined
+    >
+  >;
 };
 
 const CyclesListView: React.FC<Props> = ({
@@ -45,8 +52,9 @@ const CyclesListView: React.FC<Props> = ({
   openIssuesListModal,
   properties,
   removeIssueFromCycle,
+  setPreloadedData,
 }) => {
-  const { activeWorkspace, activeProject } = useUser();
+  const { activeWorkspace, activeProject, states } = useUser();
 
   const { data: people } = useSWR<IWorkspaceMember[]>(
     activeWorkspace ? WORKSPACE_MEMBERS : null,
@@ -55,265 +63,260 @@ const CyclesListView: React.FC<Props> = ({
 
   return (
     <div className="flex flex-col space-y-5">
-      {Object.keys(groupedByIssues).map((singleGroup) => (
-        <Disclosure key={singleGroup} as="div" defaultOpen>
-          {({ open }) => (
-            <div className="bg-white rounded-lg">
-              <div className="bg-gray-100 px-4 py-3 rounded-t-lg">
-                <Disclosure.Button>
-                  <div className="flex items-center gap-x-2">
-                    <span>
-                      <ChevronDownIcon
-                        className={`h-4 w-4 text-gray-500 ${!open ? "transform -rotate-90" : ""}`}
-                      />
-                    </span>
-                    {selectedGroup !== null ? (
-                      <h2 className="font-medium leading-5 capitalize">
-                        {singleGroup === null || singleGroup === "null"
-                          ? selectedGroup === "priority" && "No priority"
-                          : addSpaceIfCamelCase(singleGroup)}
-                      </h2>
-                    ) : (
-                      <h2 className="font-medium leading-5">All Issues</h2>
-                    )}
-                    <p className="text-gray-500 text-sm">
-                      {groupedByIssues[singleGroup as keyof IIssue].length}
-                    </p>
-                  </div>
-                </Disclosure.Button>
-              </div>
-              <Transition
-                show={open}
-                enter="transition duration-100 ease-out"
-                enterFrom="transform opacity-0"
-                enterTo="transform opacity-100"
-                leave="transition duration-75 ease-out"
-                leaveFrom="transform opacity-100"
-                leaveTo="transform opacity-0"
-              >
-                <Disclosure.Panel>
-                  <div className="divide-y-2">
-                    {groupedByIssues[singleGroup] ? (
-                      groupedByIssues[singleGroup].length > 0 ? (
-                        groupedByIssues[singleGroup].map((issue: IIssue) => {
-                          const assignees = [
-                            ...(issue?.assignees_list ?? []),
-                            ...(issue?.assignees ?? []),
-                          ]?.map((assignee) => {
-                            const tempPerson = people?.find(
-                              (p) => p.member.id === assignee
-                            )?.member;
+      {Object.keys(groupedByIssues).map((singleGroup) => {
+        const stateId =
+          selectedGroup === "state_detail.name"
+            ? states?.find((s) => s.name === singleGroup)?.id ?? null
+            : null;
 
-                            return {
-                              avatar: tempPerson?.avatar,
-                              first_name: tempPerson?.first_name,
-                              email: tempPerson?.email,
-                            };
-                          });
-
-                          return (
-                            <div
-                              key={issue.id}
-                              className="px-4 py-3 text-sm rounded flex justify-between items-center gap-2"
-                            >
-                              <div className="flex items-center gap-2">
-                                <span
-                                  className={`flex-shrink-0 h-1.5 w-1.5 block rounded-full`}
-                                  style={{
-                                    backgroundColor: issue.state_detail.color,
-                                  }}
-                                />
-                                <Link href={`/projects/${activeProject?.id}/issues/${issue.id}`}>
-                                  <a className="group relative flex items-center gap-2">
-                                    {properties.key && (
-                                      <span className="flex-shrink-0 text-xs text-gray-500">
-                                        {activeProject?.identifier}-{issue.sequence_id}
-                                      </span>
-                                    )}
-                                    <span className="">{issue.name}</span>
-                                    <div className="absolute bottom-full left-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md max-w-sm whitespace-nowrap">
-                                      <h5 className="font-medium mb-1">Name</h5>
-                                      <div>{issue.name}</div>
-                                    </div>
-                                  </a>
-                                </Link>
-                              </div>
-                              <div className="flex-shrink-0 flex items-center gap-x-1 gap-y-2 text-xs flex-wrap">
-                                {properties.priority && (
-                                  <div
-                                    className={`group relative flex-shrink-0 flex items-center gap-1 text-xs rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 capitalize ${
-                                      issue.priority === "urgent"
-                                        ? "bg-red-100 text-red-600"
-                                        : issue.priority === "high"
-                                        ? "bg-orange-100 text-orange-500"
-                                        : issue.priority === "medium"
-                                        ? "bg-yellow-100 text-yellow-500"
-                                        : issue.priority === "low"
-                                        ? "bg-green-100 text-green-500"
-                                        : "bg-gray-100"
-                                    }`}
-                                  >
-                                    {/* {getPriorityIcon(issue.priority ?? "")} */}
-                                    {issue.priority ?? "None"}
-                                    <div className="absolute bottom-full right-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
-                                      <h5 className="font-medium mb-1 text-gray-900">Priority</h5>
-                                      <div
-                                        className={`capitalize ${
-                                          issue.priority === "urgent"
-                                            ? "text-red-600"
-                                            : issue.priority === "high"
-                                            ? "text-orange-500"
-                                            : issue.priority === "medium"
-                                            ? "text-yellow-500"
-                                            : issue.priority === "low"
-                                            ? "text-green-500"
-                                            : ""
-                                        }`}
-                                      >
-                                        {issue.priority ?? "None"}
-                                      </div>
-                                    </div>
-                                  </div>
-                                )}
-                                {properties.state && (
-                                  <div className="group relative flex-shrink-0 flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300">
-                                    <span
-                                      className="flex-shrink-0 h-1.5 w-1.5 rounded-full"
-                                      style={{
-                                        backgroundColor: issue?.state_detail?.color,
-                                      }}
-                                    ></span>
-                                    {addSpaceIfCamelCase(issue?.state_detail.name)}
-                                    <div className="absolute bottom-full right-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
-                                      <h5 className="font-medium mb-1">State</h5>
-                                      <div>{issue?.state_detail.name}</div>
-                                    </div>
-                                  </div>
-                                )}
-                                {properties.start_date && (
-                                  <div className="group relative flex-shrink-0 flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300">
-                                    <CalendarDaysIcon className="h-4 w-4" />
-                                    {issue.start_date
-                                      ? renderShortNumericDateFormat(issue.start_date)
-                                      : "N/A"}
-                                    <div className="absolute bottom-full right-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
-                                      <h5 className="font-medium mb-1">Started at</h5>
-                                      <div>
-                                        {renderShortNumericDateFormat(issue.start_date ?? "")}
-                                      </div>
-                                    </div>
-                                  </div>
-                                )}
-                                {properties.target_date && (
-                                  <div
-                                    className={`group relative flex-shrink-0 group flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300 ${
-                                      issue.target_date === null
-                                        ? ""
-                                        : issue.target_date < new Date().toISOString()
-                                        ? "text-red-600"
-                                        : findHowManyDaysLeft(issue.target_date) <= 3 &&
-                                          "text-orange-400"
-                                    }`}
-                                  >
-                                    <CalendarDaysIcon className="h-4 w-4" />
-                                    {issue.target_date
-                                      ? renderShortNumericDateFormat(issue.target_date)
-                                      : "N/A"}
-                                    <div className="absolute bottom-full right-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
-                                      <h5 className="font-medium mb-1 text-gray-900">
-                                        Target date
-                                      </h5>
-                                      <div>
-                                        {renderShortNumericDateFormat(issue.target_date ?? "")}
-                                      </div>
-                                      <div>
-                                        {issue.target_date &&
-                                          (issue.target_date < new Date().toISOString()
-                                            ? `Target date has passed by ${findHowManyDaysLeft(
-                                                issue.target_date
-                                              )} days`
-                                            : findHowManyDaysLeft(issue.target_date) <= 3
-                                            ? `Target date is in ${findHowManyDaysLeft(
-                                                issue.target_date
-                                              )} days`
-                                            : "Target date")}
-                                      </div>
-                                    </div>
-                                  </div>
-                                )}
-                                <CustomMenu width="auto" ellipsis>
-                                  <CustomMenu.MenuItem
-                                    onClick={() => openCreateIssueModal(issue, "edit")}
-                                  >
-                                    Edit
-                                  </CustomMenu.MenuItem>
-                                  <CustomMenu.MenuItem
-                                    onClick={() => removeIssueFromCycle(issue.bridge ?? "")}
-                                  >
-                                    Remove from cycle
-                                  </CustomMenu.MenuItem>
-                                  <CustomMenu.MenuItem>Delete permanently</CustomMenu.MenuItem>
-                                </CustomMenu>
-                              </div>
-                            </div>
-                          );
-                        })
+        return (
+          <Disclosure key={singleGroup} as="div" defaultOpen>
+            {({ open }) => (
+              <div className="bg-white rounded-lg">
+                <div className="bg-gray-100 px-4 py-3 rounded-t-lg">
+                  <Disclosure.Button>
+                    <div className="flex items-center gap-x-2">
+                      <span>
+                        <ChevronDownIcon
+                          className={`h-4 w-4 text-gray-500 ${!open ? "transform -rotate-90" : ""}`}
+                        />
+                      </span>
+                      {selectedGroup !== null ? (
+                        <h2 className="font-medium leading-5 capitalize">
+                          {singleGroup === null || singleGroup === "null"
+                            ? selectedGroup === "priority" && "No priority"
+                            : addSpaceIfCamelCase(singleGroup)}
+                        </h2>
                       ) : (
-                        <p className="text-sm px-4 py-3 text-gray-500">No issues.</p>
-                      )
-                    ) : (
-                      <div className="h-full w-full flex items-center justify-center">
-                        <Spinner />
-                      </div>
-                    )}
-                  </div>
-                </Disclosure.Panel>
-              </Transition>
-              <div className="p-3">
-                <button
-                  type="button"
-                  className="flex items-center gap-1 px-2 py-1 rounded hover:bg-gray-100 text-xs font-medium"
-                  // onClick={() => {
-                  //   setIsCreateIssuesModalOpen(true);
-                  //   if (selectedGroup !== null) {
-                  //     const stateId =
-                  //       selectedGroup === "state_detail.name"
-                  //         ? states?.find((s) => s.name === singleGroup)?.id ?? null
-                  //         : null;
-                  //     setPreloadedData({
-                  //       state: stateId !== null ? stateId : undefined,
-                  //       [selectedGroup]: singleGroup,
-                  //       actionType: "createIssue",
-                  //     });
-                  //   }
-                  // }}
+                        <h2 className="font-medium leading-5">All Issues</h2>
+                      )}
+                      <p className="text-gray-500 text-sm">
+                        {groupedByIssues[singleGroup as keyof IIssue].length}
+                      </p>
+                    </div>
+                  </Disclosure.Button>
+                </div>
+                <Transition
+                  show={open}
+                  enter="transition duration-100 ease-out"
+                  enterFrom="transform opacity-0"
+                  enterTo="transform opacity-100"
+                  leave="transition duration-75 ease-out"
+                  leaveFrom="transform opacity-100"
+                  leaveTo="transform opacity-0"
                 >
-                  <PlusIcon className="h-3 w-3" />
-                  Add issue
-                </button>
+                  <Disclosure.Panel>
+                    <div className="divide-y-2">
+                      {groupedByIssues[singleGroup] ? (
+                        groupedByIssues[singleGroup].length > 0 ? (
+                          groupedByIssues[singleGroup].map((issue) => {
+                            const assignees = [
+                              ...(issue?.assignees_list ?? []),
+                              ...(issue?.assignees ?? []),
+                            ]?.map((assignee) => {
+                              const tempPerson = people?.find(
+                                (p) => p.member.id === assignee
+                              )?.member;
+
+                              return {
+                                avatar: tempPerson?.avatar,
+                                first_name: tempPerson?.first_name,
+                                email: tempPerson?.email,
+                              };
+                            });
+
+                            return (
+                              <div
+                                key={issue.id}
+                                className="px-4 py-3 text-sm rounded flex justify-between items-center gap-2"
+                              >
+                                <div className="flex items-center gap-2">
+                                  <span
+                                    className={`flex-shrink-0 h-1.5 w-1.5 block rounded-full`}
+                                    style={{
+                                      backgroundColor: issue.state_detail.color,
+                                    }}
+                                  />
+                                  <Link href={`/projects/${activeProject?.id}/issues/${issue.id}`}>
+                                    <a className="group relative flex items-center gap-2">
+                                      {properties.key && (
+                                        <span className="flex-shrink-0 text-xs text-gray-500">
+                                          {activeProject?.identifier}-{issue.sequence_id}
+                                        </span>
+                                      )}
+                                      <span>{issue.name}</span>
+                                      {/* <div className="absolute bottom-full left-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md max-w-sm whitespace-nowrap">
+                                        <h5 className="font-medium mb-1">Name</h5>
+                                        <div>{issue.name}</div>
+                                      </div> */}
+                                    </a>
+                                  </Link>
+                                </div>
+                                <div className="flex-shrink-0 flex items-center gap-x-1 gap-y-2 text-xs flex-wrap">
+                                  {properties.priority && (
+                                    <div
+                                      className={`group relative flex-shrink-0 flex items-center gap-1 text-xs rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 capitalize ${
+                                        issue.priority === "urgent"
+                                          ? "bg-red-100 text-red-600"
+                                          : issue.priority === "high"
+                                          ? "bg-orange-100 text-orange-500"
+                                          : issue.priority === "medium"
+                                          ? "bg-yellow-100 text-yellow-500"
+                                          : issue.priority === "low"
+                                          ? "bg-green-100 text-green-500"
+                                          : "bg-gray-100"
+                                      }`}
+                                    >
+                                      {/* {getPriorityIcon(issue.priority ?? "")} */}
+                                      {issue.priority ?? "None"}
+                                      <div className="absolute bottom-full right-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
+                                        <h5 className="font-medium mb-1 text-gray-900">Priority</h5>
+                                        <div
+                                          className={`capitalize ${
+                                            issue.priority === "urgent"
+                                              ? "text-red-600"
+                                              : issue.priority === "high"
+                                              ? "text-orange-500"
+                                              : issue.priority === "medium"
+                                              ? "text-yellow-500"
+                                              : issue.priority === "low"
+                                              ? "text-green-500"
+                                              : ""
+                                          }`}
+                                        >
+                                          {issue.priority ?? "None"}
+                                        </div>
+                                      </div>
+                                    </div>
+                                  )}
+                                  {properties.state && (
+                                    <div className="group relative flex-shrink-0 flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300">
+                                      <span
+                                        className="flex-shrink-0 h-1.5 w-1.5 rounded-full"
+                                        style={{
+                                          backgroundColor: issue?.state_detail?.color,
+                                        }}
+                                      ></span>
+                                      {addSpaceIfCamelCase(issue?.state_detail.name)}
+                                      <div className="absolute bottom-full right-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
+                                        <h5 className="font-medium mb-1">State</h5>
+                                        <div>{issue?.state_detail.name}</div>
+                                      </div>
+                                    </div>
+                                  )}
+                                  {properties.start_date && (
+                                    <div className="group relative flex-shrink-0 flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300">
+                                      <CalendarDaysIcon className="h-4 w-4" />
+                                      {issue.start_date
+                                        ? renderShortNumericDateFormat(issue.start_date)
+                                        : "N/A"}
+                                      <div className="absolute bottom-full right-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
+                                        <h5 className="font-medium mb-1">Started at</h5>
+                                        <div>
+                                          {renderShortNumericDateFormat(issue.start_date ?? "")}
+                                        </div>
+                                      </div>
+                                    </div>
+                                  )}
+                                  {properties.due_date && (
+                                    <div
+                                      className={`group relative flex-shrink-0 group flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300 ${
+                                        issue.target_date === null
+                                          ? ""
+                                          : issue.target_date < new Date().toISOString()
+                                          ? "text-red-600"
+                                          : findHowManyDaysLeft(issue.target_date) <= 3 &&
+                                            "text-orange-400"
+                                      }`}
+                                    >
+                                      <CalendarDaysIcon className="h-4 w-4" />
+                                      {issue.target_date
+                                        ? renderShortNumericDateFormat(issue.target_date)
+                                        : "N/A"}
+                                      <div className="absolute bottom-full right-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
+                                        <h5 className="font-medium mb-1 text-gray-900">Due date</h5>
+                                        <div>
+                                          {renderShortNumericDateFormat(issue.target_date ?? "")}
+                                        </div>
+                                        <div>
+                                          {issue.target_date &&
+                                            (issue.target_date < new Date().toISOString()
+                                              ? `Due date has passed by ${findHowManyDaysLeft(
+                                                  issue.target_date
+                                                )} days`
+                                              : findHowManyDaysLeft(issue.target_date) <= 3
+                                              ? `Due date is in ${findHowManyDaysLeft(
+                                                  issue.target_date
+                                                )} days`
+                                              : "Due date")}
+                                        </div>
+                                      </div>
+                                    </div>
+                                  )}
+                                  <CustomMenu width="auto" ellipsis>
+                                    <CustomMenu.MenuItem
+                                      onClick={() => openCreateIssueModal(issue, "edit")}
+                                    >
+                                      Edit
+                                    </CustomMenu.MenuItem>
+                                    <CustomMenu.MenuItem
+                                      onClick={() => removeIssueFromCycle(issue.bridge ?? "")}
+                                    >
+                                      Remove from cycle
+                                    </CustomMenu.MenuItem>
+                                    <CustomMenu.MenuItem>Delete permanently</CustomMenu.MenuItem>
+                                  </CustomMenu>
+                                </div>
+                              </div>
+                            );
+                          })
+                        ) : (
+                          <p className="text-sm px-4 py-3 text-gray-500">No issues.</p>
+                        )
+                      ) : (
+                        <div className="h-full w-full flex items-center justify-center">
+                          <Spinner />
+                        </div>
+                      )}
+                    </div>
+                  </Disclosure.Panel>
+                </Transition>
+                <div className="p-3">
+                  <CustomMenu
+                    label={
+                      <span className="flex items-center gap-1">
+                        <PlusIcon className="h-3 w-3" />
+                        Add issue
+                      </span>
+                    }
+                    optionsPosition="left"
+                    withoutBorder
+                  >
+                    <CustomMenu.MenuItem
+                      onClick={() => {
+                        openCreateIssueModal();
+                        if (selectedGroup !== null) {
+                          setPreloadedData({
+                            state: stateId !== null ? stateId : undefined,
+                            [selectedGroup]: singleGroup,
+                            actionType: "createIssue",
+                          });
+                        }
+                      }}
+                    >
+                      Create new
+                    </CustomMenu.MenuItem>
+                    <CustomMenu.MenuItem onClick={() => openIssuesListModal()}>
+                      Add an existing issue
+                    </CustomMenu.MenuItem>
+                  </CustomMenu>
+                </div>
               </div>
-            </div>
-          )}
-        </Disclosure>
-      ))}
+            )}
+          </Disclosure>
+        );
+      })}
     </div>
-    // <button
-    //                     type="button"
-    //                     className="text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full"
-    //                     onClick={() => selectSprint({ ...cycle, actionType: "edit" })}
-    //                   >
-    //                     Edit
-    //                   </button>
-    //                 </Menu.Item>
-    //                 <Menu.Item>
-    //                   <button
-    //                     type="button"
-    //                     className="text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full"
-    //                     onClick={() => selectSprint({ ...cycle, actionType: "delete" })}
-    //                   >
-    //                     Delete
-    //                   </button>
-    //                 </Menu.Item
   );
 };
 
diff --git a/apps/app/components/project/cycles/stats-view/single-stat.tsx b/apps/app/components/project/cycles/stats-view/single-stat.tsx
index f2382e279..dba327e3b 100644
--- a/apps/app/components/project/cycles/stats-view/single-stat.tsx
+++ b/apps/app/components/project/cycles/stats-view/single-stat.tsx
@@ -63,43 +63,50 @@ const SingleStat: React.FC<Props> = ({ cycle, handleEditCycle, handleDeleteCycle
 
   return (
     <>
-      <div className="bg-white p-3">
+      <div className="border bg-white p-3 rounded-md">
         <div className="grid grid-cols-8 gap-2 divide-x">
           <div className="col-span-3 space-y-3">
-            <Link href={`/projects/${activeProject?.id}/cycles/${cycle.id}`}>
-              <a className="flex justify-between items-center">
-                <h2 className="font-medium">{cycle.name}</h2>
+            <div className="flex justify-between items-center gap-2">
+              <Link href={`/projects/${activeProject?.id}/cycles/${cycle.id}`}>
+                <a>
+                  <h2 className="font-medium">{cycle.name}</h2>
+                </a>
+              </Link>
+              <div className="flex items-center gap-2">
                 <div className="flex items-center gap-2">
-                  <span className="text-xs bg-gray-100 px-2 py-1 rounded-xl">
-                    {today.getDate() < startDate.getDate()
-                      ? "Not started"
-                      : today.getDate() > endDate.getDate()
-                      ? "Over"
-                      : "Active"}
+                  <span
+                    className={`text-xs border px-3 py-0.5 rounded-xl ${
+                      today < startDate
+                        ? "text-orange-500 border-orange-500"
+                        : today > endDate
+                        ? "text-red-500 border-red-500"
+                        : "text-green-500 border-green-500"
+                    }`}
+                  >
+                    {today < startDate ? "Not started" : today > endDate ? "Over" : "Active"}
                   </span>
-                  <CustomMenu width="auto" ellipsis>
-                    <CustomMenu.MenuItem onClick={handleEditCycle}>Edit cycle</CustomMenu.MenuItem>
-                    <CustomMenu.MenuItem onClick={handleDeleteCycle}>
-                      Delete cycle permanently
-                    </CustomMenu.MenuItem>
-                  </CustomMenu>
                 </div>
-              </a>
-            </Link>
-
-            <div className="grid grid-cols-2 gap-x-2 gap-y-3 text-xs">
+                <CustomMenu width="auto" ellipsis>
+                  <CustomMenu.MenuItem onClick={handleEditCycle}>Edit cycle</CustomMenu.MenuItem>
+                  <CustomMenu.MenuItem onClick={handleDeleteCycle}>
+                    Delete cycle permanently
+                  </CustomMenu.MenuItem>
+                </CustomMenu>
+              </div>
+            </div>
+            <div className="grid grid-cols-3 gap-x-2 gap-y-3 text-xs">
               <div className="flex items-center gap-2 text-gray-500">
                 <CalendarDaysIcon className="h-4 w-4" />
                 Cycle dates
               </div>
-              <div>
+              <div className="col-span-2">
                 {renderShortNumericDateFormat(startDate)} - {renderShortNumericDateFormat(endDate)}
               </div>
               <div className="flex items-center gap-2 text-gray-500">
                 <UserIcon className="h-4 w-4" />
                 Created by
               </div>
-              <div className="flex items-center gap-2">
+              <div className="col-span-2 flex items-center gap-2">
                 {cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? (
                   <Image
                     src={cycle.owned_by.avatar}
@@ -119,7 +126,7 @@ const SingleStat: React.FC<Props> = ({ cycle, handleEditCycle, handleDeleteCycle
                 <CalendarDaysIcon className="h-4 w-4" />
                 Active members
               </div>
-              <div></div>
+              <div className="col-span-2"></div>
             </div>
             <div className="flex items-center gap-2">
               <Button theme="secondary" className="flex items-center gap-2" disabled>
@@ -157,7 +164,9 @@ const SingleStat: React.FC<Props> = ({ cycle, handleEditCycle, handleDeleteCycle
                         <span className="text-gray-500">
                           -{" "}
                           {cycleIssues && cycleIssues.length > 0
-                            ? `${(groupedIssues[group].length / cycleIssues.length) * 100}%`
+                            ? `${Math.round(
+                                (groupedIssues[group].length / cycleIssues.length) * 100
+                              )}%`
                             : "0%"}
                         </span>
                       </span>
diff --git a/apps/app/components/project/issues/BoardView/index.tsx b/apps/app/components/project/issues/BoardView/index.tsx
index 86d54c526..33ee73cf6 100644
--- a/apps/app/components/project/issues/BoardView/index.tsx
+++ b/apps/app/components/project/issues/BoardView/index.tsx
@@ -16,7 +16,7 @@ import { STATE_LIST } from "constants/fetch-keys";
 // components
 import SingleBoard from "components/project/issues/BoardView/single-board";
 import StrictModeDroppable from "components/dnd/StrictModeDroppable";
-import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal";
+import CreateUpdateIssuesModal from "components/project/issues/create-update-issue-modal";
 // ui
 import { Spinner } from "ui";
 // types
diff --git a/apps/app/components/project/issues/BoardView/single-board.tsx b/apps/app/components/project/issues/BoardView/single-board.tsx
index 18c16304b..353c02a82 100644
--- a/apps/app/components/project/issues/BoardView/single-board.tsx
+++ b/apps/app/components/project/issues/BoardView/single-board.tsx
@@ -1,8 +1,5 @@
 // react
 import React, { useState } from "react";
-// next
-import Link from "next/link";
-import Image from "next/image";
 // swr
 import useSWR from "swr";
 // react-beautiful-dnd
@@ -12,30 +9,18 @@ import StrictModeDroppable from "components/dnd/StrictModeDroppable";
 import workspaceService from "lib/services/workspace.service";
 // hooks
 import useUser from "lib/hooks/useUser";
-// headless ui
-import { Listbox, Transition } from "@headlessui/react";
 // icons
 import {
   ArrowsPointingInIcon,
   ArrowsPointingOutIcon,
-  CalendarDaysIcon,
   EllipsisHorizontalIcon,
   PlusIcon,
-  TrashIcon,
 } from "@heroicons/react/24/outline";
-import User from "public/user.png";
-// common
-import { PRIORITIES } from "constants/";
-import {
-  addSpaceIfCamelCase,
-  classNames,
-  findHowManyDaysLeft,
-  renderShortNumericDateFormat,
-} from "constants/common";
+import { addSpaceIfCamelCase } from "constants/common";
 import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
-import { getPriorityIcon } from "constants/global";
 // types
 import { IIssue, Properties, NestedKeyOf, IWorkspaceMember } from "types";
+import SingleIssue from "components/common/board-view/single-issue";
 
 type Props = {
   selectedGroup: NestedKeyOf<IIssue> | null;
@@ -78,7 +63,7 @@ const SingleBoard: React.FC<Props> = ({
   // Collapse/Expand
   const [show, setShow] = useState(true);
 
-  const { activeProject, activeWorkspace, states } = useUser();
+  const { activeWorkspace } = useUser();
 
   if (selectedGroup === "priority")
     groupTitle === "high"
@@ -206,367 +191,19 @@ const SingleBoard: React.FC<Props> = ({
                       <Draggable key={childIssue.id} draggableId={childIssue.id} index={index}>
                         {(provided, snapshot) => (
                           <div
-                            className={`border rounded bg-white shadow-sm ${
-                              snapshot.isDragging ? "border-theme shadow-lg bg-indigo-50" : ""
-                            }`}
                             ref={provided.innerRef}
                             {...provided.draggableProps}
+                            {...provided.dragHandleProps}
                           >
-                            <div
-                              className="group/card relative p-2 select-none"
-                              {...provided.dragHandleProps}
-                            >
-                              <div className="opacity-0 group-hover/card:opacity-100 absolute top-1 right-1">
-                                <button
-                                  type="button"
-                                  className="h-7 w-7 p-1 grid place-items-center rounded text-red-500 hover:bg-red-50 duration-300 outline-none"
-                                  onClick={() => handleDeleteIssue(childIssue.id)}
-                                >
-                                  <TrashIcon className="h-4 w-4" />
-                                </button>
-                              </div>
-                              <Link
-                                href={`/projects/${childIssue.project}/issues/${childIssue.id}`}
-                              >
-                                <a>
-                                  {properties.key && (
-                                    <div className="text-xs font-medium text-gray-500 mb-2">
-                                      {activeProject?.identifier}-{childIssue.sequence_id}
-                                    </div>
-                                  )}
-                                  <h5
-                                    className="group-hover:text-theme text-sm break-all mb-3"
-                                    style={{ lineClamp: 3, WebkitLineClamp: 3 }}
-                                  >
-                                    {childIssue.name}
-                                  </h5>
-                                </a>
-                              </Link>
-                              <div className="flex items-center gap-x-1 gap-y-2 text-xs flex-wrap">
-                                {properties.priority && (
-                                  <Listbox
-                                    as="div"
-                                    value={childIssue.priority}
-                                    onChange={(data: string) => {
-                                      partialUpdateIssue({ priority: data }, childIssue.id);
-                                    }}
-                                    className="group relative flex-shrink-0"
-                                  >
-                                    {({ open }) => (
-                                      <>
-                                        <div>
-                                          <Listbox.Button
-                                            className={`rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 capitalize ${
-                                              childIssue.priority === "urgent"
-                                                ? "bg-red-100 text-red-600"
-                                                : childIssue.priority === "high"
-                                                ? "bg-orange-100 text-orange-500"
-                                                : childIssue.priority === "medium"
-                                                ? "bg-yellow-100 text-yellow-500"
-                                                : childIssue.priority === "low"
-                                                ? "bg-green-100 text-green-500"
-                                                : "bg-gray-100"
-                                            }`}
-                                          >
-                                            {childIssue.priority ?? "None"}
-                                          </Listbox.Button>
-
-                                          <Transition
-                                            show={open}
-                                            as={React.Fragment}
-                                            leave="transition ease-in duration-100"
-                                            leaveFrom="opacity-100"
-                                            leaveTo="opacity-0"
-                                          >
-                                            <Listbox.Options className="absolute z-10 mt-1 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
-                                              {PRIORITIES?.map((priority) => (
-                                                <Listbox.Option
-                                                  key={priority}
-                                                  className={({ active }) =>
-                                                    classNames(
-                                                      active ? "bg-indigo-50" : "bg-white",
-                                                      "cursor-pointer capitalize select-none px-3 py-2"
-                                                    )
-                                                  }
-                                                  value={priority}
-                                                >
-                                                  {priority}
-                                                </Listbox.Option>
-                                              ))}
-                                            </Listbox.Options>
-                                          </Transition>
-                                        </div>
-                                        <div className="absolute bottom-full right-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
-                                          <h5 className="font-medium mb-1 text-gray-900">
-                                            Priority
-                                          </h5>
-                                          <div
-                                            className={`capitalize ${
-                                              childIssue.priority === "urgent"
-                                                ? "text-red-600"
-                                                : childIssue.priority === "high"
-                                                ? "text-orange-500"
-                                                : childIssue.priority === "medium"
-                                                ? "text-yellow-500"
-                                                : childIssue.priority === "low"
-                                                ? "text-green-500"
-                                                : ""
-                                            }`}
-                                          >
-                                            {childIssue.priority ?? "None"}
-                                          </div>
-                                        </div>
-                                      </>
-                                    )}
-                                  </Listbox>
-                                )}
-                                {properties.state && (
-                                  <Listbox
-                                    as="div"
-                                    value={childIssue.state}
-                                    onChange={(data: string) => {
-                                      partialUpdateIssue({ state: data }, childIssue.id);
-                                    }}
-                                    className="group relative flex-shrink-0"
-                                  >
-                                    {({ open }) => (
-                                      <>
-                                        <div>
-                                          <Listbox.Button className="flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300">
-                                            <span
-                                              className="flex-shrink-0 h-1.5 w-1.5 rounded-full"
-                                              style={{
-                                                backgroundColor: childIssue.state_detail.color,
-                                              }}
-                                            ></span>
-                                            {addSpaceIfCamelCase(childIssue.state_detail.name)}
-                                          </Listbox.Button>
-
-                                          <Transition
-                                            show={open}
-                                            as={React.Fragment}
-                                            leave="transition ease-in duration-100"
-                                            leaveFrom="opacity-100"
-                                            leaveTo="opacity-0"
-                                          >
-                                            <Listbox.Options className="absolute z-10 mt-1 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
-                                              {states?.map((state) => (
-                                                <Listbox.Option
-                                                  key={state.id}
-                                                  className={({ active }) =>
-                                                    classNames(
-                                                      active ? "bg-indigo-50" : "bg-white",
-                                                      "cursor-pointer select-none px-3 py-2"
-                                                    )
-                                                  }
-                                                  value={state.id}
-                                                >
-                                                  {addSpaceIfCamelCase(state.name)}
-                                                </Listbox.Option>
-                                              ))}
-                                            </Listbox.Options>
-                                          </Transition>
-                                        </div>
-                                        <div className="absolute bottom-full right-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
-                                          <h5 className="font-medium mb-1">State</h5>
-                                          <div>{childIssue.state_detail.name}</div>
-                                        </div>
-                                      </>
-                                    )}
-                                  </Listbox>
-                                )}
-                                {properties.start_date && (
-                                  <div className="group flex-shrink-0 flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300">
-                                    <CalendarDaysIcon className="h-4 w-4" />
-                                    {childIssue.start_date
-                                      ? renderShortNumericDateFormat(childIssue.start_date)
-                                      : "N/A"}
-                                    <div className="fixed -translate-y-3/4 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
-                                      <h5 className="font-medium mb-1">Started at</h5>
-                                      <div>
-                                        {renderShortNumericDateFormat(childIssue.start_date ?? "")}
-                                      </div>
-                                    </div>
-                                  </div>
-                                )}
-                                {properties.target_date && (
-                                  <div
-                                    className={`group flex-shrink-0 group flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300 ${
-                                      childIssue.target_date === null
-                                        ? ""
-                                        : childIssue.target_date < new Date().toISOString()
-                                        ? "text-red-600"
-                                        : findHowManyDaysLeft(childIssue.target_date) <= 3 &&
-                                          "text-orange-400"
-                                    }`}
-                                  >
-                                    <CalendarDaysIcon className="h-4 w-4" />
-                                    {childIssue.target_date
-                                      ? renderShortNumericDateFormat(childIssue.target_date)
-                                      : "N/A"}
-                                    <div className="fixed -translate-y-3/4 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
-                                      <h5 className="font-medium mb-1 text-gray-900">
-                                        Target date
-                                      </h5>
-                                      <div>
-                                        {renderShortNumericDateFormat(childIssue.target_date ?? "")}
-                                      </div>
-                                      <div>
-                                        {childIssue.target_date &&
-                                          (childIssue.target_date < new Date().toISOString()
-                                            ? `Target date has passed by ${findHowManyDaysLeft(
-                                                childIssue.target_date
-                                              )} days`
-                                            : findHowManyDaysLeft(childIssue.target_date) <= 3
-                                            ? `Target date is in ${findHowManyDaysLeft(
-                                                childIssue.target_date
-                                              )} days`
-                                            : "Target date")}
-                                      </div>
-                                    </div>
-                                  </div>
-                                )}
-                                {properties.assignee && (
-                                  <Listbox
-                                    as="div"
-                                    value={childIssue.assignees}
-                                    onChange={(data: any) => {
-                                      const newData = childIssue.assignees ?? [];
-                                      if (newData.includes(data)) {
-                                        newData.splice(newData.indexOf(data), 1);
-                                      } else {
-                                        newData.push(data);
-                                      }
-                                      partialUpdateIssue(
-                                        { assignees_list: newData },
-                                        childIssue.id
-                                      );
-                                    }}
-                                    className="group relative flex-shrink-0"
-                                  >
-                                    {({ open }) => (
-                                      <>
-                                        <div>
-                                          <Listbox.Button>
-                                            <div className="flex items-center gap-1 text-xs cursor-pointer">
-                                              {assignees.length > 0 ? (
-                                                assignees.map((assignee, index: number) => (
-                                                  <div
-                                                    key={index}
-                                                    className={`relative z-[1] h-5 w-5 rounded-full ${
-                                                      index !== 0 ? "-ml-2.5" : ""
-                                                    }`}
-                                                  >
-                                                    {assignee.avatar && assignee.avatar !== "" ? (
-                                                      <div className="h-5 w-5 border-2 bg-white border-white rounded-full">
-                                                        <Image
-                                                          src={assignee.avatar}
-                                                          height="100%"
-                                                          width="100%"
-                                                          className="rounded-full"
-                                                          alt={assignee?.first_name}
-                                                        />
-                                                      </div>
-                                                    ) : (
-                                                      <div
-                                                        className={`h-5 w-5 bg-gray-700 text-white border-2 border-white grid place-items-center rounded-full`}
-                                                      >
-                                                        {assignee.first_name?.charAt(0)}
-                                                      </div>
-                                                    )}
-                                                  </div>
-                                                ))
-                                              ) : (
-                                                <div className="h-5 w-5 border-2 bg-white border-white rounded-full">
-                                                  <Image
-                                                    src={User}
-                                                    height="100%"
-                                                    width="100%"
-                                                    className="rounded-full"
-                                                    alt="No user"
-                                                  />
-                                                </div>
-                                              )}
-                                            </div>
-                                          </Listbox.Button>
-
-                                          <Transition
-                                            show={open}
-                                            as={React.Fragment}
-                                            leave="transition ease-in duration-100"
-                                            leaveFrom="opacity-100"
-                                            leaveTo="opacity-0"
-                                          >
-                                            <Listbox.Options className="absolute left-0 z-10 mt-1 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
-                                              {people?.map((person) => (
-                                                <Listbox.Option
-                                                  key={person.id}
-                                                  className={({ active }) =>
-                                                    classNames(
-                                                      active ? "bg-indigo-50" : "bg-white",
-                                                      "cursor-pointer select-none p-2"
-                                                    )
-                                                  }
-                                                  value={person.member.id}
-                                                >
-                                                  <div
-                                                    className={`flex items-center gap-x-1 ${
-                                                      assignees.includes({
-                                                        avatar: person.member.avatar,
-                                                        first_name: person.member.first_name,
-                                                        email: person.member.email,
-                                                      })
-                                                        ? "font-medium"
-                                                        : "font-normal"
-                                                    }`}
-                                                  >
-                                                    {person.member.avatar &&
-                                                    person.member.avatar !== "" ? (
-                                                      <div className="relative h-4 w-4">
-                                                        <Image
-                                                          src={person.member.avatar}
-                                                          alt="avatar"
-                                                          className="rounded-full"
-                                                          layout="fill"
-                                                          objectFit="cover"
-                                                        />
-                                                      </div>
-                                                    ) : (
-                                                      <div className="h-4 w-4 bg-gray-700 text-white grid place-items-center capitalize rounded-full">
-                                                        {person.member.first_name &&
-                                                        person.member.first_name !== ""
-                                                          ? person.member.first_name.charAt(0)
-                                                          : person.member.email.charAt(0)}
-                                                      </div>
-                                                    )}
-                                                    <p>
-                                                      {person.member.first_name &&
-                                                      person.member.first_name !== ""
-                                                        ? person.member.first_name
-                                                        : person.member.email}
-                                                    </p>
-                                                  </div>
-                                                </Listbox.Option>
-                                              ))}
-                                            </Listbox.Options>
-                                          </Transition>
-                                        </div>
-                                        <div className="absolute bottom-full left-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
-                                          <h5 className="font-medium mb-1">Assigned to</h5>
-                                          <div>
-                                            {childIssue.assignee_details?.length > 0
-                                              ? childIssue.assignee_details
-                                                  .map((assignee) => assignee.first_name)
-                                                  .join(", ")
-                                              : "No one"}
-                                          </div>
-                                        </div>
-                                      </>
-                                    )}
-                                  </Listbox>
-                                )}
-                              </div>
-                            </div>
+                            <SingleIssue
+                              issue={childIssue}
+                              properties={properties}
+                              snapshot={snapshot}
+                              people={people}
+                              assignees={assignees}
+                              handleDeleteIssue={handleDeleteIssue}
+                              partialUpdateIssue={partialUpdateIssue}
+                            />
                           </div>
                         )}
                       </Draggable>
diff --git a/apps/app/components/project/issues/BoardView/state/ConfirmStateDeletion.tsx b/apps/app/components/project/issues/BoardView/state/confirm-state-delete.tsx
similarity index 82%
rename from apps/app/components/project/issues/BoardView/state/ConfirmStateDeletion.tsx
rename to apps/app/components/project/issues/BoardView/state/confirm-state-delete.tsx
index 448c50acc..8b884788c 100644
--- a/apps/app/components/project/issues/BoardView/state/ConfirmStateDeletion.tsx
+++ b/apps/app/components/project/issues/BoardView/state/confirm-state-delete.tsx
@@ -9,6 +9,8 @@ import stateServices from "lib/services/state.service";
 import { STATE_LIST } from "constants/fetch-keys";
 // hooks
 import useUser from "lib/hooks/useUser";
+// common
+import { groupBy } from "constants/common";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // ui
@@ -18,25 +20,27 @@ import { Button } from "ui";
 import type { IState } from "types";
 type Props = {
   isOpen: boolean;
-  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  data?: IState;
+  onClose: () => void;
+  data: IState | null;
 };
 
-const ConfirmStateDeletion: React.FC<Props> = ({ isOpen, setIsOpen, data }) => {
+const ConfirmStateDeletion: React.FC<Props> = ({ isOpen, onClose, data }) => {
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
-  const { activeWorkspace } = useUser();
+  const [issuesWithThisStateExist, setIssuesWithThisStateExist] = useState(true);
+
+  const { activeWorkspace, issues } = useUser();
 
   const cancelButtonRef = useRef(null);
 
   const handleClose = () => {
-    setIsOpen(false);
+    onClose();
     setIsDeleteLoading(false);
   };
 
   const handleDeletion = async () => {
     setIsDeleteLoading(true);
-    if (!data || !activeWorkspace) return;
+    if (!data || !activeWorkspace || issuesWithThisStateExist) return;
     await stateServices
       .deleteState(activeWorkspace.slug, data.project, data.id)
       .then(() => {
@@ -53,9 +57,11 @@ const ConfirmStateDeletion: React.FC<Props> = ({ isOpen, setIsOpen, data }) => {
       });
   };
 
+  const groupedIssues = groupBy(issues?.results ?? [], "state");
+
   useEffect(() => {
-    data && setIsOpen(true);
-  }, [data, setIsOpen]);
+    if (data) setIssuesWithThisStateExist(!!groupedIssues[data.id]);
+  }, [groupedIssues, data]);
 
   return (
     <Transition.Root show={isOpen} as={React.Fragment}>
@@ -109,6 +115,14 @@ const ConfirmStateDeletion: React.FC<Props> = ({ isOpen, setIsOpen, data }) => {
                           This action cannot be undone.
                         </p>
                       </div>
+                      <div className="mt-2">
+                        {issuesWithThisStateExist && (
+                          <p className="text-sm text-red-500">
+                            There are issues with this state. Please move them to another state
+                            before deleting this state.
+                          </p>
+                        )}
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -117,7 +131,7 @@ const ConfirmStateDeletion: React.FC<Props> = ({ isOpen, setIsOpen, data }) => {
                     type="button"
                     onClick={handleDeletion}
                     theme="danger"
-                    disabled={isDeleteLoading}
+                    disabled={isDeleteLoading || issuesWithThisStateExist}
                     className="inline-flex sm:ml-3"
                   >
                     {isDeleteLoading ? "Deleting..." : "Delete"}
diff --git a/apps/app/components/project/issues/BoardView/state/create-update-state-inline.tsx b/apps/app/components/project/issues/BoardView/state/create-update-state-inline.tsx
new file mode 100644
index 000000000..22f224c09
--- /dev/null
+++ b/apps/app/components/project/issues/BoardView/state/create-update-state-inline.tsx
@@ -0,0 +1,209 @@
+import React, { useEffect } from "react";
+// swr
+import { mutate } from "swr";
+// react hook form
+import { useForm, Controller } from "react-hook-form";
+// react color
+import { TwitterPicker } from "react-color";
+// headless
+import { Popover, Transition } from "@headlessui/react";
+// constants
+import { GROUP_CHOICES } from "constants/";
+import { STATE_LIST } from "constants/fetch-keys";
+// services
+import stateService from "lib/services/state.service";
+// ui
+import { Button, Input, Select, Spinner } from "ui";
+// types
+import type { IState } from "types";
+
+type Props = {
+  workspaceSlug?: string;
+  projectId?: string;
+  data: IState | null;
+  onClose: () => void;
+  selectedGroup: StateGroup | null;
+};
+
+export type StateGroup = "backlog" | "unstarted" | "started" | "completed" | "cancelled" | null;
+
+const defaultValues: Partial<IState> = {
+  name: "",
+  color: "#000000",
+  group: "backlog",
+};
+
+export const CreateUpdateStateInline: React.FC<Props> = ({
+  workspaceSlug,
+  projectId,
+  data,
+  onClose,
+  selectedGroup,
+}) => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+    setError,
+    watch,
+    reset,
+    control,
+  } = useForm<IState>({
+    defaultValues,
+  });
+
+  const handleClose = () => {
+    onClose();
+    reset({ name: "", color: "#000000", group: "backlog" });
+  };
+
+  const onSubmit = async (formData: IState) => {
+    if (!workspaceSlug || !projectId || isSubmitting) return;
+    const payload: IState = {
+      ...formData,
+    };
+    if (!data) {
+      await stateService
+        .createState(workspaceSlug, projectId, { ...payload })
+        .then((res) => {
+          mutate<IState[]>(STATE_LIST(projectId), (prevData) => [...(prevData ?? []), res], false);
+          handleClose();
+        })
+        .catch((err) => {
+          Object.keys(err).map((key) => {
+            setError(key as keyof IState, {
+              message: err[key].join(", "),
+            });
+          });
+        });
+    } else {
+      await stateService
+        .updateState(workspaceSlug, projectId, data.id, {
+          ...payload,
+        })
+        .then((res) => {
+          mutate<IState[]>(
+            STATE_LIST(projectId),
+            (prevData) => {
+              const newData = prevData?.map((item) => {
+                if (item.id === res.id) {
+                  return res;
+                }
+                return item;
+              });
+              return newData;
+            },
+            false
+          );
+          handleClose();
+        })
+        .catch((err) => {
+          Object.keys(err).map((key) => {
+            setError(key as keyof IState, {
+              message: err[key].join(", "),
+            });
+          });
+        });
+    }
+  };
+
+  useEffect(() => {
+    if (data === null) return;
+    reset(data);
+  }, [data, reset]);
+
+  useEffect(() => {
+    if (!data)
+      reset({
+        ...defaultValues,
+        group: selectedGroup ?? "backlog",
+      });
+  }, [selectedGroup, data, reset]);
+
+  return (
+    <div className="flex items-center gap-x-2 p-2 bg-gray-50">
+      <div className="flex-shrink-0 h-8 w-8">
+        <Popover className="relative w-full h-full flex justify-center items-center bg-gray-200 rounded-xl">
+          {({ open }) => (
+            <>
+              <Popover.Button
+                className={`group inline-flex items-center text-base font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 ${
+                  open ? "text-gray-900" : "text-gray-500"
+                }`}
+              >
+                {watch("color") && watch("color") !== "" && (
+                  <span
+                    className="w-4 h-4 rounded"
+                    style={{
+                      backgroundColor: watch("color") ?? "green",
+                    }}
+                  />
+                )}
+              </Popover.Button>
+
+              <Transition
+                as={React.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 top-full z-20 left-0 mt-3 px-2 w-screen max-w-xs sm:px-0">
+                  <Controller
+                    name="color"
+                    control={control}
+                    render={({ field: { value, onChange } }) => (
+                      <TwitterPicker color={value} onChange={(value) => onChange(value.hex)} />
+                    )}
+                  />
+                </Popover.Panel>
+              </Transition>
+            </>
+          )}
+        </Popover>
+      </div>
+      <Input
+        id="name"
+        name="name"
+        register={register}
+        placeholder="Enter state name"
+        validations={{
+          required: true,
+        }}
+        error={errors.name}
+        autoComplete="off"
+      />
+      {data && (
+        <Select
+          id="group"
+          name="group"
+          error={errors.group}
+          register={register}
+          validations={{
+            required: true,
+          }}
+          options={Object.keys(GROUP_CHOICES).map((key) => ({
+            value: key,
+            label: GROUP_CHOICES[key as keyof typeof GROUP_CHOICES],
+          }))}
+        />
+      )}
+      <Input
+        id="description"
+        name="description"
+        register={register}
+        placeholder="Enter state description"
+        error={errors.description}
+        autoComplete="off"
+      />
+      <Button theme="secondary" onClick={handleClose}>
+        Cancel
+      </Button>
+      <Button theme="primary" disabled={isSubmitting} onClick={handleSubmit(onSubmit)}>
+        {isSubmitting ? "Loading..." : data ? "Update" : "Create"}
+      </Button>
+    </div>
+  );
+};
diff --git a/apps/app/components/project/issues/BoardView/state/CreateUpdateStateModal.tsx b/apps/app/components/project/issues/BoardView/state/create-update-state-modal.tsx
similarity index 91%
rename from apps/app/components/project/issues/BoardView/state/CreateUpdateStateModal.tsx
rename to apps/app/components/project/issues/BoardView/state/create-update-state-modal.tsx
index 3ba149820..4cd5a1367 100644
--- a/apps/app/components/project/issues/BoardView/state/CreateUpdateStateModal.tsx
+++ b/apps/app/components/project/issues/BoardView/state/create-update-state-modal.tsx
@@ -11,10 +11,12 @@ import { Dialog, Popover, Transition } from "@headlessui/react";
 import stateService from "lib/services/state.service";
 // fetch keys
 import { STATE_LIST } from "constants/fetch-keys";
+// constants
+import { GROUP_CHOICES } from "constants/";
 // hooks
 import useUser from "lib/hooks/useUser";
 // ui
-import { Button, Input, TextArea } from "ui";
+import { Button, Input, Select, TextArea } from "ui";
 // icons
 import { ChevronDownIcon } from "@heroicons/react/24/outline";
 
@@ -31,6 +33,7 @@ const defaultValues: Partial<IState> = {
   name: "",
   description: "",
   color: "#000000",
+  group: "backlog",
 };
 
 const CreateUpdateStateModal: React.FC<Props> = ({ isOpen, data, projectId, handleClose }) => {
@@ -161,6 +164,22 @@ const CreateUpdateStateModal: React.FC<Props> = ({ isOpen, data, projectId, hand
                             }}
                           />
                         </div>
+                        <div>
+                          <Select
+                            id="group"
+                            label="Group"
+                            name="group"
+                            error={errors.group}
+                            register={register}
+                            validations={{
+                              required: "Group is required",
+                            }}
+                            options={Object.keys(GROUP_CHOICES).map((key) => ({
+                              value: key,
+                              label: GROUP_CHOICES[key as keyof typeof GROUP_CHOICES],
+                            }))}
+                          />
+                        </div>
                         <div>
                           <Popover className="relative">
                             {({ open }) => (
diff --git a/apps/app/components/project/issues/confirm-issue-deletion.tsx b/apps/app/components/project/issues/confirm-issue-deletion.tsx
index 7be85390e..613048ef5 100644
--- a/apps/app/components/project/issues/confirm-issue-deletion.tsx
+++ b/apps/app/components/project/issues/confirm-issue-deletion.tsx
@@ -4,7 +4,7 @@ import { mutate } from "swr";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // fetching keys
-import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
+import { CYCLE_ISSUES, PROJECT_ISSUES_LIST } from "constants/fetch-keys";
 // services
 import issueServices from "lib/services/issues.service";
 // hooks
@@ -55,6 +55,7 @@ const ConfirmIssueDeletion: React.FC<Props> = ({ isOpen, handleClose, data }) =>
           },
           false
         );
+        mutate(CYCLE_ISSUES(data.issue_cycle?.id ?? ""));
         setToastAlert({
           title: "Success",
           type: "success",
diff --git a/apps/app/components/project/issues/CreateUpdateIssueModal/index.tsx b/apps/app/components/project/issues/create-update-issue-modal/index.tsx
similarity index 86%
rename from apps/app/components/project/issues/CreateUpdateIssueModal/index.tsx
rename to apps/app/components/project/issues/create-update-issue-modal/index.tsx
index e872d4753..275a098bc 100644
--- a/apps/app/components/project/issues/CreateUpdateIssueModal/index.tsx
+++ b/apps/app/components/project/issues/create-update-issue-modal/index.tsx
@@ -1,18 +1,12 @@
 import React, { useEffect, useState } from "react";
 // next
-import { useRouter } from "next/router";
 import dynamic from "next/dynamic";
+import Link from "next/link";
+import { useRouter } from "next/router";
 // swr
 import { mutate } from "swr";
 // react hook form
 import { Controller, useForm } from "react-hook-form";
-// fetching keys
-import {
-  PROJECT_ISSUES_DETAILS,
-  PROJECT_ISSUES_LIST,
-  CYCLE_ISSUES,
-  USER_ISSUE,
-} from "constants/fetch-keys";
 // headless
 import { Dialog, Menu, Transition } from "@headlessui/react";
 // services
@@ -21,22 +15,30 @@ import issuesServices from "lib/services/issues.service";
 import useUser from "lib/hooks/useUser";
 import useToast from "lib/hooks/useToast";
 // ui
-import { Button, Input, TextArea } from "ui";
-// commons
-import { renderDateFormat, cosineSimilarity } from "constants/common";
+import { Button, TextArea } from "ui";
+// icons
+import { EllipsisHorizontalIcon } from "@heroicons/react/24/outline";
 // components
-import SelectState from "./SelectState";
-import SelectCycles from "./SelectCycles";
-import SelectLabels from "./SelectLabels";
-import SelectProject from "./SelectProject";
-import SelectPriority from "./SelectPriority";
-import SelectAssignee from "./SelectAssignee";
-import SelectParent from "./SelectParentIssue";
-import CreateUpdateStateModal from "components/project/issues/BoardView/state/CreateUpdateStateModal";
+import SelectState from "components/project/issues/create-update-issue-modal/select-state";
+import SelectCycles from "components/project/issues/create-update-issue-modal/select-cycle";
+import SelectLabels from "components/project/issues/create-update-issue-modal/select-labels";
+import SelectProject from "components/project/issues/create-update-issue-modal/select-project";
+import SelectPriority from "components/project/issues/create-update-issue-modal/select-priority";
+import SelectAssignee from "components/project/issues/create-update-issue-modal/select-assignee";
+import SelectParent from "components/project/issues/create-update-issue-modal/select-parent-issue";
+import CreateUpdateStateModal from "components/project/issues/BoardView/state/create-update-state-modal";
 import CreateUpdateCycleModal from "components/project/cycles/create-update-cycle-modal";
 // types
-import type { IIssue, IssueResponse, CycleIssueResponse } from "types";
-import { EllipsisHorizontalIcon } from "@heroicons/react/24/outline";
+import type { IIssue, IssueResponse } from "types";
+// fetch keys
+import {
+  PROJECT_ISSUES_DETAILS,
+  PROJECT_ISSUES_LIST,
+  CYCLE_ISSUES,
+  USER_ISSUE,
+} from "constants/fetch-keys";
+// common
+import { renderDateFormat, cosineSimilarity } from "constants/common";
 
 const RichTextEditor = dynamic(() => import("components/lexical/editor"), {
   ssr: false,
@@ -113,36 +115,18 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
     }, 500);
   };
 
-  const addIssueToSprint = async (issueId: string, sprintId: string, issueDetail: IIssue) => {
+  const addIssueToCycle = async (issueId: string, cycleId: string, issueDetail: IIssue) => {
     if (!activeWorkspace || !activeProject) return;
     await issuesServices
-      .addIssueToCycle(activeWorkspace.slug, activeProject.id, sprintId, {
-        issue: issueId,
+      .addIssueToCycle(activeWorkspace.slug, activeProject.id, cycleId, {
+        issues: [issueId],
       })
       .then((res) => {
-        mutate<CycleIssueResponse[]>(
-          CYCLE_ISSUES(sprintId),
-          (prevData) => {
-            const targetResponse = prevData?.find((t) => t.cycle === sprintId);
-            if (targetResponse) {
-              targetResponse.issue_details = issueDetail;
-              return prevData;
-            } else {
-              return [
-                ...(prevData ?? []),
-                {
-                  cycle: sprintId,
-                  issue_details: issueDetail,
-                } as CycleIssueResponse,
-              ];
-            }
-          },
-          false
-        );
+        mutate(CYCLE_ISSUES(cycleId));
         if (isUpdatingSingleIssue) {
           mutate<IIssue>(
             PROJECT_ISSUES_DETAILS,
-            (prevData) => ({ ...(prevData as IIssue), sprints: sprintId }),
+            (prevData) => ({ ...(prevData as IIssue), sprints: cycleId }),
             false
           );
         } else
@@ -152,7 +136,7 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
               return {
                 ...(prevData as IssueResponse),
                 results: (prevData?.results ?? []).map((issue) => {
-                  if (issue.id === res.id) return { ...issue, sprints: sprintId };
+                  if (issue.id === res.id) return { ...issue, sprints: cycleId };
                   return issue;
                 }),
               };
@@ -185,7 +169,7 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
           mutate<IssueResponse>(PROJECT_ISSUES_LIST(activeWorkspace.slug, activeProject.id));
 
           if (formData.sprints && formData.sprints !== null) {
-            await addIssueToSprint(res.id, formData.sprints, formData);
+            await addIssueToCycle(res.id, formData.sprints, formData);
           }
           handleClose();
           resetForm();
@@ -225,7 +209,7 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
               false
             );
           if (formData.sprints && formData.sprints !== null) {
-            await addIssueToSprint(res.id, formData.sprints, formData);
+            await addIssueToCycle(res.id, formData.sprints, formData);
           }
           handleClose();
           resetForm();
@@ -261,8 +245,6 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
     return () => setMostSimilarIssue(undefined);
   }, []);
 
-  // console.log(watch("parent"));
-
   return (
     <>
       {activeProject && (
@@ -340,27 +322,30 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
                             {mostSimilarIssue && (
                               <div className="flex items-center gap-x-2">
                                 <p className="text-sm text-gray-500">
-                                  Did you mean{" "}
-                                  <button
-                                    type="button"
-                                    onClick={() => {
-                                      setMostSimilarIssue(undefined);
-                                      router.push(
-                                        `/projects/${activeProject?.id}/issues/${mostSimilarIssue}`
-                                      );
-                                      handleClose();
-                                      resetForm();
-                                    }}
+                                  <Link
+                                    href={`/projects/${activeProject?.id}/issues/${mostSimilarIssue}`}
                                   >
-                                    <span className="italic">
-                                      {
-                                        issues?.results.find(
-                                          (issue) => issue.id === mostSimilarIssue
-                                        )?.name
-                                      }
-                                    </span>
-                                  </button>
-                                  ?
+                                    <a target="_blank" type="button" className="inline text-left">
+                                      <span>Did you mean </span>
+                                      <span className="italic">
+                                        {
+                                          issues?.results.find((i) => i.id === mostSimilarIssue)
+                                            ?.project_detail.identifier
+                                        }
+                                        -
+                                        {
+                                          issues?.results.find((i) => i.id === mostSimilarIssue)
+                                            ?.sequence_id
+                                        }
+                                        :{" "}
+                                        {
+                                          issues?.results.find((i) => i.id === mostSimilarIssue)
+                                            ?.name
+                                        }{" "}
+                                      </span>
+                                      ?
+                                    </a>
+                                  </Link>{" "}
                                 </p>
                                 <button
                                   type="button"
diff --git a/apps/app/components/project/issues/CreateUpdateIssueModal/SelectAssignee.tsx b/apps/app/components/project/issues/create-update-issue-modal/select-assignee.tsx
similarity index 84%
rename from apps/app/components/project/issues/CreateUpdateIssueModal/SelectAssignee.tsx
rename to apps/app/components/project/issues/create-update-issue-modal/select-assignee.tsx
index dc5d2b741..d7248dcda 100644
--- a/apps/app/components/project/issues/CreateUpdateIssueModal/SelectAssignee.tsx
+++ b/apps/app/components/project/issues/create-update-issue-modal/select-assignee.tsx
@@ -39,7 +39,13 @@ const SelectAssignee: React.FC<Props> = ({ control }) => {
           title="Assignees"
           optionsFontsize="sm"
           options={people?.map((person) => {
-            return { value: person.member.id, display: person.member.first_name };
+            return {
+              value: person.member.id,
+              display:
+                person.member.first_name && person.member.first_name !== ""
+                  ? person.member.first_name
+                  : person.member.email,
+            };
           })}
           multiple={true}
           value={value}
diff --git a/apps/app/components/project/issues/CreateUpdateIssueModal/SelectCycles.tsx b/apps/app/components/project/issues/create-update-issue-modal/select-cycle.tsx
similarity index 94%
rename from apps/app/components/project/issues/CreateUpdateIssueModal/SelectCycles.tsx
rename to apps/app/components/project/issues/create-update-issue-modal/select-cycle.tsx
index cd4dd60c3..74e6c8346 100644
--- a/apps/app/components/project/issues/CreateUpdateIssueModal/SelectCycles.tsx
+++ b/apps/app/components/project/issues/create-update-issue-modal/select-cycle.tsx
@@ -47,14 +47,14 @@ const SelectSprint: React.FC<Props> = ({ control, setIsOpen }) => {
                     leaveTo="opacity-0"
                   >
                     <Listbox.Options className="absolute z-10 mt-1 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
-                      <div className="p-1">
+                      <div className="py-1">
                         {cycles?.map((cycle) => (
                           <Listbox.Option
                             key={cycle.id}
                             value={cycle.id}
                             className={({ active }) =>
-                              `relative cursor-pointer select-none p-2 rounded-md ${
-                                active ? "bg-theme text-white" : "text-gray-900"
+                              `text-gray-900 cursor-pointer select-none p-2 ${
+                                active ? "bg-indigo-50" : ""
                               }`
                             }
                           >
diff --git a/apps/app/components/project/issues/CreateUpdateIssueModal/SelectLabels.tsx b/apps/app/components/project/issues/create-update-issue-modal/select-labels.tsx
similarity index 96%
rename from apps/app/components/project/issues/CreateUpdateIssueModal/SelectLabels.tsx
rename to apps/app/components/project/issues/create-update-issue-modal/select-labels.tsx
index a8ca2ee74..ecedcec15 100644
--- a/apps/app/components/project/issues/CreateUpdateIssueModal/SelectLabels.tsx
+++ b/apps/app/components/project/issues/create-update-issue-modal/select-labels.tsx
@@ -99,14 +99,14 @@ const SelectLabels: React.FC<Props> = ({ control }) => {
                   leaveTo="opacity-0"
                 >
                   <Listbox.Options className="absolute z-10 mt-1 bg-white shadow-lg max-h-28 rounded-md text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
-                    <div className="p-1">
+                    <div className="py-1">
                       {issueLabels?.map((label) => (
                         <Listbox.Option
                           key={label.id}
                           className={({ active }) =>
                             `${
-                              active ? "text-white bg-theme" : "text-gray-900"
-                            } flex items-center gap-2 cursor-pointer select-none w-full p-2 rounded-md`
+                              active ? "bg-indigo-50" : ""
+                            } flex items-center gap-2 text-gray-900 cursor-pointer select-none w-full p-2`
                           }
                           value={label.id}
                         >
diff --git a/apps/app/components/project/issues/CreateUpdateIssueModal/SelectParentIssue.tsx b/apps/app/components/project/issues/create-update-issue-modal/select-parent-issue.tsx
similarity index 100%
rename from apps/app/components/project/issues/CreateUpdateIssueModal/SelectParentIssue.tsx
rename to apps/app/components/project/issues/create-update-issue-modal/select-parent-issue.tsx
diff --git a/apps/app/components/project/issues/CreateUpdateIssueModal/SelectPriority.tsx b/apps/app/components/project/issues/create-update-issue-modal/select-priority.tsx
similarity index 93%
rename from apps/app/components/project/issues/CreateUpdateIssueModal/SelectPriority.tsx
rename to apps/app/components/project/issues/create-update-issue-modal/select-priority.tsx
index 10cee4c76..08da53cd4 100644
--- a/apps/app/components/project/issues/CreateUpdateIssueModal/SelectPriority.tsx
+++ b/apps/app/components/project/issues/create-update-issue-modal/select-priority.tsx
@@ -42,14 +42,14 @@ const SelectPriority: React.FC<Props> = ({ control }) => {
                   leaveTo="opacity-0"
                 >
                   <Listbox.Options className="absolute z-10 mt-1 w-full w-[5rem] bg-white shadow-lg max-h-28 rounded-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none text-xs">
-                    <div className="p-1">
+                    <div className="py-1">
                       {PRIORITIES.map((priority) => (
                         <Listbox.Option
                           key={priority}
                           className={({ active }) =>
                             `${
-                              active ? "text-white bg-theme" : "text-gray-900"
-                            } cursor-pointer select-none relative p-2 rounded-md`
+                              active ? "bg-indigo-50" : ""
+                            } text-gray-900 cursor-pointer select-none p-2`
                           }
                           value={priority}
                         >
diff --git a/apps/app/components/project/issues/CreateUpdateIssueModal/SelectProject.tsx b/apps/app/components/project/issues/create-update-issue-modal/select-project.tsx
similarity index 100%
rename from apps/app/components/project/issues/CreateUpdateIssueModal/SelectProject.tsx
rename to apps/app/components/project/issues/create-update-issue-modal/select-project.tsx
diff --git a/apps/app/components/project/issues/CreateUpdateIssueModal/SelectState.tsx b/apps/app/components/project/issues/create-update-issue-modal/select-state.tsx
similarity index 95%
rename from apps/app/components/project/issues/CreateUpdateIssueModal/SelectState.tsx
rename to apps/app/components/project/issues/create-update-issue-modal/select-state.tsx
index 8fedc0dca..138984306 100644
--- a/apps/app/components/project/issues/CreateUpdateIssueModal/SelectState.tsx
+++ b/apps/app/components/project/issues/create-update-issue-modal/select-state.tsx
@@ -28,7 +28,7 @@ const SelectState: React.FC<Props> = ({ control, setIsOpen }) => {
         <CustomListbox
           title="State"
           options={states?.map((state) => {
-            return { value: state.id, display: state.name };
+            return { value: state.id, display: state.name, color: state.color };
           })}
           value={value}
           optionsFontsize="sm"
diff --git a/apps/app/components/project/issues/issue-detail/activity/index.tsx b/apps/app/components/project/issues/issue-detail/activity/index.tsx
index 84085d7b1..9b105d2d3 100644
--- a/apps/app/components/project/issues/issue-detail/activity/index.tsx
+++ b/apps/app/components/project/issues/issue-detail/activity/index.tsx
@@ -1,5 +1,16 @@
+import React from "react";
 // next
+import { useRouter } from "next/router";
 import Image from "next/image";
+// swr
+import useSWR from "swr";
+// constants
+import { PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
+import { addSpaceIfCamelCase, timeAgo } from "constants/common";
+// services
+import issuesServices from "lib/services/issues.service";
+// hooks
+import useUser from "lib/hooks/useUser";
 // ui
 import { Spinner } from "ui";
 // icons
@@ -12,14 +23,6 @@ import {
 } from "@heroicons/react/24/outline";
 // types
 import { IssueResponse, IState } from "types";
-// constants
-import { addSpaceIfCamelCase, timeAgo } from "constants/common";
-
-type Props = {
-  issueActivities: any[] | undefined;
-  states: IState[] | undefined;
-  issues: IssueResponse | undefined;
-};
 
 const activityIcons: {
   [key: string]: JSX.Element;
@@ -32,7 +35,25 @@ const activityIcons: {
   parent: <UserIcon className="h-3.5 w-3.5" />,
 };
 
-const IssueActivitySection: React.FC<Props> = ({ issueActivities, states, issues }) => {
+const IssueActivitySection: React.FC = () => {
+  const router = useRouter();
+
+  const { issueId, projectId } = router.query;
+
+  const { activeWorkspace, states, issues } = useUser();
+
+  const { data: issueActivities } = useSWR<any[]>(
+    activeWorkspace && projectId && issueId ? PROJECT_ISSUES_ACTIVITY : null,
+    activeWorkspace && projectId && issueId
+      ? () =>
+          issuesServices.getIssueActivities(
+            activeWorkspace.slug,
+            projectId as string,
+            issueId as string
+          )
+      : null
+  );
+
   return (
     <>
       {issueActivities ? (
diff --git a/apps/app/components/project/issues/issue-detail/comment/IssueCommentCard.tsx b/apps/app/components/project/issues/issue-detail/comment/IssueCommentCard.tsx
index e911ae306..90c3b0bed 100644
--- a/apps/app/components/project/issues/issue-detail/comment/IssueCommentCard.tsx
+++ b/apps/app/components/project/issues/issue-detail/comment/IssueCommentCard.tsx
@@ -1,16 +1,12 @@
 import React, { useEffect, useState } from "react";
 // next
 import Image from "next/image";
-// swr
-import { mutate } from "swr";
 // headless ui
 import { Menu } from "@headlessui/react";
 // react hook form
 import { useForm } from "react-hook-form";
 // hooks
 import useUser from "lib/hooks/useUser";
-// fetch keys
-import { PROJECT_ISSUES_COMMENTS } from "constants/fetch-keys";
 // common
 import { timeAgo } from "constants/common";
 // ui
@@ -42,16 +38,6 @@ const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentDeletion
 
   const onEnter = (formData: IIssueComment) => {
     if (isSubmitting) return;
-    mutate<IIssueComment[]>(
-      PROJECT_ISSUES_COMMENTS,
-      (prevData) => {
-        const newData = prevData ?? [];
-        const index = newData.findIndex((comment) => comment.id === formData.id);
-        newData[index] = formData;
-        return [...newData];
-      },
-      false
-    );
     setIsEditing(false);
     onSubmit(formData);
   };
@@ -155,11 +141,6 @@ const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentDeletion
                       className="w-full text-left py-2 pl-2"
                       type="button"
                       onClick={() => {
-                        mutate<IIssueComment[]>(
-                          PROJECT_ISSUES_COMMENTS,
-                          (prevData) => (prevData ?? []).filter((c) => c.id !== comment.id),
-                          false
-                        );
                         handleCommentDeletion(comment.id);
                       }}
                     >
diff --git a/apps/app/components/project/issues/issue-detail/comment/IssueCommentSection.tsx b/apps/app/components/project/issues/issue-detail/comment/IssueCommentSection.tsx
index f2317795a..d5f4b62ce 100644
--- a/apps/app/components/project/issues/issue-detail/comment/IssueCommentSection.tsx
+++ b/apps/app/components/project/issues/issue-detail/comment/IssueCommentSection.tsx
@@ -1,33 +1,28 @@
 import React from "react";
+// router
+import { useRouter } from "next/router";
 // swr
-import { mutate } from "swr";
+import useSWR from "swr";
 // react hook form
 import { useForm } from "react-hook-form";
 // services
 import issuesServices from "lib/services/issues.service";
 // fetch keys
 import { PROJECT_ISSUES_COMMENTS } from "constants/fetch-keys";
+// hooks
+import useUser from "lib/hooks/useUser";
 // components
 import CommentCard from "components/project/issues/issue-detail/comment/IssueCommentCard";
 // ui
 import { TextArea, Button, Spinner } from "ui";
 // types
 import type { IIssueComment } from "types";
-// icons
-import UploadingIcon from "public/animated-icons/uploading.json";
-
-type Props = {
-  comments?: IIssueComment[];
-  workspaceSlug: string;
-  projectId: string;
-  issueId: string;
-};
 
 const defaultValues: Partial<IIssueComment> = {
   comment: "",
 };
 
-const IssueCommentSection: React.FC<Props> = ({ comments, issueId, projectId, workspaceSlug }) => {
+const IssueCommentSection: React.FC = () => {
   const {
     register,
     handleSubmit,
@@ -36,16 +31,31 @@ const IssueCommentSection: React.FC<Props> = ({ comments, issueId, projectId, wo
     reset,
   } = useForm<IIssueComment>({ defaultValues });
 
+  const router = useRouter();
+
+  let { issueId, projectId } = router.query;
+
+  const { activeWorkspace } = useUser();
+
+  const { data: comments, mutate } = useSWR<IIssueComment[]>(
+    activeWorkspace && projectId && issueId ? PROJECT_ISSUES_COMMENTS(issueId as string) : null,
+    activeWorkspace && projectId && issueId
+      ? () =>
+          issuesServices.getIssueComments(
+            activeWorkspace.slug,
+            projectId as string,
+            issueId as string
+          )
+      : null
+  );
+
   const onSubmit = async (formData: IIssueComment) => {
+    if (!activeWorkspace || !projectId || !issueId || isSubmitting) return;
     await issuesServices
-      .createIssueComment(workspaceSlug, projectId, issueId, formData)
+      .createIssueComment(activeWorkspace.slug, projectId as string, issueId as string, formData)
       .then((response) => {
         console.log(response);
-        mutate<IIssueComment[]>(
-          PROJECT_ISSUES_COMMENTS,
-          (prevData) => [...(prevData ?? []), response],
-          false
-        );
+        mutate((prevData) => [response, ...(prevData ?? [])]);
         reset(defaultValues);
       })
       .catch((error) => {
@@ -54,17 +64,34 @@ const IssueCommentSection: React.FC<Props> = ({ comments, issueId, projectId, wo
   };
 
   const onCommentUpdate = async (comment: IIssueComment) => {
+    if (!activeWorkspace || !projectId || !issueId || isSubmitting) return;
     await issuesServices
-      .patchIssueComment(workspaceSlug, projectId, issueId, comment.id, comment)
+      .patchIssueComment(
+        activeWorkspace.slug,
+        projectId as string,
+        issueId as string,
+        comment.id,
+        comment
+      )
       .then((response) => {
-        console.log(response);
+        mutate((prevData) => {
+          const updatedComments = prevData?.map((c) => {
+            if (c.id === comment.id) {
+              return comment;
+            }
+            return c;
+          });
+          return updatedComments;
+        });
       });
   };
 
   const onCommentDelete = async (commentId: string) => {
+    if (!activeWorkspace || !projectId || !issueId || isSubmitting) return;
     await issuesServices
-      .deleteIssueComment(workspaceSlug, projectId, issueId, commentId)
+      .deleteIssueComment(activeWorkspace.slug, projectId as string, issueId as string, commentId)
       .then((response) => {
+        mutate((prevData) => (prevData ?? []).filter((c) => c.id !== commentId));
         console.log(response);
       });
   };
@@ -118,7 +145,6 @@ const IssueCommentSection: React.FC<Props> = ({ comments, issueId, projectId, wo
           />
           <Button type="submit" className="whitespace-nowrap" disabled={isSubmitting}>
             {isSubmitting ? "Adding comment..." : "Add comment"}
-            {/* <UploadingIcon /> */}
           </Button>
         </div>
       </form>
diff --git a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/index.tsx b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/index.tsx
index b1b6bc15e..88c1dadaf 100644
--- a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/index.tsx
+++ b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/index.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 // swr
 import useSWR from "swr";
+import dynamic from "next/dynamic";
 // headless ui
 import { Listbox, Transition } from "@headlessui/react";
 // react hook form
@@ -14,6 +15,8 @@ import useToast from "lib/hooks/useToast";
 import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
 // commons
 import { copyTextToClipboard } from "constants/common";
+// components
+import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
 // ui
 import { Input, Button, Spinner } from "ui";
 import { Popover } from "@headlessui/react";
@@ -30,7 +33,7 @@ import {
 } from "@heroicons/react/24/outline";
 // types
 import type { Control } from "react-hook-form";
-import type { IIssue, IIssueLabels, NestedKeyOf } from "types";
+import type { ICycle, IIssue, IIssueLabels, NestedKeyOf } from "types";
 import { TwitterPicker } from "react-color";
 import { positionEditorElement } from "components/lexical/helpers/editor";
 import SelectState from "./select-state";
@@ -46,7 +49,6 @@ type Props = {
   submitChanges: (formData: Partial<IIssue>) => void;
   issueDetail: IIssue | undefined;
   watch: UseFormWatch<IIssue>;
-  setDeleteIssueModal: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
 const defaultValues: Partial<IIssueLabels> = {
@@ -59,7 +61,6 @@ const IssueDetailSidebar: React.FC<Props> = ({
   submitChanges,
   issueDetail,
   watch: watchIssue,
-  setDeleteIssueModal,
 }) => {
   const [createLabelForm, setCreateLabelForm] = useState(false);
 
@@ -74,6 +75,8 @@ const IssueDetailSidebar: React.FC<Props> = ({
       : null
   );
 
+  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+
   const {
     register,
     handleSubmit,
@@ -93,18 +96,23 @@ const IssueDetailSidebar: React.FC<Props> = ({
         console.log(res);
         reset(defaultValues);
         issueLabelMutate((prevData) => [...(prevData ?? []), res], false);
+        submitChanges({ labels_list: [res.id] });
       });
   };
 
-  const handleCycleChange = (cycleId: string) => {
-    if (activeWorkspace && activeProject && issueDetail)
-      issuesServices.addIssueToCycle(activeWorkspace.slug, activeProject.id, cycleId, {
-        issue: issueDetail.id,
-      });
+  const handleCycleChange = (cycleDetail: ICycle) => {
+    if (activeWorkspace && activeProject && issueDetail) {
+      submitChanges({ cycle: cycleDetail.id, cycle_detail: cycleDetail });
+      issuesServices
+        .addIssueToCycle(activeWorkspace.slug, activeProject.id, cycleDetail.id, {
+          issues: [issueDetail.id],
+        })
+        .then(() => {
+          submitChanges({});
+        });
+    }
   };
 
-  console.log(issueDetail);
-
   return (
     <>
       <div className="h-full w-full divide-y-2 divide-gray-100">
@@ -140,7 +148,7 @@ const IssueDetailSidebar: React.FC<Props> = ({
               type="button"
               className="p-2 hover:bg-gray-100 border rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 duration-300"
               onClick={() =>
-                copyTextToClipboard(`${issueDetail?.id}`)
+                copyTextToClipboard(issueDetail?.id ?? "")
                   .then(() => {
                     setToastAlert({
                       type: "success",
@@ -208,7 +216,7 @@ const IssueDetailSidebar: React.FC<Props> = ({
               watch={watchIssue}
             />
             <SelectBlocked
-              submitChanges={submitChanges}
+              issueDetail={issueDetail}
               issuesList={issues?.results.filter((i) => i.id !== issueDetail?.id) ?? []}
               watch={watchIssue}
             />
@@ -224,6 +232,7 @@ const IssueDetailSidebar: React.FC<Props> = ({
                   render={({ field: { value, onChange } }) => (
                     <input
                       type="date"
+                      id="issueDate"
                       value={value ?? ""}
                       onChange={(e: any) => {
                         submitChanges({ target_date: e.target.value });
@@ -248,25 +257,31 @@ const IssueDetailSidebar: React.FC<Props> = ({
             </div>
             <div className="basis-1/2">
               <div className="flex gap-1 flex-wrap">
-                {issueDetail?.label_details.map((label) => (
-                  <span
-                    key={label.id}
-                    className="group flex items-center gap-1 border rounded-2xl text-xs px-1 py-0.5 hover:bg-red-50 hover:border-red-500 cursor-pointer"
-                    onClick={() => {
-                      const updatedLabels = issueDetail?.labels.filter((l) => l !== label.id);
-                      submitChanges({
-                        labels_list: updatedLabels,
-                      });
-                    }}
-                  >
+                {watchIssue("labels_list")?.map((label) => {
+                  const singleLabel = issueLabels?.find((l) => l.id === label);
+
+                  if (!singleLabel) return null;
+
+                  return (
                     <span
-                      className="h-2 w-2 rounded-full flex-shrink-0"
-                      style={{ backgroundColor: label.colour ?? "green" }}
-                    ></span>
-                    {label.name}
-                    <XMarkIcon className="h-2 w-2 group-hover:text-red-500" />
-                  </span>
-                ))}
+                      key={singleLabel.id}
+                      className="group flex items-center gap-1 border rounded-2xl text-xs px-1 py-0.5 hover:bg-red-50 hover:border-red-500 cursor-pointer"
+                      onClick={() => {
+                        const updatedLabels = watchIssue("labels_list")?.filter((l) => l !== label);
+                        submitChanges({
+                          labels_list: updatedLabels,
+                        });
+                      }}
+                    >
+                      <span
+                        className="h-2 w-2 rounded-full flex-shrink-0"
+                        style={{ backgroundColor: singleLabel.colour ?? "green" }}
+                      ></span>
+                      {singleLabel.name}
+                      <XMarkIcon className="h-2 w-2 group-hover:text-red-500" />
+                    </span>
+                  );
+                })}
                 <Controller
                   control={control}
                   name="labels_list"
@@ -274,9 +289,9 @@ const IssueDetailSidebar: React.FC<Props> = ({
                     <Listbox
                       as="div"
                       value={value}
-                      multiple
                       onChange={(val: any) => submitChanges({ labels_list: val })}
                       className="flex-shrink-0"
+                      multiple
                     >
                       {({ open }) => (
                         <>
@@ -410,6 +425,11 @@ const IssueDetailSidebar: React.FC<Props> = ({
           )}
         </div>
       </div>
+      <ConfirmIssueDeletion
+        handleClose={() => setDeleteIssueModal(false)}
+        isOpen={deleteIssueModal}
+        data={issueDetail}
+      />
     </>
   );
 };
diff --git a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-assignee.tsx b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-assignee.tsx
index c5451c548..f4b97789a 100644
--- a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-assignee.tsx
+++ b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-assignee.tsx
@@ -58,7 +58,7 @@ const SelectAssignee: React.FC<Props> = ({ control, submitChanges }) => {
             >
               {({ open }) => (
                 <div className="relative">
-                  <Listbox.Button className="w-full flex justify-end items-center gap-1 text-xs cursor-pointer">
+                  <Listbox.Button className="w-full flex items-center gap-1 text-xs cursor-pointer">
                     <span
                       className={classNames(
                         value ? "" : "text-gray-900",
@@ -121,11 +121,14 @@ const SelectAssignee: React.FC<Props> = ({ control, submitChanges }) => {
                   <Transition
                     show={open}
                     as={React.Fragment}
-                    leave="transition ease-in duration-100"
-                    leaveFrom="opacity-100"
-                    leaveTo="opacity-0"
+                    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 right-0 mt-1 w-40 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
+                    <Listbox.Options className="absolute z-10 right-0 mt-1 w-auto bg-white shadow-lg max-h-48 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
                       <div className="py-1">
                         {people ? (
                           people.length > 0 ? (
@@ -135,7 +138,7 @@ const SelectAssignee: React.FC<Props> = ({ control, submitChanges }) => {
                                 className={({ active, selected }) =>
                                   `${
                                     active || selected ? "bg-indigo-50" : ""
-                                  } flex items-center gap-2 text-gray-900 cursor-pointer select-none relative p-2 rounded-md truncate`
+                                  } flex items-center gap-2 text-gray-900 cursor-pointer select-none p-2 truncate`
                                 }
                                 value={option.member.id}
                               >
@@ -150,13 +153,15 @@ const SelectAssignee: React.FC<Props> = ({ control, submitChanges }) => {
                                     />
                                   </div>
                                 ) : (
-                                  <div className="h-4 w-4 bg-gray-700 text-white grid place-items-center capitalize rounded-full">
+                                  <div className="flex-shrink-0 h-4 w-4 bg-gray-700 text-white grid place-items-center capitalize rounded-full">
                                     {option.member.first_name && option.member.first_name !== ""
                                       ? option.member.first_name.charAt(0)
                                       : option.member.email.charAt(0)}
                                   </div>
                                 )}
-                                {option.member.first_name}
+                                {option.member.first_name && option.member.first_name !== ""
+                                  ? option.member.first_name
+                                  : option.member.email}
                               </Listbox.Option>
                             ))
                           ) : (
diff --git a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocked.tsx b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocked.tsx
index 9c3b10093..c4944d20f 100644
--- a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocked.tsx
+++ b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocked.tsx
@@ -10,32 +10,28 @@ import { Combobox, Dialog, Transition } from "@headlessui/react";
 // ui
 import { Button } from "ui";
 // icons
-import {
-  FolderIcon,
-  MagnifyingGlassIcon,
-  UserGroupIcon,
-  XMarkIcon,
-} from "@heroicons/react/24/outline";
+import { FolderIcon, MagnifyingGlassIcon, FlagIcon, XMarkIcon } from "@heroicons/react/24/outline";
 // types
-import { IIssue } from "types";
+import { IIssue, IssueResponse } from "types";
 // constants
 import { classNames } from "constants/common";
+import issuesService from "lib/services/issues.service";
 
 type FormInput = {
   issue_ids: string[];
 };
 
 type Props = {
-  submitChanges: (formData: Partial<IIssue>) => void;
+  issueDetail: IIssue | undefined;
   issuesList: IIssue[];
   watch: UseFormWatch<IIssue>;
 };
 
-const SelectBlocked: React.FC<Props> = ({ submitChanges, issuesList, watch }) => {
+const SelectBlocked: React.FC<Props> = ({ issueDetail, issuesList, watch }) => {
   const [query, setQuery] = useState("");
   const [isBlockedModalOpen, setIsBlockedModalOpen] = useState(false);
 
-  const { activeProject, issues } = useUser();
+  const { activeWorkspace, activeProject, issues, mutateIssues } = useUser();
   const { setToastAlert } = useToast();
 
   const { register, handleSubmit, reset, watch: watchIssues } = useForm<FormInput>();
@@ -54,16 +50,73 @@ const SelectBlocked: React.FC<Props> = ({ submitChanges, issuesList, watch }) =>
       });
       return;
     }
-    const newBlocked = [...watch("blocked_list"), ...data.issue_ids];
-    submitChanges({ blocked_list: newBlocked });
-    handleClose();
+
+    data.issue_ids.map((issue) => {
+      if (!activeWorkspace || !activeProject || !issueDetail) return;
+
+      const currentBlockers =
+        issues?.results
+          .find((i) => i.id === issue)
+          ?.blocker_issues.map((b) => b.blocker_issue_detail?.id ?? "") ?? [];
+
+      issuesService
+        .patchIssue(activeWorkspace.slug, activeProject.id, issue, {
+          blockers_list: [...currentBlockers, issueDetail.id],
+        })
+        .then((response) => {
+          mutateIssues((prevData) => ({
+            ...(prevData as IssueResponse),
+            results: (prevData?.results ?? []).map((issue) => {
+              if (issue.id === issueDetail.id) {
+                return { ...issue, ...response };
+              }
+              return issue;
+            }),
+          }));
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    });
+
+    // handleClose();
+  };
+
+  const removeBlocked = (issueId: string) => {
+    if (!activeWorkspace || !activeProject || !issueDetail) return;
+
+    const currentBlockers =
+      issues?.results
+        .find((i) => i.id === issueId)
+        ?.blocker_issues.map((b) => b.blocker_issue_detail?.id ?? "") ?? [];
+
+    const updatedBlockers = currentBlockers.filter((b) => b !== issueDetail.id);
+
+    issuesService
+      .patchIssue(activeWorkspace.slug, activeProject.id, issueId, {
+        blockers_list: updatedBlockers,
+      })
+      .then((response) => {
+        mutateIssues((prevData) => ({
+          ...(prevData as IssueResponse),
+          results: (prevData?.results ?? []).map((issue) => {
+            if (issue.id === issueDetail.id) {
+              return { ...issue, ...response };
+            }
+            return issue;
+          }),
+        }));
+      })
+      .catch((error) => {
+        console.log(error);
+      });
   };
 
   return (
     <div className="flex items-start py-2 flex-wrap">
       <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
-        <UserGroupIcon className="flex-shrink-0 h-4 w-4" />
-        <p>Blocked issues</p>
+        <FlagIcon className="flex-shrink-0 h-4 w-4" />
+        <p>Blocked by</p>
       </div>
       <div className="sm:basis-1/2 space-y-1">
         <div className="flex gap-1 flex-wrap">
@@ -71,13 +124,8 @@ const SelectBlocked: React.FC<Props> = ({ submitChanges, issuesList, watch }) =>
             ? watch("blocked_list").map((issue) => (
                 <span
                   key={issue}
-                  className="group flex items-center gap-1 border rounded-2xl text-xs px-1 py-0.5 hover:bg-red-50 hover:border-red-500 cursor-pointer"
-                  onClick={() => {
-                    const updatedBlockers = watch("blocked_list").filter((i) => i !== issue);
-                    submitChanges({
-                      blocked_list: updatedBlockers,
-                    });
-                  }}
+                  className="group flex items-center gap-1 border rounded-2xl text-xs px-1.5 py-0.5 text-red-500 hover:bg-red-50 border-red-500 cursor-pointer"
+                  onClick={() => removeBlocked(issue)}
                 >
                   {`${activeProject?.identifier}-${
                     issues?.results.find((i) => i.id === issue)?.sequence_id
@@ -145,7 +193,10 @@ const SelectBlocked: React.FC<Props> = ({ submitChanges, issuesList, watch }) =>
                               )}
                               <ul className="text-sm text-gray-700">
                                 {issuesList.map((issue) => {
-                                  if (!watch("blocked_list").includes(issue.id)) {
+                                  if (
+                                    !watch("blocked_list").includes(issue.id) &&
+                                    !watch("blockers_list").includes(issue.id)
+                                  ) {
                                     return (
                                       <Combobox.Option
                                         key={issue.id}
diff --git a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocker.tsx b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocker.tsx
index ee2352620..301ad2b6c 100644
--- a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocker.tsx
+++ b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocker.tsx
@@ -10,12 +10,7 @@ import { Combobox, Dialog, Transition } from "@headlessui/react";
 // ui
 import { Button } from "ui";
 // icons
-import {
-  FolderIcon,
-  MagnifyingGlassIcon,
-  UserGroupIcon,
-  XMarkIcon,
-} from "@heroicons/react/24/outline";
+import { FlagIcon, FolderIcon, MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
 // types
 import { IIssue } from "types";
 // constants
@@ -62,8 +57,8 @@ const SelectBlocker: React.FC<Props> = ({ submitChanges, issuesList, watch }) =>
   return (
     <div className="flex items-start py-2 flex-wrap">
       <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
-        <UserGroupIcon className="flex-shrink-0 h-4 w-4" />
-        <p>Blocker issues</p>
+        <FlagIcon className="flex-shrink-0 h-4 w-4" />
+        <p>Blocking</p>
       </div>
       <div className="sm:basis-1/2 space-y-1">
         <div className="flex gap-1 flex-wrap">
@@ -71,7 +66,7 @@ const SelectBlocker: React.FC<Props> = ({ submitChanges, issuesList, watch }) =>
             ? watch("blockers_list").map((issue) => (
                 <span
                   key={issue}
-                  className="group flex items-center gap-1 border rounded-2xl text-xs px-1 py-0.5 hover:bg-red-50 hover:border-red-500 cursor-pointer"
+                  className="group flex items-center gap-1 border rounded-2xl text-xs px-1.5 py-0.5 text-yellow-500 hover:bg-yellow-50 border-yellow-500 cursor-pointer"
                   onClick={() => {
                     const updatedBlockers = watch("blockers_list").filter((i) => i !== issue);
                     submitChanges({
@@ -145,7 +140,10 @@ const SelectBlocker: React.FC<Props> = ({ submitChanges, issuesList, watch }) =>
                               )}
                               <ul className="text-sm text-gray-700">
                                 {issuesList.map((issue) => {
-                                  if (!watch("blockers_list").includes(issue.id)) {
+                                  if (
+                                    !watch("blockers_list").includes(issue.id) &&
+                                    !watch("blocked_list").includes(issue.id)
+                                  ) {
                                     return (
                                       <Combobox.Option
                                         key={issue.id}
diff --git a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-cycle.tsx b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-cycle.tsx
index 80dd4a899..21c18fa36 100644
--- a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-cycle.tsx
+++ b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-cycle.tsx
@@ -1,20 +1,21 @@
+// react
+import React from "react";
 // react-hook-form
 import { Control, Controller } from "react-hook-form";
 // hooks
 import useUser from "lib/hooks/useUser";
-// headless ui
-import { Listbox, Transition } from "@headlessui/react";
+// ui
+import { Spinner, CustomSelect } from "ui";
+// icons
+import { ArrowPathIcon } from "@heroicons/react/24/outline";
 // types
-import { IIssue } from "types";
+import { ICycle, IIssue } from "types";
+// common
 import { classNames } from "constants/common";
-import { Spinner } from "ui";
-import React from "react";
-import { ArrowPathIcon, ChevronDownIcon } from "@heroicons/react/24/outline";
-import CustomSelect from "ui/custom-select";
 
 type Props = {
   control: Control<IIssue, any>;
-  handleCycleChange: (cycleId: string) => void;
+  handleCycleChange: (cycle: ICycle) => void;
 };
 
 const SelectCycle: React.FC<Props> = ({ control, handleCycleChange }) => {
@@ -29,7 +30,7 @@ const SelectCycle: React.FC<Props> = ({ control, handleCycleChange }) => {
       <div className="sm:basis-1/2">
         <Controller
           control={control}
-          name="cycle"
+          name="issue_cycle"
           render={({ field: { value } }) => (
             <>
               <CustomSelect
@@ -40,12 +41,12 @@ const SelectCycle: React.FC<Props> = ({ control, handleCycleChange }) => {
                       "hidden truncate sm:block text-left"
                     )}
                   >
-                    {value ? cycles?.find((c) => c.id === value)?.name : "None"}
+                    {value ? cycles?.find((c) => c.id === value.cycle_detail.id)?.name : "None"}
                   </span>
                 }
                 value={value}
                 onChange={(value: any) => {
-                  handleCycleChange(value);
+                  handleCycleChange(cycles?.find((c) => c.id === value) as any);
                 }}
               >
                 {cycles ? (
diff --git a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-priority.tsx b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-priority.tsx
index 7c098f957..974488697 100644
--- a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-priority.tsx
+++ b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-priority.tsx
@@ -12,6 +12,7 @@ import { IIssue } from "types";
 import { classNames } from "constants/common";
 import { PRIORITIES } from "constants/";
 import CustomSelect from "ui/custom-select";
+import { getPriorityIcon } from "constants/global";
 
 type Props = {
   control: Control<IIssue, any>;
@@ -33,7 +34,18 @@ const SelectPriority: React.FC<Props> = ({ control, submitChanges, watch }) => {
           render={({ field: { value } }) => (
             <CustomSelect
               label={
-                <span className={classNames(value ? "" : "text-gray-900", "text-left capitalize")}>
+                <span
+                  className={classNames(
+                    value ? "" : "text-gray-900",
+                    "text-left capitalize flex items-center gap-2"
+                  )}
+                >
+                  {getPriorityIcon(
+                    watch("priority") && watch("priority") !== ""
+                      ? watch("priority") ?? ""
+                      : "None",
+                    "text-sm"
+                  )}
                   {watch("priority") && watch("priority") !== "" ? watch("priority") : "None"}
                 </span>
               }
@@ -44,7 +56,10 @@ const SelectPriority: React.FC<Props> = ({ control, submitChanges, watch }) => {
             >
               {PRIORITIES.map((option) => (
                 <CustomSelect.Option key={option} value={option} className="capitalize">
-                  {option}
+                  <>
+                    {getPriorityIcon(option, "text-sm")}
+                    {option}
+                  </>
                 </CustomSelect.Option>
               ))}
             </CustomSelect>
diff --git a/apps/app/components/project/issues/ListView/index.tsx b/apps/app/components/project/issues/list-view/index.tsx
similarity index 90%
rename from apps/app/components/project/issues/ListView/index.tsx
rename to apps/app/components/project/issues/list-view/index.tsx
index a95c83606..9d3dadc18 100644
--- a/apps/app/components/project/issues/ListView/index.tsx
+++ b/apps/app/components/project/issues/list-view/index.tsx
@@ -8,7 +8,7 @@ import useSWR from "swr";
 // headless ui
 import { Disclosure, Listbox, Menu, Transition } from "@headlessui/react";
 // ui
-import { Spinner } from "ui";
+import { CustomMenu, Spinner } from "ui";
 // icons
 import {
   ChevronDownIcon,
@@ -18,7 +18,7 @@ import {
 } from "@heroicons/react/24/outline";
 import User from "public/user.png";
 // components
-import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal";
+import CreateUpdateIssuesModal from "components/project/issues/create-update-issue-modal";
 // types
 import { IIssue, IWorkspaceMember, NestedKeyOf, Properties } from "types";
 // services
@@ -93,6 +93,9 @@ const ListView: React.FC<Props> = ({
                         <h2 className="font-medium leading-5 capitalize">
                           {singleGroup === null || singleGroup === "null"
                             ? selectedGroup === "priority" && "No priority"
+                            : selectedGroup === "created_by"
+                            ? people?.find((p) => p.member.id === singleGroup)?.member
+                                ?.first_name ?? "Loading..."
                             : addSpaceIfCamelCase(singleGroup)}
                         </h2>
                       ) : (
@@ -152,11 +155,11 @@ const ListView: React.FC<Props> = ({
                                           {activeProject?.identifier}-{issue.sequence_id}
                                         </span>
                                       )}
-                                      <span className="">{issue.name}</span>
-                                      <div className="absolute bottom-full left-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md max-w-sm whitespace-nowrap">
+                                      <span>{issue.name}</span>
+                                      {/* <div className="absolute bottom-full left-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md max-w-sm whitespace-nowrap">
                                         <h5 className="font-medium mb-1">Name</h5>
                                         <div>{issue.name}</div>
-                                      </div>
+                                      </div> */}
                                     </a>
                                   </Link>
                                 </div>
@@ -307,7 +310,7 @@ const ListView: React.FC<Props> = ({
                                       </div>
                                     </div>
                                   )}
-                                  {properties.target_date && (
+                                  {properties.due_date && (
                                     <div
                                       className={`group relative flex-shrink-0 group flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300 ${
                                         issue.target_date === null
@@ -332,14 +335,14 @@ const ListView: React.FC<Props> = ({
                                         <div>
                                           {issue.target_date &&
                                             (issue.target_date < new Date().toISOString()
-                                              ? `Target date has passed by ${findHowManyDaysLeft(
+                                              ? `Due date has passed by ${findHowManyDaysLeft(
                                                   issue.target_date
                                                 )} days`
                                               : findHowManyDaysLeft(issue.target_date) <= 3
-                                              ? `Target date is in ${findHowManyDaysLeft(
+                                              ? `Due date is in ${findHowManyDaysLeft(
                                                   issue.target_date
                                                 )} days`
-                                              : "Target date")}
+                                              : "Due date")}
                                         </div>
                                       </div>
                                     </div>
@@ -480,43 +483,25 @@ const ListView: React.FC<Props> = ({
                                       )}
                                     </Listbox>
                                   )}
-                                  <Menu as="div" className="relative">
-                                    <Menu.Button
-                                      as="button"
-                                      className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-100 duration-300 outline-none`}
+                                  <CustomMenu ellipsis>
+                                    <CustomMenu.MenuItem
+                                      onClick={() => {
+                                        setSelectedIssue({
+                                          ...issue,
+                                          actionType: "edit",
+                                        });
+                                      }}
                                     >
-                                      <EllipsisHorizontalIcon className="h-4 w-4" />
-                                    </Menu.Button>
-                                    <Menu.Items className="absolute origin-top-right right-0.5 mt-1 p-1 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
-                                      <Menu.Item>
-                                        <button
-                                          type="button"
-                                          className="text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full"
-                                          onClick={() => {
-                                            setSelectedIssue({
-                                              ...issue,
-                                              actionType: "edit",
-                                            });
-                                          }}
-                                        >
-                                          Edit
-                                        </button>
-                                      </Menu.Item>
-                                      <Menu.Item>
-                                        <div className="hover:bg-gray-100 border-b last:border-0">
-                                          <button
-                                            type="button"
-                                            className="text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full"
-                                            onClick={() => {
-                                              handleDeleteIssue(issue.id);
-                                            }}
-                                          >
-                                            Delete permanently
-                                          </button>
-                                        </div>
-                                      </Menu.Item>
-                                    </Menu.Items>
-                                  </Menu>
+                                      Edit
+                                    </CustomMenu.MenuItem>
+                                    <CustomMenu.MenuItem
+                                      onClick={() => {
+                                        handleDeleteIssue(issue.id);
+                                      }}
+                                    >
+                                      Delete permanently
+                                    </CustomMenu.MenuItem>
+                                  </CustomMenu>
                                 </div>
                               </div>
                             );
@@ -548,6 +533,10 @@ const ListView: React.FC<Props> = ({
                           [selectedGroup]: singleGroup,
                           actionType: "createIssue",
                         });
+                      } else {
+                        setPreloadedData({
+                          actionType: "createIssue",
+                        });
                       }
                     }}
                   >
diff --git a/apps/app/components/project/memberInvitations.tsx b/apps/app/components/project/member-invitations.tsx
similarity index 84%
rename from apps/app/components/project/memberInvitations.tsx
rename to apps/app/components/project/member-invitations.tsx
index bd25db10a..484d9fed5 100644
--- a/apps/app/components/project/memberInvitations.tsx
+++ b/apps/app/components/project/member-invitations.tsx
@@ -3,14 +3,13 @@ import React, { useState } from "react";
 // next
 import Link from "next/link";
 import useSWR from "swr";
+import { useRouter } from "next/router";
+// services
+import projectService from "lib/services/project.service";
 // hooks
 import useUser from "lib/hooks/useUser";
-// Services
-import projectService from "lib/services/project.service";
-// fetch keys
-import { PROJECT_MEMBERS } from "constants/fetch-keys";
-// commons
-import { renderShortNumericDateFormat } from "constants/common";
+// ui
+import { Button } from "ui";
 // icons
 import {
   CalendarDaysIcon,
@@ -20,9 +19,15 @@ import {
   PencilIcon,
   PlusIcon,
   TrashIcon,
+  ClipboardDocumentListIcon,
 } from "@heroicons/react/24/outline";
 // types
 import type { IProject } from "types";
+// fetch-keys
+import { PROJECT_MEMBERS } from "constants/fetch-keys";
+// common
+import { renderShortNumericDateFormat } from "constants/common";
+
 type Props = {
   project: IProject;
   slug: string;
@@ -40,6 +45,8 @@ const ProjectMemberInvitations: React.FC<Props> = ({
 }) => {
   const { user } = useUser();
 
+  const router = useRouter();
+
   const { data: members } = useSWR<any[]>(PROJECT_MEMBERS(project.id), () =>
     projectService.projectMembers(slug, project.id)
   );
@@ -59,7 +66,7 @@ const ProjectMemberInvitations: React.FC<Props> = ({
   return (
     <>
       <div
-        className={`w-full h-full flex flex-col px-4 py-3 rounded-md bg-white ${
+        className={`w-full h-full flex flex-col px-4 py-3 rounded-md border bg-white ${
           selected ? "ring-2 ring-indigo-400" : ""
         }`}
       >
@@ -93,13 +100,13 @@ const ProjectMemberInvitations: React.FC<Props> = ({
           {isMember ? (
             <div className="flex">
               <Link href={`/projects/${project.id}/settings`}>
-                <a className="h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 cursor-pointer">
+                <a className="h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-100 duration-300 cursor-pointer">
                   <PencilIcon className="h-4 w-4" />
                 </a>
               </Link>
               <button
                 type="button"
-                className="h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none"
+                className="h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-100 duration-300 outline-none"
                 onClick={() => setDeleteProject(project.id)}
               >
                 <TrashIcon className="h-4 w-4 text-red-500" />
@@ -115,7 +122,7 @@ const ProjectMemberInvitations: React.FC<Props> = ({
             {!isMember ? (
               <label
                 htmlFor={project.id}
-                className="flex items-center gap-1 text-xs font-medium bg-blue-200 hover:bg-blue-300 p-2 rounded duration-300 cursor-pointer"
+                className="flex items-center gap-1 text-xs font-medium border hover:bg-gray-100 p-2 rounded duration-300 cursor-pointer"
               >
                 {selected ? (
                   <>
@@ -130,17 +137,19 @@ const ProjectMemberInvitations: React.FC<Props> = ({
                 )}
               </label>
             ) : (
-              <span className="flex items-center gap-1 text-xs bg-green-200 p-2 rounded">
+              <Button theme="secondary" className="flex items-center gap-1" disabled>
                 <CheckIcon className="h-3 w-3" />
                 Member
-              </span>
+              </Button>
             )}
-            <Link href={`/projects/${project.id}/issues`}>
-              <a className="flex items-center gap-1 text-xs font-medium bg-blue-200 hover:bg-blue-300 p-2 rounded duration-300">
-                <EyeIcon className="h-3 w-3" />
-                View
-              </a>
-            </Link>
+            <Button
+              theme="secondary"
+              className="flex items-center gap-1"
+              onClick={() => router.push(`/projects/${project.id}/issues`)}
+            >
+              <ClipboardDocumentListIcon className="h-3 w-3" />
+              Open Project
+            </Button>
           </div>
           <div className="flex items-center gap-1 text-xs mb-1">
             <CalendarDaysIcon className="h-4 w-4" />
diff --git a/apps/app/components/project/SendProjectInvitationModal.tsx b/apps/app/components/project/send-project-invitation-modal.tsx
similarity index 100%
rename from apps/app/components/project/SendProjectInvitationModal.tsx
rename to apps/app/components/project/send-project-invitation-modal.tsx
diff --git a/apps/app/components/project/settings/ControlSettings.tsx b/apps/app/components/project/settings/ControlSettings.tsx
deleted file mode 100644
index 007389834..000000000
--- a/apps/app/components/project/settings/ControlSettings.tsx
+++ /dev/null
@@ -1,197 +0,0 @@
-// react
-import React from "react";
-// swr
-import useSWR from "swr";
-// react-hook-form
-import { Control, Controller } from "react-hook-form";
-// services
-import workspaceService from "lib/services/workspace.service";
-// hooks
-import useUser from "lib/hooks/useUser";
-// headless ui
-import { Listbox, Transition } from "@headlessui/react";
-// ui
-import { Button } from "ui";
-// icons
-import { CheckIcon, ChevronDownIcon } from "@heroicons/react/24/outline";
-// types
-import { IProject } from "types";
-// fetch-keys
-import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
-
-type Props = {
-  control: Control<IProject, any>;
-  isSubmitting: boolean;
-};
-
-const ControlSettings: React.FC<Props> = ({ control, isSubmitting }) => {
-  const { activeWorkspace } = useUser();
-
-  const { data: people } = useSWR(
-    activeWorkspace ? WORKSPACE_MEMBERS : null,
-    activeWorkspace ? () => workspaceService.workspaceMembers(activeWorkspace.slug) : null
-  );
-  return (
-    <>
-      <section className="space-y-5">
-        <div>
-          <h3 className="text-lg font-medium leading-6 text-gray-900">Control</h3>
-          <p className="mt-1 text-sm text-gray-500">Set the control for the project.</p>
-        </div>
-        <div className="flex justify-between gap-3">
-          <div className="w-full md:w-1/2">
-            <Controller
-              control={control}
-              name="project_lead"
-              render={({ field: { onChange, value } }) => (
-                <Listbox value={value} onChange={onChange}>
-                  {({ open }) => (
-                    <>
-                      <Listbox.Label>
-                        <div className="text-gray-500 mb-2">Project Lead</div>
-                      </Listbox.Label>
-                      <div className="relative">
-                        <Listbox.Button className="bg-white relative w-full border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
-                          <span className="block truncate">
-                            {people?.find((person) => person.member.id === value)?.member
-                              .first_name ?? "Select Lead"}
-                          </span>
-                          <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-                            <ChevronDownIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
-                          </span>
-                        </Listbox.Button>
-
-                        <Transition
-                          show={open}
-                          as={React.Fragment}
-                          leave="transition ease-in duration-100"
-                          leaveFrom="opacity-100"
-                          leaveTo="opacity-0"
-                        >
-                          <Listbox.Options className="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
-                            {people?.map((person) => (
-                              <Listbox.Option
-                                key={person.id}
-                                className={({ active }) =>
-                                  `${
-                                    active ? "text-white bg-theme" : "text-gray-900"
-                                  } cursor-default select-none relative py-2 pl-3 pr-9`
-                                }
-                                value={person.member.id}
-                              >
-                                {({ selected, active }) => (
-                                  <>
-                                    <span
-                                      className={`${
-                                        selected ? "font-semibold" : "font-normal"
-                                      } block truncate`}
-                                    >
-                                      {person.member.first_name}
-                                    </span>
-
-                                    {selected ? (
-                                      <span
-                                        className={`absolute inset-y-0 right-0 flex items-center pr-4 ${
-                                          active ? "text-white" : "text-theme"
-                                        }`}
-                                      >
-                                        <CheckIcon className="h-5 w-5" aria-hidden="true" />
-                                      </span>
-                                    ) : null}
-                                  </>
-                                )}
-                              </Listbox.Option>
-                            ))}
-                          </Listbox.Options>
-                        </Transition>
-                      </div>
-                    </>
-                  )}
-                </Listbox>
-              )}
-            />
-          </div>
-          <div className="w-full md:w-1/2">
-            <Controller
-              control={control}
-              name="default_assignee"
-              render={({ field: { value, onChange } }) => (
-                <Listbox value={value} onChange={onChange}>
-                  {({ open }) => (
-                    <>
-                      <Listbox.Label>
-                        <div className="text-gray-500 mb-2">Default Assignee</div>
-                      </Listbox.Label>
-                      <div className="relative">
-                        <Listbox.Button className="bg-white relative w-full border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
-                          <span className="block truncate">
-                            {people?.find((p) => p.member.id === value)?.member.first_name ??
-                              "Select Default Assignee"}
-                          </span>
-                          <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-                            <ChevronDownIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
-                          </span>
-                        </Listbox.Button>
-
-                        <Transition
-                          show={open}
-                          as={React.Fragment}
-                          leave="transition ease-in duration-100"
-                          leaveFrom="opacity-100"
-                          leaveTo="opacity-0"
-                        >
-                          <Listbox.Options className="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
-                            {people?.map((person) => (
-                              <Listbox.Option
-                                key={person.id}
-                                className={({ active }) =>
-                                  `${
-                                    active ? "text-white bg-theme" : "text-gray-900"
-                                  } cursor-default select-none relative py-2 pl-3 pr-9`
-                                }
-                                value={person.member.id}
-                              >
-                                {({ selected, active }) => (
-                                  <>
-                                    <span
-                                      className={`${
-                                        selected ? "font-semibold" : "font-normal"
-                                      } block truncate`}
-                                    >
-                                      {person.member.first_name}
-                                    </span>
-
-                                    {selected ? (
-                                      <span
-                                        className={`absolute inset-y-0 right-0 flex items-center pr-4 ${
-                                          active ? "text-white" : "text-theme"
-                                        }`}
-                                      >
-                                        <CheckIcon className="h-5 w-5" aria-hidden="true" />
-                                      </span>
-                                    ) : null}
-                                  </>
-                                )}
-                              </Listbox.Option>
-                            ))}
-                          </Listbox.Options>
-                        </Transition>
-                      </div>
-                    </>
-                  )}
-                </Listbox>
-              )}
-            />
-          </div>
-        </div>
-        <div className="flex justify-end">
-          <Button type="submit" disabled={isSubmitting}>
-            {isSubmitting ? "Updating Project..." : "Update Project"}
-          </Button>
-        </div>
-      </section>
-    </>
-  );
-};
-
-export default ControlSettings;
diff --git a/apps/app/components/project/settings/GeneralSettings.tsx b/apps/app/components/project/settings/GeneralSettings.tsx
deleted file mode 100644
index 3f0c6ac4a..000000000
--- a/apps/app/components/project/settings/GeneralSettings.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-// react
-import { useCallback } from "react";
-// react-hook-form
-import { UseFormRegister, UseFormSetError } from "react-hook-form";
-// services
-import projectServices from "lib/services/project.service";
-// hooks
-import useUser from "lib/hooks/useUser";
-// ui
-import { Button, Input, Select, TextArea } from "ui";
-// types
-import { IProject } from "types";
-// constants
-import { debounce } from "constants/common";
-
-type Props = {
-  register: UseFormRegister<IProject>;
-  errors: any;
-  setError: UseFormSetError<IProject>;
-  isSubmitting: boolean;
-};
-
-const NETWORK_CHOICES = { "0": "Secret", "2": "Public" };
-
-const GeneralSettings: React.FC<Props> = ({ register, errors, setError, isSubmitting }) => {
-  const { activeWorkspace } = useUser();
-
-  const checkIdentifier = (slug: string, value: string) => {
-    projectServices.checkProjectIdentifierAvailability(slug, value).then((response) => {
-      console.log(response);
-      if (response.exists) setError("identifier", { message: "Identifier already exists" });
-    });
-  };
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const checkIdentifierAvailability = useCallback(debounce(checkIdentifier, 1500), []);
-
-  return (
-    <>
-      <section className="space-y-5">
-        <div>
-          <h3 className="text-lg font-medium leading-6 text-gray-900">General</h3>
-          <p className="mt-1 text-sm text-gray-500">
-            This information will be displayed to every member of the project.
-          </p>
-        </div>
-        <div className="grid grid-cols-4 gap-3">
-          <div className="col-span-2">
-            <Input
-              id="name"
-              name="name"
-              error={errors.name}
-              register={register}
-              placeholder="Project Name"
-              label="Name"
-              validations={{
-                required: "Name is required",
-              }}
-            />
-          </div>
-          <div>
-            <Select
-              name="network"
-              id="network"
-              options={Object.keys(NETWORK_CHOICES).map((key) => ({
-                value: key,
-                label: NETWORK_CHOICES[key as keyof typeof NETWORK_CHOICES],
-              }))}
-              label="Network"
-              register={register}
-              validations={{
-                required: "Network is required",
-              }}
-            />
-          </div>
-          <div>
-            <Input
-              id="identifier"
-              name="identifier"
-              error={errors.identifier}
-              register={register}
-              placeholder="Enter identifier"
-              label="Identifier"
-              onChange={(e: any) => {
-                if (!activeWorkspace || !e.target.value) return;
-                checkIdentifierAvailability(activeWorkspace.slug, e.target.value);
-              }}
-              validations={{
-                required: "Identifier is required",
-                minLength: {
-                  value: 1,
-                  message: "Identifier must at least be of 1 character",
-                },
-                maxLength: {
-                  value: 9,
-                  message: "Identifier must at most be of 9 characters",
-                },
-              }}
-            />
-          </div>
-        </div>
-        <div>
-          <TextArea
-            id="description"
-            name="description"
-            error={errors.description}
-            register={register}
-            label="Description"
-            placeholder="Enter project description"
-            validations={{
-              required: "Description is required",
-            }}
-          />
-        </div>
-        <div className="flex justify-end">
-          <Button type="submit" disabled={isSubmitting}>
-            {isSubmitting ? "Updating Project..." : "Update Project"}
-          </Button>
-        </div>
-      </section>
-    </>
-  );
-};
-
-export default GeneralSettings;
diff --git a/apps/app/components/project/settings/LabelsSettings.tsx b/apps/app/components/project/settings/LabelsSettings.tsx
deleted file mode 100644
index df423d91b..000000000
--- a/apps/app/components/project/settings/LabelsSettings.tsx
+++ /dev/null
@@ -1,285 +0,0 @@
-// react
-import React, { useState } from "react";
-// swr
-import useSWR from "swr";
-// react-hook-form
-import { Controller, SubmitHandler, useForm } from "react-hook-form";
-// react-color
-import { TwitterPicker } from "react-color";
-// services
-import issuesServices from "lib/services/issues.service";
-// hooks
-import useUser from "lib/hooks/useUser";
-// headless ui
-import { Popover, Transition, Menu } from "@headlessui/react";
-// ui
-import { Button, Input, Spinner } from "ui";
-// icons
-import {
-  ChevronDownIcon,
-  EllipsisHorizontalIcon,
-  PencilIcon,
-  PlusIcon,
-  RectangleGroupIcon,
-} from "@heroicons/react/24/outline";
-// types
-import { IIssueLabels } from "types";
-// fetch-keys
-import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
-
-const defaultValues: Partial<IIssueLabels> = {
-  name: "",
-  colour: "#ff0000",
-};
-
-const LabelsSettings: React.FC = () => {
-  const [newLabelForm, setNewLabelForm] = useState(false);
-  const [isUpdating, setIsUpdating] = useState(false);
-  const [labelIdForUpdate, setLabelidForUpdate] = useState<string | null>(null);
-
-  const { activeWorkspace, activeProject } = useUser();
-
-  const {
-    register,
-    handleSubmit,
-    reset,
-    control,
-    setValue,
-    formState: { errors, isSubmitting },
-    watch,
-  } = useForm<IIssueLabels>({ defaultValues });
-
-  const { data: issueLabels, mutate } = useSWR<IIssueLabels[]>(
-    activeProject && activeWorkspace ? PROJECT_ISSUE_LABELS(activeProject.id) : null,
-    activeProject && activeWorkspace
-      ? () => issuesServices.getIssueLabels(activeWorkspace.slug, activeProject.id)
-      : null
-  );
-
-  const handleNewLabel: SubmitHandler<IIssueLabels> = (formData) => {
-    if (!activeWorkspace || !activeProject || isSubmitting) return;
-    issuesServices
-      .createIssueLabel(activeWorkspace.slug, activeProject.id, formData)
-      .then((res) => {
-        console.log(res);
-        reset(defaultValues);
-        mutate((prevData) => [...(prevData ?? []), res], false);
-        setNewLabelForm(false);
-      });
-  };
-
-  const handleLabelUpdate: SubmitHandler<IIssueLabels> = (formData) => {
-    if (!activeWorkspace || !activeProject || isSubmitting) return;
-    issuesServices
-      .patchIssueLabel(activeWorkspace.slug, activeProject.id, labelIdForUpdate ?? "", formData)
-      .then((res) => {
-        console.log(res);
-        reset(defaultValues);
-        mutate(
-          (prevData) =>
-            prevData?.map((p) => (p.id === labelIdForUpdate ? { ...p, ...formData } : p)),
-          false
-        );
-        setNewLabelForm(false);
-      });
-  };
-
-  const handleLabelDelete = (labelId: string) => {
-    if (activeWorkspace && activeProject) {
-      mutate((prevData) => prevData?.filter((p) => p.id !== labelId), false);
-      issuesServices
-        .deleteIssueLabel(activeWorkspace.slug, activeProject.id, labelId)
-        .then((res) => {
-          console.log(res);
-        })
-        .catch((e) => {
-          console.log(e);
-        });
-    }
-  };
-
-  const getLabelChildren = (labelId: string) => {
-    return issueLabels?.filter((l) => l.parent === labelId);
-  };
-
-  return (
-    <>
-      <section className="space-y-5">
-        <div className="flex items-center justify-between">
-          <div>
-            <h3 className="text-lg font-medium leading-6 text-gray-900">Labels</h3>
-            <p className="mt-1 text-sm text-gray-500">Manage the labels of this project.</p>
-          </div>
-          <Button className="flex items-center gap-x-1" onClick={() => setNewLabelForm(true)}>
-            <PlusIcon className="h-4 w-4" />
-            New label
-          </Button>
-        </div>
-        <div className="space-y-5">
-          <div
-            className={`bg-white px-4 py-2 flex items-center gap-2 ${newLabelForm ? "" : "hidden"}`}
-          >
-            <div>
-              <Popover className="relative">
-                {({ open }) => (
-                  <>
-                    <Popover.Button
-                      className={`bg-white flex items-center gap-1 rounded-md p-1 outline-none focus:ring-2 focus:ring-indigo-500`}
-                    >
-                      {watch("colour") && watch("colour") !== "" && (
-                        <span
-                          className="w-6 h-6 rounded"
-                          style={{
-                            backgroundColor: watch("colour") ?? "green",
-                          }}
-                        ></span>
-                      )}
-                      <ChevronDownIcon className="h-4 w-4" />
-                    </Popover.Button>
-
-                    <Transition
-                      as={React.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 z-20 transform left-0 mt-1 px-2 max-w-xs sm:px-0">
-                        <Controller
-                          name="colour"
-                          control={control}
-                          render={({ field: { value, onChange } }) => (
-                            <TwitterPicker
-                              color={value}
-                              onChange={(value) => onChange(value.hex)}
-                            />
-                          )}
-                        />
-                      </Popover.Panel>
-                    </Transition>
-                  </>
-                )}
-              </Popover>
-            </div>
-            <div className="w-full flex flex-col justify-center">
-              <Input
-                type="text"
-                id="labelName"
-                name="name"
-                register={register}
-                placeholder="Lable title"
-                validations={{
-                  required: "Label title is required",
-                }}
-                error={errors.name}
-              />
-            </div>
-            <Button type="button" theme="secondary" onClick={() => setNewLabelForm(false)}>
-              Cancel
-            </Button>
-            {isUpdating ? (
-              <Button
-                type="button"
-                onClick={handleSubmit(handleLabelUpdate)}
-                disabled={isSubmitting}
-              >
-                {isSubmitting ? "Updating" : "Update"}
-              </Button>
-            ) : (
-              <Button type="button" onClick={handleSubmit(handleNewLabel)} disabled={isSubmitting}>
-                {isSubmitting ? "Adding" : "Add"}
-              </Button>
-            )}
-          </div>
-          {issueLabels ? (
-            issueLabels.map((label) => {
-              const children = getLabelChildren(label.id);
-
-              return (
-                <React.Fragment key={label.id}>
-                  {children && children.length === 0 ? (
-                    <div className="bg-white p-2 flex items-center justify-between text-gray-900 rounded-md">
-                      <div className="flex items-center gap-2">
-                        <span
-                          className="flex-shrink-0 h-1.5 w-1.5 rounded-full"
-                          style={{
-                            backgroundColor: label.colour,
-                          }}
-                        />
-                        <p className="text-sm">{label.name}</p>
-                      </div>
-                      <div>
-                        <Menu as="div" className="relative">
-                          <Menu.Button
-                            as="button"
-                            className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-100 duration-300 outline-none`}
-                          >
-                            <EllipsisHorizontalIcon className="h-4 w-4" />
-                          </Menu.Button>
-                          <Menu.Items className="absolute origin-top-right right-0.5 mt-1 p-1 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
-                            <Menu.Item>
-                              <button
-                                type="button"
-                                className="text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full"
-                                onClick={() => {
-                                  setNewLabelForm(true);
-                                  setValue("colour", label.colour);
-                                  setValue("name", label.name);
-                                  setIsUpdating(true);
-                                  setLabelidForUpdate(label.id);
-                                }}
-                              >
-                                Edit
-                              </button>
-                            </Menu.Item>
-                            <Menu.Item>
-                              <div className="hover:bg-gray-100 border-b last:border-0">
-                                <button
-                                  type="button"
-                                  className="text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full"
-                                  onClick={() => handleLabelDelete(label.id)}
-                                >
-                                  Delete
-                                </button>
-                              </div>
-                            </Menu.Item>
-                          </Menu.Items>
-                        </Menu>
-                      </div>
-                    </div>
-                  ) : (
-                    <div className="bg-white p-4 text-gray-900 rounded-md">
-                      <h3 className="font-medium leading-5 flex items-center gap-2">
-                        <RectangleGroupIcon className="h-5 w-5" />
-                        This is the label group title
-                      </h3>
-                      <div className="pl-5 mt-4">
-                        <div className="group text-sm flex justify-between items-center p-2 hover:bg-gray-100 rounded">
-                          <h5 className="flex items-center gap-2">
-                            <div className="w-2 h-2 bg-red-600 rounded-full"></div>
-                            This is the label title
-                          </h5>
-                          <button type="button" className="hidden group-hover:block">
-                            <PencilIcon className="h-3 w-3" />
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                  )}
-                </React.Fragment>
-              );
-            })
-          ) : (
-            <div className="flex justify-center py-4">
-              <Spinner />
-            </div>
-          )}
-        </div>
-      </section>
-    </>
-  );
-};
-
-export default LabelsSettings;
diff --git a/apps/app/components/project/settings/StatesSettings.tsx b/apps/app/components/project/settings/StatesSettings.tsx
deleted file mode 100644
index a191c58af..000000000
--- a/apps/app/components/project/settings/StatesSettings.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-// react
-import { useState } from "react";
-// hooks
-import useUser from "lib/hooks/useUser";
-// components
-import CreateUpdateStateModal from "components/project/issues/BoardView/state/CreateUpdateStateModal";
-// ui
-import { Button } from "ui";
-// icons
-import { PencilSquareIcon, PlusIcon } from "@heroicons/react/24/outline";
-// constants
-import { addSpaceIfCamelCase } from "constants/common";
-
-type Props = {
-  projectId: string | string[] | undefined;
-};
-
-const StatesSettings: React.FC<Props> = ({ projectId }) => {
-  const [isCreateStateModal, setIsCreateStateModal] = useState(false);
-  const [selectedState, setSelectedState] = useState<string | undefined>();
-
-  const { states } = useUser();
-
-  return (
-    <>
-      <CreateUpdateStateModal
-        isOpen={isCreateStateModal || Boolean(selectedState)}
-        handleClose={() => {
-          setSelectedState(undefined);
-          setIsCreateStateModal(false);
-        }}
-        projectId={projectId as string}
-        data={selectedState ? states?.find((state) => state.id === selectedState) : undefined}
-      />
-      <section className="space-y-5">
-        <div>
-          <h3 className="text-lg font-medium leading-6 text-gray-900">State</h3>
-          <p className="mt-1 text-sm text-gray-500">Manage the state of this project.</p>
-        </div>
-        <div className="flex justify-between gap-3">
-          <div className="w-full space-y-5">
-            {states?.map((state) => (
-              <div
-                key={state.id}
-                className="bg-white px-4 py-2 rounded flex justify-between items-center"
-              >
-                <div className="flex items-center gap-x-2">
-                  <div
-                    className="w-3 h-3 rounded-full"
-                    style={{
-                      backgroundColor: state.color,
-                    }}
-                  ></div>
-                  <h4>{addSpaceIfCamelCase(state.name)}</h4>
-                </div>
-                <div>
-                  <button type="button" onClick={() => setSelectedState(state.id)}>
-                    <PencilSquareIcon className="h-5 w-5 text-gray-400" />
-                  </button>
-                </div>
-              </div>
-            ))}
-            <Button
-              type="button"
-              className="flex items-center gap-x-1"
-              onClick={() => setIsCreateStateModal(true)}
-            >
-              <PlusIcon className="h-4 w-4" />
-              <span>Add State</span>
-            </Button>
-          </div>
-        </div>
-      </section>
-    </>
-  );
-};
-
-export default StatesSettings;
diff --git a/apps/app/components/project/settings/single-label.tsx b/apps/app/components/project/settings/single-label.tsx
new file mode 100644
index 000000000..9376b189e
--- /dev/null
+++ b/apps/app/components/project/settings/single-label.tsx
@@ -0,0 +1,160 @@
+// react
+import React, { useState } from "react";
+// react-hook-form
+import { Controller, useForm } from "react-hook-form";
+// headless ui
+import { Popover, Transition } from "@headlessui/react";
+// ui
+import { Button, CustomMenu, Input } from "ui";
+// icons
+import { PencilIcon, RectangleGroupIcon } from "@heroicons/react/24/outline";
+// types
+import { IIssueLabels } from "types";
+import { TwitterPicker } from "react-color";
+
+type Props = {
+  label: IIssueLabels;
+  issueLabels: IIssueLabels[];
+  editLabel: (label: IIssueLabels) => void;
+  handleLabelDelete: (labelId: string) => void;
+};
+
+const defaultValues: Partial<IIssueLabels> = {
+  name: "",
+  colour: "#ff0000",
+};
+
+const SingleLabel: React.FC<Props> = ({ label, issueLabels, editLabel, handleLabelDelete }) => {
+  const [newLabelForm, setNewLabelForm] = useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+    setError,
+    watch,
+    reset,
+    control,
+  } = useForm<IIssueLabels>({ defaultValues });
+
+  const children = issueLabels?.filter((l) => l.parent === label.id);
+
+  return (
+    <>
+      {children && children.length === 0 ? (
+        <div className="md:w-2/3 gap-2 border p-3 rounded-md divide-y space-y-3">
+          <div className="flex justify-between items-center">
+            <div className="flex items-center gap-2">
+              <span
+                className="flex-shrink-0 h-3 w-3 rounded-full"
+                style={{
+                  backgroundColor: label.colour,
+                }}
+              />
+              <h6 className="text-sm">{label.name}</h6>
+            </div>
+            <CustomMenu ellipsis>
+              {/* <CustomMenu.MenuItem>Convert to group</CustomMenu.MenuItem> */}
+              <CustomMenu.MenuItem
+                onClick={() => {
+                  editLabel(label);
+                }}
+              >
+                Edit
+              </CustomMenu.MenuItem>
+              <CustomMenu.MenuItem onClick={() => handleLabelDelete(label.id)}>
+                Delete
+              </CustomMenu.MenuItem>
+            </CustomMenu>
+          </div>
+          <div className={`flex items-center gap-2 ${newLabelForm ? "" : "hidden"}`}>
+            <div className="flex-shrink-0 h-8 w-8">
+              <Popover className="relative w-full h-full flex justify-center items-center bg-gray-200 rounded-xl">
+                {({ open }) => (
+                  <>
+                    <Popover.Button
+                      className={`group inline-flex items-center text-base font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 ${
+                        open ? "text-gray-900" : "text-gray-500"
+                      }`}
+                    >
+                      {watch("colour") && watch("colour") !== "" && (
+                        <span
+                          className="w-4 h-4 rounded"
+                          style={{
+                            backgroundColor: watch("colour") ?? "green",
+                          }}
+                        ></span>
+                      )}
+                    </Popover.Button>
+
+                    <Transition
+                      as={React.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 top-full z-20 left-0 mt-3 px-2 w-screen max-w-xs sm:px-0">
+                        <Controller
+                          name="colour"
+                          control={control}
+                          render={({ field: { value, onChange } }) => (
+                            <TwitterPicker
+                              color={value}
+                              onChange={(value) => onChange(value.hex)}
+                            />
+                          )}
+                        />
+                      </Popover.Panel>
+                    </Transition>
+                  </>
+                )}
+              </Popover>
+            </div>
+            <div className="w-full flex flex-col justify-center">
+              <Input
+                type="text"
+                id="labelName"
+                name="name"
+                register={register}
+                placeholder="Lable title"
+                validations={{
+                  required: "Label title is required",
+                }}
+                error={errors.name}
+              />
+            </div>
+            <Button type="button" theme="secondary" onClick={() => setNewLabelForm(false)}>
+              Cancel
+            </Button>
+            <Button type="button" disabled={isSubmitting}>
+              {isSubmitting ? "Adding" : "Add"}
+            </Button>
+          </div>
+        </div>
+      ) : (
+        <div className="bg-white p-4 text-gray-900 rounded-md">
+          <h3 className="font-medium leading-5 flex items-center gap-2">
+            <RectangleGroupIcon className="h-5 w-5" />
+            This is the label group title
+          </h3>
+          <div className="pl-5 mt-4">
+            <div className="group text-sm flex justify-between items-center p-2 hover:bg-gray-100 rounded">
+              <h5 className="flex items-center gap-2">
+                <div className="w-2 h-2 bg-red-600 rounded-full"></div>
+                This is the label title
+              </h5>
+              <button type="button" className="hidden group-hover:block">
+                <PencilIcon className="h-3 w-3" />
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default SingleLabel;
diff --git a/apps/app/components/sidebar/projects-list.tsx b/apps/app/components/sidebar/projects-list.tsx
index 5d4d4e91c..7078bcc8b 100644
--- a/apps/app/components/sidebar/projects-list.tsx
+++ b/apps/app/components/sidebar/projects-list.tsx
@@ -58,13 +58,20 @@ const ProjectsList: React.FC<Props> = ({ navigation, sidebarCollapse }) => {
                     <>
                       <div className="flex items-center">
                         <Disclosure.Button
-                          className={`w-full flex items-center gap-2 font-medium rounded-md p-2 text-sm ${
+                          className={`w-full flex items-center text-left gap-2 font-medium rounded-md p-2 text-sm ${
                             sidebarCollapse ? "justify-center" : ""
                           }`}
                         >
-                          <span className="bg-gray-700 text-white rounded h-7 w-7 grid place-items-center uppercase flex-shrink-0">
-                            {project?.name.charAt(0)}
-                          </span>
+                          {project.icon ? (
+                            <span className="text-white rounded h-7 w-7 grid place-items-center uppercase flex-shrink-0">
+                              {String.fromCodePoint(parseInt(project.icon))}
+                            </span>
+                          ) : (
+                            <span className="bg-gray-700 text-white rounded h-7 w-7 grid place-items-center uppercase flex-shrink-0">
+                              {project?.name.charAt(0)}
+                            </span>
+                          )}
+
                           {!sidebarCollapse && (
                             <span className="flex items-center justify-between w-full">
                               {project?.name}
diff --git a/apps/app/components/socialbuttons/google-login.tsx b/apps/app/components/socialbuttons/google-login.tsx
index 51979cc81..6c39c58af 100644
--- a/apps/app/components/socialbuttons/google-login.tsx
+++ b/apps/app/components/socialbuttons/google-login.tsx
@@ -1,4 +1,4 @@
-import { FC, CSSProperties } from "react";
+import { FC, CSSProperties, useEffect, useRef, useCallback, useState } from "react";
 // next
 import Script from "next/script";
 
@@ -10,32 +10,43 @@ export interface IGoogleLoginButton {
 }
 
 export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
+  const googleSignInButton = useRef<HTMLDivElement>(null);
+  const [gsiScriptLoaded, setGsiScriptLoaded] = useState(false);
+
+  const loadScript = useCallback(() => {
+    if (!googleSignInButton.current || gsiScriptLoaded) return;
+    window?.google?.accounts.id.initialize({
+      client_id: process.env.NEXT_PUBLIC_GOOGLE_CLIENTID || "",
+      callback: props.onSuccess as any,
+    });
+    window?.google?.accounts.id.renderButton(
+      googleSignInButton.current,
+      {
+        type: "standard",
+        theme: "outline",
+        size: "large",
+        logo_alignment: "center",
+        width: document.getElementById("googleSignInButton")?.offsetWidth,
+        text: "continue_with",
+      } as GsiButtonConfiguration // customization attributes
+    );
+    window?.google?.accounts.id.prompt(); // also display the One Tap dialog
+    setGsiScriptLoaded(true);
+  }, [props.onSuccess, gsiScriptLoaded]);
+
+  useEffect(() => {
+    if (window?.google?.accounts?.id) {
+      loadScript();
+    }
+    return () => {
+      window?.google?.accounts.id.cancel();
+    };
+  }, [loadScript]);
+
   return (
     <>
-      <Script
-        src="https://accounts.google.com/gsi/client"
-        async
-        defer
-        onLoad={() => {
-          window?.google?.accounts.id.initialize({
-            client_id: process.env.NEXT_PUBLIC_GOOGLE_CLIENTID || "",
-            callback: props.onSuccess as any,
-          });
-          window?.google?.accounts.id.renderButton(
-            document.getElementById("googleSignInButton") as HTMLElement,
-            {
-              type: "standard",
-              theme: "outline",
-              size: "large",
-              logo_alignment: "center",
-              width: document.getElementById("googleSignInButton")?.offsetWidth,
-              text: "continue_with",
-            } as GsiButtonConfiguration // customization attributes
-          );
-          window?.google?.accounts.id.prompt(); // also display the One Tap dialog
-        }}
-      />
-      <div className="w-full" id="googleSignInButton"></div>
+      <Script src="https://accounts.google.com/gsi/client" async defer onLoad={loadScript} />
+      <div className="w-full" id="googleSignInButton" ref={googleSignInButton}></div>
     </>
   );
 };
diff --git a/apps/app/constants/api-routes.ts b/apps/app/constants/api-routes.ts
index 9e282562a..7d2cfe90b 100644
--- a/apps/app/constants/api-routes.ts
+++ b/apps/app/constants/api-routes.ts
@@ -64,6 +64,8 @@ export const PROJECT_MEMBERS = (workspaceSlug: string, projectId: string) =>
   `/api/workspaces/${workspaceSlug}/projects/${projectId}/members/`;
 export const PROJECT_MEMBER_DETAIL = (workspaceSlug: string, projectId: string, memberId: string) =>
   `/api/workspaces/${workspaceSlug}/projects/${projectId}/members/${memberId}/`;
+export const PROJECT_MEMBER_ME = (workspaceSlug: string, projectId: string) =>
+  `/api/workspaces/${workspaceSlug}/projects/${projectId}/project-members/me/`;
 export const PROJECT_VIEW_ENDPOINT = (workspaceSlug: string, projectId: string) =>
   `/api/workspaces/${workspaceSlug}/projects/${projectId}/project-views/`;
 
@@ -108,11 +110,6 @@ export const FILTER_STATE_ISSUES = (workspaceSlug: string, projectId: string, st
   `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/?state=${state}`;
 export const BULK_DELETE_ISSUES = (workspaceSlug: string, projectId: string) =>
   `/api/workspaces/${workspaceSlug}/projects/${projectId}/bulk-delete-issues/`;
-export const BULK_ADD_ISSUES_TO_CYCLE = (
-  workspaceSlug: string,
-  projectId: string,
-  cycleId: string
-) => `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/bulk-assign-issues/`;
 
 // states
 export const STATES_ENDPOINT = (workspaceSlug: string, projectId: string) =>
diff --git a/apps/app/constants/common.ts b/apps/app/constants/common.ts
index dbc65ebcd..00335d05e 100644
--- a/apps/app/constants/common.ts
+++ b/apps/app/constants/common.ts
@@ -26,7 +26,7 @@ export const renderShortNumericDateFormat = (date: string | Date) => {
 export const groupBy = (array: any[], key: string) => {
   const innerKey = key.split("."); // split the key by dot
   return array.reduce((result, currentValue) => {
-    const key = innerKey.reduce((obj, i) => obj[i], currentValue); // get the value of the inner key
+    const key = innerKey.reduce((obj, i) => obj?.[i], currentValue) ?? "None"; // get the value of the inner key
     (result[key] = result[key] || []).push(currentValue);
     return result;
   }, {});
@@ -216,3 +216,23 @@ export const createSimilarString = (str: string) => {
 
   return shuffled;
 };
+
+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)];
+};
diff --git a/apps/app/constants/fetch-keys.ts b/apps/app/constants/fetch-keys.ts
index 355a41b24..466766672 100644
--- a/apps/app/constants/fetch-keys.ts
+++ b/apps/app/constants/fetch-keys.ts
@@ -5,6 +5,7 @@ export const USER_WORKSPACES = "USER_WORKSPACES";
 export const WORKSPACE_MEMBERS = (workspaceSlug: string) => `WORKSPACE_MEMBERS_${workspaceSlug}`;
 export const WORKSPACE_INVITATIONS = "WORKSPACE_INVITATIONS";
 export const WORKSPACE_INVITATION = "WORKSPACE_INVITATION";
+export const LAST_ACTIVE_WORKSPACE_AND_PROJECTS = "LAST_ACTIVE_WORKSPACE_AND_PROJECTS";
 
 export const PROJECTS_LIST = (workspaceSlug: string) => `PROJECTS_LIST_${workspaceSlug}`;
 export const PROJECT_DETAILS = (projectId: string) => `PROJECT_DETAILS_${projectId}`;
@@ -17,7 +18,7 @@ export const PROJECT_ISSUES_LIST = (workspaceSlug: string, projectId: string) =>
 export const PROJECT_ISSUES_DETAILS = (issueId: string) => `PROJECT_ISSUES_DETAILS_${issueId}`;
 export const PROJECT_ISSUES_PROPERTIES = (projectId: string) =>
   `PROJECT_ISSUES_PROPERTIES_${projectId}`;
-export const PROJECT_ISSUES_COMMENTS = "PROJECT_ISSUES_COMMENTS";
+export const PROJECT_ISSUES_COMMENTS = (issueId: string) => `PROJECT_ISSUES_COMMENTS_${issueId}`;
 export const PROJECT_ISSUES_ACTIVITY = "PROJECT_ISSUES_ACTIVITY";
 export const PROJECT_ISSUE_BY_STATE = (projectId: string) => `PROJECT_ISSUE_BY_STATE_${projectId}`;
 export const PROJECT_ISSUE_LABELS = (projectId: string) => `PROJECT_ISSUE_LABELS_${projectId}`;
@@ -30,6 +31,7 @@ export const STATE_LIST = (projectId: string) => `STATE_LIST_${projectId}`;
 export const STATE_DETAIL = "STATE_DETAIL";
 
 export const USER_ISSUE = (workspaceSlug: string) => `USER_ISSUE_${workspaceSlug}`;
+export const USER_PROJECT_VIEW = (projectId: string) => `USER_PROJECT_VIEW_${projectId}`;
 
 export const MODULE_LIST = (projectId: string) => `MODULE_LIST_${projectId}`;
 export const MODULE_ISSUES = (moduleId: string) => `MODULE_ISSUES_${moduleId}`;
diff --git a/apps/app/constants/global.tsx b/apps/app/constants/global.tsx
index fcdae5cf9..2ce33c542 100644
--- a/apps/app/constants/global.tsx
+++ b/apps/app/constants/global.tsx
@@ -1,12 +1,18 @@
-export const getPriorityIcon = (priority: string) => {
+export const getPriorityIcon = (priority: string, className: string) => {
   switch (priority) {
     case "urgent":
-      return <span className="material-symbols-rounded">signal_cellular_alt</span>;
+      return <span className={`material-symbols-rounded ${className}`}>error</span>;
     case "high":
-      return <span className="material-symbols-rounded">signal_cellular_alt_2_bar</span>;
+      return <span className={`material-symbols-rounded ${className}`}>signal_cellular_alt</span>;
     case "medium":
-      return <span className="material-symbols-rounded">signal_cellular_alt_1_bar</span>;
+      return (
+        <span className={`material-symbols-rounded ${className}`}>signal_cellular_alt_2_bar</span>
+      );
+    case "low":
+      return (
+        <span className={`material-symbols-rounded ${className}`}>signal_cellular_alt_1_bar</span>
+      );
     default:
-      return <span>N/A</span>;
+      return null;
   }
 };
diff --git a/apps/app/constants/index.ts b/apps/app/constants/index.ts
index 603652e9f..a53e6eda7 100644
--- a/apps/app/constants/index.ts
+++ b/apps/app/constants/index.ts
@@ -1,3 +1,5 @@
+import type { IIssue, NestedKeyOf } from "types";
+
 export const PRIORITIES = ["urgent", "high", "medium", "low"];
 
 export const ROLE = {
@@ -8,3 +10,44 @@ export const ROLE = {
 };
 
 export const NETWORK_CHOICES = { "0": "Secret", "2": "Public" };
+
+export const GROUP_CHOICES = {
+  backlog: "Backlog",
+  unstarted: "Unstarted",
+  started: "Started",
+  completed: "Completed",
+  cancelled: "Cancelled",
+};
+
+export const groupByOptions: Array<{ name: string; key: NestedKeyOf<IIssue> | null }> = [
+  { name: "State", key: "state_detail.name" },
+  { name: "Priority", key: "priority" },
+  // { name: "Cycle", key: "issue_cycle.cycle_detail.name" },
+  { name: "Created By", key: "created_by" },
+  { name: "None", key: null },
+];
+
+export const orderByOptions: Array<{ name: string; key: NestedKeyOf<IIssue> | null }> = [
+  { name: "Last created", key: "created_at" },
+  { name: "Last updated", key: "updated_at" },
+  { name: "Priority", key: "priority" },
+  { name: "None", key: null },
+];
+
+export const filterIssueOptions: Array<{
+  name: string;
+  key: "activeIssue" | "backlogIssue" | null;
+}> = [
+  {
+    name: "All",
+    key: null,
+  },
+  {
+    name: "Active Issues",
+    key: "activeIssue",
+  },
+  {
+    name: "Backlog Issues",
+    key: "backlogIssue",
+  },
+];
diff --git a/apps/app/constants/theme.context.constants.ts b/apps/app/constants/theme.context.constants.ts
index f170511ed..8961a442f 100644
--- a/apps/app/constants/theme.context.constants.ts
+++ b/apps/app/constants/theme.context.constants.ts
@@ -4,3 +4,4 @@ export const SET_ISSUE_VIEW = "SET_ISSUE_VIEW";
 export const SET_GROUP_BY_PROPERTY = "SET_GROUP_BY_PROPERTY";
 export const SET_ORDER_BY_PROPERTY = "SET_ORDER_BY_PROPERTY";
 export const SET_FILTER_ISSUES = "SET_FILTER_ISSUES";
+export const RESET_TO_DEFAULT = "RESET_TO_DEFAULT";
diff --git a/apps/app/contexts/theme.context.tsx b/apps/app/contexts/theme.context.tsx
index bece44540..313b8882c 100644
--- a/apps/app/contexts/theme.context.tsx
+++ b/apps/app/contexts/theme.context.tsx
@@ -1,4 +1,6 @@
 import React, { createContext, useCallback, useReducer, useEffect } from "react";
+// swr
+import useSWR from "swr";
 // constants
 import {
   TOGGLE_SIDEBAR,
@@ -7,9 +9,16 @@ import {
   SET_GROUP_BY_PROPERTY,
   SET_ORDER_BY_PROPERTY,
   SET_FILTER_ISSUES,
+  RESET_TO_DEFAULT,
 } from "constants/theme.context.constants";
 // components
 import ToastAlert from "components/toast-alert";
+// hooks
+import useUser from "lib/hooks/useUser";
+// constants
+import { USER_PROJECT_VIEW } from "constants/fetch-keys";
+// services
+import projectService from "lib/services/project.service";
 
 export const themeContext = createContext<ContextType>({} as ContextType);
 
@@ -23,7 +32,8 @@ type ReducerActionType = {
     | typeof SET_ISSUE_VIEW
     | typeof SET_ORDER_BY_PROPERTY
     | typeof SET_FILTER_ISSUES
-    | typeof SET_GROUP_BY_PROPERTY;
+    | typeof SET_GROUP_BY_PROPERTY
+    | typeof RESET_TO_DEFAULT;
   payload?: Partial<Theme>;
 };
 
@@ -34,10 +44,13 @@ type ContextType = {
   groupByProperty: NestedKeyOf<IIssue> | null;
   filterIssue: "activeIssue" | "backlogIssue" | null;
   toggleCollapsed: () => void;
-  setIssueView: (display: "list" | "kanban") => void;
   setGroupByProperty: (property: NestedKeyOf<IIssue> | null) => void;
   setOrderBy: (property: NestedKeyOf<IIssue> | null) => void;
   setFilterIssue: (property: "activeIssue" | "backlogIssue" | null) => void;
+  resetFilterToDefault: () => void;
+  setNewFilterDefaultView: () => void;
+  setIssueViewToKanban: () => void;
+  setIssueViewToList: () => void;
 };
 
 type StateType = Theme;
@@ -60,21 +73,18 @@ export const reducer: ReducerFunctionType = (state, action) => {
         ...state,
         collapsed: !state.collapsed,
       };
-      localStorage.setItem("theme", JSON.stringify(newState));
+      localStorage.setItem("collapsed", JSON.stringify(newState.collapsed));
       return newState;
     case REHYDRATE_THEME: {
-      let newState: any = localStorage.getItem("theme");
-      if (newState !== null) {
-        newState = JSON.parse(newState);
-      }
-      return { ...initialState, ...newState };
+      let collapsed: any = localStorage.getItem("collapsed");
+      collapsed = collapsed ? JSON.parse(collapsed) : false;
+      return { ...initialState, ...payload, collapsed };
     }
     case SET_ISSUE_VIEW: {
       const newState = {
         ...state,
         issueView: payload?.issueView || "list",
       };
-      localStorage.setItem("theme", JSON.stringify(newState));
       return {
         ...state,
         ...newState,
@@ -85,7 +95,6 @@ export const reducer: ReducerFunctionType = (state, action) => {
         ...state,
         groupByProperty: payload?.groupByProperty || null,
       };
-      localStorage.setItem("theme", JSON.stringify(newState));
       return {
         ...state,
         ...newState,
@@ -96,7 +105,6 @@ export const reducer: ReducerFunctionType = (state, action) => {
         ...state,
         orderBy: payload?.orderBy || null,
       };
-      localStorage.setItem("theme", JSON.stringify(newState));
       return {
         ...state,
         ...newState,
@@ -107,68 +115,169 @@ export const reducer: ReducerFunctionType = (state, action) => {
         ...state,
         filterIssue: payload?.filterIssue || null,
       };
-      localStorage.setItem("theme", JSON.stringify(newState));
       return {
         ...state,
         ...newState,
       };
     }
+    case RESET_TO_DEFAULT: {
+      return {
+        ...initialState,
+        ...payload,
+      };
+    }
     default: {
       return state;
     }
   }
 };
 
+const saveDataToServer = async (workspaceSlug: string, projectID: string, state: any) => {
+  await projectService.setProjectView(workspaceSlug, projectID, {
+    view_props: state,
+  });
+};
+
+const setNewDefault = async (workspaceSlug: string, projectID: string, state: any) => {
+  await projectService.setProjectView(workspaceSlug, projectID, {
+    view_props: state,
+    default_props: state,
+  });
+};
+
 export const ThemeContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [state, dispatch] = useReducer(reducer, initialState);
 
+  const { activeProject, activeWorkspace } = useUser();
+
+  const { data: myViewProps, mutate: mutateMyViewProps } = useSWR(
+    activeWorkspace && activeProject ? USER_PROJECT_VIEW(activeProject.id) : null,
+    activeWorkspace && activeProject
+      ? () => projectService.projectMemberMe(activeWorkspace.slug, activeProject.id)
+      : null
+  );
+
   const toggleCollapsed = useCallback(() => {
     dispatch({
       type: TOGGLE_SIDEBAR,
     });
   }, []);
 
-  const setIssueView = useCallback((display: "list" | "kanban") => {
+  const setIssueViewToKanban = useCallback(() => {
     dispatch({
       type: SET_ISSUE_VIEW,
       payload: {
-        issueView: display,
+        issueView: "kanban",
       },
     });
-  }, []);
-
-  const setGroupByProperty = useCallback((property: NestedKeyOf<IIssue> | null) => {
     dispatch({
       type: SET_GROUP_BY_PROPERTY,
       payload: {
+        groupByProperty: "state_detail.name",
+      },
+    });
+    if (!activeWorkspace || !activeProject) return;
+    saveDataToServer(activeWorkspace.slug, activeProject.id, {
+      ...state,
+      issueView: "kanban",
+      groupByProperty: "state_detail.name",
+    });
+  }, [activeWorkspace, activeProject, state]);
+
+  const setIssueViewToList = useCallback(() => {
+    dispatch({
+      type: SET_ISSUE_VIEW,
+      payload: {
+        issueView: "list",
+      },
+    });
+    dispatch({
+      type: SET_GROUP_BY_PROPERTY,
+      payload: {
+        groupByProperty: null,
+      },
+    });
+    if (!activeWorkspace || !activeProject) return;
+    saveDataToServer(activeWorkspace.slug, activeProject.id, {
+      ...state,
+      issueView: "list",
+      groupByProperty: null,
+    });
+  }, [activeWorkspace, activeProject, state]);
+
+  const setGroupByProperty = useCallback(
+    (property: NestedKeyOf<IIssue> | null) => {
+      dispatch({
+        type: SET_GROUP_BY_PROPERTY,
+        payload: {
+          groupByProperty: property,
+        },
+      });
+
+      if (!activeWorkspace || !activeProject) return;
+      saveDataToServer(activeWorkspace.slug, activeProject.id, {
+        ...state,
         groupByProperty: property,
-      },
-    });
-  }, []);
+      });
+    },
+    [activeProject, activeWorkspace, state]
+  );
 
-  const setOrderBy = useCallback((property: NestedKeyOf<IIssue> | null) => {
-    dispatch({
-      type: SET_ORDER_BY_PROPERTY,
-      payload: {
-        orderBy: property,
-      },
-    });
-  }, []);
+  const setOrderBy = useCallback(
+    (property: NestedKeyOf<IIssue> | null) => {
+      dispatch({
+        type: SET_ORDER_BY_PROPERTY,
+        payload: {
+          orderBy: property,
+        },
+      });
 
-  const setFilterIssue = useCallback((property: "activeIssue" | "backlogIssue" | null) => {
-    dispatch({
-      type: SET_FILTER_ISSUES,
-      payload: {
+      if (!activeWorkspace || !activeProject) return;
+      saveDataToServer(activeWorkspace.slug, activeProject.id, state);
+    },
+    [activeProject, activeWorkspace, state]
+  );
+
+  const setFilterIssue = useCallback(
+    (property: "activeIssue" | "backlogIssue" | null) => {
+      dispatch({
+        type: SET_FILTER_ISSUES,
+        payload: {
+          filterIssue: property,
+        },
+      });
+
+      if (!activeWorkspace || !activeProject) return;
+      saveDataToServer(activeWorkspace.slug, activeProject.id, {
+        ...state,
         filterIssue: property,
-      },
+      });
+    },
+    [activeProject, activeWorkspace, state]
+  );
+
+  const setNewDefaultView = useCallback(() => {
+    if (!activeWorkspace || !activeProject) return;
+    setNewDefault(activeWorkspace.slug, activeProject.id, state).then(() => {
+      mutateMyViewProps();
     });
-  }, []);
+  }, [activeProject, activeWorkspace, state, mutateMyViewProps]);
+
+  const resetToDefault = useCallback(() => {
+    dispatch({
+      type: RESET_TO_DEFAULT,
+      payload: myViewProps?.default_props,
+    });
+    if (!activeWorkspace || !activeProject) return;
+    saveDataToServer(activeWorkspace.slug, activeProject.id, myViewProps?.default_props);
+  }, [activeProject, activeWorkspace, myViewProps]);
 
   useEffect(() => {
     dispatch({
       type: REHYDRATE_THEME,
+      payload: myViewProps?.view_props,
     });
-  }, []);
+  }, [myViewProps]);
 
   return (
     <themeContext.Provider
@@ -176,13 +285,16 @@ export const ThemeContextProvider: React.FC<{ children: React.ReactNode }> = ({
         collapsed: state.collapsed,
         toggleCollapsed,
         issueView: state.issueView,
-        setIssueView,
         groupByProperty: state.groupByProperty,
         setGroupByProperty,
         orderBy: state.orderBy,
         setOrderBy,
         filterIssue: state.filterIssue,
         setFilterIssue,
+        resetFilterToDefault: resetToDefault,
+        setNewFilterDefaultView: setNewDefaultView,
+        setIssueViewToKanban,
+        setIssueViewToList,
       }}
     >
       <ToastAlert />
diff --git a/apps/app/layouts/app-layout.tsx b/apps/app/layouts/app-layout.tsx
index a50058b3b..3eacd9070 100644
--- a/apps/app/layouts/app-layout.tsx
+++ b/apps/app/layouts/app-layout.tsx
@@ -1,9 +1,4 @@
-// react
-import React, { useEffect, useState } from "react";
-// next
-import { useRouter } from "next/router";
-// hooks
-import useUser from "lib/hooks/useUser";
+import React, { useState } from "react";
 // layouts
 import Container from "layouts/container";
 import Sidebar from "layouts/navbar/main-siderbar";
@@ -25,14 +20,6 @@ const AppLayout: React.FC<Props> = ({
 }) => {
   const [isOpen, setIsOpen] = useState(false);
 
-  const router = useRouter();
-
-  const { user, isUserLoading } = useUser();
-
-  useEffect(() => {
-    if (!isUserLoading && (!user || user === null)) router.push("/signin");
-  }, [isUserLoading, user, router]);
-
   return (
     <Container meta={meta}>
       <CreateProjectModal isOpen={isOpen} setIsOpen={setIsOpen} />
diff --git a/apps/app/layouts/navbar/main-siderbar.tsx b/apps/app/layouts/navbar/main-siderbar.tsx
index 9d9c13bcd..e2ada3fde 100644
--- a/apps/app/layouts/navbar/main-siderbar.tsx
+++ b/apps/app/layouts/navbar/main-siderbar.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 // next
 import Link from "next/link";
 import { useRouter } from "next/router";
@@ -15,15 +15,16 @@ import {
   Bars3Icon,
   Cog6ToothIcon,
   RectangleStackIcon,
-  UserGroupIcon,
   XMarkIcon,
   ArrowLongLeftIcon,
   QuestionMarkCircleIcon,
   RectangleGroupIcon,
 } from "@heroicons/react/24/outline";
-// constants
+// common
 import { classNames } from "constants/common";
 
+type Props = { collapse?: boolean };
+
 const navigation = (projectId: string) => [
   {
     name: "Issues",
@@ -35,16 +36,11 @@ const navigation = (projectId: string) => [
     href: `/projects/${projectId}/cycles`,
     icon: ArrowPathIcon,
   },
-  {
-    name: "Modules",
-    href: `/projects/${projectId}/modules`,
-    icon: RectangleGroupIcon,
-  },
-  {
-    name: "Members",
-    href: `/projects/${projectId}/members`,
-    icon: UserGroupIcon,
-  },
+  // {
+  //   name: "Modules",
+  //   href: `/projects/${projectId}/modules`,
+  //   icon: RectangleGroupIcon,
+  // },
   {
     name: "Settings",
     href: `/projects/${projectId}/settings`,
@@ -52,7 +48,7 @@ const navigation = (projectId: string) => [
   },
 ];
 
-const Sidebar: React.FC = () => {
+const Sidebar: React.FC<Props> = ({ collapse = false }) => {
   const [sidebarOpen, setSidebarOpen] = useState(false);
 
   const router = useRouter();
@@ -144,35 +140,35 @@ const Sidebar: React.FC = () => {
       </Transition.Root>
       <div
         className={`${
-          sidebarCollapse ? "" : "w-auto md:w-60"
+          sidebarCollapse || collapse ? "" : "w-auto md:w-60"
         } h-full hidden md:inset-y-0 md:flex md:flex-col`}
       >
         <div className="h-full flex flex-1 flex-col border-r border-gray-200">
           <div className="h-full flex flex-1 flex-col pt-2">
-            <WorkspaceOptions sidebarCollapse={sidebarCollapse} />
-            <ProjectsList navigation={navigation} sidebarCollapse={sidebarCollapse} />
+            <WorkspaceOptions sidebarCollapse={sidebarCollapse || collapse} />
+            <ProjectsList navigation={navigation} sidebarCollapse={sidebarCollapse || collapse} />
             <div
               className={`px-2 py-2 w-full self-baseline flex items-center bg-primary ${
-                sidebarCollapse ? "flex-col-reverse" : ""
+                sidebarCollapse || collapse ? "flex-col-reverse" : ""
               }`}
             >
               <button
                 type="button"
                 className={`flex items-center gap-3 px-2 py-2 text-xs font-medium rounded-md text-gray-500 hover:bg-gray-100 hover:text-gray-900 outline-none ${
-                  sidebarCollapse ? "justify-center w-full" : ""
+                  sidebarCollapse || collapse ? "justify-center w-full" : ""
                 }`}
                 onClick={() => toggleCollapsed()}
               >
                 <ArrowLongLeftIcon
                   className={`h-4 w-4 text-gray-500 group-hover:text-gray-900 flex-shrink-0 duration-300 ${
-                    sidebarCollapse ? "rotate-180" : ""
+                    sidebarCollapse || collapse ? "rotate-180" : ""
                   }`}
                 />
               </button>
               <button
                 type="button"
                 className={`flex items-center gap-3 px-2 py-2 text-xs font-medium rounded-md text-gray-500 hover:bg-gray-100 hover:text-gray-900 outline-none ${
-                  sidebarCollapse ? "justify-center w-full" : ""
+                  sidebarCollapse || collapse ? "justify-center w-full" : ""
                 }`}
                 onClick={() => {
                   const e = new KeyboardEvent("keydown", {
diff --git a/apps/app/layouts/navbar/settings-sidebar.tsx b/apps/app/layouts/navbar/settings-sidebar.tsx
index 9fd288e46..3fb6e284a 100644
--- a/apps/app/layouts/navbar/settings-sidebar.tsx
+++ b/apps/app/layouts/navbar/settings-sidebar.tsx
@@ -1,12 +1,13 @@
 // next
+import { ArrowLeftIcon } from "@heroicons/react/24/outline";
 import Link from "next/link";
 import { useRouter } from "next/router";
 
 type Props = {
-  links: Array<{
+  links: {
     label: string;
     href: string;
-  }>;
+  }[];
 };
 
 const SettingsSidebar: React.FC<Props> = ({ links }) => {
@@ -14,9 +15,9 @@ const SettingsSidebar: React.FC<Props> = ({ links }) => {
 
   return (
     <nav className="h-screen w-72 border-r border-gray-200">
-      <div className="h-full p-2 pt-4">
-        <h2 className="text-lg font-medium leading-5">Settings</h2>
-        <div className="mt-3">
+      <div className="p-2 pl-6 mt-16">
+        <h2 className="flex items-center gap-2 text-lg font-medium leading-5">Settings</h2>
+        <div className="mt-6 space-y-1">
           {links.map((link, index) => (
             <h4 key={index}>
               <Link href={link.href}>
diff --git a/apps/app/layouts/settings-layout.tsx b/apps/app/layouts/settings-layout.tsx
index 1180ae9ce..b5d3496f8 100644
--- a/apps/app/layouts/settings-layout.tsx
+++ b/apps/app/layouts/settings-layout.tsx
@@ -19,12 +19,11 @@ type Props = {
   children: React.ReactNode;
   noPadding?: boolean;
   bg?: "primary" | "secondary";
+  noHeader?: boolean;
   breadcrumbs?: JSX.Element;
+  left?: JSX.Element;
   right?: JSX.Element;
-  links: Array<{
-    label: string;
-    href: string;
-  }>;
+  type: "workspace" | "project";
 };
 
 const SettingsLayout: React.FC<Props> = ({
@@ -32,30 +31,80 @@ const SettingsLayout: React.FC<Props> = ({
   children,
   noPadding = false,
   bg = "primary",
+  noHeader = false,
   breadcrumbs,
+  left,
   right,
-  links,
+  type,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
 
   const router = useRouter();
 
-  const { user, isUserLoading } = useUser();
+  const { activeWorkspace, activeProject, user, isUserLoading } = useUser();
 
   useEffect(() => {
     if (!isUserLoading && (!user || user === null)) router.push("/signin");
   }, [isUserLoading, user, router]);
 
+  const workspaceLinks: {
+    label: string;
+    href: string;
+  }[] = [
+    {
+      label: "General",
+      href: "#",
+    },
+    {
+      label: "Control",
+      href: "#",
+    },
+    {
+      label: "States",
+      href: "#",
+    },
+    {
+      label: "Labels",
+      href: "#",
+    },
+  ];
+
+  const sidebarLinks: {
+    label: string;
+    href: string;
+  }[] = [
+    {
+      label: "General",
+      href: `/projects/${activeProject?.id}/settings`,
+    },
+    {
+      label: "Control",
+      href: `/projects/${activeProject?.id}/settings/control`,
+    },
+    {
+      label: "Members",
+      href: `/projects/${activeProject?.id}/settings/members`,
+    },
+    {
+      label: "States",
+      href: `/projects/${activeProject?.id}/settings/states`,
+    },
+    {
+      label: "Labels",
+      href: `/projects/${activeProject?.id}/settings/labels`,
+    },
+  ];
+
   return (
     <Container meta={meta}>
       <CreateProjectModal isOpen={isOpen} setIsOpen={setIsOpen} />
       <div className="h-screen w-full flex overflow-x-hidden">
-        <Sidebar />
-        <SettingsSidebar links={links} />
+        <Sidebar collapse />
+        <SettingsSidebar links={type === "workspace" ? workspaceLinks : sidebarLinks} />
         <main className="h-screen w-full flex flex-col overflow-y-auto min-w-0">
-          <Header breadcrumbs={breadcrumbs} right={right} />
+          {noHeader ? null : <Header breadcrumbs={breadcrumbs} left={left} right={right} />}
           <div
-            className={`w-full flex-grow ${noPadding ? "" : "p-5"} ${
+            className={`w-full flex-grow ${noPadding ? "" : "p-5 px-16"} ${
               bg === "primary" ? "bg-primary" : bg === "secondary" ? "bg-secondary" : "bg-primary"
             }`}
           >
diff --git a/apps/app/lib/hooks/useIssuesFilter.tsx b/apps/app/lib/hooks/useIssuesFilter.tsx
index ca75e54b7..baa87ba69 100644
--- a/apps/app/lib/hooks/useIssuesFilter.tsx
+++ b/apps/app/lib/hooks/useIssuesFilter.tsx
@@ -1,4 +1,3 @@
-// hooks
 import useTheme from "./useTheme";
 import useUser from "./useUser";
 // commons
@@ -11,13 +10,16 @@ import type { IIssue } from "types";
 const useIssuesFilter = (projectIssues: IIssue[]) => {
   const {
     issueView,
-    setIssueView,
     groupByProperty,
     setGroupByProperty,
     orderBy,
     setOrderBy,
     filterIssue,
     setFilterIssue,
+    resetFilterToDefault,
+    setNewFilterDefaultView,
+    setIssueViewToKanban,
+    setIssueViewToList,
   } = useTheme();
 
   const { states } = useUser();
@@ -89,13 +91,16 @@ const useIssuesFilter = (projectIssues: IIssue[]) => {
   return {
     groupedByIssues,
     issueView,
-    setIssueView,
     groupByProperty,
     setGroupByProperty,
     orderBy,
     setOrderBy,
     filterIssue,
     setFilterIssue,
+    resetFilterToDefault,
+    setNewFilterDefaultView,
+    setIssueViewToKanban,
+    setIssueViewToList,
   } as const;
 };
 
diff --git a/apps/app/lib/hooks/useIssuesProperties.tsx b/apps/app/lib/hooks/useIssuesProperties.tsx
index ccd94e6b6..e509a6f16 100644
--- a/apps/app/lib/hooks/useIssuesProperties.tsx
+++ b/apps/app/lib/hooks/useIssuesProperties.tsx
@@ -16,8 +16,9 @@ const initialValues: Properties = {
   assignee: true,
   priority: false,
   start_date: false,
-  target_date: false,
+  due_date: false,
   cycle: false,
+  children_count: false,
 };
 
 const useIssuesProperties = (workspaceSlug?: string, projectId?: string) => {
@@ -25,7 +26,7 @@ const useIssuesProperties = (workspaceSlug?: string, projectId?: string) => {
 
   const { user } = useUser();
 
-  const { data: issueProperties } = useSWR<IssuePriorities>(
+  const { data: issueProperties, mutate: mutateIssueProperties } = useSWR<IssuePriorities>(
     workspaceSlug && projectId ? ISSUE_PROPERTIES_ENDPOINT(workspaceSlug, projectId) : null,
     workspaceSlug && projectId
       ? () => issueServices.getIssueProperties(workspaceSlug, projectId)
@@ -55,6 +56,14 @@ const useIssuesProperties = (workspaceSlug?: string, projectId?: string) => {
     (key: keyof Properties) => {
       if (!workspaceSlug || !projectId || !issueProperties || !user) return;
       setProperties((prev) => ({ ...prev, [key]: !prev[key] }));
+      mutateIssueProperties(
+        (prev) =>
+          ({
+            ...prev,
+            properties: { ...prev?.properties, [key]: !prev?.properties?.[key] },
+          } as IssuePriorities),
+        false
+      );
       if (Object.keys(issueProperties).length > 0) {
         issueServices.patchIssueProperties(workspaceSlug, projectId, issueProperties.id, {
           properties: {
@@ -70,23 +79,19 @@ const useIssuesProperties = (workspaceSlug?: string, projectId?: string) => {
         });
       }
     },
-    [workspaceSlug, projectId, issueProperties, user]
+    [workspaceSlug, projectId, issueProperties, user, mutateIssueProperties]
   );
 
-  const newProperties = Object.keys(properties).reduce((obj: any, key) => {
-    if (
-      key !== "children" &&
-      key !== "name" &&
-      key !== "parent" &&
-      key !== "project" &&
-      key !== "description" &&
-      key !== "attachments" &&
-      key !== "sequence_id"
-    ) {
-      obj[key] = properties[key as keyof Properties];
-    }
-    return obj;
-  }, {});
+  const newProperties: Properties = {
+    key: properties.key,
+    state: properties.state,
+    assignee: properties.assignee,
+    priority: properties.priority,
+    start_date: properties.start_date,
+    due_date: properties.due_date,
+    cycle: properties.cycle,
+    children_count: properties.children_count,
+  };
 
   return [newProperties, updateIssueProperties] as const;
 };
diff --git a/apps/app/lib/hooks/useMyIssueFilter.tsx b/apps/app/lib/hooks/useMyIssueFilter.tsx
new file mode 100644
index 000000000..019d0fa99
--- /dev/null
+++ b/apps/app/lib/hooks/useMyIssueFilter.tsx
@@ -0,0 +1,106 @@
+import { useEffect, useState } from "react";
+// hooks
+import useUser from "./useUser";
+// types
+import { Properties, NestedKeyOf, IIssue } from "types";
+// services
+import userService from "lib/services/user.service";
+// common
+import { groupBy } from "constants/common";
+
+import { PRIORITIES } from "constants/";
+
+const initialValues: Properties = {
+  key: true,
+  state: true,
+  assignee: true,
+  priority: false,
+  start_date: false,
+  due_date: false,
+  cycle: false,
+  children_count: false,
+};
+
+const useMyIssuesProperties = (issues?: IIssue[]) => {
+  const [properties, setProperties] = useState<Properties>(initialValues);
+  const [groupByProperty, setGroupByProperty] = useState<NestedKeyOf<IIssue> | null>(null);
+
+  const { states, user } = useUser();
+
+  useEffect(() => {
+    if (!user) return;
+    setProperties({ ...initialValues, ...user.my_issues_prop?.properties });
+    setGroupByProperty(user.my_issues_prop?.groupBy ?? null);
+  }, [user]);
+
+  let groupedByIssues: {
+    [key: string]: IIssue[];
+  } = {
+    ...(groupByProperty === "state_detail.name"
+      ? Object.fromEntries(
+          states
+            ?.sort((a, b) => a.sequence - b.sequence)
+            ?.map((state) => [
+              state.name,
+              issues?.filter((issue) => issue.state === state.name) ?? [],
+            ]) ?? []
+        )
+      : groupByProperty === "priority"
+      ? Object.fromEntries(
+          PRIORITIES.map((priority) => [
+            priority,
+            issues?.filter((issue) => issue.priority === priority) ?? [],
+          ])
+        )
+      : {}),
+    ...groupBy(issues ?? [], groupByProperty ?? ""),
+  };
+
+  const setMyIssueProperty = (key: keyof Properties) => {
+    if (!user) return;
+    userService.updateUser({ my_issues_prop: { properties, groupBy: groupByProperty } });
+    setProperties((prevData) => ({
+      ...prevData,
+      [key]: !prevData[key],
+    }));
+    localStorage.setItem(
+      "my_issues_prop",
+      JSON.stringify({
+        properties: {
+          ...properties,
+          [key]: !properties[key],
+        },
+        groupBy: groupByProperty,
+      })
+    );
+  };
+
+  const setMyIssueGroupByProperty = (groupByProperty: NestedKeyOf<IIssue> | null) => {
+    if (!user) return;
+    userService.updateUser({ my_issues_prop: { properties, groupBy: groupByProperty } });
+    setGroupByProperty(groupByProperty);
+    localStorage.setItem(
+      "my_issues_prop",
+      JSON.stringify({ properties, groupBy: groupByProperty })
+    );
+  };
+
+  useEffect(() => {
+    const viewProps = localStorage.getItem("my_issues_prop");
+    if (viewProps) {
+      const { properties, groupBy } = JSON.parse(viewProps);
+      setProperties(properties);
+      setGroupByProperty(groupBy);
+    }
+  }, []);
+
+  return {
+    filteredIssues: groupedByIssues,
+    groupByProperty,
+    properties,
+    setMyIssueProperty,
+    setMyIssueGroupByProperty,
+  } as const;
+};
+
+export default useMyIssuesProperties;
diff --git a/apps/app/lib/hooks/useOutsideClickDetector.tsx b/apps/app/lib/hooks/useOutsideClickDetector.tsx
new file mode 100644
index 000000000..f20666f8c
--- /dev/null
+++ b/apps/app/lib/hooks/useOutsideClickDetector.tsx
@@ -0,0 +1,19 @@
+import React, { useEffect } from "react";
+
+const useOutsideClickDetector = (ref: React.RefObject<HTMLElement>, callback: () => void) => {
+  const handleClick = (event: MouseEvent) => {
+    if (ref.current && !ref.current.contains(event.target as Node)) {
+      callback();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("click", handleClick);
+
+    return () => {
+      document.removeEventListener("click", handleClick);
+    };
+  });
+};
+
+export default useOutsideClickDetector;
diff --git a/apps/app/lib/services/issues.service.ts b/apps/app/lib/services/issues.service.ts
index 8d0fe52d9..75874bb0c 100644
--- a/apps/app/lib/services/issues.service.ts
+++ b/apps/app/lib/services/issues.service.ts
@@ -9,7 +9,6 @@ import {
   CYCLE_DETAIL,
   ISSUE_LABELS,
   BULK_DELETE_ISSUES,
-  BULK_ADD_ISSUES_TO_CYCLE,
   REMOVE_ISSUE_FROM_CYCLE,
   ISSUE_LABEL_DETAILS,
 } from "constants/api-routes";
@@ -93,7 +92,7 @@ class ProjectIssuesServices extends APIService {
     projectId: string,
     cycleId: string,
     data: {
-      issue: string;
+      issues: string[];
     }
   ) {
     return this.post(CYCLE_DETAIL(workspaceSlug, projectId, cycleId), data)
@@ -289,21 +288,6 @@ class ProjectIssuesServices extends APIService {
         throw error?.response?.data;
       });
   }
-
-  async bulkAddIssuesToCycle(
-    workspaceSlug: string,
-    projectId: string,
-    cycleId: string,
-    data: any
-  ): Promise<any> {
-    return this.post(BULK_ADD_ISSUES_TO_CYCLE(workspaceSlug, projectId, cycleId), data)
-      .then((response) => {
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
 }
 
 export default new ProjectIssuesServices();
diff --git a/apps/app/lib/services/project.service.ts b/apps/app/lib/services/project.service.ts
index 01de73ddf..bd78427c7 100644
--- a/apps/app/lib/services/project.service.ts
+++ b/apps/app/lib/services/project.service.ts
@@ -11,6 +11,7 @@ import {
   PROJECT_MEMBER_DETAIL,
   USER_PROJECT_INVITATIONS,
   PROJECT_VIEW_ENDPOINT,
+  PROJECT_MEMBER_ME,
 } from "constants/api-routes";
 // services
 import APIService from "lib/services/api.service";
@@ -132,6 +133,30 @@ class ProjectServices extends APIService {
       });
   }
 
+  async projectMemberMe(workspacSlug: string, projectId: string): Promise<IProjectMember> {
+    return this.get(PROJECT_MEMBER_ME(workspacSlug, projectId))
+      .then((response) => {
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getProjectMember(
+    workspacSlug: string,
+    projectId: string,
+    memberId: string
+  ): Promise<IProjectMember> {
+    return this.get(PROJECT_MEMBER_DETAIL(workspacSlug, projectId, memberId))
+      .then((response) => {
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
   async updateProjectMember(
     workspacSlug: string,
     projectId: string,
@@ -205,9 +230,12 @@ class ProjectServices extends APIService {
   async setProjectView(
     workspacSlug: string,
     projectId: string,
-    data: ProjectViewTheme
+    data: {
+      view_props?: ProjectViewTheme;
+      default_props?: ProjectViewTheme;
+    }
   ): Promise<any> {
-    await this.patch(PROJECT_VIEW_ENDPOINT(workspacSlug, projectId), data)
+    await this.post(PROJECT_VIEW_ENDPOINT(workspacSlug, projectId), data)
       .then((response) => {
         return response?.data;
       })
diff --git a/apps/app/lib/services/user.service.ts b/apps/app/lib/services/user.service.ts
index e4fe684fd..b8241834d 100644
--- a/apps/app/lib/services/user.service.ts
+++ b/apps/app/lib/services/user.service.ts
@@ -1,6 +1,7 @@
 // services
 import { USER_ENDPOINT, USER_ISSUES_ENDPOINT, USER_ONBOARD_ENDPOINT } from "constants/api-routes";
 import APIService from "lib/services/api.service";
+import type { IUser } from "types";
 
 const { NEXT_PUBLIC_API_BASE_URL } = process.env;
 
@@ -38,7 +39,7 @@ class UserService extends APIService {
       });
   }
 
-  async updateUser(data = {}): Promise<any> {
+  async updateUser(data: Partial<IUser>): Promise<any> {
     return this.patch(USER_ENDPOINT, data)
       .then((response) => {
         return response?.data;
diff --git a/apps/app/lib/services/workspace.service.ts b/apps/app/lib/services/workspace.service.ts
index 3ed6c0300..05a45a3cb 100644
--- a/apps/app/lib/services/workspace.service.ts
+++ b/apps/app/lib/services/workspace.service.ts
@@ -19,7 +19,12 @@ import APIService from "lib/services/api.service";
 const { NEXT_PUBLIC_API_BASE_URL } = process.env;
 
 // types
-import { IWorkspace, IWorkspaceMember, IWorkspaceMemberInvitation } from "types";
+import {
+  IWorkspace,
+  IWorkspaceMember,
+  IWorkspaceMemberInvitation,
+  ILastActiveWorkspaceDetails,
+} from "types";
 
 class WorkspaceService extends APIService {
   constructor() {
@@ -98,6 +103,16 @@ class WorkspaceService extends APIService {
       });
   }
 
+  async getLastActiveWorkspaceAndProjects(): Promise<ILastActiveWorkspaceDetails> {
+    return this.get(LAST_ACTIVE_WORKSPACE_AND_PROJECTS)
+      .then((response) => {
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
   async userWorkspaceInvitations(): Promise<IWorkspaceMemberInvitation[]> {
     return this.get(USER_WORKSPACE_INVITATIONS)
       .then((response) => {
diff --git a/apps/app/package.json b/apps/app/package.json
index ac979ef0f..a924293ea 100644
--- a/apps/app/package.json
+++ b/apps/app/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --port 3000",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
diff --git a/apps/app/pages/invitations.tsx b/apps/app/pages/invitations.tsx
index 2c3970dd6..8cb03d099 100644
--- a/apps/app/pages/invitations.tsx
+++ b/apps/app/pages/invitations.tsx
@@ -90,47 +90,7 @@ const OnBoard: NextPage = () => {
         <div className="w-full md:w-2/3 lg:w-1/3 p-8 rounded-lg">
           {invitations && workspaces ? (
             invitations.length > 0 ? (
-              <div className="mt-3 sm:mt-5">
-                <div className="mt-2">
-                  <h2 className="text-2xl font-medium mb-4">Join your workspaces</h2>
-                  <div className="space-y-2 mb-12">
-                    {invitations.map((item) => (
-                      <div
-                        className="relative flex items-center border px-4 py-2 rounded"
-                        key={item.id}
-                      >
-                        <div className="ml-3 text-sm flex flex-col items-start w-full">
-                          <h3 className="font-medium text-xl text-gray-700">
-                            {item.workspace.name}
-                          </h3>
-                          <p className="text-sm">invited by {item.workspace.owner.first_name}</p>
-                        </div>
-                        <div className="flex gap-x-2 h-5 items-center">
-                          <div className="h-full flex items-center gap-x-1">
-                            <input
-                              id={`${item.id}`}
-                              aria-describedby="workspaces"
-                              name={`${item.id}`}
-                              checked={invitationsRespond.includes(item.id)}
-                              value={item.workspace.name}
-                              onChange={() => {
-                                handleInvitation(
-                                  item,
-                                  invitationsRespond.includes(item.id) ? "withdraw" : "accepted"
-                                );
-                              }}
-                              type="checkbox"
-                              className="h-4 w-4 rounded border-gray-300 text-theme focus:ring-indigo-500"
-                            />
-                            <label htmlFor={item.id} className="text-sm">
-                              Accept
-                            </label>
-                          </div>
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                </div>
+              <div>
                 <h2 className="text-lg font-medium text-gray-900">Workspace Invitations</h2>
                 <p className="mt-1 text-sm text-gray-500">
                   Select invites that you want to accept.
diff --git a/apps/app/pages/me/my-issues.tsx b/apps/app/pages/me/my-issues.tsx
index 28420f210..3b6802ec6 100644
--- a/apps/app/pages/me/my-issues.tsx
+++ b/apps/app/pages/me/my-issues.tsx
@@ -1,17 +1,18 @@
 // react
 import React from "react";
 // next
-import type { NextPage } from "next";
 import Link from "next/link";
+import type { NextPage } from "next";
 import Image from "next/image";
 // swr
 import useSWR from "swr";
+// headless ui
+import { Disclosure, Listbox, Menu, Popover, Transition } from "@headlessui/react";
 // layouts
 import AppLayout from "layouts/app-layout";
 // hooks
 import useUser from "lib/hooks/useUser";
 // headless ui
-import { Disclosure, Listbox, Menu, Popover, Transition } from "@headlessui/react";
 // ui
 import { Spinner, Breadcrumbs, BreadcrumbItem, EmptySpace, EmptySpaceItem, HeaderButton } from "ui";
 // icons
@@ -31,6 +32,7 @@ import workspaceService from "lib/services/workspace.service";
 import useIssuesProperties from "lib/hooks/useIssuesProperties";
 // hoc
 import withAuth from "lib/hoc/withAuthWrapper";
+import useMyIssuesProperties from "lib/hooks/useMyIssueFilter";
 // components
 import ChangeStateDropdown from "components/project/issues/my-issues/ChangeStateDropdown";
 // types
@@ -97,6 +99,9 @@ const MyIssues: NextPage = () => {
       });
   };
 
+  const { filteredIssues, setMyIssueGroupByProperty, setMyIssueProperty, groupByProperty } =
+    useMyIssuesProperties(myIssues);
+
   return (
     <AppLayout
       breadcrumbs={
@@ -393,7 +398,7 @@ const MyIssues: NextPage = () => {
                                         </div>
                                       </div>
                                     )}
-                                    {properties.target_date && (
+                                    {properties.due_date && (
                                       <div
                                         className={`group relative flex-shrink-0 group flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300 ${
                                           issue.target_date === null
@@ -410,7 +415,7 @@ const MyIssues: NextPage = () => {
                                           : "N/A"}
                                         <div className="absolute bottom-full right-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
                                           <h5 className="font-medium mb-1 text-gray-900">
-                                            Target date
+                                            Due date
                                           </h5>
                                           <div>
                                             {renderShortNumericDateFormat(issue.target_date ?? "")}
@@ -418,14 +423,14 @@ const MyIssues: NextPage = () => {
                                           <div>
                                             {issue.target_date &&
                                               (issue.target_date < new Date().toISOString()
-                                                ? `Target date has passed by ${findHowManyDaysLeft(
+                                                ? `Due date has passed by ${findHowManyDaysLeft(
                                                     issue.target_date
                                                   )} days`
                                                 : findHowManyDaysLeft(issue.target_date) <= 3
-                                                ? `Target date is in ${findHowManyDaysLeft(
+                                                ? `Due date is in ${findHowManyDaysLeft(
                                                     issue.target_date
                                                   )} days`
-                                                : "Target date")}
+                                                : "Due date")}
                                           </div>
                                         </div>
                                       </div>
diff --git a/apps/app/pages/projects/[projectId]/cycles/[cycleId].tsx b/apps/app/pages/projects/[projectId]/cycles/[cycleId].tsx
index 0d91a58c6..7f0e908aa 100644
--- a/apps/app/pages/projects/[projectId]/cycles/[cycleId].tsx
+++ b/apps/app/pages/projects/[projectId]/cycles/[cycleId].tsx
@@ -1,7 +1,6 @@
 // react
 import React, { useState } from "react";
 // next
-import Link from "next/link";
 import { useRouter } from "next/router";
 // swr
 import useSWR, { mutate } from "swr";
@@ -12,6 +11,11 @@ import AppLayout from "layouts/app-layout";
 // components
 import CyclesListView from "components/project/cycles/list-view";
 import CyclesBoardView from "components/project/cycles/board-view";
+import CreateUpdateIssuesModal from "components/project/issues/create-update-issue-modal";
+import CycleIssuesListModal from "components/project/cycles/cycle-issues-list-modal";
+import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
+// constants
+import { filterIssueOptions, groupByOptions, orderByOptions } from "constants/";
 // services
 import issuesServices from "lib/services/issues.service";
 import cycleServices from "lib/services/cycles.service";
@@ -28,60 +32,21 @@ import { BreadcrumbItem, Breadcrumbs, CustomMenu } from "ui";
 import { Squares2X2Icon } from "@heroicons/react/20/solid";
 import { ArrowPathIcon, ChevronDownIcon, ListBulletIcon } from "@heroicons/react/24/outline";
 // types
-import {
-  CycleIssueResponse,
-  IIssue,
-  NestedKeyOf,
-  Properties,
-  SelectIssue,
-  SelectSprintType,
-} from "types";
+import { CycleIssueResponse, IIssue, NestedKeyOf, Properties, SelectIssue } from "types";
 // fetch-keys
 import { CYCLE_ISSUES, PROJECT_MEMBERS } from "constants/fetch-keys";
-// constants
+// common
 import { classNames, replaceUnderscoreIfSnakeCase } from "constants/common";
-import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal";
-import CycleIssuesListModal from "components/project/cycles/cycle-issues-list-modal";
-import ConfirmCycleDeletion from "components/project/cycles/confirm-cycle-deletion";
 
-const groupByOptions: Array<{ name: string; key: NestedKeyOf<IIssue> | null }> = [
-  { name: "State", key: "state_detail.name" },
-  { name: "Priority", key: "priority" },
-  { name: "Created By", key: "created_by" },
-  { name: "None", key: null },
-];
-
-const orderByOptions: Array<{ name: string; key: NestedKeyOf<IIssue> }> = [
-  { name: "Last created", key: "created_at" },
-  { name: "Last updated", key: "updated_at" },
-  { name: "Priority", key: "priority" },
-];
-
-const filterIssueOptions: Array<{
-  name: string;
-  key: "activeIssue" | "backlogIssue" | null;
-}> = [
-  {
-    name: "All",
-    key: null,
-  },
-  {
-    name: "Active Issues",
-    key: "activeIssue",
-  },
-  {
-    name: "Backlog Issues",
-    key: "backlogIssue",
-  },
-];
-
-type Props = {};
-
-const SingleCycle: React.FC<Props> = () => {
+const SingleCycle: React.FC = () => {
   const [isIssueModalOpen, setIsIssueModalOpen] = useState(false);
-  const [selectedCycle, setSelectedCycle] = useState<SelectSprintType>();
   const [selectedIssues, setSelectedIssues] = useState<SelectIssue>();
   const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false);
+  const [deleteIssue, setDeleteIssue] = useState<string | undefined>(undefined);
+
+  const [preloadedData, setPreloadedData] = useState<
+    (Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
+  >(undefined);
 
   const { activeWorkspace, activeProject, cycles, issues } = useUser();
 
@@ -118,9 +83,20 @@ const SingleCycle: React.FC<Props> = () => {
     }
   );
 
+  const partialUpdateIssue = (formData: Partial<IIssue>, issueId: string) => {
+    if (!activeWorkspace || !activeProject) return;
+    issuesServices
+      .patchIssue(activeWorkspace.slug, activeProject.id, issueId, formData)
+      .then((response) => {
+        mutate(CYCLE_ISSUES(cycleId as string));
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  };
+
   const {
     issueView,
-    setIssueView,
     groupByProperty,
     setGroupByProperty,
     groupedByIssues,
@@ -128,43 +104,22 @@ const SingleCycle: React.FC<Props> = () => {
     setFilterIssue,
     orderBy,
     filterIssue,
+    setIssueViewToKanban,
+    setIssueViewToList,
   } = useIssuesFilter(cycleIssuesArray ?? []);
 
   const openCreateIssueModal = (
     issue?: IIssue,
     actionType: "create" | "edit" | "delete" = "create"
   ) => {
-    const cycle = cycles?.find((cycle) => cycle.id === cycleId);
-    if (cycle) {
-      setSelectedCycle({
-        ...cycle,
-        actionType: "create-issue",
-      });
-      if (issue) setSelectedIssues({ ...issue, actionType });
-      setIsIssueModalOpen(true);
-    }
+    if (issue) setSelectedIssues({ ...issue, actionType });
+    setIsIssueModalOpen(true);
   };
 
   const openIssuesListModal = () => {
     setCycleIssuesListModal(true);
   };
 
-  const addIssueToCycle = (cycleId: string, issueId: string) => {
-    if (!activeWorkspace || !activeProject?.id) return;
-
-    issuesServices
-      .addIssueToCycle(activeWorkspace.slug, activeProject.id, cycleId, {
-        issue: issueId,
-      })
-      .then((response) => {
-        console.log(response);
-        mutate(CYCLE_ISSUES(cycleId));
-      })
-      .catch((error) => {
-        console.log(error);
-      });
-  };
-
   const handleDragEnd = (result: DropResult) => {
     if (!result.destination) return;
     const { source, destination } = result;
@@ -192,7 +147,7 @@ const SingleCycle: React.FC<Props> = () => {
         .then((res) => {
           issuesServices
             .addIssueToCycle(activeWorkspace.slug, activeProject.id, destination.droppableId, {
-              issue: result.draggableId.split(",")[1],
+              issues: [result.draggableId.split(",")[1]],
             })
             .then((res) => {
               console.log(res);
@@ -230,13 +185,9 @@ const SingleCycle: React.FC<Props> = () => {
   return (
     <>
       <CreateUpdateIssuesModal
-        isOpen={
-          isIssueModalOpen &&
-          selectedCycle?.actionType === "create-issue" &&
-          selectedIssues?.actionType !== "delete"
-        }
+        isOpen={isIssueModalOpen && selectedIssues?.actionType !== "delete"}
         data={selectedIssues}
-        prePopulateData={{ sprints: selectedCycle?.id }}
+        prePopulateData={{ sprints: cycleId as string, ...preloadedData }}
         setIsOpen={setIsIssueModalOpen}
         projectId={activeProject?.id}
       />
@@ -246,6 +197,11 @@ const SingleCycle: React.FC<Props> = () => {
         issues={issues}
         cycleId={cycleId as string}
       />
+      <ConfirmIssueDeletion
+        handleClose={() => setDeleteIssue(undefined)}
+        isOpen={!!deleteIssue}
+        data={issues?.results.find((issue) => issue.id === deleteIssue)}
+      />
       <AppLayout
         breadcrumbs={
           <Breadcrumbs>
@@ -264,6 +220,7 @@ const SingleCycle: React.FC<Props> = () => {
               </>
             }
             className="ml-1.5"
+            width="auto"
           >
             {cycles?.map((cycle) => (
               <CustomMenu.MenuItem
@@ -284,10 +241,7 @@ const SingleCycle: React.FC<Props> = () => {
                 className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none ${
                   issueView === "list" ? "bg-gray-200" : ""
                 }`}
-                onClick={() => {
-                  setIssueView("list");
-                  setGroupByProperty(null);
-                }}
+                onClick={() => setIssueViewToList()}
               >
                 <ListBulletIcon className="h-4 w-4" />
               </button>
@@ -296,10 +250,7 @@ const SingleCycle: React.FC<Props> = () => {
                 className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none ${
                   issueView === "kanban" ? "bg-gray-200" : ""
                 }`}
-                onClick={() => {
-                  setIssueView("kanban");
-                  setGroupByProperty("state_detail.name");
-                }}
+                onClick={() => setIssueViewToKanban()}
               >
                 <Squares2X2Icon className="h-4 w-4" />
               </button>
@@ -326,7 +277,7 @@ const SingleCycle: React.FC<Props> = () => {
                     leaveFrom="opacity-100 translate-y-0"
                     leaveTo="opacity-0 translate-y-1"
                   >
-                    <Popover.Panel className="absolute right-0 z-10 mt-1 w-screen max-w-xs transform p-3 bg-white rounded-lg shadow-lg overflow-hidden">
+                    <Popover.Panel className="absolute right-0 z-20 mt-1 w-screen max-w-xs transform p-3 bg-white rounded-lg shadow-lg overflow-hidden">
                       <div className="relative flex flex-col gap-1 gap-y-4">
                         <div className="flex justify-between items-center">
                           <h4 className="text-sm text-gray-600">Group by</h4>
@@ -424,6 +375,7 @@ const SingleCycle: React.FC<Props> = () => {
             openCreateIssueModal={openCreateIssueModal}
             openIssuesListModal={openIssuesListModal}
             removeIssueFromCycle={removeIssueFromCycle}
+            setPreloadedData={setPreloadedData}
           />
         ) : (
           <div className="h-screen">
@@ -435,6 +387,9 @@ const SingleCycle: React.FC<Props> = () => {
               members={members}
               openCreateIssueModal={openCreateIssueModal}
               openIssuesListModal={openIssuesListModal}
+              handleDeleteIssue={setDeleteIssue}
+              partialUpdateIssue={partialUpdateIssue}
+              setPreloadedData={setPreloadedData}
             />
           </div>
         )}
diff --git a/apps/app/pages/projects/[projectId]/cycles/index.tsx b/apps/app/pages/projects/[projectId]/cycles/index.tsx
index 1106d5134..00b81839a 100644
--- a/apps/app/pages/projects/[projectId]/cycles/index.tsx
+++ b/apps/app/pages/projects/[projectId]/cycles/index.tsx
@@ -106,7 +106,13 @@ const ProjectSprints: NextPage = () => {
                   </span>
                 }
                 Icon={PlusIcon}
-                action={() => setCreateUpdateCycleModal(true)}
+                action={() => {
+                  const e = new KeyboardEvent("keydown", {
+                    ctrlKey: true,
+                    key: "q",
+                  });
+                  document.dispatchEvent(e);
+                }}
               />
             </EmptySpace>
           </div>
diff --git a/apps/app/pages/projects/[projectId]/issues/[issueId].tsx b/apps/app/pages/projects/[projectId]/issues/[issueId].tsx
index 83d47f4ac..43adddc27 100644
--- a/apps/app/pages/projects/[projectId]/issues/[issueId].tsx
+++ b/apps/app/pages/projects/[projectId]/issues/[issueId].tsx
@@ -1,24 +1,21 @@
+import React, { useCallback, useEffect, useState } from "react";
 // next
 import Link from "next/link";
+import dynamic from "next/dynamic";
 import type { NextPage } from "next";
 import { useRouter } from "next/router";
-import dynamic from "next/dynamic";
-// react
-import React, { useCallback, useEffect, useState } from "react";
 // swr
-import useSWR, { mutate } from "swr";
+import { mutate } from "swr";
 // react hook form
 import { useForm } from "react-hook-form";
 // headless ui
 import { Disclosure, Menu, Tab, Transition } from "@headlessui/react";
+// fetch keys
+import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
 // services
 import issuesServices from "lib/services/issues.service";
-// fetch keys
-import {
-  PROJECT_ISSUES_ACTIVITY,
-  PROJECT_ISSUES_COMMENTS,
-  PROJECT_ISSUES_LIST,
-} from "constants/fetch-keys";
+// common
+import { debounce } from "constants/common";
 // hooks
 import useUser from "lib/hooks/useUser";
 // hoc
@@ -26,22 +23,23 @@ import withAuth from "lib/hoc/withAuthWrapper";
 // layouts
 import AppLayout from "layouts/app-layout";
 // components
-import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal";
-import IssueCommentSection from "components/project/issues/issue-detail/comment/IssueCommentSection";
 import AddAsSubIssue from "components/project/issues/issue-detail/add-as-sub-issue";
-import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
-// common
-import { debounce } from "constants/common";
-// components
+import CreateUpdateIssuesModal from "components/project/issues/create-update-issue-modal";
 import IssueDetailSidebar from "components/project/issues/issue-detail/issue-detail-sidebar";
-// activites
-import IssueActivitySection from "components/project/issues/issue-detail/activity";
+import IssueCommentSection from "components/project/issues/issue-detail/comment/IssueCommentSection";
+const IssueActivitySection = dynamic(
+  () => import("components/project/issues/issue-detail/activity"),
+  {
+    loading: () => (
+      <div className="w-full h-full flex justify-center items-center">
+        <Spinner />
+      </div>
+    ),
+    ssr: false,
+  }
+);
 // ui
-import { Spinner, TextArea } from "ui";
-import HeaderButton from "ui/HeaderButton";
-import { BreadcrumbItem, Breadcrumbs } from "ui/Breadcrumbs";
-// types
-import { IIssue, IIssueComment, IssueResponse } from "types";
+import { Spinner, TextArea, HeaderButton, Breadcrumbs } from "ui";
 // icons
 import {
   ChevronLeftIcon,
@@ -49,31 +47,52 @@ import {
   EllipsisHorizontalIcon,
   PlusIcon,
 } from "@heroicons/react/24/outline";
+// types
+import { IIssue, IssueResponse } from "types";
 
 const RichTextEditor = dynamic(() => import("components/lexical/editor"), {
   ssr: false,
 });
 
+const defaultValues = {
+  name: "",
+  description: "",
+  state: "",
+  assignees_list: [],
+  priority: "low",
+  blockers_list: [],
+  blocked_list: [],
+  target_date: new Date().toString(),
+  issue_cycle: null,
+  labels_list: [],
+};
+
 const IssueDetail: NextPage = () => {
-  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+  const router = useRouter();
+
+  const { issueId, projectId } = router.query;
+
+  const { activeWorkspace, activeProject, issues, mutateIssues } = useUser();
+
+  const issueDetail = issues?.results?.find((issue) => issue.id === issueId);
+
+  const prevIssue = issues?.results[issues?.results.findIndex((issue) => issue.id === issueId) - 1];
+  const nextIssue = issues?.results[issues?.results.findIndex((issue) => issue.id === issueId) + 1];
+
+  const subIssues = (issues && issues.results.filter((i) => i.parent === issueId)) ?? [];
+  const siblingIssues =
+    issueDetail &&
+    issues?.results.filter((i) => i.parent === issueDetail.parent && i.id !== issueId);
 
   const [isOpen, setIsOpen] = useState(false);
   const [isAddAsSubIssueOpen, setIsAddAsSubIssueOpen] = useState(false);
 
-  const [issueDetail, setIssueDetail] = useState<IIssue | undefined>(undefined);
-
   const [preloadedData, setPreloadedData] = useState<
     (Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
   >(undefined);
 
   const [issueDescriptionValue, setIssueDescriptionValue] = useState("");
 
-  const router = useRouter();
-
-  const { issueId, projectId } = router.query;
-
-  const { activeWorkspace, activeProject, issues, mutateIssues, states } = useUser();
-
   const handleDescriptionChange: any = (value: any) => {
     console.log(value);
     setIssueDescriptionValue(value);
@@ -87,44 +106,9 @@ const IssueDetail: NextPage = () => {
     control,
     watch,
   } = useForm<IIssue>({
-    defaultValues: {
-      name: "",
-      description: "",
-      state: "",
-      assignees_list: [],
-      priority: "low",
-      blockers_list: [],
-      blocked_list: [],
-      target_date: new Date().toString(),
-      cycle: "",
-      labels_list: [],
-    },
+    defaultValues,
   });
 
-  const { data: issueActivities } = useSWR<any[]>(
-    activeWorkspace && projectId && issueId ? PROJECT_ISSUES_ACTIVITY : null,
-    activeWorkspace && projectId && issueId
-      ? () =>
-          issuesServices.getIssueActivities(
-            activeWorkspace.slug,
-            projectId as string,
-            issueId as string
-          )
-      : null
-  );
-
-  const { data: issueComments } = useSWR<IIssueComment[]>(
-    activeWorkspace && projectId && issueId ? PROJECT_ISSUES_COMMENTS : null,
-    activeWorkspace && projectId && issueId
-      ? () =>
-          issuesServices.getIssueComments(
-            activeWorkspace.slug,
-            projectId as string,
-            issueId as string
-          )
-      : null
-  );
-
   const submitChanges = useCallback(
     (formData: Partial<IIssue>) => {
       if (!activeWorkspace || !activeProject || !issueId) return;
@@ -150,7 +134,15 @@ const IssueDetail: NextPage = () => {
       issuesServices
         .patchIssue(activeWorkspace.slug, projectId as string, issueId as string, payload)
         .then((response) => {
-          console.log(response);
+          mutateIssues((prevData) => ({
+            ...(prevData as IssueResponse),
+            results: (prevData?.results ?? []).map((issue) => {
+              if (issue.id === issueId) {
+                return { ...issue, ...response };
+              }
+              return issue;
+            }),
+          }));
         })
         .catch((error) => {
           console.log(error);
@@ -172,25 +164,11 @@ const IssueDetail: NextPage = () => {
           issueDetail.blocked_issues?.map((issue) => issue.blocked_issue_detail?.id),
         assignees_list:
           issueDetail.assignees_list ?? issueDetail.assignee_details?.map((user) => user.id),
-        labels_list: issueDetail.labels_list ?? issueDetail.labels?.map((label) => label),
+        labels_list: issueDetail.labels_list ?? issueDetail.labels,
+        labels: issueDetail.labels_list ?? issueDetail.labels,
       });
   }, [issueDetail, reset]);
 
-  useEffect(() => {
-    const issueIndex = issues?.results.findIndex((issue) => issue.id === issueId);
-    if (issueIndex === undefined) return;
-    const issueDetail = issues?.results[issueIndex];
-    setIssueDetail(issueDetail);
-  }, [issues, issueId]);
-
-  const prevIssue = issues?.results[issues?.results.findIndex((issue) => issue.id === issueId) - 1];
-  const nextIssue = issues?.results[issues?.results.findIndex((issue) => issue.id === issueId) + 1];
-
-  const subIssues = (issues && issues.results.filter((i) => i.parent === issueDetail?.id)) ?? [];
-  const siblingIssues =
-    issueDetail &&
-    issues?.results.filter((i) => i.parent === issueDetail.parent && i.id !== issueDetail.id);
-
   const handleSubIssueRemove = (issueId: string) => {
     if (activeWorkspace && activeProject) {
       issuesServices
@@ -213,19 +191,17 @@ const IssueDetail: NextPage = () => {
     }
   };
 
-  // console.log(issueDetail);
-
   return (
     <AppLayout
       noPadding={true}
       bg="secondary"
       breadcrumbs={
         <Breadcrumbs>
-          <BreadcrumbItem
+          <Breadcrumbs.BreadcrumbItem
             title={`${activeProject?.name ?? "Project"} Issues`}
             link={`/projects/${activeProject?.id}/issues`}
           />
-          <BreadcrumbItem
+          <Breadcrumbs.BreadcrumbItem
             title={`Issue ${activeProject?.identifier ?? "Project"}-${
               issueDetail?.sequence_id ?? "..."
             } Details`}
@@ -237,7 +213,7 @@ const IssueDetail: NextPage = () => {
           <HeaderButton
             Icon={ChevronLeftIcon}
             label="Previous"
-            className={`${!prevIssue ? "cursor-not-allowed opacity-70" : ""}`}
+            className={!prevIssue ? "cursor-not-allowed opacity-70" : ""}
             onClick={() => {
               if (!prevIssue) return;
               router.push(`/projects/${prevIssue.project}/issues/${prevIssue.id}`);
@@ -247,7 +223,7 @@ const IssueDetail: NextPage = () => {
             Icon={ChevronRightIcon}
             disabled={!nextIssue}
             label="Next"
-            className={`${!nextIssue ? "cursor-not-allowed opacity-70" : ""}`}
+            className={!nextIssue ? "cursor-not-allowed opacity-70" : ""}
             onClick={() => {
               if (!nextIssue) return;
               router.push(`/projects/${nextIssue.project}/issues/${nextIssue?.id}`);
@@ -257,27 +233,26 @@ const IssueDetail: NextPage = () => {
         </div>
       }
     >
-      <CreateUpdateIssuesModal
-        isOpen={isOpen}
-        setIsOpen={setIsOpen}
-        projectId={projectId as string}
-        prePopulateData={{
-          ...preloadedData,
-        }}
-      />
-      <ConfirmIssueDeletion
-        handleClose={() => setDeleteIssueModal(false)}
-        isOpen={deleteIssueModal}
-        data={issueDetail}
-      />
-      <AddAsSubIssue
-        isOpen={isAddAsSubIssueOpen}
-        setIsOpen={setIsAddAsSubIssueOpen}
-        parent={issueDetail}
-      />
+      {isOpen && (
+        <CreateUpdateIssuesModal
+          isOpen={isOpen}
+          setIsOpen={setIsOpen}
+          projectId={projectId as string}
+          prePopulateData={{
+            ...preloadedData,
+          }}
+        />
+      )}
+      {isAddAsSubIssueOpen && (
+        <AddAsSubIssue
+          isOpen={isAddAsSubIssueOpen}
+          setIsOpen={setIsAddAsSubIssueOpen}
+          parent={issueDetail}
+        />
+      )}
       {issueDetail && activeProject ? (
-        <div className="flex gap-5">
-          <div className="basis-3/4 space-y-5 p-5">
+        <div className="h-full flex gap-5">
+          <div className="basis-2/3 space-y-5 p-5">
             <div className="mb-5"></div>
             <div className="rounded-lg">
               {issueDetail.parent !== null && issueDetail.parent !== "" ? (
@@ -285,7 +260,7 @@ const IssueDetail: NextPage = () => {
                   <Link href={`/projects/${activeProject.id}/issues/${issueDetail.parent}`}>
                     <a className="flex items-center gap-2">
                       <span
-                        className={`h-1.5 w-1.5 block rounded-full`}
+                        className="h-1.5 w-1.5 block rounded-full"
                         style={{
                           backgroundColor: issueDetail.state_detail.color,
                         }}
@@ -433,15 +408,13 @@ const IssueDetail: NextPage = () => {
                                   <Menu.Items className="origin-top-right absolute right-0 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-50">
                                     <div className="p-1">
                                       <Menu.Item as="div">
-                                        {(active) => (
-                                          <button
-                                            type="button"
-                                            className="flex items-center gap-2 p-2 text-left text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap"
-                                            onClick={() => setIsAddAsSubIssueOpen(true)}
-                                          >
-                                            Add an existing issue
-                                          </button>
-                                        )}
+                                        <button
+                                          type="button"
+                                          className="flex items-center gap-2 p-2 text-left text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap"
+                                          onClick={() => setIsAddAsSubIssueOpen(true)}
+                                        >
+                                          Add an existing issue
+                                        </button>
                                       </Menu.Item>
                                     </div>
                                   </Menu.Items>
@@ -498,14 +471,12 @@ const IssueDetail: NextPage = () => {
                                       <Menu.Items className="origin-top-right absolute right-0 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-50">
                                         <div className="p-1">
                                           <Menu.Item as="div">
-                                            {(active) => (
-                                              <button
-                                                className="flex items-center gap-2 p-2 text-left text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap"
-                                                onClick={() => handleSubIssueRemove(subIssue.id)}
-                                              >
-                                                Remove as sub-issue
-                                              </button>
-                                            )}
+                                            <button
+                                              className="flex items-center gap-2 p-2 text-left text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap"
+                                              onClick={() => handleSubIssueRemove(subIssue.id)}
+                                            >
+                                              Remove as sub-issue
+                                            </button>
                                           </Menu.Item>
                                         </div>
                                       </Menu.Items>
@@ -535,41 +506,37 @@ const IssueDetail: NextPage = () => {
                       leaveFrom="transform opacity-100 scale-100"
                       leaveTo="transform opacity-0 scale-95"
                     >
-                      <Menu.Items className="absolute origin-top-right left-0 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
-                        <div className="p-1">
+                      <Menu.Items className="absolute origin-top-right left-0 mt-1 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
+                        <div className="py-1">
                           <Menu.Item as="div">
-                            {(active) => (
-                              <button
-                                type="button"
-                                className="text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full"
-                                onClick={() => {
-                                  setIsOpen(true);
-                                  setPreloadedData({
-                                    parent: issueDetail.id,
-                                    actionType: "createIssue",
-                                  });
-                                }}
-                              >
-                                Create new
-                              </button>
-                            )}
+                            <button
+                              type="button"
+                              className="text-left p-2 text-gray-900 hover:bg-indigo-50 text-xs whitespace-nowrap w-full"
+                              onClick={() => {
+                                setIsOpen(true);
+                                setPreloadedData({
+                                  parent: issueDetail.id,
+                                  actionType: "createIssue",
+                                });
+                              }}
+                            >
+                              Create new
+                            </button>
                           </Menu.Item>
                           <Menu.Item as="div">
-                            {(active) => (
-                              <button
-                                type="button"
-                                className="p-2 text-left text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap"
-                                onClick={() => {
-                                  setIsAddAsSubIssueOpen(true);
-                                  setPreloadedData({
-                                    parent: issueDetail.id,
-                                    actionType: "createIssue",
-                                  });
-                                }}
-                              >
-                                Add an existing issue
-                              </button>
-                            )}
+                            <button
+                              type="button"
+                              className="p-2 text-left text-gray-900 hover:bg-indigo-50 text-xs whitespace-nowrap"
+                              onClick={() => {
+                                setIsAddAsSubIssueOpen(true);
+                                setPreloadedData({
+                                  parent: issueDetail.id,
+                                  actionType: "createIssue",
+                                });
+                              }}
+                            >
+                              Add an existing issue
+                            </button>
                           </Menu.Item>
                         </div>
                       </Menu.Items>
@@ -596,31 +563,22 @@ const IssueDetail: NextPage = () => {
                 </Tab.List>
                 <Tab.Panels>
                   <Tab.Panel>
-                    <IssueCommentSection
-                      comments={issueComments}
-                      workspaceSlug={activeWorkspace?.slug as string}
-                      projectId={projectId as string}
-                      issueId={issueId as string}
-                    />
+                    <IssueCommentSection />
                   </Tab.Panel>
                   <Tab.Panel>
-                    <IssueActivitySection
-                      issueActivities={issueActivities}
-                      states={states}
-                      issues={issues}
-                    />
+                    <IssueActivitySection />
                   </Tab.Panel>
                 </Tab.Panels>
               </Tab.Group>
             </div>
           </div>
-          <div className="h-full basis-1/4 space-y-5 p-5 border-l">
+          <div className="h-full basis-1/3 space-y-5 p-5 border-l">
+            {/* TODO add flex-grow, if needed */}
             <IssueDetailSidebar
               control={control}
               issueDetail={issueDetail}
               submitChanges={submitChanges}
               watch={watch}
-              setDeleteIssueModal={setDeleteIssueModal}
             />
           </div>
         </div>
diff --git a/apps/app/pages/projects/[projectId]/issues/index.tsx b/apps/app/pages/projects/[projectId]/issues/index.tsx
index 12657cf60..1dd8cab21 100644
--- a/apps/app/pages/projects/[projectId]/issues/index.tsx
+++ b/apps/app/pages/projects/[projectId]/issues/index.tsx
@@ -17,6 +17,8 @@ import useIssuesProperties from "lib/hooks/useIssuesProperties";
 import { PROJECT_MEMBERS } from "constants/api-routes";
 // services
 import projectService from "lib/services/project.service";
+// constants
+import { filterIssueOptions, groupByOptions, orderByOptions } from "constants/";
 // commons
 import { classNames, replaceUnderscoreIfSnakeCase } from "constants/common";
 // layouts
@@ -24,10 +26,10 @@ import AppLayout from "layouts/app-layout";
 // hooks
 import useIssuesFilter from "lib/hooks/useIssuesFilter";
 // components
-import ListView from "components/project/issues/ListView";
+import ListView from "components/project/issues/list-view";
 import BoardView from "components/project/issues/BoardView";
 import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
-import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal";
+import CreateUpdateIssuesModal from "components/project/issues/create-update-issue-modal";
 // ui
 import {
   Spinner,
@@ -42,41 +44,10 @@ import {
 import { ChevronDownIcon, ListBulletIcon, RectangleStackIcon } from "@heroicons/react/24/outline";
 import { PlusIcon, Squares2X2Icon } from "@heroicons/react/20/solid";
 // types
-import type { IIssue, Properties, NestedKeyOf, IssueResponse } from "types";
+import type { IIssue, Properties, IssueResponse } from "types";
 // fetch-keys
 import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
 
-const groupByOptions: Array<{ name: string; key: NestedKeyOf<IIssue> | null }> = [
-  { name: "State", key: "state_detail.name" },
-  { name: "Priority", key: "priority" },
-  { name: "Created By", key: "created_by" },
-  { name: "None", key: null },
-];
-
-const orderByOptions: Array<{ name: string; key: NestedKeyOf<IIssue> }> = [
-  { name: "Last created", key: "created_at" },
-  { name: "Last updated", key: "updated_at" },
-  { name: "Priority", key: "priority" },
-];
-
-const filterIssueOptions: Array<{
-  name: string;
-  key: "activeIssue" | "backlogIssue" | null;
-}> = [
-  {
-    name: "All",
-    key: null,
-  },
-  {
-    name: "Active Issues",
-    key: "activeIssue",
-  },
-  {
-    name: "Backlog Issues",
-    key: "backlogIssue",
-  },
-];
-
 const ProjectIssues: NextPage = () => {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -133,7 +104,6 @@ const ProjectIssues: NextPage = () => {
 
   const {
     issueView,
-    setIssueView,
     groupByProperty,
     setGroupByProperty,
     groupedByIssues,
@@ -141,7 +111,11 @@ const ProjectIssues: NextPage = () => {
     setFilterIssue,
     orderBy,
     filterIssue,
-  } = useIssuesFilter(projectIssues?.results ?? []);
+    resetFilterToDefault,
+    setNewFilterDefaultView,
+    setIssueViewToKanban,
+    setIssueViewToList,
+  } = useIssuesFilter(projectIssues?.results.filter((p) => p.parent === null) ?? []);
 
   useEffect(() => {
     if (!isOpen) {
@@ -168,10 +142,7 @@ const ProjectIssues: NextPage = () => {
               className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none ${
                 issueView === "list" ? "bg-gray-200" : ""
               }`}
-              onClick={() => {
-                setIssueView("list");
-                setGroupByProperty(null);
-              }}
+              onClick={() => setIssueViewToList()}
             >
               <ListBulletIcon className="h-4 w-4" />
             </button>
@@ -180,10 +151,7 @@ const ProjectIssues: NextPage = () => {
               className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none ${
                 issueView === "kanban" ? "bg-gray-200" : ""
               }`}
-              onClick={() => {
-                setIssueView("kanban");
-                setGroupByProperty("state_detail.name");
-              }}
+              onClick={() => setIssueViewToKanban()}
             >
               <Squares2X2Icon className="h-4 w-4" />
             </button>
@@ -210,7 +178,7 @@ const ProjectIssues: NextPage = () => {
                   leaveFrom="opacity-100 translate-y-0"
                   leaveTo="opacity-0 translate-y-1"
                 >
-                  <Popover.Panel className="absolute mr-5 right-1/2 z-10 mt-1 w-screen max-w-xs translate-x-1/2 transform p-3 bg-white rounded-lg shadow-lg overflow-hidden">
+                  <Popover.Panel className="absolute mr-5 right-1/2 z-20 mt-1 w-screen max-w-xs translate-x-1/2 transform p-3 bg-white rounded-lg shadow-lg overflow-hidden">
                     <div className="relative flex flex-col gap-1 gap-y-4">
                       <div className="flex justify-between items-center">
                         <h4 className="text-sm text-gray-600">Group by</h4>
@@ -291,6 +259,23 @@ const ProjectIssues: NextPage = () => {
                           ))}
                         </div>
                       </div>
+                      <div className="border-b-2"></div>
+                      <div className="relative flex justify-end gap-x-3">
+                        <button
+                          type="button"
+                          className="text-xs"
+                          onClick={() => resetFilterToDefault()}
+                        >
+                          Reset to default
+                        </button>
+                        <button
+                          type="button"
+                          className="text-xs font-medium text-theme"
+                          onClick={() => setNewFilterDefaultView()}
+                        >
+                          Set as default
+                        </button>
+                      </div>
                     </div>
                   </Popover.Panel>
                 </Transition>
diff --git a/apps/app/pages/projects/[projectId]/members.tsx b/apps/app/pages/projects/[projectId]/members.tsx
index 9eb046722..2402296f4 100644
--- a/apps/app/pages/projects/[projectId]/members.tsx
+++ b/apps/app/pages/projects/[projectId]/members.tsx
@@ -5,28 +5,26 @@ import type { NextPage } from "next";
 import { useRouter } from "next/router";
 // swr
 import useSWR from "swr";
-// headless ui
-import { Menu } from "@headlessui/react";
 // services
 import projectService from "lib/services/project.service";
 // hooks
 import useUser from "lib/hooks/useUser";
 import useToast from "lib/hooks/useToast";
-// fetching keys
-import { PROJECT_MEMBERS, PROJECT_INVITATIONS } from "constants/fetch-keys";
 // hoc
 import withAuth from "lib/hoc/withAuthWrapper";
 // layouts
 import AppLayout from "layouts/app-layout";
 // components
-import SendProjectInvitationModal from "components/project/SendProjectInvitationModal";
-import ConfirmProjectMemberRemove from "components/project/ConfirmProjectMemberRemove";
+import ConfirmProjectMemberRemove from "components/project/confirm-project-member-remove";
+import SendProjectInvitationModal from "components/project/send-project-invitation-modal";
+// headless ui
+import { Menu } from "@headlessui/react";
 // ui
-import { Spinner, CustomListbox } from "ui";
+import { Spinner, CustomListbox, BreadcrumbItem, Breadcrumbs, HeaderButton } from "ui";
 // icons
 import { PlusIcon, EllipsisHorizontalIcon } from "@heroicons/react/20/solid";
-import HeaderButton from "ui/HeaderButton";
-import { BreadcrumbItem, Breadcrumbs } from "ui/Breadcrumbs";
+// fetch-keys
+import { PROJECT_MEMBERS, PROJECT_INVITATIONS } from "constants/fetch-keys";
 
 const ROLE = {
   5: "Guest",
@@ -63,6 +61,7 @@ const ProjectMembers: NextPage = () => {
       },
     }
   );
+
   const { data: projectInvitations, mutate: mutateInvitations } = useSWR(
     activeWorkspace && projectId ? PROJECT_INVITATIONS : null,
     activeWorkspace && projectId
diff --git a/apps/app/pages/projects/[projectId]/modules/index.tsx b/apps/app/pages/projects/[projectId]/modules/index.tsx
index d5055dd44..e95d40b79 100644
--- a/apps/app/pages/projects/[projectId]/modules/index.tsx
+++ b/apps/app/pages/projects/[projectId]/modules/index.tsx
@@ -80,13 +80,17 @@ const ProjectModules: NextPage = () => {
                 title="Create a new module"
                 description={
                   <span>
-                    Use <pre className="inline bg-gray-100 px-2 py-1 rounded">Ctrl/Command + Q</pre>{" "}
+                    Use <pre className="inline bg-gray-100 px-2 py-1 rounded">Ctrl/Command + M</pre>{" "}
                     shortcut to create a new cycle
                   </span>
                 }
                 Icon={PlusIcon}
                 action={() => {
-                  return;
+                  const e = new KeyboardEvent("keydown", {
+                    ctrlKey: true,
+                    key: "m",
+                  });
+                  document.dispatchEvent(e);
                 }}
               />
             </EmptySpace>
diff --git a/apps/app/pages/projects/[projectId]/settings.tsx b/apps/app/pages/projects/[projectId]/settings.tsx
deleted file mode 100644
index 18d5ed567..000000000
--- a/apps/app/pages/projects/[projectId]/settings.tsx
+++ /dev/null
@@ -1,217 +0,0 @@
-import React, { useEffect, useState } from "react";
-// next
-import type { NextPage } from "next";
-import { useRouter } from "next/router";
-import dynamic from "next/dynamic";
-// swr
-import useSWR, { mutate } from "swr";
-// react hook form
-import { useForm } from "react-hook-form";
-// headless ui
-import { Tab } from "@headlessui/react";
-// hoc
-import withAuth from "lib/hoc/withAuthWrapper";
-// layouts
-import SettingsLayout from "layouts/settings-layout";
-import AppLayout from "layouts/app-layout";
-// service
-import projectServices from "lib/services/project.service";
-// hooks
-import useUser from "lib/hooks/useUser";
-import useToast from "lib/hooks/useToast";
-// fetch keys
-import { PROJECT_DETAILS, PROJECTS_LIST } from "constants/fetch-keys";
-// ui
-import { Spinner } from "ui";
-import { Breadcrumbs, BreadcrumbItem } from "ui/Breadcrumbs";
-// types
-import type { IProject, IWorkspace } from "types";
-
-const GeneralSettings = dynamic(() => import("components/project/settings/GeneralSettings"), {
-  loading: () => <p>Loading...</p>,
-  ssr: false,
-});
-
-const ControlSettings = dynamic(() => import("components/project/settings/ControlSettings"), {
-  loading: () => <p>Loading...</p>,
-  ssr: false,
-});
-
-const StatesSettings = dynamic(() => import("components/project/settings/StatesSettings"), {
-  loading: () => <p>Loading...</p>,
-  ssr: false,
-});
-
-const LabelsSettings = dynamic(() => import("components/project/settings/LabelsSettings"), {
-  loading: () => <p>Loading...</p>,
-  ssr: false,
-});
-
-const defaultValues: Partial<IProject> = {
-  name: "",
-  description: "",
-  identifier: "",
-  network: 0,
-};
-
-const ProjectSettings: NextPage = () => {
-  const {
-    register,
-    handleSubmit,
-    reset,
-    control,
-    setError,
-    formState: { errors, isSubmitting },
-  } = useForm<IProject>({
-    defaultValues,
-  });
-
-  const router = useRouter();
-
-  const { projectId } = router.query;
-
-  const { activeWorkspace, activeProject } = useUser();
-
-  const { setToastAlert } = useToast();
-
-  const { data: projectDetails } = useSWR<IProject>(
-    activeWorkspace && projectId ? PROJECT_DETAILS(projectId as string) : null,
-    activeWorkspace
-      ? () => projectServices.getProject(activeWorkspace.slug, projectId as string)
-      : null
-  );
-
-  useEffect(() => {
-    projectDetails &&
-      reset({
-        ...projectDetails,
-        default_assignee: projectDetails.default_assignee?.id,
-        project_lead: projectDetails.project_lead?.id,
-        workspace: (projectDetails.workspace as IWorkspace).id,
-      });
-  }, [projectDetails, reset]);
-
-  const onSubmit = async (formData: IProject) => {
-    if (!activeWorkspace || !projectId) return;
-    const payload: Partial<IProject> = {
-      name: formData.name,
-      network: formData.network,
-      identifier: formData.identifier,
-      description: formData.description,
-      default_assignee: formData.default_assignee,
-      project_lead: formData.project_lead,
-    };
-    await projectServices
-      .updateProject(activeWorkspace.slug, projectId as string, payload)
-      .then((res) => {
-        mutate<IProject>(
-          PROJECT_DETAILS(projectId as string),
-          (prevData) => ({ ...prevData, ...res }),
-          false
-        );
-        mutate<IProject[]>(
-          PROJECTS_LIST(activeWorkspace.slug),
-          (prevData) => {
-            const newData = prevData?.map((item) => {
-              if (item.id === res.id) {
-                return res;
-              }
-              return item;
-            });
-            return newData;
-          },
-          false
-        );
-        setToastAlert({
-          title: "Success",
-          type: "success",
-          message: "Project updated successfully",
-        });
-      })
-      .catch((err) => {
-        console.log(err);
-      });
-  };
-
-  const sidebarLinks: Array<{
-    label: string;
-    href: string;
-  }> = [
-    {
-      label: "General",
-      href: "#",
-    },
-    {
-      label: "Control",
-      href: "#",
-    },
-    {
-      label: "States",
-      href: "#",
-    },
-    {
-      label: "Labels",
-      href: "#",
-    },
-  ];
-
-  return (
-    <AppLayout
-      breadcrumbs={
-        <Breadcrumbs>
-          <BreadcrumbItem title="Projects" link="/projects" />
-          <BreadcrumbItem title={`${activeProject?.name ?? "Project"} Settings`} />
-        </Breadcrumbs>
-      }
-      // links={sidebarLinks}
-    >
-      {projectDetails ? (
-        <div className="space-y-3">
-          <Tab.Group>
-            <Tab.List className="flex items-center gap-x-4 gap-y-2 flex-wrap mb-8">
-              {["General", "Control", "States", "Labels"].map((tab, index) => (
-                <Tab
-                  key={index}
-                  className={({ selected }) =>
-                    `px-6 py-2 border-2 border-theme hover:bg-theme hover:text-white text-xs font-medium rounded-md outline-none duration-300 ${
-                      selected ? "bg-theme text-white" : ""
-                    }`
-                  }
-                >
-                  {tab}
-                </Tab>
-              ))}
-            </Tab.List>
-            <Tab.Panels>
-              <form onSubmit={handleSubmit(onSubmit)}>
-                <Tab.Panel>
-                  <GeneralSettings
-                    register={register}
-                    errors={errors}
-                    setError={setError}
-                    isSubmitting={isSubmitting}
-                  />
-                </Tab.Panel>
-                <Tab.Panel>
-                  <ControlSettings control={control} isSubmitting={isSubmitting} />
-                </Tab.Panel>
-              </form>
-              <Tab.Panel>
-                <StatesSettings projectId={projectId} />
-              </Tab.Panel>
-              <Tab.Panel>
-                <LabelsSettings />
-              </Tab.Panel>
-            </Tab.Panels>
-          </Tab.Group>
-        </div>
-      ) : (
-        <div className="h-full w-full flex justify-center items-center">
-          <Spinner />
-        </div>
-      )}
-    </AppLayout>
-  );
-};
-
-export default withAuth(ProjectSettings);
diff --git a/apps/app/pages/projects/[projectId]/settings/control.tsx b/apps/app/pages/projects/[projectId]/settings/control.tsx
new file mode 100644
index 000000000..3e26c168a
--- /dev/null
+++ b/apps/app/pages/projects/[projectId]/settings/control.tsx
@@ -0,0 +1,279 @@
+// react
+import React, { useEffect } from "react";
+// swr
+import useSWR, { mutate } from "swr";
+// react-hook-form
+import { Controller, useForm } from "react-hook-form";
+// layouts
+import SettingsLayout from "layouts/settings-layout";
+// services
+import projectService from "lib/services/project.service";
+import workspaceService from "lib/services/workspace.service";
+// hooks
+import useToast from "lib/hooks/useToast";
+import useUser from "lib/hooks/useUser";
+// headless ui
+import { Listbox, Transition } from "@headlessui/react";
+// ui
+import { BreadcrumbItem, Breadcrumbs, Button } from "ui";
+// icons
+import { CheckIcon, ChevronDownIcon } from "@heroicons/react/24/outline";
+// types
+import { IProject, IWorkspace } from "types";
+// fetch-keys
+import { PROJECTS_LIST, PROJECT_DETAILS, WORKSPACE_MEMBERS } from "constants/fetch-keys";
+
+const ControlSettings = () => {
+  const { activeWorkspace, activeProject } = useUser();
+
+  const { setToastAlert } = useToast();
+
+  const { data: projectDetails } = useSWR<IProject>(
+    activeWorkspace && activeProject ? PROJECT_DETAILS(activeProject.id) : null,
+    activeWorkspace && activeProject
+      ? () => projectService.getProject(activeWorkspace.slug, activeProject.id)
+      : null
+  );
+
+  const { data: people } = useSWR(
+    activeWorkspace ? WORKSPACE_MEMBERS : null,
+    activeWorkspace ? () => workspaceService.workspaceMembers(activeWorkspace.slug) : null
+  );
+
+  const {
+    handleSubmit,
+    reset,
+    control,
+    formState: { isSubmitting },
+  } = useForm<IProject>({});
+
+  const onSubmit = async (formData: IProject) => {
+    if (!activeWorkspace || !activeProject) return;
+    const payload: Partial<IProject> = {
+      name: formData.name,
+      network: formData.network,
+      identifier: formData.identifier,
+      description: formData.description,
+      default_assignee: formData.default_assignee,
+      project_lead: formData.project_lead,
+      icon: formData.icon,
+    };
+    await projectService
+      .updateProject(activeWorkspace.slug, activeProject.id, payload)
+      .then((res) => {
+        mutate<IProject>(
+          PROJECT_DETAILS(activeProject.id),
+          (prevData) => ({ ...prevData, ...res }),
+          false
+        );
+        mutate<IProject[]>(
+          PROJECTS_LIST(activeWorkspace.slug),
+          (prevData) => {
+            const newData = prevData?.map((item) => {
+              if (item.id === res.id) {
+                return res;
+              }
+              return item;
+            });
+            return newData;
+          },
+          false
+        );
+        setToastAlert({
+          title: "Success",
+          type: "success",
+          message: "Project updated successfully",
+        });
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  useEffect(() => {
+    projectDetails &&
+      reset({
+        ...projectDetails,
+        default_assignee: projectDetails.default_assignee?.id,
+        project_lead: projectDetails.project_lead?.id,
+        workspace: (projectDetails.workspace as IWorkspace).id,
+      });
+  }, [projectDetails, reset]);
+
+  return (
+    <SettingsLayout
+      type="project"
+      breadcrumbs={
+        <Breadcrumbs>
+          <BreadcrumbItem
+            title={`${activeProject?.name ?? "Project"}`}
+            link={`/projects/${activeProject?.id}/issues`}
+          />
+          <BreadcrumbItem title="Control Settings" />
+        </Breadcrumbs>
+      }
+    >
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <div className="space-y-8">
+          <div>
+            <h3 className="text-3xl font-bold leading-6 text-gray-900">Control</h3>
+            <p className="mt-4 text-sm text-gray-500">Set the control for the project.</p>
+          </div>
+          <div className="grid grid-cols-2 gap-16">
+            <div>
+              <h4 className="text-md leading-6 text-gray-900 mb-1">Project Lead</h4>
+              <p className="text-sm text-gray-500 mb-3">Select the project leader.</p>
+              <Controller
+                control={control}
+                name="project_lead"
+                render={({ field: { onChange, value } }) => (
+                  <Listbox value={value} onChange={onChange}>
+                    {({ open }) => (
+                      <>
+                        <div className="relative">
+                          <Listbox.Button className="relative w-full flex justify-between items-center gap-4 border border-gray-300 rounded-md shadow-sm p-3 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
+                            <span className="block truncate">
+                              {people?.find((person) => person.member.id === value)?.member
+                                .first_name ?? "Select Lead"}
+                            </span>
+                            <ChevronDownIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                          </Listbox.Button>
+
+                          <Transition
+                            show={open}
+                            as={React.Fragment}
+                            leave="transition ease-in duration-100"
+                            leaveFrom="opacity-100"
+                            leaveTo="opacity-0"
+                          >
+                            <Listbox.Options className="absolute z-20 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
+                              {people?.map((person) => (
+                                <Listbox.Option
+                                  key={person.id}
+                                  className={({ active }) =>
+                                    `${
+                                      active ? "bg-indigo-50" : ""
+                                    } text-gray-900 cursor-default select-none relative px-3 py-2`
+                                  }
+                                  value={person.member.id}
+                                >
+                                  {({ selected, active }) => (
+                                    <>
+                                      <span
+                                        className={`${
+                                          selected ? "font-semibold" : "font-normal"
+                                        } block truncate`}
+                                      >
+                                        {person.member.first_name !== ""
+                                          ? person.member.first_name
+                                          : person.member.email}
+                                      </span>
+
+                                      {selected ? (
+                                        <span
+                                          className={`absolute inset-y-0 right-0 flex items-center pr-4 ${
+                                            active ? "text-white" : "text-theme"
+                                          }`}
+                                        >
+                                          <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                                        </span>
+                                      ) : null}
+                                    </>
+                                  )}
+                                </Listbox.Option>
+                              ))}
+                            </Listbox.Options>
+                          </Transition>
+                        </div>
+                      </>
+                    )}
+                  </Listbox>
+                )}
+              />
+            </div>
+            <div>
+              <h4 className="text-md leading-6 text-gray-900 mb-1">Default Assignee</h4>
+              <p className="text-sm text-gray-500 mb-3">
+                Select the default assignee for the project.
+              </p>
+              <Controller
+                control={control}
+                name="default_assignee"
+                render={({ field: { value, onChange } }) => (
+                  <Listbox value={value} onChange={onChange}>
+                    {({ open }) => (
+                      <>
+                        <div className="relative">
+                          <Listbox.Button className="relative w-full flex justify-between items-center gap-4 border border-gray-300 rounded-md shadow-sm p-3 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
+                            <span className="block truncate">
+                              {people?.find((p) => p.member.id === value)?.member.first_name ??
+                                "Select Default Assignee"}
+                            </span>
+                            <ChevronDownIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                          </Listbox.Button>
+
+                          <Transition
+                            show={open}
+                            as={React.Fragment}
+                            leave="transition ease-in duration-100"
+                            leaveFrom="opacity-100"
+                            leaveTo="opacity-0"
+                          >
+                            <Listbox.Options className="absolute z-20 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
+                              {people?.map((person) => (
+                                <Listbox.Option
+                                  key={person.id}
+                                  className={({ active }) =>
+                                    `${
+                                      active ? "bg-indigo-50" : ""
+                                    } text-gray-900 cursor-default select-none relative px-3 py-2`
+                                  }
+                                  value={person.member.id}
+                                >
+                                  {({ selected, active }) => (
+                                    <>
+                                      <span
+                                        className={`${
+                                          selected ? "font-semibold" : "font-normal"
+                                        } block truncate`}
+                                      >
+                                        {person.member.first_name !== ""
+                                          ? person.member.first_name
+                                          : person.member.email}
+                                      </span>
+
+                                      {selected ? (
+                                        <span
+                                          className={`absolute inset-y-0 right-0 flex items-center pr-4 ${
+                                            active ? "text-white" : "text-theme"
+                                          }`}
+                                        >
+                                          <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                                        </span>
+                                      ) : null}
+                                    </>
+                                  )}
+                                </Listbox.Option>
+                              ))}
+                            </Listbox.Options>
+                          </Transition>
+                        </div>
+                      </>
+                    )}
+                  </Listbox>
+                )}
+              />
+            </div>
+          </div>
+          <div>
+            <Button type="submit" disabled={isSubmitting}>
+              {isSubmitting ? "Updating Project..." : "Update Project"}
+            </Button>
+          </div>
+        </div>
+      </form>
+    </SettingsLayout>
+  );
+};
+
+export default ControlSettings;
diff --git a/apps/app/pages/projects/[projectId]/settings/index.tsx b/apps/app/pages/projects/[projectId]/settings/index.tsx
new file mode 100644
index 000000000..aaea02d61
--- /dev/null
+++ b/apps/app/pages/projects/[projectId]/settings/index.tsx
@@ -0,0 +1,243 @@
+// react
+import { useCallback, useEffect } from "react";
+// swr
+import useSWR, { mutate } from "swr";
+// react-hook-form
+import { Controller, useForm } from "react-hook-form";
+// layouts
+import SettingsLayout from "layouts/settings-layout";
+// services
+import projectService from "lib/services/project.service";
+// hooks
+import useUser from "lib/hooks/useUser";
+import useToast from "lib/hooks/useToast";
+// ui
+import { BreadcrumbItem, Breadcrumbs, Button, EmojiIconPicker, Input, Select, TextArea } from "ui";
+// types
+import { IProject, IWorkspace } from "types";
+// fetch-keys
+import { PROJECTS_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
+// common
+import { debounce } from "constants/common";
+
+const NETWORK_CHOICES = { "0": "Secret", "2": "Public" };
+
+const defaultValues: Partial<IProject> = {
+  name: "",
+  description: "",
+  identifier: "",
+  network: 0,
+};
+
+const GeneralSettings = () => {
+  const { activeWorkspace, activeProject } = useUser();
+
+  const { setToastAlert } = useToast();
+
+  const { data: projectDetails } = useSWR<IProject>(
+    activeWorkspace && activeProject ? PROJECT_DETAILS(activeProject.id) : null,
+    activeWorkspace && activeProject
+      ? () => projectService.getProject(activeWorkspace.slug, activeProject.id)
+      : null
+  );
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    control,
+    setError,
+    formState: { errors, isSubmitting },
+  } = useForm<IProject>({
+    defaultValues,
+  });
+
+  const onSubmit = async (formData: IProject) => {
+    if (!activeWorkspace || !activeProject) return;
+    const payload: Partial<IProject> = {
+      name: formData.name,
+      network: formData.network,
+      identifier: formData.identifier,
+      description: formData.description,
+      default_assignee: formData.default_assignee,
+      project_lead: formData.project_lead,
+      icon: formData.icon,
+    };
+    await projectService
+      .updateProject(activeWorkspace.slug, activeProject.id, payload)
+      .then((res) => {
+        mutate<IProject>(
+          PROJECT_DETAILS(activeProject.id),
+          (prevData) => ({ ...prevData, ...res }),
+          false
+        );
+        mutate<IProject[]>(
+          PROJECTS_LIST(activeWorkspace.slug),
+          (prevData) => {
+            const newData = prevData?.map((item) => {
+              if (item.id === res.id) {
+                return res;
+              }
+              return item;
+            });
+            return newData;
+          },
+          false
+        );
+        setToastAlert({
+          title: "Success",
+          type: "success",
+          message: "Project updated successfully",
+        });
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  const checkIdentifier = (slug: string, value: string) => {
+    projectService.checkProjectIdentifierAvailability(slug, value).then((response) => {
+      console.log(response);
+      if (response.exists) setError("identifier", { message: "Identifier already exists" });
+    });
+  };
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const checkIdentifierAvailability = useCallback(debounce(checkIdentifier, 1500), []);
+
+  useEffect(() => {
+    projectDetails &&
+      reset({
+        ...projectDetails,
+        default_assignee: projectDetails.default_assignee?.id,
+        project_lead: projectDetails.project_lead?.id,
+        workspace: (projectDetails.workspace as IWorkspace).id,
+      });
+  }, [projectDetails, reset]);
+
+  return (
+    <SettingsLayout
+      type="project"
+      breadcrumbs={
+        <Breadcrumbs>
+          <BreadcrumbItem
+            title={`${activeProject?.name ?? "Project"}`}
+            link={`/projects/${activeProject?.id}/issues`}
+          />
+          <BreadcrumbItem title="General Settings" />
+        </Breadcrumbs>
+      }
+    >
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <div className="space-y-8">
+          <div>
+            <h3 className="text-3xl font-bold leading-6 text-gray-900">General</h3>
+            <p className="mt-4 text-sm text-gray-500">
+              This information will be displayed to every member of the project.
+            </p>
+          </div>
+          <div className="grid grid-cols-2 gap-16">
+            <div>
+              <h4 className="text-md leading-6 text-gray-900 mb-1">Icon & Name</h4>
+              <p className="text-sm text-gray-500 mb-3">
+                Select an icon and a name for the project.
+              </p>
+              <div className="flex gap-2">
+                <Controller
+                  control={control}
+                  name="icon"
+                  render={({ field: { value, onChange } }) => (
+                    <EmojiIconPicker
+                      label={value ? String.fromCodePoint(parseInt(value)) : "Icon"}
+                      value={value}
+                      onChange={onChange}
+                    />
+                  )}
+                />
+                <Input
+                  id="name"
+                  name="name"
+                  error={errors.name}
+                  register={register}
+                  placeholder="Project Name"
+                  size="lg"
+                  className="w-auto"
+                  validations={{
+                    required: "Name is required",
+                  }}
+                />
+              </div>
+            </div>
+            <div>
+              <h4 className="text-md leading-6 text-gray-900 mb-1">Description</h4>
+              <p className="text-sm text-gray-500 mb-3">Give a description to the project.</p>
+              <TextArea
+                id="description"
+                name="description"
+                error={errors.description}
+                register={register}
+                placeholder="Enter project description"
+                validations={{}}
+              />
+            </div>
+            <div>
+              <h4 className="text-md leading-6 text-gray-900 mb-1">Identifier</h4>
+              <p className="text-sm text-gray-500 mb-3">
+                Create a 1-6 characters{"'"} identifier for the project.
+              </p>
+              <Input
+                id="identifier"
+                name="identifier"
+                error={errors.identifier}
+                register={register}
+                placeholder="Enter identifier"
+                className="w-40"
+                size="lg"
+                onChange={(e: any) => {
+                  if (!activeWorkspace || !e.target.value) return;
+                  checkIdentifierAvailability(activeWorkspace.slug, e.target.value);
+                }}
+                validations={{
+                  required: "Identifier is required",
+                  minLength: {
+                    value: 1,
+                    message: "Identifier must at least be of 1 character",
+                  },
+                  maxLength: {
+                    value: 9,
+                    message: "Identifier must at most be of 9 characters",
+                  },
+                }}
+              />
+            </div>
+            <div>
+              <h4 className="text-md leading-6 text-gray-900 mb-1">Network</h4>
+              <p className="text-sm text-gray-500 mb-3">Select privacy type for the project.</p>
+              <Select
+                name="network"
+                id="network"
+                options={Object.keys(NETWORK_CHOICES).map((key) => ({
+                  value: key,
+                  label: NETWORK_CHOICES[key as keyof typeof NETWORK_CHOICES],
+                }))}
+                size="lg"
+                register={register}
+                validations={{
+                  required: "Network is required",
+                }}
+                className="w-40"
+              />
+            </div>
+          </div>
+          <div>
+            <Button type="submit" disabled={isSubmitting}>
+              {isSubmitting ? "Updating Project..." : "Update Project"}
+            </Button>
+          </div>
+        </div>
+      </form>
+    </SettingsLayout>
+  );
+};
+
+export default GeneralSettings;
diff --git a/apps/app/pages/projects/[projectId]/settings/labels.tsx b/apps/app/pages/projects/[projectId]/settings/labels.tsx
new file mode 100644
index 000000000..56dec8a8a
--- /dev/null
+++ b/apps/app/pages/projects/[projectId]/settings/labels.tsx
@@ -0,0 +1,238 @@
+// react
+import React, { useState } from "react";
+// swr
+import useSWR from "swr";
+// react-hook-form
+import { Controller, SubmitHandler, useForm } from "react-hook-form";
+// react-color
+import { TwitterPicker } from "react-color";
+// services
+import issuesService from "lib/services/issues.service";
+// hooks
+import useUser from "lib/hooks/useUser";
+// layouts
+import SettingsLayout from "layouts/settings-layout";
+// components
+import SingleLabel from "components/project/settings/single-label";
+// headless ui
+import { Popover, Transition } from "@headlessui/react";
+// ui
+import { BreadcrumbItem, Breadcrumbs, Button, Input, Spinner } from "ui";
+// icons
+import { PlusIcon } from "@heroicons/react/24/outline";
+// fetch-keys
+import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
+// types
+import { IIssueLabels } from "types";
+
+const defaultValues: Partial<IIssueLabels> = {
+  name: "",
+  colour: "#ff0000",
+};
+
+const LabelsSettings = () => {
+  const [newLabelForm, setNewLabelForm] = useState(false);
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [labelIdForUpdate, setLabelidForUpdate] = useState<string | null>(null);
+
+  const { activeWorkspace, activeProject } = useUser();
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    control,
+    setValue,
+    formState: { errors, isSubmitting },
+    watch,
+  } = useForm<IIssueLabels>({ defaultValues });
+
+  const { data: issueLabels, mutate } = useSWR<IIssueLabels[]>(
+    activeProject && activeWorkspace ? PROJECT_ISSUE_LABELS(activeProject.id) : null,
+    activeProject && activeWorkspace
+      ? () => issuesService.getIssueLabels(activeWorkspace.slug, activeProject.id)
+      : null
+  );
+
+  const handleNewLabel: SubmitHandler<IIssueLabels> = (formData) => {
+    if (!activeWorkspace || !activeProject || isSubmitting) return;
+    issuesService.createIssueLabel(activeWorkspace.slug, activeProject.id, formData).then((res) => {
+      console.log(res);
+      reset(defaultValues);
+      mutate((prevData) => [...(prevData ?? []), res], false);
+      setNewLabelForm(false);
+    });
+  };
+
+  const editLabel = (label: IIssueLabels) => {
+    setNewLabelForm(true);
+    setValue("colour", label.colour);
+    setValue("name", label.name);
+    setIsUpdating(true);
+    setLabelidForUpdate(label.id);
+  };
+
+  const handleLabelUpdate: SubmitHandler<IIssueLabels> = (formData) => {
+    if (!activeWorkspace || !activeProject || isSubmitting) return;
+    issuesService
+      .patchIssueLabel(activeWorkspace.slug, activeProject.id, labelIdForUpdate ?? "", formData)
+      .then((res) => {
+        console.log(res);
+        reset(defaultValues);
+        mutate(
+          (prevData) =>
+            prevData?.map((p) => (p.id === labelIdForUpdate ? { ...p, ...formData } : p)),
+          false
+        );
+        setNewLabelForm(false);
+      });
+  };
+
+  const handleLabelDelete = (labelId: string) => {
+    if (activeWorkspace && activeProject) {
+      mutate((prevData) => prevData?.filter((p) => p.id !== labelId), false);
+      issuesService
+        .deleteIssueLabel(activeWorkspace.slug, activeProject.id, labelId)
+        .then((res) => {
+          console.log(res);
+        })
+        .catch((e) => {
+          console.log(e);
+        });
+    }
+  };
+
+  return (
+    <SettingsLayout
+      type="project"
+      breadcrumbs={
+        <Breadcrumbs>
+          <BreadcrumbItem
+            title={`${activeProject?.name ?? "Project"}`}
+            link={`/projects/${activeProject?.id}/issues`}
+          />
+          <BreadcrumbItem title="Labels Settings" />
+        </Breadcrumbs>
+      }
+    >
+      <section className="space-y-8">
+        <div>
+          <h3 className="text-3xl font-bold leading-6 text-gray-900">Labels</h3>
+          <p className="mt-4 text-sm text-gray-500">Manage the labels of this project.</p>
+        </div>
+        <div className="md:w-2/3 flex justify-between items-center gap-2">
+          <h4 className="text-md leading-6 text-gray-900 mb-1">Manage labels</h4>
+          <Button
+            theme="secondary"
+            className="flex items-center gap-x-1"
+            onClick={() => setNewLabelForm(true)}
+          >
+            <PlusIcon className="h-4 w-4" />
+            New label
+          </Button>
+        </div>
+        <div className="space-y-5">
+          <div
+            className={`md:w-2/3 border p-3 rounded-md flex items-center gap-2 ${
+              newLabelForm ? "" : "hidden"
+            }`}
+          >
+            <div className="flex-shrink-0 h-8 w-8">
+              <Popover className="relative w-full h-full flex justify-center items-center bg-gray-200 rounded-xl">
+                {({ open }) => (
+                  <>
+                    <Popover.Button
+                      className={`group inline-flex items-center text-base font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 ${
+                        open ? "text-gray-900" : "text-gray-500"
+                      }`}
+                    >
+                      {watch("colour") && watch("colour") !== "" && (
+                        <span
+                          className="w-4 h-4 rounded"
+                          style={{
+                            backgroundColor: watch("colour") ?? "green",
+                          }}
+                        ></span>
+                      )}
+                    </Popover.Button>
+
+                    <Transition
+                      as={React.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 top-full z-20 left-0 mt-3 px-2 w-screen max-w-xs sm:px-0">
+                        <Controller
+                          name="colour"
+                          control={control}
+                          render={({ field: { value, onChange } }) => (
+                            <TwitterPicker
+                              color={value}
+                              onChange={(value) => onChange(value.hex)}
+                            />
+                          )}
+                        />
+                      </Popover.Panel>
+                    </Transition>
+                  </>
+                )}
+              </Popover>
+            </div>
+            <div className="w-full flex flex-col justify-center">
+              <Input
+                type="text"
+                id="labelName"
+                name="name"
+                register={register}
+                placeholder="Lable title"
+                validations={{
+                  required: "Label title is required",
+                }}
+                error={errors.name}
+              />
+            </div>
+            <Button type="button" theme="secondary" onClick={() => setNewLabelForm(false)}>
+              Cancel
+            </Button>
+            {isUpdating ? (
+              <Button
+                type="button"
+                onClick={handleSubmit(handleLabelUpdate)}
+                disabled={isSubmitting}
+              >
+                {isSubmitting ? "Updating" : "Update"}
+              </Button>
+            ) : (
+              <Button type="button" onClick={handleSubmit(handleNewLabel)} disabled={isSubmitting}>
+                {isSubmitting ? "Adding" : "Add"}
+              </Button>
+            )}
+          </div>
+          <>
+            {issueLabels ? (
+              issueLabels.map((label) => (
+                <SingleLabel
+                  key={label.id}
+                  label={label}
+                  issueLabels={issueLabels}
+                  editLabel={editLabel}
+                  handleLabelDelete={handleLabelDelete}
+                />
+              ))
+            ) : (
+              <div className="flex justify-center py-4">
+                <Spinner />
+              </div>
+            )}
+          </>
+        </div>
+      </section>
+    </SettingsLayout>
+  );
+};
+
+export default LabelsSettings;
diff --git a/apps/app/pages/projects/[projectId]/settings/members.tsx b/apps/app/pages/projects/[projectId]/settings/members.tsx
new file mode 100644
index 000000000..0fcfb84d6
--- /dev/null
+++ b/apps/app/pages/projects/[projectId]/settings/members.tsx
@@ -0,0 +1,278 @@
+// react
+import { useState } from "react";
+// next
+import Image from "next/image";
+// swr
+import useSWR from "swr";
+// services
+import projectService from "lib/services/project.service";
+// hooks
+import useUser from "lib/hooks/useUser";
+import useToast from "lib/hooks/useToast";
+// layouts
+import SettingsLayout from "layouts/settings-layout";
+// components
+import ConfirmProjectMemberRemove from "components/project/confirm-project-member-remove";
+import SendProjectInvitationModal from "components/project/send-project-invitation-modal";
+// ui
+import { BreadcrumbItem, Breadcrumbs, Button, CustomListbox, CustomMenu, Spinner } from "ui";
+// icons
+import { PlusIcon } from "@heroicons/react/24/outline";
+// fetch-keys
+import { PROJECT_INVITATIONS, PROJECT_MEMBERS } from "constants/fetch-keys";
+
+const ROLE = {
+  5: "Guest",
+  10: "Viewer",
+  15: "Member",
+  20: "Admin",
+};
+
+const MembersSettings = () => {
+  const [selectedMember, setSelectedMember] = useState<string | null>(null);
+  const [selectedRemoveMember, setSelectedRemoveMember] = useState<string | null>(null);
+  const [selectedInviteRemoveMember, setSelectedInviteRemoveMember] = useState<string | null>(null);
+  const [inviteModal, setInviteModal] = useState(false);
+
+  const { activeWorkspace, activeProject } = useUser();
+
+  const { setToastAlert } = useToast();
+
+  const { data: projectMembers, mutate: mutateMembers } = useSWR(
+    activeWorkspace && activeProject ? PROJECT_MEMBERS(activeProject.id) : null,
+    activeWorkspace && activeProject
+      ? () => projectService.projectMembers(activeWorkspace.slug, activeProject.id)
+      : null,
+    {
+      onErrorRetry(err, _, __, revalidate, revalidateOpts) {
+        if (err?.status === 403) return;
+        setTimeout(() => revalidate(revalidateOpts), 5000);
+      },
+    }
+  );
+
+  const { data: projectInvitations, mutate: mutateInvitations } = useSWR(
+    activeWorkspace && activeProject ? PROJECT_INVITATIONS : null,
+    activeWorkspace && activeProject
+      ? () => projectService.projectInvitations(activeWorkspace.slug, activeProject.id)
+      : null
+  );
+
+  let members = [
+    ...(projectMembers?.map((item: any) => ({
+      id: item.id,
+      avatar: item.member?.avatar,
+      first_name: item.member?.first_name,
+      last_name: item.member?.last_name,
+      email: item.member?.email,
+      role: item.role,
+      status: true,
+      member: true,
+    })) || []),
+    ...(projectInvitations?.map((item: any) => ({
+      id: item.id,
+      avatar: item.avatar ?? "",
+      first_name: item.first_name ?? item.email,
+      last_name: item.last_name ?? "",
+      email: item.email,
+      role: item.role,
+      status: item.accepted,
+      member: false,
+    })) || []),
+  ];
+
+  return (
+    <>
+      <ConfirmProjectMemberRemove
+        isOpen={Boolean(selectedRemoveMember) || Boolean(selectedInviteRemoveMember)}
+        onClose={() => {
+          setSelectedRemoveMember(null);
+          setSelectedInviteRemoveMember(null);
+        }}
+        data={members.find(
+          (item) => item.id === selectedRemoveMember || item.id === selectedInviteRemoveMember
+        )}
+        handleDelete={async () => {
+          if (!activeWorkspace || !activeProject) return;
+          if (selectedRemoveMember) {
+            await projectService.deleteProjectMember(
+              activeWorkspace.slug,
+              activeProject.id,
+              selectedRemoveMember
+            );
+            mutateMembers(
+              (prevData) => prevData?.filter((item: any) => item.id !== selectedRemoveMember),
+              false
+            );
+          }
+          if (selectedInviteRemoveMember) {
+            await projectService.deleteProjectInvitation(
+              activeWorkspace.slug,
+              activeProject.id,
+              selectedInviteRemoveMember
+            );
+            mutateInvitations(
+              (prevData) => prevData?.filter((item: any) => item.id !== selectedInviteRemoveMember),
+              false
+            );
+          }
+          setToastAlert({
+            type: "success",
+            message: "Member removed successfully",
+            title: "Success",
+          });
+        }}
+      />
+      <SendProjectInvitationModal
+        isOpen={inviteModal}
+        setIsOpen={setInviteModal}
+        members={members}
+      />
+      <SettingsLayout
+        type="project"
+        breadcrumbs={
+          <Breadcrumbs>
+            <BreadcrumbItem
+              title={`${activeProject?.name ?? "Project"}`}
+              link={`/projects/${activeProject?.id}/issues`}
+            />
+            <BreadcrumbItem title="Members Settings" />
+          </Breadcrumbs>
+        }
+      >
+        <section className="space-y-8">
+          <div>
+            <h3 className="text-3xl font-bold leading-6 text-gray-900">Members</h3>
+            <p className="mt-4 text-sm text-gray-500">Manage all the members of the project.</p>
+          </div>
+          {!projectMembers || !projectInvitations ? (
+            <div className="h-full w-full grid place-items-center px-4 sm:px-0">
+              <Spinner />
+            </div>
+          ) : (
+            <div className="md:w-2/3">
+              <div className="flex justify-between items-center gap-2">
+                <h4 className="text-md leading-6 text-gray-900 mb-1">Manage members</h4>
+                <Button
+                  theme="secondary"
+                  className="flex items-center gap-x-1"
+                  onClick={() => setInviteModal(true)}
+                >
+                  <PlusIcon className="h-4 w-4" />
+                  Add Member
+                </Button>
+              </div>
+              <div className="space-y-6 mt-6">
+                {members.length > 0
+                  ? members.map((member) => (
+                      <div key={member.id} className="flex justify-between items-center">
+                        <div className="flex items-center gap-x-8 gap-y-2">
+                          <div className="h-10 w-10 p-4 flex items-center justify-center bg-gray-700 text-white rounded capitalize relative">
+                            {member.avatar && member.avatar !== "" ? (
+                              <Image
+                                src={member.avatar}
+                                alt={member.first_name}
+                                layout="fill"
+                                objectFit="cover"
+                                className="rounded"
+                              />
+                            ) : member.first_name !== "" ? (
+                              member.first_name.charAt(0)
+                            ) : (
+                              member.email.charAt(0)
+                            )}
+                          </div>
+                          <div>
+                            <h4 className="text-sm">
+                              {member.first_name} {member.last_name}
+                            </h4>
+                            <p className="text-xs text-gray-500">{member.email}</p>
+                          </div>
+                        </div>
+                        <div className="flex items-center gap-2 text-xs">
+                          {selectedMember === member.id ? (
+                            <CustomListbox
+                              options={Object.keys(ROLE).map((key) => ({
+                                value: key,
+                                display: ROLE[parseInt(key) as keyof typeof ROLE],
+                              }))}
+                              title={ROLE[member.role as keyof typeof ROLE] ?? "Select Role"}
+                              value={member.role}
+                              onChange={(value) => {
+                                if (!activeWorkspace || !activeProject) return;
+                                projectService
+                                  .updateProjectMember(
+                                    activeWorkspace.slug,
+                                    activeProject.id,
+                                    member.id,
+                                    {
+                                      role: value,
+                                    }
+                                  )
+                                  .then((res) => {
+                                    setToastAlert({
+                                      type: "success",
+                                      message: "Member role updated successfully.",
+                                      title: "Success",
+                                    });
+                                    mutateMembers(
+                                      (prevData: any) =>
+                                        prevData.map((m: any) => {
+                                          return m.id === selectedMember
+                                            ? { ...m, ...res, role: value }
+                                            : m;
+                                        }),
+                                      false
+                                    );
+                                    setSelectedMember(null);
+                                  })
+                                  .catch((err) => {
+                                    console.log(err);
+                                  });
+                              }}
+                            />
+                          ) : (
+                            ROLE[member.role as keyof typeof ROLE] ?? "None"
+                          )}
+                          <CustomMenu ellipsis>
+                            <CustomMenu.MenuItem
+                              onClick={() => {
+                                if (!member.member) {
+                                  setToastAlert({
+                                    type: "error",
+                                    message: "You can't edit a pending invitation.",
+                                    title: "Error",
+                                  });
+                                } else {
+                                  setSelectedMember(member.id);
+                                }
+                              }}
+                            >
+                              Edit
+                            </CustomMenu.MenuItem>
+                            <CustomMenu.MenuItem
+                              onClick={() => {
+                                if (member.member) {
+                                  setSelectedRemoveMember(member.id);
+                                } else {
+                                  setSelectedInviteRemoveMember(member.id);
+                                }
+                              }}
+                            >
+                              Remove
+                            </CustomMenu.MenuItem>
+                          </CustomMenu>
+                        </div>
+                      </div>
+                    ))
+                  : null}
+              </div>
+            </div>
+          )}
+        </section>
+      </SettingsLayout>
+    </>
+  );
+};
+
+export default MembersSettings;
diff --git a/apps/app/pages/projects/[projectId]/settings/states.tsx b/apps/app/pages/projects/[projectId]/settings/states.tsx
new file mode 100644
index 000000000..82905677c
--- /dev/null
+++ b/apps/app/pages/projects/[projectId]/settings/states.tsx
@@ -0,0 +1,141 @@
+// react
+import { useState } from "react";
+// hooks
+import useUser from "lib/hooks/useUser";
+// layouts
+import SettingsLayout from "layouts/settings-layout";
+// components
+import ConfirmStateDeletion from "components/project/issues/BoardView/state/confirm-state-delete";
+import {
+  CreateUpdateStateInline,
+  StateGroup,
+} from "components/project/issues/BoardView/state/create-update-state-inline";
+// ui
+import { BreadcrumbItem, Breadcrumbs, Spinner } from "ui";
+// icons
+import { PencilSquareIcon, PlusIcon, TrashIcon } from "@heroicons/react/24/outline";
+// types
+import { IState } from "types";
+// common
+import { addSpaceIfCamelCase, groupBy } from "constants/common";
+
+const StatesSettings = () => {
+  const [activeGroup, setActiveGroup] = useState<StateGroup>(null);
+  const [selectedState, setSelectedState] = useState<string | null>(null);
+  const [selectDeleteState, setSelectDeleteState] = useState<string | null>(null);
+
+  const { activeWorkspace, activeProject, states } = useUser();
+
+  const groupedStates: {
+    [key: string]: IState[];
+  } = groupBy(states ?? [], "group");
+
+  return (
+    <>
+      <ConfirmStateDeletion
+        isOpen={!!selectDeleteState}
+        data={states?.find((state) => state.id === selectDeleteState) ?? null}
+        onClose={() => setSelectDeleteState(null)}
+      />
+      <SettingsLayout
+        type="project"
+        breadcrumbs={
+          <Breadcrumbs>
+            <BreadcrumbItem
+              title={`${activeProject?.name ?? "Project"}`}
+              link={`/projects/${activeProject?.id}/issues`}
+            />
+            <BreadcrumbItem title="States Settings" />
+          </Breadcrumbs>
+        }
+      >
+        <div className="space-y-8">
+          <div>
+            <h3 className="text-3xl font-bold leading-6 text-gray-900">States</h3>
+            <p className="mt-4 text-sm text-gray-500">Manage the state of this project.</p>
+          </div>
+          <div className="flex flex-col justify-between gap-4">
+            {states && activeProject ? (
+              Object.keys(groupedStates).map((key) => (
+                <div key={key}>
+                  <div className="flex justify-between w-full md:w-2/3 mb-2">
+                    <p className="text-md leading-6 text-gray-900 capitalize">{key} states</p>
+                    <button
+                      type="button"
+                      onClick={() => setActiveGroup(key as keyof StateGroup)}
+                      className="flex items-center gap-2 text-theme text-xs"
+                    >
+                      <PlusIcon className="h-3 w-3 text-theme" />
+                      Add
+                    </button>
+                  </div>
+                  <div className="md:w-2/3 space-y-1 border p-1 rounded-xl">
+                    {key === activeGroup && (
+                      <CreateUpdateStateInline
+                        projectId={activeProject.id}
+                        onClose={() => {
+                          setActiveGroup(null);
+                          setSelectedState(null);
+                        }}
+                        workspaceSlug={activeWorkspace?.slug}
+                        data={null}
+                        selectedGroup={key as keyof StateGroup}
+                      />
+                    )}
+                    {groupedStates[key]?.map((state) =>
+                      state.id !== selectedState ? (
+                        <div
+                          key={state.id}
+                          className={`bg-gray-50 p-3 flex justify-between items-center gap-2 border-b ${
+                            Boolean(activeGroup !== key) ? "last:border-0" : ""
+                          }`}
+                        >
+                          <div className="flex items-center gap-2">
+                            <div
+                              className="flex-shrink-0 h-3 w-3 rounded-full"
+                              style={{
+                                backgroundColor: state.color,
+                              }}
+                            ></div>
+                            <h6 className="text-sm">{addSpaceIfCamelCase(state.name)}</h6>
+                          </div>
+                          <div className="flex items-center gap-2">
+                            <button type="button" onClick={() => setSelectDeleteState(state.id)}>
+                              <TrashIcon className="h-4 w-4 text-red-400" />
+                            </button>
+                            <button type="button" onClick={() => setSelectedState(state.id)}>
+                              <PencilSquareIcon className="h-4 w-4 text-gray-400" />
+                            </button>
+                          </div>
+                        </div>
+                      ) : (
+                        <div className={`border-b last:border-b-0`} key={state.id}>
+                          <CreateUpdateStateInline
+                            projectId={activeProject.id}
+                            onClose={() => {
+                              setActiveGroup(null);
+                              setSelectedState(null);
+                            }}
+                            workspaceSlug={activeWorkspace?.slug}
+                            data={states?.find((state) => state.id === selectedState) ?? null}
+                            selectedGroup={key as keyof StateGroup}
+                          />
+                        </div>
+                      )
+                    )}
+                  </div>
+                </div>
+              ))
+            ) : (
+              <div className="h-full w-full grid place-items-center px-4 sm:px-0">
+                <Spinner />
+              </div>
+            )}
+          </div>
+        </div>
+      </SettingsLayout>
+    </>
+  );
+};
+
+export default StatesSettings;
diff --git a/apps/app/pages/projects/index.tsx b/apps/app/pages/projects/index.tsx
index fdc75542d..36ace1d10 100644
--- a/apps/app/pages/projects/index.tsx
+++ b/apps/app/pages/projects/index.tsx
@@ -8,7 +8,7 @@ import withAuth from "lib/hoc/withAuthWrapper";
 // layouts
 import AppLayout from "layouts/app-layout";
 // components
-import ProjectMemberInvitations from "components/project/memberInvitations";
+import ProjectMemberInvitations from "components/project/member-invitations";
 import ConfirmProjectDeletion from "components/project/confirm-project-deletion";
 // ui
 import {
diff --git a/apps/app/pages/workspace/settings.tsx b/apps/app/pages/workspace/settings.tsx
index eb6b22f50..af0c3f8d7 100644
--- a/apps/app/pages/workspace/settings.tsx
+++ b/apps/app/pages/workspace/settings.tsx
@@ -223,7 +223,14 @@ const WorkspaceSettings = () => {
                   </div>
                 </Tab.Panel>
                 <Tab.Panel>
-                  <div>
+                  <div className="space-y-3">
+                    <h2 className="text-2xl text-red-500 font-semibold">Danger Zone</h2>
+                    <p className="w-full md:w-1/2">
+                      The danger zone of the workspace delete page is a critical area that requires
+                      careful consideration and attention. When deleting a workspace, all of the
+                      data and resources within that workspace will be permanently removed and
+                      cannot be recovered.
+                    </p>
                     <Button theme="danger" onClick={() => setIsOpen(true)}>
                       Delete the workspace
                     </Button>
diff --git a/apps/app/types/issues.d.ts b/apps/app/types/issues.d.ts
index 1a2fb9b38..7e31282b2 100644
--- a/apps/app/types/issues.d.ts
+++ b/apps/app/types/issues.d.ts
@@ -11,13 +11,25 @@ export interface IssueResponse {
   results: IIssue[];
 }
 
+export interface IIssueCycle {
+  id: string;
+  cycle_detail: ICycle;
+  created_at: Date;
+  updated_at: Date;
+  created_by: string;
+  updated_by: string;
+  project: string;
+  workspace: string;
+  issue: string;
+  cycle: string;
+}
+
 export interface IIssue {
   id: string;
   state_detail: IState;
   label_details: any[];
   assignee_details: IUser[];
   assignees_list: string[];
-  bridge?: string;
   blocked_by_issue_details: any[];
   blocked_issues: BlockeIssue[];
   blocker_issues: BlockeIssue[];
@@ -38,7 +50,7 @@ export interface IIssue {
     updated_at: Date;
     updated_by: string;
     workspace: string;
-  };
+  } | null;
   description: any;
   priority: string | null;
   start_date: string | null;
@@ -60,6 +72,9 @@ export interface IIssue {
   blocked_issue_details: any[];
   sprints: string | null;
   cycle: string | null;
+  cycle_detail: ICycle | null;
+
+  issue_cycle: IIssueCycle;
 }
 
 export interface BlockeIssue {
@@ -116,8 +131,9 @@ export type Properties = {
   assignee: boolean;
   priority: boolean;
   start_date: boolean;
-  target_date: boolean;
+  due_date: boolean;
   cycle: boolean;
+  children_count: boolean;
 };
 
 export interface IIssueLabels {
diff --git a/apps/app/types/projects.d.ts b/apps/app/types/projects.d.ts
index 002c30b55..4a83b90ba 100644
--- a/apps/app/types/projects.d.ts
+++ b/apps/app/types/projects.d.ts
@@ -14,6 +14,7 @@ export interface IProject {
   slug: string;
   created_by: string;
   updated_by: string;
+  icon: string;
 }
 
 type ProjectViewTheme = {
@@ -30,7 +31,9 @@ export interface IProjectMember {
   workspace: IWorkspace;
   comment: string;
   role: 5 | 10 | 15 | 20;
+
   view_props: ProjectViewTheme;
+  default_props: ProjectViewTheme;
 
   created_at: Date;
   updated_at: Date;
diff --git a/apps/app/types/users.d.ts b/apps/app/types/users.d.ts
index 9f6220459..a5d64f92a 100644
--- a/apps/app/types/users.d.ts
+++ b/apps/app/types/users.d.ts
@@ -1,3 +1,5 @@
+import { IIssue, NestedKeyOf, Properties } from "./";
+
 export interface IUser {
   id: readonly string;
   last_login: readonly Date;
@@ -14,6 +16,12 @@ export interface IUser {
   created_location: readonly string;
   is_email_verified: boolean;
   token: string;
+
+  my_issues_prop?: {
+    properties: Properties;
+    groupBy: NestedKeyOf<IIssue> | null;
+  };
+
   [...rest: string]: any;
 }
 
diff --git a/apps/app/types/workspace.d.ts b/apps/app/types/workspace.d.ts
index 681841c32..8ee6938b4 100644
--- a/apps/app/types/workspace.d.ts
+++ b/apps/app/types/workspace.d.ts
@@ -1,4 +1,4 @@
-import type { IUser, IUserLite } from "./";
+import type { IProjectMember, IUser, IUserLite } from "./";
 
 export interface IWorkspace {
   readonly id: string;
@@ -36,3 +36,8 @@ export interface IWorkspaceMember {
   created_by: string;
   updated_by: string;
 }
+
+export interface ILastActiveWorkspaceDetails {
+  workspace_details: IWorkspace;
+  project_details?: IProjectMember[];
+}
diff --git a/apps/app/ui/Breadcrumbs/index.tsx b/apps/app/ui/Breadcrumbs/index.tsx
index a485a21d2..c07808192 100644
--- a/apps/app/ui/Breadcrumbs/index.tsx
+++ b/apps/app/ui/Breadcrumbs/index.tsx
@@ -6,7 +6,7 @@ type BreadcrumbsProps = {
   children: any;
 };
 
-const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ children }: BreadcrumbsProps) => {
+const Breadcrumbs = ({ children }: BreadcrumbsProps) => {
   const router = useRouter();
 
   return (
@@ -54,4 +54,6 @@ const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({ title, link, icon }) =>
   );
 };
 
+Breadcrumbs.BreadcrumbItem = BreadcrumbItem;
+
 export { Breadcrumbs, BreadcrumbItem };
diff --git a/apps/app/ui/Button/index.tsx b/apps/app/ui/Button/index.tsx
index 3aea14920..3c1dd077c 100644
--- a/apps/app/ui/Button/index.tsx
+++ b/apps/app/ui/Button/index.tsx
@@ -33,13 +33,14 @@ const Button = React.forwardRef<HTMLButtonElement, Props>(
         type={type}
         disabled={disabled}
         className={classNames(
+          className,
           "inline-flex items-center rounded justify-center font-medium",
           theme === "primary"
             ? `${
                 disabled ? "opacity-70" : ""
               } text-white shadow-sm bg-theme hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 border border-transparent`
             : theme === "secondary"
-            ? "border bg-white hover:bg-gray-100"
+            ? "border bg-transparent hover:bg-gray-100"
             : theme === "success"
             ? `${
                 disabled ? "opacity-70" : ""
@@ -53,8 +54,7 @@ const Button = React.forwardRef<HTMLButtonElement, Props>(
             ? "px-3 py-2 text-base"
             : size === "lg"
             ? "px-4 py-2 text-base"
-            : "px-2.5 py-2 text-sm",
-          className
+            : "px-2.5 py-2 text-sm"
         )}
       >
         {children}
diff --git a/apps/app/ui/Input/index.tsx b/apps/app/ui/Input/index.tsx
index 9fc66600c..561e865a3 100644
--- a/apps/app/ui/Input/index.tsx
+++ b/apps/app/ui/Input/index.tsx
@@ -13,9 +13,11 @@ const Input: React.FC<Props> = ({
   error,
   mode = "primary",
   onChange,
-  className,
+  className = "",
   type,
   id,
+  size = "rg",
+  fullWidth = true,
   ...rest
 }) => {
   return (
@@ -35,14 +37,16 @@ const Input: React.FC<Props> = ({
           onChange && onChange(e);
         }}
         className={classNames(
-          "mt-1 block w-full px-3 py-2 text-base focus:outline-none sm:text-sm rounded-md bg-transparent",
+          "block text-base focus:outline-none sm:text-sm rounded-md bg-transparent",
           mode === "primary" ? "border border-gray-300 rounded-md" : "",
           mode === "transparent"
             ? "bg-transparent border-none transition-all ring-0 focus:ring-1 focus:ring-indigo-500 rounded"
             : "",
           error ? "border-red-500" : "",
           error && mode === "primary" ? "bg-red-100" : "",
-          className ?? ""
+          fullWidth ? "w-full" : "",
+          size === "rg" ? "px-3 py-2" : size === "lg" ? "p-3" : "",
+          className
         )}
         {...rest}
       />
diff --git a/apps/app/ui/Input/types.d.ts b/apps/app/ui/Input/types.d.ts
index ff3981e83..8ff5f7c81 100644
--- a/apps/app/ui/Input/types.d.ts
+++ b/apps/app/ui/Input/types.d.ts
@@ -10,4 +10,6 @@ export interface Props extends React.ComponentPropsWithoutRef<"input"> {
   validations?: RegisterOptions;
   error?: FieldError;
   className?: string;
+  size?: "rg" | "lg";
+  fullWidth?: boolean;
 }
diff --git a/apps/app/ui/Select/index.tsx b/apps/app/ui/Select/index.tsx
index d8337a980..ba782d8fd 100644
--- a/apps/app/ui/Select/index.tsx
+++ b/apps/app/ui/Select/index.tsx
@@ -13,6 +13,8 @@ const Select: React.FC<Props> = ({
   validations,
   error,
   options,
+  size = "rg",
+  fullWidth = true,
 }) => {
   return (
     <>
@@ -27,7 +29,9 @@ const Select: React.FC<Props> = ({
         value={value}
         {...(register && register(name, validations))}
         disabled={disabled}
-        className={`mt-1 block w-full px-3 py-2 text-base border border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md bg-transparent ${className}`}
+        className={`mt-1 block text-base border border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md bg-transparent ${
+          fullWidth ? "w-full" : ""
+        } ${size === "rg" ? "px-3 py-2" : size === "lg" ? "p-3" : ""} ${className}`}
       >
         {options.map((option, index) => (
           <option value={option.value} key={index}>
diff --git a/apps/app/ui/Select/types.d.ts b/apps/app/ui/Select/types.d.ts
index 4c5d9fb11..e69fe256c 100644
--- a/apps/app/ui/Select/types.d.ts
+++ b/apps/app/ui/Select/types.d.ts
@@ -1,8 +1,4 @@
-import type {
-  UseFormRegister,
-  RegisterOptions,
-  FieldError,
-} from "react-hook-form";
+import type { UseFormRegister, RegisterOptions, FieldError } from "react-hook-form";
 
 export type Props = {
   label?: string;
@@ -16,4 +12,6 @@ export type Props = {
   error?: FieldError;
   autoComplete?: "on" | "off";
   options: { label: string; value: any }[];
+  size?: "rg" | "lg";
+  fullWidth?: boolean;
 };
diff --git a/apps/app/ui/CustomListbox/index.tsx b/apps/app/ui/custom-listbox/index.tsx
similarity index 86%
rename from apps/app/ui/CustomListbox/index.tsx
rename to apps/app/ui/custom-listbox/index.tsx
index 835b51ed1..33b33735e 100644
--- a/apps/app/ui/CustomListbox/index.tsx
+++ b/apps/app/ui/custom-listbox/index.tsx
@@ -30,7 +30,7 @@ const CustomListbox: React.FC<Props> = ({
           )}
           <div className="relative">
             <Listbox.Button
-              className={`flex items-center gap-1 hover:bg-gray-100 relative border rounded-md shadow-sm cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm duration-300 ${
+              className={`flex items-center gap-1 hover:bg-gray-100 text-xs relative border rounded-md shadow-sm cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm duration-300 ${
                 width === "sm"
                   ? "w-32"
                   : width === "md"
@@ -48,7 +48,7 @@ const CustomListbox: React.FC<Props> = ({
               ${className || "px-2 py-1"}`}
             >
               {icon ?? null}
-              <span className="block truncate">
+              <span className="block truncate text-xs">
                 {Array.isArray(value)
                   ? value.map((v) => options?.find((o) => o.value === v)?.display).join(", ") ||
                     `${title}`
@@ -92,7 +92,7 @@ const CustomListbox: React.FC<Props> = ({
                     : ""
                 } rounded-md py-1 ring-1 ring-black ring-opacity-5 focus:outline-none z-10`}
               >
-                <div className="p-1">
+                <div className="py-1">
                   {options ? (
                     options.length > 0 ? (
                       options.map((option) => (
@@ -100,8 +100,8 @@ const CustomListbox: React.FC<Props> = ({
                           key={option.value}
                           className={({ active }) =>
                             `${
-                              active ? "text-white bg-theme" : "text-gray-900"
-                            } cursor-pointer select-none relative p-2 rounded-md`
+                              active ? "bg-indigo-50" : ""
+                            } text-gray-900 cursor-pointer select-none relative p-2`
                           }
                           value={option.value}
                         >
@@ -115,8 +115,16 @@ const CustomListbox: React.FC<Props> = ({
                                     : value === option.value)
                                     ? "font-semibold"
                                     : "font-normal"
-                                } block truncate`}
+                                } flex items-center gap-2 truncate`}
                               >
+                                {option.color && (
+                                  <span
+                                    className="flex-shrink-0 h-1.5 w-1.5 rounded-full"
+                                    style={{
+                                      backgroundColor: option.color,
+                                    }}
+                                  ></span>
+                                )}
                                 {option.display}
                               </span>
 
diff --git a/apps/app/ui/CustomListbox/types.d.ts b/apps/app/ui/custom-listbox/types.d.ts
similarity index 82%
rename from apps/app/ui/CustomListbox/types.d.ts
rename to apps/app/ui/custom-listbox/types.d.ts
index 4c69c4e8e..4adc068e8 100644
--- a/apps/app/ui/CustomListbox/types.d.ts
+++ b/apps/app/ui/custom-listbox/types.d.ts
@@ -1,7 +1,7 @@
 export type Props = {
   title?: string;
   label?: string;
-  options?: Array<{ display: string; value: any }>;
+  options?: Array<{ display: string; value: any; color?: string }>;
   icon?: JSX.Element;
   value: any;
   onChange: (value: any) => void;
diff --git a/apps/app/ui/CustomMenu/index.tsx b/apps/app/ui/custom-menu/index.tsx
similarity index 74%
rename from apps/app/ui/CustomMenu/index.tsx
rename to apps/app/ui/custom-menu/index.tsx
index 211c413c1..b8e8160a4 100644
--- a/apps/app/ui/CustomMenu/index.tsx
+++ b/apps/app/ui/custom-menu/index.tsx
@@ -15,11 +15,13 @@ const CustomMenu = ({
   label,
   className = "",
   ellipsis = false,
-  width,
+  width = "auto",
   textAlignment,
+  withoutBorder = false,
+  optionsPosition = "right",
 }: Props) => {
   return (
-    <Menu as="div" className={`relative text-left ${className}`}>
+    <Menu as="div" className={`relative w-min whitespace-nowrap text-left ${className}`}>
       <div>
         {ellipsis ? (
           <Menu.Button className="grid relative place-items-center hover:bg-gray-100 rounded p-1 focus:outline-none">
@@ -27,16 +29,20 @@ const CustomMenu = ({
           </Menu.Button>
         ) : (
           <Menu.Button
-            className={`flex justify-between items-center gap-1 hover:bg-gray-100 border rounded-md shadow-sm px-2 w-full py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300 ${
+            className={`flex justify-between items-center gap-1 hover:bg-gray-100 px-2 py-1 cursor-pointer text-xs duration-300 ${
               textAlignment === "right"
                 ? "text-right"
                 : textAlignment === "center"
                 ? "text-center"
                 : "text-left"
+            } ${
+              withoutBorder
+                ? "rounded"
+                : "w-full border shadow-sm rounded-md focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"
             }`}
           >
             {label}
-            <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
+            {!withoutBorder && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
           </Menu.Button>
         )}
       </div>
@@ -51,9 +57,9 @@ const CustomMenu = ({
         leaveTo="transform opacity-0 scale-95"
       >
         <Menu.Items
-          className={`absolute right-0 z-10 mt-2 origin-top-right rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
-            width === "auto" ? "min-w-full whitespace-nowrap" : "w-56"
-          }`}
+          className={`absolute z-20 mt-1 rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
+            optionsPosition === "left" ? "left-0 origin-top-left" : "right-0 origin-top-right"
+          } ${width === "auto" ? "min-w-full whitespace-nowrap" : "w-56"}`}
         >
           <div className="py-1">{children}</div>
         </Menu.Items>
diff --git a/apps/app/ui/CustomMenu/types.d.ts b/apps/app/ui/custom-menu/types.d.ts
similarity index 83%
rename from apps/app/ui/CustomMenu/types.d.ts
rename to apps/app/ui/custom-menu/types.d.ts
index b3f3c9552..a21ec2583 100644
--- a/apps/app/ui/CustomMenu/types.d.ts
+++ b/apps/app/ui/custom-menu/types.d.ts
@@ -5,6 +5,8 @@ export type Props = {
   ellipsis?: boolean;
   width?: "auto";
   textAlignment?: "left" | "center" | "right";
+  withoutBorder?: boolean;
+  optionsPosition?: "left" | "right";
 };
 
 export type MenuItemProps = {
diff --git a/apps/app/ui/custom-select/index.tsx b/apps/app/ui/custom-select/index.tsx
index 5963a039c..2355b5b90 100644
--- a/apps/app/ui/custom-select/index.tsx
+++ b/apps/app/ui/custom-select/index.tsx
@@ -10,9 +10,17 @@ type CustomSelectProps = {
   children: React.ReactNode;
   label: string | JSX.Element;
   textAlignment?: "left" | "center" | "right";
+  width?: "auto" | string;
 };
 
-const CustomSelect = ({ children, label, textAlignment, value, onChange }: CustomSelectProps) => {
+const CustomSelect = ({
+  children,
+  label,
+  textAlignment,
+  value,
+  onChange,
+  width = "auto",
+}: CustomSelectProps) => {
   return (
     <Listbox
       as="div"
@@ -44,7 +52,11 @@ const CustomSelect = ({ children, label, textAlignment, value, onChange }: Custo
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Listbox.Options className="absolute right-0 z-10 mt-1 w-56 origin-top-right rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+        <Listbox.Options
+          className={`absolute right-0 z-10 mt-1 origin-top-right rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
+            width === "auto" ? "min-w-full whitespace-nowrap" : "w-56"
+          }`}
+        >
           <div className="py-1">{children}</div>
         </Listbox.Options>
       </Transition>
diff --git a/apps/app/ui/emoji-icon-picker/emojis.json b/apps/app/ui/emoji-icon-picker/emojis.json
new file mode 100644
index 000000000..73b9b800f
--- /dev/null
+++ b/apps/app/ui/emoji-icon-picker/emojis.json
@@ -0,0 +1,1090 @@
+[
+  "8986",
+  "8987",
+  "9193",
+  "9194",
+  "9195",
+  "9196",
+  "9197",
+  "9198",
+  "9199",
+  "9200",
+  "9201",
+  "9202",
+  "9203",
+  "9208",
+  "9209",
+  "9210",
+  "9410",
+  "9748",
+  "9749",
+  "9757",
+  "9800",
+  "9801",
+  "9802",
+  "9803",
+  "9804",
+  "9805",
+  "9806",
+  "9807",
+  "9808",
+  "9809",
+  "9810",
+  "9811",
+  "9823",
+  "9855",
+  "9875",
+  "9889",
+  "9898",
+  "9899",
+  "9917",
+  "9918",
+  "9924",
+  "9925",
+  "9934",
+  "9935",
+  "9937",
+  "9939",
+  "9940",
+  "9961",
+  "9962",
+  "9968",
+  "9969",
+  "9970",
+  "9971",
+  "9972",
+  "9973",
+  "9975",
+  "9976",
+  "9977",
+  "9978",
+  "9981",
+  "9986",
+  "9989",
+  "9992",
+  "9993",
+  "9994",
+  "9995",
+  "9996",
+  "9997",
+  "9999",
+  "10002",
+  "10004",
+  "10006",
+  "10013",
+  "10017",
+  "10024",
+  "10035",
+  "10036",
+  "10052",
+  "10055",
+  "10060",
+  "10062",
+  "10067",
+  "10068",
+  "10069",
+  "10071",
+  "10083",
+  "10084",
+  "10133",
+  "10134",
+  "10135",
+  "10145",
+  "10160",
+  "10175",
+  "10548",
+  "10549",
+  "11013",
+  "11014",
+  "11015",
+  "11035",
+  "11036",
+  "11088",
+  "11093",
+  "12336",
+  "12349",
+  "12951",
+  "12953",
+  "126980",
+  "127183",
+  "127344",
+  "127345",
+  "127358",
+  "127359",
+  "127374",
+  "127377",
+  "127378",
+  "127379",
+  "127380",
+  "127381",
+  "127382",
+  "127383",
+  "127384",
+  "127385",
+  "127386",
+  "127489",
+  "127490",
+  "127514",
+  "127535",
+  "127538",
+  "127539",
+  "127540",
+  "127541",
+  "127542",
+  "127543",
+  "127544",
+  "127545",
+  "127546",
+  "127568",
+  "127569",
+  "127744",
+  "127745",
+  "127746",
+  "127747",
+  "127748",
+  "127749",
+  "127750",
+  "127751",
+  "127752",
+  "127753",
+  "127754",
+  "127755",
+  "127756",
+  "127757",
+  "127758",
+  "127759",
+  "127760",
+  "127761",
+  "127762",
+  "127763",
+  "127764",
+  "127765",
+  "127766",
+  "127767",
+  "127768",
+  "127769",
+  "127770",
+  "127771",
+  "127772",
+  "127773",
+  "127774",
+  "127775",
+  "127776",
+  "127777",
+  "127780",
+  "127781",
+  "127782",
+  "127783",
+  "127784",
+  "127785",
+  "127786",
+  "127787",
+  "127788",
+  "127789",
+  "127790",
+  "127791",
+  "127792",
+  "127793",
+  "127794",
+  "127795",
+  "127796",
+  "127797",
+  "127798",
+  "127799",
+  "127800",
+  "127801",
+  "127802",
+  "127803",
+  "127804",
+  "127805",
+  "127806",
+  "127807",
+  "127808",
+  "127809",
+  "127810",
+  "127811",
+  "127812",
+  "127813",
+  "127814",
+  "127815",
+  "127816",
+  "127817",
+  "127818",
+  "127819",
+  "127820",
+  "127821",
+  "127822",
+  "127823",
+  "127824",
+  "127825",
+  "127826",
+  "127827",
+  "127828",
+  "127829",
+  "127830",
+  "127831",
+  "127832",
+  "127833",
+  "127834",
+  "127835",
+  "127836",
+  "127837",
+  "127838",
+  "127839",
+  "127840",
+  "127841",
+  "127842",
+  "127843",
+  "127844",
+  "127845",
+  "127846",
+  "127847",
+  "127848",
+  "127849",
+  "127850",
+  "127851",
+  "127852",
+  "127853",
+  "127854",
+  "127855",
+  "127856",
+  "127857",
+  "127858",
+  "127859",
+  "127860",
+  "127861",
+  "127862",
+  "127863",
+  "127864",
+  "127865",
+  "127866",
+  "127867",
+  "127868",
+  "127869",
+  "127870",
+  "127871",
+  "127872",
+  "127873",
+  "127874",
+  "127875",
+  "127876",
+  "127877",
+  "127878",
+  "127879",
+  "127880",
+  "127881",
+  "127882",
+  "127883",
+  "127884",
+  "127885",
+  "127886",
+  "127887",
+  "127888",
+  "127889",
+  "127890",
+  "127891",
+  "127894",
+  "127895",
+  "127897",
+  "127898",
+  "127899",
+  "127902",
+  "127903",
+  "127904",
+  "127905",
+  "127906",
+  "127907",
+  "127908",
+  "127909",
+  "127910",
+  "127911",
+  "127912",
+  "127913",
+  "127914",
+  "127915",
+  "127916",
+  "127917",
+  "127918",
+  "127919",
+  "127920",
+  "127921",
+  "127922",
+  "127923",
+  "127924",
+  "127925",
+  "127926",
+  "127927",
+  "127928",
+  "127929",
+  "127930",
+  "127931",
+  "127932",
+  "127933",
+  "127934",
+  "127935",
+  "127936",
+  "127937",
+  "127938",
+  "127939",
+  "127940",
+  "127941",
+  "127942",
+  "127943",
+  "127944",
+  "127945",
+  "127946",
+  "127947",
+  "127948",
+  "127949",
+  "127950",
+  "127951",
+  "127952",
+  "127953",
+  "127954",
+  "127955",
+  "127956",
+  "127957",
+  "127958",
+  "127959",
+  "127960",
+  "127961",
+  "127962",
+  "127963",
+  "127964",
+  "127965",
+  "127966",
+  "127967",
+  "127968",
+  "127969",
+  "127970",
+  "127971",
+  "127972",
+  "127973",
+  "127974",
+  "127975",
+  "127976",
+  "127977",
+  "127978",
+  "127979",
+  "127980",
+  "127981",
+  "127982",
+  "127983",
+  "127984",
+  "127987",
+  "127988",
+  "127989",
+  "127991",
+  "127992",
+  "127993",
+  "127994",
+  "127995",
+  "127996",
+  "127997",
+  "127998",
+  "127999",
+  "128000",
+  "128001",
+  "128002",
+  "128003",
+  "128004",
+  "128005",
+  "128006",
+  "128007",
+  "128008",
+  "128009",
+  "128010",
+  "128011",
+  "128012",
+  "128013",
+  "128014",
+  "128015",
+  "128016",
+  "128017",
+  "128018",
+  "128019",
+  "128020",
+  "128021",
+  "128022",
+  "128023",
+  "128024",
+  "128025",
+  "128026",
+  "128027",
+  "128028",
+  "128029",
+  "128030",
+  "128031",
+  "128032",
+  "128033",
+  "128034",
+  "128035",
+  "128036",
+  "128037",
+  "128038",
+  "128039",
+  "128040",
+  "128041",
+  "128042",
+  "128043",
+  "128044",
+  "128045",
+  "128046",
+  "128047",
+  "128048",
+  "128049",
+  "128050",
+  "128051",
+  "128052",
+  "128053",
+  "128054",
+  "128055",
+  "128056",
+  "128057",
+  "128058",
+  "128059",
+  "128060",
+  "128061",
+  "128062",
+  "128063",
+  "128064",
+  "128065",
+  "128066",
+  "128067",
+  "128068",
+  "128069",
+  "128070",
+  "128071",
+  "128072",
+  "128073",
+  "128074",
+  "128075",
+  "128076",
+  "128077",
+  "128078",
+  "128079",
+  "128080",
+  "128081",
+  "128082",
+  "128083",
+  "128084",
+  "128085",
+  "128086",
+  "128087",
+  "128088",
+  "128089",
+  "128090",
+  "128091",
+  "128092",
+  "128093",
+  "128094",
+  "128095",
+  "128096",
+  "128097",
+  "128098",
+  "128099",
+  "128100",
+  "128101",
+  "128102",
+  "128103",
+  "128104",
+  "128105",
+  "128106",
+  "128107",
+  "128108",
+  "128109",
+  "128110",
+  "128111",
+  "128112",
+  "128113",
+  "128114",
+  "128115",
+  "128116",
+  "128117",
+  "128118",
+  "128119",
+  "128120",
+  "128121",
+  "128122",
+  "128123",
+  "128124",
+  "128125",
+  "128126",
+  "128127",
+  "128128",
+  "128129",
+  "128130",
+  "128131",
+  "128132",
+  "128133",
+  "128134",
+  "128135",
+  "128136",
+  "128137",
+  "128138",
+  "128139",
+  "128140",
+  "128141",
+  "128142",
+  "128143",
+  "128144",
+  "128145",
+  "128146",
+  "128147",
+  "128148",
+  "128149",
+  "128150",
+  "128151",
+  "128152",
+  "128153",
+  "128154",
+  "128155",
+  "128156",
+  "128157",
+  "128158",
+  "128159",
+  "128160",
+  "128161",
+  "128162",
+  "128163",
+  "128164",
+  "128165",
+  "128166",
+  "128167",
+  "128168",
+  "128169",
+  "128170",
+  "128171",
+  "128172",
+  "128173",
+  "128174",
+  "128175",
+  "128176",
+  "128177",
+  "128178",
+  "128179",
+  "128180",
+  "128181",
+  "128182",
+  "128183",
+  "128184",
+  "128185",
+  "128186",
+  "128187",
+  "128188",
+  "128189",
+  "128190",
+  "128191",
+  "128192",
+  "128193",
+  "128194",
+  "128195",
+  "128196",
+  "128197",
+  "128198",
+  "128199",
+  "128200",
+  "128201",
+  "128202",
+  "128203",
+  "128204",
+  "128205",
+  "128206",
+  "128207",
+  "128208",
+  "128209",
+  "128210",
+  "128211",
+  "128212",
+  "128213",
+  "128214",
+  "128215",
+  "128216",
+  "128217",
+  "128218",
+  "128219",
+  "128220",
+  "128221",
+  "128222",
+  "128223",
+  "128224",
+  "128225",
+  "128226",
+  "128227",
+  "128228",
+  "128229",
+  "128230",
+  "128231",
+  "128232",
+  "128233",
+  "128234",
+  "128235",
+  "128236",
+  "128237",
+  "128238",
+  "128239",
+  "128240",
+  "128241",
+  "128242",
+  "128243",
+  "128244",
+  "128245",
+  "128246",
+  "128247",
+  "128248",
+  "128249",
+  "128250",
+  "128251",
+  "128252",
+  "128253",
+  "128255",
+  "128256",
+  "128257",
+  "128258",
+  "128259",
+  "128260",
+  "128261",
+  "128262",
+  "128263",
+  "128264",
+  "128265",
+  "128266",
+  "128267",
+  "128268",
+  "128269",
+  "128270",
+  "128271",
+  "128272",
+  "128273",
+  "128274",
+  "128275",
+  "128276",
+  "128277",
+  "128278",
+  "128279",
+  "128280",
+  "128281",
+  "128282",
+  "128283",
+  "128284",
+  "128285",
+  "128286",
+  "128287",
+  "128288",
+  "128289",
+  "128290",
+  "128291",
+  "128292",
+  "128293",
+  "128294",
+  "128295",
+  "128296",
+  "128297",
+  "128298",
+  "128299",
+  "128300",
+  "128301",
+  "128302",
+  "128303",
+  "128304",
+  "128305",
+  "128306",
+  "128307",
+  "128308",
+  "128309",
+  "128310",
+  "128311",
+  "128312",
+  "128313",
+  "128314",
+  "128315",
+  "128316",
+  "128317",
+  "128329",
+  "128330",
+  "128331",
+  "128332",
+  "128333",
+  "128334",
+  "128336",
+  "128337",
+  "128338",
+  "128339",
+  "128340",
+  "128341",
+  "128342",
+  "128343",
+  "128344",
+  "128345",
+  "128346",
+  "128347",
+  "128348",
+  "128349",
+  "128350",
+  "128351",
+  "128352",
+  "128353",
+  "128354",
+  "128355",
+  "128356",
+  "128357",
+  "128358",
+  "128359",
+  "128367",
+  "128368",
+  "128371",
+  "128372",
+  "128373",
+  "128374",
+  "128375",
+  "128376",
+  "128377",
+  "128378",
+  "128391",
+  "128394",
+  "128395",
+  "128396",
+  "128397",
+  "128400",
+  "128405",
+  "128406",
+  "128420",
+  "128421",
+  "128424",
+  "128433",
+  "128434",
+  "128444",
+  "128450",
+  "128451",
+  "128452",
+  "128465",
+  "128466",
+  "128467",
+  "128476",
+  "128477",
+  "128478",
+  "128481",
+  "128483",
+  "128488",
+  "128495",
+  "128499",
+  "128506",
+  "128507",
+  "128508",
+  "128509",
+  "128510",
+  "128511",
+  "128512",
+  "128513",
+  "128514",
+  "128515",
+  "128516",
+  "128517",
+  "128518",
+  "128519",
+  "128520",
+  "128521",
+  "128522",
+  "128523",
+  "128524",
+  "128525",
+  "128526",
+  "128527",
+  "128528",
+  "128529",
+  "128530",
+  "128531",
+  "128532",
+  "128533",
+  "128534",
+  "128535",
+  "128536",
+  "128537",
+  "128538",
+  "128539",
+  "128540",
+  "128541",
+  "128542",
+  "128543",
+  "128544",
+  "128545",
+  "128546",
+  "128547",
+  "128548",
+  "128549",
+  "128550",
+  "128551",
+  "128552",
+  "128553",
+  "128554",
+  "128555",
+  "128556",
+  "128557",
+  "128558",
+  "128559",
+  "128560",
+  "128561",
+  "128562",
+  "128563",
+  "128564",
+  "128565",
+  "128566",
+  "128567",
+  "128568",
+  "128569",
+  "128570",
+  "128571",
+  "128572",
+  "128573",
+  "128574",
+  "128575",
+  "128576",
+  "128577",
+  "128578",
+  "128579",
+  "128580",
+  "128581",
+  "128582",
+  "128583",
+  "128584",
+  "128585",
+  "128586",
+  "128587",
+  "128588",
+  "128589",
+  "128590",
+  "128591",
+  "128640",
+  "128641",
+  "128642",
+  "128643",
+  "128644",
+  "128645",
+  "128646",
+  "128647",
+  "128648",
+  "128649",
+  "128650",
+  "128651",
+  "128652",
+  "128653",
+  "128654",
+  "128655",
+  "128656",
+  "128657",
+  "128658",
+  "128659",
+  "128660",
+  "128661",
+  "128662",
+  "128663",
+  "128664",
+  "128665",
+  "128666",
+  "128667",
+  "128668",
+  "128669",
+  "128670",
+  "128671",
+  "128672",
+  "128673",
+  "128674",
+  "128675",
+  "128676",
+  "128677",
+  "128678",
+  "128679",
+  "128680",
+  "128681",
+  "128682",
+  "128683",
+  "128684",
+  "128685",
+  "128686",
+  "128687",
+  "128688",
+  "128689",
+  "128690",
+  "128691",
+  "128692",
+  "128693",
+  "128694",
+  "128695",
+  "128696",
+  "128697",
+  "128698",
+  "128699",
+  "128700",
+  "128701",
+  "128702",
+  "128703",
+  "128704",
+  "128705",
+  "128706",
+  "128707",
+  "128708",
+  "128709",
+  "128715",
+  "128716",
+  "128717",
+  "128718",
+  "128719",
+  "128720",
+  "128721",
+  "128722",
+  "128736",
+  "128737",
+  "128738",
+  "128739",
+  "128740",
+  "128741",
+  "128745",
+  "128747",
+  "128748",
+  "128752",
+  "128755",
+  "128756",
+  "128757",
+  "128758",
+  "128759",
+  "128760",
+  "128761",
+  "128762",
+  "129296",
+  "129297",
+  "129298",
+  "129299",
+  "129300",
+  "129301",
+  "129302",
+  "129303",
+  "129304",
+  "129305",
+  "129306",
+  "129307",
+  "129308",
+  "129309",
+  "129310",
+  "129311",
+  "129312",
+  "129313",
+  "129314",
+  "129315",
+  "129316",
+  "129317",
+  "129318",
+  "129319",
+  "129320",
+  "129321",
+  "129322",
+  "129323",
+  "129324",
+  "129325",
+  "129326",
+  "129327",
+  "129328",
+  "129329",
+  "129330",
+  "129331",
+  "129332",
+  "129333",
+  "129334",
+  "129335",
+  "129336",
+  "129337",
+  "129338",
+  "129340",
+  "129341",
+  "129342",
+  "129344",
+  "129345",
+  "129346",
+  "129347",
+  "129348",
+  "129349",
+  "129351",
+  "129352",
+  "129353",
+  "129354",
+  "129355",
+  "129356",
+  "129357",
+  "129358",
+  "129359",
+  "129360",
+  "129361",
+  "129362",
+  "129363",
+  "129364",
+  "129365",
+  "129366",
+  "129367",
+  "129368",
+  "129369",
+  "129370",
+  "129371",
+  "129372",
+  "129373",
+  "129374",
+  "129375",
+  "129376",
+  "129377",
+  "129378",
+  "129379",
+  "129380",
+  "129381",
+  "129382",
+  "129383",
+  "129384",
+  "129385",
+  "129386",
+  "129387",
+  "129408",
+  "129409",
+  "129410",
+  "129411",
+  "129412",
+  "129413",
+  "129414",
+  "129415",
+  "129416",
+  "129417",
+  "129418",
+  "129419",
+  "129420",
+  "129421",
+  "129422",
+  "129423",
+  "129424",
+  "129425",
+  "129426",
+  "129427",
+  "129428",
+  "129429",
+  "129430",
+  "129431",
+  "129472",
+  "129488",
+  "129489",
+  "129490",
+  "129491",
+  "129492",
+  "129493",
+  "129494",
+  "129495",
+  "129496",
+  "129497",
+  "129498",
+  "129499",
+  "129500",
+  "129501",
+  "129502",
+  "129503",
+  "129504",
+  "129505",
+  "129506",
+  "129507",
+  "129508",
+  "129509",
+  "129510"
+]
diff --git a/apps/app/ui/emoji-icon-picker/helpers.ts b/apps/app/ui/emoji-icon-picker/helpers.ts
new file mode 100644
index 000000000..ab59a7b07
--- /dev/null
+++ b/apps/app/ui/emoji-icon-picker/helpers.ts
@@ -0,0 +1,26 @@
+export const saveRecentEmoji = (emoji: string) => {
+  const recentEmojis = localStorage.getItem("recentEmojis");
+  if (recentEmojis) {
+    const recentEmojisArray = recentEmojis.split(",");
+    if (recentEmojisArray.includes(emoji)) {
+      const index = recentEmojisArray.indexOf(emoji);
+      recentEmojisArray.splice(index, 1);
+    }
+    recentEmojisArray.unshift(emoji);
+    if (recentEmojisArray.length > 18) {
+      recentEmojisArray.pop();
+    }
+    localStorage.setItem("recentEmojis", recentEmojisArray.join(","));
+  } else {
+    localStorage.setItem("recentEmojis", emoji);
+  }
+};
+
+export const getRecentEmojis = () => {
+  const recentEmojis = localStorage.getItem("recentEmojis");
+  if (recentEmojis) {
+    const recentEmojisArray = recentEmojis.split(",");
+    return recentEmojisArray;
+  }
+  return [];
+};
diff --git a/apps/app/ui/emoji-icon-picker/index.tsx b/apps/app/ui/emoji-icon-picker/index.tsx
new file mode 100644
index 000000000..26afe7d67
--- /dev/null
+++ b/apps/app/ui/emoji-icon-picker/index.tsx
@@ -0,0 +1,131 @@
+import React, { useEffect, useState, useRef } from "react";
+// headless ui
+import { Tab, Transition, Popover } from "@headlessui/react";
+// hooks
+import useOutsideClickDetector from "lib/hooks/useOutsideClickDetector";
+// common
+import { getRandomEmoji } from "constants/common";
+// emoji
+import emojis from "./emojis.json";
+// helpers
+import { getRecentEmojis, saveRecentEmoji } from "./helpers";
+// types
+import { Props } from "./types";
+
+const tabOptions = [
+  {
+    key: "emoji",
+    title: "Emoji",
+  },
+  {
+    key: "icon",
+    title: "Icon",
+  },
+];
+
+const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange }) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const [recentEmojis, setRecentEmojis] = useState<string[]>([]);
+
+  useEffect(() => {
+    setRecentEmojis(getRecentEmojis());
+  }, []);
+
+  useOutsideClickDetector(ref, () => {
+    setIsOpen(false);
+  });
+
+  useEffect(() => {
+    if (!value || value?.length === 0) onChange(getRandomEmoji());
+  }, [value, onChange]);
+
+  return (
+    <Popover className="relative" ref={ref}>
+      <Popover.Button
+        className="border border-gray-300 p-3 sm:text-sm rounded-md outline-none"
+        onClick={() => setIsOpen((prev) => !prev)}
+      >
+        {label}
+      </Popover.Button>
+      <Transition
+        show={isOpen}
+        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"
+      >
+        <Popover.Panel className="absolute z-10 w-80 bg-white rounded-md shadow-lg mt-2">
+          <div className="w-80 h-80 p-2 bg-white overflow-auto rounded shadow-2xl border">
+            <Tab.Group as="div" className="w-full h-full flex flex-col">
+              <Tab.List className="-mx-2 flex justify-around p-1 gap-1 border-b rounded flex-0">
+                {tabOptions.map((tab) => (
+                  <Tab
+                    key={tab.key}
+                    className={({ selected }) =>
+                      `w-1/2 py-2 transition-colors border-b text-sm font-medium text-center outline-none -my-1 ${
+                        selected ? "border-theme" : "border-transparent"
+                      }`
+                    }
+                  >
+                    {tab.title}
+                  </Tab>
+                ))}
+              </Tab.List>
+              <Tab.Panels className="w-full h-full flex-1 overflow-y-auto overflow-x-hidden">
+                <Tab.Panel className="w-full h-full">
+                  {recentEmojis.length > 0 && (
+                    <div className="py-2 w-full">
+                      <h3 className="text-lg mb-2">Recent Emojis</h3>
+                      <div className="grid grid-cols-9 gap-2">
+                        {recentEmojis.map((emoji) => (
+                          <button
+                            type="button"
+                            className="select-none text-xl"
+                            key={emoji}
+                            onClick={() => {
+                              onChange(emoji);
+                            }}
+                          >
+                            {String.fromCodePoint(parseInt(emoji))}
+                          </button>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                  <div className="py-3">
+                    <h3 className="text-lg mb-2">All Emojis</h3>
+                    <div className="grid grid-cols-9 gap-2">
+                      {emojis.map((emoji) => (
+                        <button
+                          type="button"
+                          className="select-none text-xl"
+                          key={emoji}
+                          onClick={() => {
+                            onChange(emoji);
+                            saveRecentEmoji(emoji);
+                          }}
+                        >
+                          {String.fromCodePoint(parseInt(emoji))}
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+                </Tab.Panel>
+                <Tab.Panel className="w-full h-full flex flex-col justify-center items-center">
+                  <p>Coming Soon...</p>
+                </Tab.Panel>
+              </Tab.Panels>
+            </Tab.Group>
+          </div>
+        </Popover.Panel>
+      </Transition>
+    </Popover>
+  );
+};
+
+export default EmojiIconPicker;
diff --git a/apps/app/ui/emoji-icon-picker/types.d.ts b/apps/app/ui/emoji-icon-picker/types.d.ts
new file mode 100644
index 000000000..2d3e26353
--- /dev/null
+++ b/apps/app/ui/emoji-icon-picker/types.d.ts
@@ -0,0 +1,5 @@
+export type Props = {
+  label: string | React.ReactNode;
+  value: any;
+  onChange: (data: any) => void;
+};
diff --git a/apps/app/ui/index.ts b/apps/app/ui/index.ts
index 96c097668..f51ae91a2 100644
--- a/apps/app/ui/index.ts
+++ b/apps/app/ui/index.ts
@@ -2,11 +2,13 @@ export { default as Button } from "./Button";
 export { default as Input } from "./Input";
 export { default as Select } from "./Select";
 export { default as TextArea } from "./TextArea";
-export { default as CustomListbox } from "./CustomListbox";
-export { default as CustomMenu } from "./CustomMenu";
+export { default as CustomListbox } from "./custom-listbox";
+export { default as CustomMenu } from "./custom-menu";
+export { default as CustomSelect } from "./custom-select";
 export { default as Spinner } from "./Spinner";
 export { default as Tooltip } from "./Tooltip";
-export { default as SearchListbox } from "./SearchListbox";
+export { default as SearchListbox } from "./search-listbox";
 export { default as HeaderButton } from "./HeaderButton";
 export * from "./Breadcrumbs";
 export * from "./EmptySpace";
+export { default as EmojiIconPicker } from "./emoji-icon-picker";
diff --git a/apps/app/ui/SearchListbox/index.tsx b/apps/app/ui/search-listbox/index.tsx
similarity index 94%
rename from apps/app/ui/SearchListbox/index.tsx
rename to apps/app/ui/search-listbox/index.tsx
index c489fdff2..d2cbf8870 100644
--- a/apps/app/ui/SearchListbox/index.tsx
+++ b/apps/app/ui/search-listbox/index.tsx
@@ -100,12 +100,12 @@ const SearchListbox: React.FC<Props> = ({
               } ${optionsClassName || ""}`}
             >
               <Combobox.Input
-                className="w-full bg-transparent border-b p-2 mb-1 focus:outline-none sm:text-sm"
+                className="w-full bg-transparent border-b p-2 focus:outline-none text-xs"
                 onChange={(event) => setQuery(event.target.value)}
                 placeholder="Search"
                 displayValue={(assigned: any) => assigned?.name}
               />
-              <div className="p-1">
+              <div className="py-1">
                 {filteredOptions ? (
                   filteredOptions.length > 0 ? (
                     filteredOptions.map((option) => (
@@ -113,8 +113,8 @@ const SearchListbox: React.FC<Props> = ({
                         key={option.value}
                         className={({ active }) =>
                           `${
-                            active ? "text-white bg-theme" : "text-gray-900"
-                          } cursor-pointer select-none truncate font-medium relative p-2 rounded-md`
+                            active ? "bg-indigo-50" : ""
+                          } cursor-pointer select-none truncate text-gray-900 p-2`
                         }
                         value={option.value}
                       >
diff --git a/apps/app/ui/SearchListbox/types.d.ts b/apps/app/ui/search-listbox/types.d.ts
similarity index 100%
rename from apps/app/ui/SearchListbox/types.d.ts
rename to apps/app/ui/search-listbox/types.d.ts
diff --git a/apps/www/README.md b/apps/www/README.md
new file mode 100644
index 000000000..9d7b340a8
--- /dev/null
+++ b/apps/www/README.md
@@ -0,0 +1,3 @@
+# Plane.so
+
+Source code powering www.plane.so
\ No newline at end of file
diff --git a/apps/www/components/Footer.tsx b/apps/www/components/Footer.tsx
new file mode 100644
index 000000000..b070b113c
--- /dev/null
+++ b/apps/www/components/Footer.tsx
@@ -0,0 +1,79 @@
+import React from "react";
+// next import
+import Link from "next/link";
+import Image from "next/image";
+
+const Footer = () => {
+  return (
+    <>
+      <div className="button-gradient pt-[1.5px]">
+        <div className="bg-[#00091F] text-white">
+          <div className="container mx-auto px-5 py-20 pb-10">
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-y-8">
+              <div className="mb-5 flex flex-col">
+                <div className="text-4xl font-medium tracking-wide leading-relaxed text-center lg:text-left">
+                  Questions? Comments? <br className="hidden lg:block" />
+                  Concerns?
+                </div>
+                <div className="mx-auto lg:ml-0 button-gradient bg-black w-min whitespace-nowrap px-6 py-2  mt-5 rounded-lg">
+                  <Link
+                    href="https://discord.com/invite/8SR2N9PAcJ"
+                    target="_blank"
+                  >
+                    <a>Chat to us on Discord</a>
+                  </Link>
+                </div>
+              </div>
+              <div className="">
+                <div className="grid grid-cols-3 divide-x text-center text-[#C0C0C0] max-h-min">
+                  <Link href="mailto:hello@plane.so">
+                    <a className="">CONTACT</a>
+                  </Link>
+                  <Link href="/privacy-policy">
+                    <a className="">PRIVACY POLICY</a>
+                  </Link>
+                  <Link href="/terms-and-conditions">
+                    <a className="">TERMS & CONDITIONS</a>
+                  </Link>
+                </div>
+                <div className="flex w-full mt-8 justify-center lg:justify-end items-center gap-6">
+                  <Link href="https://twitter.com/planepowers">
+                    <a className="flex-shrink-0 relative w-[40px] h-[40px]">
+                      <Image
+                        src="/icons/twitter-white.svg"
+                        className="w-full h-full object-contain rounded"
+                        layout="fill"
+                        alt="user"
+                      />
+                    </a>
+                  </Link>
+                  <Link href="https://discord.com/invite/A92xrEGCge">
+                    <a className="flex-shrink-0 relative w-[40px] h-[40px]">
+                      <Image
+                        src="/icons/discord-white.svg"
+                        className="w-full h-full object-contain rounded"
+                        layout="fill"
+                        alt="user"
+                      />
+                    </a>
+                  </Link>
+                </div>
+                <div className="flex justify-center lg:justify-end mt-10">
+                  <div className="flex-shrink-0 relative w-28 h-8">
+                    <Image
+                      src="/logo/plane-wordmark.svg"
+                      className="w-full h-full object-contain rounded"
+                      layout="fill"
+                      alt="user"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+export default Footer;
diff --git a/apps/www/components/NavBar.tsx b/apps/www/components/NavBar.tsx
new file mode 100644
index 000000000..bcb9c321b
--- /dev/null
+++ b/apps/www/components/NavBar.tsx
@@ -0,0 +1,146 @@
+import { Fragment } from "react";
+// next imports
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { Popover, Transition } from "@headlessui/react";
+import Image from "next/image";
+// icons
+import { MenuIcon, XIcon } from "@heroicons/react/outline";
+
+const Header = () => {
+  const router = useRouter();
+
+  const MobileNavLink = ({ href, children }: any) => {
+    return (
+      <Popover.Button
+        onClick={() => router.push(href)}
+        className="block text-left"
+      >
+        <div className=" w-full hover:bg-gray-200 p-2">{children}</div>
+      </Popover.Button>
+    );
+  };
+
+  const navLinks = [
+    { title: "Pricing", href: "/pricing" },
+    { title: "Change-Log", href: "/change-log" },
+    { title: "Documentation", href: "/docs" },
+    { title: "Github", href: "https://github.com/makeplane/plane" }
+  ];
+
+  const MobileNavigation = () => {
+    return (
+      <Popover>
+        <Popover.Button
+          className="relative z-10 flex h-8 w-8 items-center justify-center outline-none"
+          aria-label="Toggle Navigation"
+        >
+          {({ open }) =>
+            open ? <XIcon width="28px" /> : <MenuIcon width="28px" />
+          }
+        </Popover.Button>
+        <Transition.Root>
+          <Transition.Child
+            as={Fragment}
+            enter="duration-150 ease-out"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="duration-150 ease-in"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <Popover.Overlay className="fixed inset-0  bg-gray-300 bg-opacity-50" />
+          </Transition.Child>
+          <Transition.Child
+            as={Fragment}
+            enter="duration-150 ease-out"
+            enterFrom="opacity-0 scale-95"
+            enterTo="opacity-100 scale-100"
+            leave="duration-100 ease-in"
+            leaveFrom="opacity-100 scale-100"
+            leaveTo="opacity-0 scale-95"
+          >
+            <Popover.Panel
+              as="div"
+              className="absolute inset-x-0 top-full mt-4 flex origin-top flex-col rounded-2xl bg-white text-black p-4 text-lg tracking-tight  shadow-xl ring-1 outline-none"
+            >
+              {navLinks.map((data: any, index: number) => (
+                <Fragment key={index}>
+                  <MobileNavLink href={data.href}>{data.title}</MobileNavLink>
+                </Fragment>
+              ))}
+              <hr className="m-2 border-slate-300/40" />
+              <MobileNavLink href="/login">Sign in</MobileNavLink>
+            </Popover.Panel>
+          </Transition.Child>
+        </Transition.Root>
+      </Popover>
+    );
+  };
+
+  return (
+    <>
+      <div className="w-full text-center text-white bg-[#001842] py-5 px-4">
+        Plane is open source. Star our GitHub repo!
+      </div>
+      <div className="nav-border-gradient py-[1.5px] relative z-0">
+        <div className="bg-[#00091F]">
+          <header className="py-4 text-white nav-gradient relative z-10 ">
+            <div className="container mx-auto px-5">
+              <nav className="relative z-50 flex items-center justify-between">
+                <div className="flex items-center md:gap-x-12 w-52">
+                  <Link href="/" aria-label="Home">
+                    <a title="Plan Everything" className="text-3xl">
+                      <div className="flex-shrink-0 relative w-[30px] h-[30px]">
+                        <Image
+                          src={"/logo/plane.svg"}
+                          className="w-full h-full object-cover rounded"
+                          layout="fill"
+                          alt="user"
+                        />
+                      </div>
+                    </a>
+                  </Link>
+                </div>
+                <div className="hidden md:flex md:gap-x-6">
+                  {navLinks.map((data: any, index: number) => (
+                    <Link key={index} href={data.href}>
+                      <a
+                        className={`inline-block rounded-lg py-1 px-2  ${
+                          router.pathname.includes(data.href)
+                            ? "text-white"
+                            : "text-gray-400"
+                        }`}
+                      >
+                        {data.title}
+                      </a>
+                    </Link>
+                  ))}
+                </div>
+                <div className="flex items-center gap-x-5 md:gap-x-8 w-52 justify-end">
+                  <div className="hidden md:block">
+                    <Link href="/">
+                      <a>Sign In</a>
+                    </Link>
+                  </div>
+                  <Link href="http://app.plane.so" target="_blank">
+                    <a className="button-gradient p-[1px] rounded text-white flex-shrink-0">
+                      <div className="p-2 py-1 bg-[#001842] rounded">
+                        <div className="text-gradient">Join Alpha</div>
+                      </div>
+                    </a>
+                  </Link>
+                  <div className="-mr-1 md:hidden">
+                    <MobileNavigation />
+                  </div>
+                </div>
+              </nav>
+            </div>
+          </header>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Header;
diff --git a/apps/www/components/about/Detail.tsx b/apps/www/components/about/Detail.tsx
new file mode 100644
index 000000000..d14a37172
--- /dev/null
+++ b/apps/www/components/about/Detail.tsx
@@ -0,0 +1,30 @@
+// next imports
+import Image from "next/image";
+
+const Details = () => {
+  return (
+    <div className="bg-[#00091F] my-20 pt-10 relative">
+      <div className="container mx-auto px-5 gap-6 text-white">
+        <div className="text-4xl my-10 mt-20">Our Mission</div>
+        <div className="max-w-4xl">
+          The mission of Plane is to provide a powerful and user-friendly issue
+          planning and tracking tool that is open-source and accessible to teams
+          of all sizes. Our goal is to enable teams to easily plan, progress,
+          and track their work, to improve collaboration, efficiency, and
+          productivity.
+        </div>
+        <div className="text-4xl my-10 mt-20">Our Vision</div>
+        <div className="max-w-4xl">
+          Our vision for Plane is to be the leading open-source alternative to
+          proprietary tools like JIRA and to provide teams with a flexible,
+          customizable, and easy-to-use platform for managing their work. We aim
+          to provide a range of features and integrations that make it easy for
+          teams to collaborate, communicate, and stay on top of their projects
+          without the need for expensive or complex software.
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Details;
diff --git a/apps/www/components/about/Hero.tsx b/apps/www/components/about/Hero.tsx
new file mode 100644
index 000000000..985774684
--- /dev/null
+++ b/apps/www/components/about/Hero.tsx
@@ -0,0 +1,21 @@
+const Hero = () => {
+  return (
+    <div className="bg-[#00091F] relative w-full overflow-visible">
+      <div className="absolute w-[100vw] z-0">
+        <img src="/background/hero.svg" className="w-full h-full" alt="" />
+      </div>
+      <div className="container mx-auto px-5 pt-20 pb-16 text-center lg:pt-20 text-white relative z-20">
+        <div className="text-center text-xl tracking-widest">P L A N E</div>
+        <div className="text-4xl md:text-6xl max-w-[700px] mx-auto mt-10">
+          Want to know <br /> <span className="text-gradient">About Us</span>?
+        </div>
+        <div className="text-center max-w-md mx-auto mt-6 text-lg font-thin">
+          Lorem ipsum dolor sit amet consectetur. Amet lacus iaculis ipsum nisi
+          justo tortor ut justo.
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Hero;
diff --git a/apps/www/components/about/Values.tsx b/apps/www/components/about/Values.tsx
new file mode 100644
index 000000000..45ae45328
--- /dev/null
+++ b/apps/www/components/about/Values.tsx
@@ -0,0 +1,61 @@
+// next imports
+import Image from "next/image";
+
+const Values = () => {
+  const valueData = [
+    {
+      title: "Accessibility",
+      description:
+        "We believe powerful tools for planning and tracking work should be accessible to teams of all sizes and budgets."
+    },
+    {
+      title: "Openness",
+      description:
+        "As an open-source project, we are committed to transparency and collaboration and making our code available for anyone to use and contribute to."
+    },
+    {
+      title: "Flexibility",
+      description:
+        "Every team is unique, so we aim to provide a tool that can be customized and tailored to the specific needs of each team."
+    },
+    {
+      title: "Collaboration",
+      description:
+        "We believe that collaboration is key to success, so we aim to provide features that make it easy for teams to communicate and work together."
+    },
+    {
+      title: "User friendliness",
+      description:
+        "As an open-source project, we are committed to transparency and collaboration and making our code available for anyone to use and contribute to."
+    },
+    {
+      title: "Continual improvement",
+      description:
+        "We are committed to constantly improving Plane, based on feedback from our users and the broader community."
+    }
+  ];
+  return (
+    <div className="bg-[#00091F] my-20 relative">
+      <div className="container mx-auto px-5 gap-6 text-white">
+        <div className="text-4xl my-10">Our Values</div>
+        <div className="grid grid-cols-3 gap-4 gap-y-6">
+          {valueData.map((data: any, index: number) => (
+            <div
+              key={index}
+              className="card-border-gradient p-[1.5px] rounded-lg"
+            >
+              <div className="bg-[#00091F] rounded-lg h-full">
+                <div className="bg-card-border rounded-lg p-6">
+                  <div className="text-center text-xl">{data.title}</div>
+                  <div className="mt-5 font-light">{data.description}</div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Values;
diff --git a/apps/www/components/landing/Community.tsx b/apps/www/components/landing/Community.tsx
new file mode 100644
index 000000000..0f7fef15a
--- /dev/null
+++ b/apps/www/components/landing/Community.tsx
@@ -0,0 +1,86 @@
+import React from "react";
+// next imports
+import Image from "next/image";
+import Link from "next/link";
+
+const Community = () => {
+  return (
+    <div className="bg-[#00091F] text-white">
+      <div className="container mx-auto px-5 py-20 md:py-24 ">
+        <h2 className="text-3xl tracking-tight md:text-3xl ">
+          Join Our Growing Developer Community
+        </h2>
+        <div className="max-w-2xl mt-4 text-sm">
+          Join our global community of contributors, developers, and enthusiasts
+          on Discord and Github. Learn more about Plane through documentation
+          from the crew.
+        </div>
+        <div className="mt-10 grid md:grid-cols-3 gap-4">
+          <Link href="https://twitter.com/planepowers" target="_blank">
+            <a className="rounded-lg card-border-gradient p-[1.5px]">
+              <div className="rounded-lg bg-[#00091F]">
+                <div className="flex flex-col items-center card-gradient py-14 rounded-lg">
+                  <div className="relative h-20 w-20">
+                    <Image
+                      layout="fill"
+                      height="40px"
+                      width="40px"
+                      src="/icons/twitter.svg"
+                      alt="Twitter"
+                    />
+                  </div>
+                  <div className="text-gray-400 mt-4">
+                    twitter.com
+                    <span className="text-[#05C3FF]">/planepowers</span>{" "}
+                  </div>
+                </div>
+              </div>
+            </a>
+          </Link>
+          <Link href="https://github.com/makeplane" target="_blank">
+            <a className="rounded-lg card-border-gradient p-[1.5px]">
+              <div className="rounded-lg bg-[#00091F]">
+                <div className="flex flex-col items-center card-gradient py-14 rounded-lg">
+                  <div className="relative h-20 w-20">
+                    <Image
+                      layout="fill"
+                      height="40px"
+                      width="40px"
+                      src="/icons/github.svg"
+                      alt="Twitter"
+                    />
+                  </div>
+                  <div className="text-gray-400 mt-4">
+                    github
+                    <span className="text-white">/makeplane</span>
+                  </div>
+                </div>
+              </div>
+            </a>
+          </Link>
+          <Link href="https://discord.com/invite/A92xrEGCge" target="_blank">
+            <a className="rounded-lg card-border-gradient p-[1.5px]">
+              <div className="rounded-lg bg-[#00091F]">
+                <div className="flex flex-col items-center card-gradient py-14 rounded-lg">
+                  {" "}
+                  <div className="relative h-20 w-20">
+                    <Image
+                      layout="fill"
+                      height="40px"
+                      width="40px"
+                      src="/icons/discord.svg"
+                      alt="Twitter"
+                    />
+                  </div>
+                  <div className="mt-4">Join our community</div>
+                </div>
+              </div>
+            </a>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Community;
diff --git a/apps/www/components/landing/Features.tsx b/apps/www/components/landing/Features.tsx
new file mode 100644
index 000000000..09007f637
--- /dev/null
+++ b/apps/www/components/landing/Features.tsx
@@ -0,0 +1,174 @@
+import React from "react";
+// next imports
+import Image from "next/image";
+
+const features = [
+  {
+    title: "Plan",
+    description:
+      "Simple yet powerful planning features make it easy to create and prioritize issues, define milestones and deadlines, and assign tasks to team members.",
+    cards: [
+      {
+        title: (
+          <div>
+            Create <strong className="font-bold">Issues</strong> in seconds
+          </div>
+        ),
+        description:
+          "Create issues, sub-issues with context and detail in seconds. No distraction, no falling through cracks.",
+        image: "/images/plan1.png"
+      },
+      {
+        title: (
+          <div>
+            <strong className="font-bold">View </strong>it as you like
+          </div>
+        ),
+        description:
+          "Kanban, or Lists, we’ve got you covered with the Views you want. Please, filters as you like.",
+        image: "/images/plan2.png"
+      },
+      {
+        title: (
+          <div>
+            Match with your <strong className="font-bold">Speed</strong>
+          </div>
+        ),
+        description:
+          "Speed up your work with number of Shortcuts, and increase your productivity by 3.3%.",
+        image: "/images/plan3.png"
+      }
+    ]
+  },
+  {
+    title: "Progress",
+    description:
+      "Create and assign tasks within cycles, track their progress over time, keep your team organized, and ensures that important tasks are completed on time.",
+    cards: [
+      {
+        title: (
+          <div>
+            Plan better with <strong className="font-bold">Cycles</strong>
+          </div>
+        ),
+        description:
+          "Sprint better with Cycles by setting fixed time within projects and delivering faster with precision.",
+        image: "/images/progress1.png"
+      },
+      {
+        title: (
+          <div>
+            Move faster with
+            <strong className="font-bold"> Bulk </strong>ops
+          </div>
+        ),
+        description:
+          "Organise and move issues better within projects and cycles, with bulk operations and powerful search.",
+        image: "/images/progress2.png"
+      },
+      {
+        title: (
+          <div>
+            Track <strong className="font-bold">and take control</strong>
+          </div>
+        ),
+        description:
+          "Track Cycles with Simple stats for your team that’ll help you push and clear your backlogs.",
+        image: ""
+      }
+    ]
+  },
+  {
+    title: "Collaboration",
+    description:
+      "With its integration capabilities, Plane helps teams stay connected and aligned across different tools and platforms, ensuring that everyone is working towards the same goals.",
+    cards: [
+      {
+        title: (
+          <div>
+            When in doubt,
+            <strong className="font-bold"> Comment </strong>it out
+          </div>
+        ),
+        description:
+          "Collaborate and discuss the details of a specific issue within the project using Comments and Activity.",
+        image: "/images/colab1.png"
+      },
+      {
+        title: (
+          <div>
+            Get
+            <strong className="font-bold"> Notified</strong> on your Slack
+          </div>
+        ),
+        description:
+          "Never miss anything, integrate with your Slack workspace to get notification in real-time.",
+        image: "",
+        coming_soon: true
+      },
+      {
+        title: (
+          <div>
+            Work in <strong className="font-bold">Real-time </strong>
+          </div>
+        ),
+        description:
+          "[Coming soon] See updates in real-time within your teams across different tabs devices.",
+        image: "/images/colab3.png",
+        coming_soon: true
+      }
+    ]
+  }
+];
+
+const PrimaryFeatures = () => {
+  return (
+    <div className="bg-[#00091F] py-20">
+      <div className="container px-5 mx-auto">
+        <div className="text-white">
+          {features.map((feature: any, index: number) => (
+            <div key={index} className="mt-10 md:mt-20">
+              <div className="text-gradient text-2xl">0{index + 1}</div>
+              <div className="mt-4 text-3xl">{feature.title}</div>
+              <div className="mt-4 mb-10 max-w-2xl font-light">
+                {feature.description}
+              </div>
+              <div className="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                {feature.cards.map((card: any, index: number) => (
+                  <div
+                    key={index}
+                    className="card-border-gradient p-[1.5px] rounded-lg h-full flex flex-col relative overflow-hidden"
+                  >
+                    {card.coming_soon && (
+                      <>
+                        <div className="absolute text-[8px] button-gradient text-center -rotate-45 w-24 top-4 -left-6">
+                          {" "}
+                          coming soon
+                        </div>
+                      </>
+                    )}
+                    <div className="bg-[#00091F] rounded-lg h-full">
+                      <div className="card-gradient rounded-lg h-full flex flex-col p-6">
+                        <div className="text-lg font-light">{card.title}</div>
+                        <div className="text-[#c0c0c0] mt-3 mb-6">
+                          {card.description}
+                        </div>
+                        <div className="w-full  rounded-lg mt-auto relative">
+                          <img
+                            src={card.image ? card.image : "/images/plan1.png"}
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PrimaryFeatures;
diff --git a/apps/www/components/landing/Hero.tsx b/apps/www/components/landing/Hero.tsx
new file mode 100644
index 000000000..cb9a57f8b
--- /dev/null
+++ b/apps/www/components/landing/Hero.tsx
@@ -0,0 +1,71 @@
+// next imports
+import Image from "next/image";
+
+const Hero = () => {
+  return (
+    <div className="relative ">
+      <div className="bg-[#00091F] relative">
+        <div className="absolute w-[100vw]">
+          <img src="/background/hero.svg" className="w-full" alt="" />
+        </div>
+        {/* <div className="absolute w-full">
+          <div className="flex-shrink-0 relative w-[100vw] h-[100vh]">
+            <Image
+              src={"/background/hero.svg"}
+              className="w-full h-full object-cover rounded"
+              layout="fill"
+              alt="user"
+            />
+          </div>
+        </div> */}
+        <div className="container mx-auto px-5 pt-20 pb-16 text-center lg:pt-20 text-white relative z-20">
+          <div className="text-center text-xl tracking-widest">P L A N E</div>
+          <div className="text-4xl md:text-6xl max-w-[750px] mx-auto mt-10">
+            <span className="text-gradient">Issue Tracking</span> tool you’ll
+            fall in love with.
+          </div>
+          <div className="text-center max-w-xs mx-auto mt-6 text-lg font-thin">
+            Plane helps you track your issues, epics, and product roadmaps.
+          </div>
+          <div className="max-w-md mx-auto flex items-center mt-8 gap-4">
+            <button className="button-gradient text-white w-full rounded-lg py-2">
+              Sign Up
+            </button>
+            <button className="border text-white w-full rounded-lg py-2">
+              Read the Docs
+            </button>
+          </div>
+        </div>
+
+        <div className="container px-5 mx-auto relative z-20 md:mt-40">
+          <div className="hidden lg:block absolute w-full h-full -top-40">
+            <Image
+              className="object-fill z-10"
+              layout="fill"
+              width="500"
+              height="100%"
+              src="/background/hero-dots.svg"
+              alt="img"
+            />
+          </div>
+          <div className="flex-shrink-0 relative w-full h-80 md:h-[600px] lg:h-[700px]">
+            <Image
+              src={"/images/demo.png"}
+              className="w-full h-full object-contain rounded "
+              layout="fill"
+              alt="user"
+            />
+          </div>
+
+          <div className="text-white mt-10 lg:mt-56 text-2xl md:text-5xl font-thin	max-w-6xl">
+            With its intuitive UI and powerful features, Plane makes it easy to
+            plan and track projects, assign tasks to team members, and monitor
+            progress.
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Hero;
diff --git a/apps/www/components/landing/OpenSource.tsx b/apps/www/components/landing/OpenSource.tsx
new file mode 100644
index 000000000..da1b3b78a
--- /dev/null
+++ b/apps/www/components/landing/OpenSource.tsx
@@ -0,0 +1,64 @@
+import React from "react";
+// next imports
+import Image from "next/image";
+import Link from "next/link";
+
+const OpenSource = () => {
+  const data = [
+    { title: "17k+", description: "Stars" },
+    { title: "20k+", description: "PRs closed" },
+    { title: "300+", description: "Contributors" }
+  ];
+  return (
+    <div className="w-full relative bg-[#00091F]">
+      <div className="hidden lg:block">
+        <Image
+          className="object-fill z-10 "
+          layout="fill"
+          width="500"
+          height="100%"
+          src="/background/open-source.svg"
+          alt="img"
+        />
+      </div>
+      <div className="relative z-10 py-20 md:py-36 bg-opacity-10">
+        <div className="container px-5 mx-auto text-white">
+          <div className="w-full lg:w-3/5 ">
+            <div className="text-5xl">
+              We are <strong>open-source</strong>
+            </div>
+            <div className="mt-4 max-w-2xl mb-6">
+              Host it on your own servers, and easily extend Plane with custom
+              integrations. Choose from a rich set of developer APIs and never
+              be limited by platform features.
+            </div>
+            <Link href="https://github.com/makeplane/plane">
+              <a className="border text-white  rounded-lg py-2 px-3 mb-4">
+                Star us on GitHub
+              </a>
+            </Link>
+            {/* <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+              {data.map((item: any, index: number) => (
+                <div
+                  key={index}
+                  className="rounded-lg card-border-gradient p-[1.5px]"
+                >
+                  <div className="rounded-lg bg-[#00091F]">
+                    <div className="card-gradient p-8 rounded-lg">
+                      <div className="text-3xl text-center">{item.title}</div>
+                      <div className="text-center mt-4 font-light">
+                        {item.description}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div> */}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default OpenSource;
diff --git a/apps/www/components/landing/TimeLine.tsx b/apps/www/components/landing/TimeLine.tsx
new file mode 100644
index 000000000..b40856672
--- /dev/null
+++ b/apps/www/components/landing/TimeLine.tsx
@@ -0,0 +1,63 @@
+import React from "react";
+
+const TimeLine = () => {
+  const timelineData = [
+    { name: "Private Alpha", description: "Released on October 17, 2022" },
+    {
+      name: "First open-source commit",
+      description: "Scheduled on November 19, 2022"
+    },
+    { name: "Public beta", description: "Scheduled on December 25, 2022" },
+    { name: "Real-time sync", description: "Scheduled on January 14th, 2022" },
+    {
+      name: "GitHub and Slack integration",
+      description: " Scheduled on January 5, 2022"
+    }
+  ];
+
+  return (
+    <div id="roadmap" className="container mx-auto px-5 py-32">
+      <h2 className="font-display text-3xl tracking-tight sm:text-4xl md:text-5xl text-center">
+        Here's what we are building to keep your itineraries right.{" "}
+      </h2>
+      <p className="mt-4 text-lg tracking-tight text-gray-400 text-center max-w-lg mx-auto">
+        Full roadmap, coming soon.
+      </p>
+      <ol className=" md:flex space-y-10 md:space-y-0 mt-10">
+        {timelineData.map((data: any, index: number) => (
+          <li className="relative mb-6 sm:mb-0">
+            <div className="flex items-center">
+              <div className="hidden sm:flex w-full bg-gray-200 h-0.5 dark:bg-gray-700"></div>
+              <div className="flex flex-shrink-0 z-10 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-0 ring-white dark:bg-blue-900 sm:ring-8 dark:ring-gray-900 shrink-0">
+                <svg
+                  aria-hidden="true"
+                  className="w-3 h-3 text-blue-600 dark:text-blue-300"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+                    clip-rule="evenodd"
+                  ></path>
+                </svg>
+              </div>
+              <div className="hidden sm:flex w-full bg-gray-200 h-0.5 dark:bg-gray-700"></div>
+            </div>
+            <div className="mt-3 sm:px-8">
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white text-center">
+                {data.name}
+              </h3>
+              <time className="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500 text-center">
+                {data.description}
+              </time>
+            </div>
+          </li>
+        ))}
+      </ol>
+    </div>
+  );
+};
+
+export default TimeLine;
diff --git a/apps/www/components/nprogress.tsx b/apps/www/components/nprogress.tsx
new file mode 100644
index 000000000..95ac72d13
--- /dev/null
+++ b/apps/www/components/nprogress.tsx
@@ -0,0 +1,30 @@
+import NProgress from "nprogress";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+
+export default function Progress() {
+  const router = useRouter();
+
+  useEffect(() => {
+    let timeout: NodeJS.Timeout;
+
+    const start = () => {
+      timeout = setTimeout(NProgress.start, 100);
+    };
+
+    const done = () => {
+      clearTimeout(timeout);
+      NProgress.done();
+    };
+
+    router.events.on("routeChangeStart", start);
+    router.events.on("routeChangeComplete", done);
+    router.events.on("routeChangeError", done);
+    return () => {
+      router.events.off("routeChangeStart", start);
+      router.events.off("routeChangeComplete", done);
+      router.events.off("routeChangeError", done);
+    };
+  }, []);
+  return <></>;
+}
diff --git a/apps/www/components/page.tsx b/apps/www/components/page.tsx
new file mode 100644
index 000000000..fba608c18
--- /dev/null
+++ b/apps/www/components/page.tsx
@@ -0,0 +1,83 @@
+import Head from "next/head";
+import { useRouter } from "next/router";
+
+import {
+  SITE_NAME,
+  SITE_DESCRIPTION,
+  SITE_URL,
+  TWITTER_USER_NAME
+} from "@constants/seo/seo-variables";
+
+type Meta = {
+  title?: string | null;
+  description?: string | null;
+  image?: string | null;
+  url?: string | null;
+};
+
+type Props = {
+  meta: Meta;
+  children: React.ReactNode;
+};
+
+const PageSeo = ({ meta, children }: Props) => {
+  const router = useRouter();
+  const image = meta.image || "/site-image.png";
+  const title = meta.title || SITE_NAME;
+  const url = meta.url || `${SITE_URL}${router.asPath}`;
+  const description = meta.description || SITE_DESCRIPTION;
+
+  return (
+    <>
+      <Head>
+        <title>{title}</title>
+        <meta property="og:title" content={title} />
+        <meta property="og:url" content={url} />
+        <meta name="description" content={description} />
+        <meta property="og:description" content={description} />
+        <meta name="twitter:site" content={`@${TWITTER_USER_NAME}`} />
+        <meta
+          name="twitter:card"
+          content={image ? "summary_large_image" : "summary"}
+        />
+        <link
+          rel="apple-touch-icon"
+          sizes="180x180"
+          href="/favicon/apple-touch-icon.png"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="32x32"
+          href="/favicon/favicon-32x32.png"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="16x16"
+          href="/favicon/favicon-16x16.png"
+        />
+        <link rel="manifest" href="/site.webmanifest.json" />
+        <link rel="shortcut icon" href="/favicon/favicon.ico" />
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" />
+        {/* <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> */}
+        <link
+          href="https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&display=swap"
+          rel="stylesheet"
+        />
+        {image && (
+          <meta
+            property="og:image"
+            content={
+              image.startsWith("https://") ? image : `${SITE_URL}${image}`
+            }
+          />
+        )}
+      </Head>
+      {children}
+    </>
+  );
+};
+
+export default PageSeo;
diff --git a/apps/www/components/pricing/Community.tsx b/apps/www/components/pricing/Community.tsx
new file mode 100644
index 000000000..640af5556
--- /dev/null
+++ b/apps/www/components/pricing/Community.tsx
@@ -0,0 +1,61 @@
+// next imports
+import Image from "next/image";
+// next imports
+import Link from "next/link";
+
+const content = [
+  "Unlimited Issues",
+  "Unlimited Members",
+  "Unlimited Usage (Entries, API calls, Assets, etc.)",
+  "Community support"
+];
+const Enterprise = () => {
+  return (
+    <div className="relative w-full overflow-visible my-20 container mx-auto px-5">
+      <div className=" card-border-gradient p-[1.5px] rounded-lg">
+        <div className="bg-[#00091F] rounded-lg">
+          <div className="text-white card-gradient rounded-lg flex flex-wrap divide-y divide-[#2A3144] divide-x">
+            <div className="w-full md:w-2/5 h-full">
+              <div className="p-10 py-20 flex flex-col">
+                <div className="text-center text-[#C0C0C0] text-lg">
+                  Community Edition
+                </div>
+                <div className="text-gradient text-3xl mt-6 text-center font-medium">
+                  Free Forever
+                </div>
+                <div className="text-center font-thin mt-4">
+                  Open-Source under Apache 2.0 License
+                </div>
+                <Link href="#">
+                  <a className="button-gradient mx-auto rounded mt-10 px-4 py-1">
+                    Self-host Plane
+                  </a>
+                </Link>
+              </div>
+            </div>
+            <div className="w-full md:w-3/5 h-ful flex flex-col justify-center">
+              {content.map((_: string, index: number) => (
+                <div
+                  key={index}
+                  className="flex gap-4 items-center px-10 md:px-20 my-5"
+                >
+                  <div className="flex-shrink-0 relative w-[24px] h-[24px]">
+                    <Image
+                      src="/icons/check-circle.svg"
+                      className="w-full h-full object-contain rounded"
+                      layout="fill"
+                      alt="user"
+                    />
+                  </div>
+                  <div className="text-lg font-thin">{_}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Enterprise;
diff --git a/apps/www/components/pricing/Enterprise.tsx b/apps/www/components/pricing/Enterprise.tsx
new file mode 100644
index 000000000..e7f4b9fa4
--- /dev/null
+++ b/apps/www/components/pricing/Enterprise.tsx
@@ -0,0 +1,66 @@
+// next imports
+import Image from "next/image";
+// next imports
+import Link from "next/link";
+
+const content = [
+  "Unlimited everything",
+  "Custom billing",
+  "Talk to us",
+  "SAML / Single Sign On",
+  "Audit log and app management",
+  "Priority support"
+];
+const Enterprise = () => {
+  return (
+    <div className="relative w-full overflow-visible my-20 container mx-auto px-5">
+      <div className=" card-border-gradient p-[1.5px] rounded-lg">
+        <div className="bg-[#00091F] rounded-lg">
+          <div className="text-white card-gradient rounded-lg flex flex-wrap items-center divide-y divide-[#2A3144] divide-x">
+            <div className="w-full md:w-2/5 h-full">
+              <div className="p-10 py-20 flex flex-col">
+                <div className="text-center text-[#C0C0C0] text-lg">
+                  Enterprise
+                </div>
+                <div className="text-gradient text-3xl mt-6 text-center font-medium">
+                  Coming Soon
+                </div>
+                <Link href="#">
+                  <a className="button-gradient mx-auto rounded mt-4 px-4 py-1">
+                    Talk to us
+                  </a>
+                </Link>
+                {/* <div className="text-center font-thin mt-10">
+                  Lorem ipsum dolor sit amet consectetur. Luctus amet tortor
+                  facilisis pellentesque. Sit feugiat faucibus luctus tempor et
+                  enim. Sit amet metus viverra congue quis a sagittis ut
+                  lacinia.
+                </div> */}
+              </div>
+            </div>
+            <div className="w-full md:w-3/5 h-ful py-10">
+              {content.map((_: string, index: number) => (
+                <div
+                  key={index}
+                  className="flex gap-4 items-center px-10 md:px-20 my-5"
+                >
+                  <div className="flex-shrink-0 relative w-[24px] h-[24px]">
+                    <Image
+                      src="/icons/check-circle.svg"
+                      className="w-full h-full object-contain rounded"
+                      layout="fill"
+                      alt="user"
+                    />
+                  </div>
+                  <div className="text-lg font-thin">{_}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Enterprise;
diff --git a/apps/www/components/pricing/Hero.tsx b/apps/www/components/pricing/Hero.tsx
new file mode 100644
index 000000000..63eab504a
--- /dev/null
+++ b/apps/www/components/pricing/Hero.tsx
@@ -0,0 +1,22 @@
+const Hero = () => {
+  return (
+    <div className="bg-[#00091F] relative w-full overflow-visible">
+      <div className="absolute w-[100vw] z-0">
+        <img src="/background/hero.svg" className="w-full" alt="" />
+      </div>
+      <div className="container mx-auto px-5 pt-20 pb-20 text-center lg:pt-20 text-white relative z-20">
+        <div className="text-center text-xl tracking-widest">P L A N E</div>
+        <div className="text-4xl md:text-6xl max-w-[700px] mx-auto mt-10">
+          No-brainer <span className="text-gradient">Pricing</span> for
+          everyone.
+        </div>
+        <div className="text-center max-w-md mx-auto mt-6 text-lg font-thin">
+          Get started with Plane for free. Upgrade to Pro for unlimited support,
+          file uploads, and access to premium features.
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Hero;
diff --git a/apps/www/components/pricing/Pricing.tsx b/apps/www/components/pricing/Pricing.tsx
new file mode 100644
index 000000000..13058b26a
--- /dev/null
+++ b/apps/www/components/pricing/Pricing.tsx
@@ -0,0 +1,79 @@
+// next imports
+import Image from "next/image";
+
+const CloudPricing = () => {
+  const pricingData = [
+    {
+      title: "Cloud Free",
+      description: "Free Forever",
+      details: [
+        "Unlimited Members",
+        "1000 issues",
+        "5MB per issue file uploads",
+        "Community Support"
+      ],
+      button: "Get started with Free"
+    },
+    {
+      title: "Cloud Pro",
+      description: "$5 per user / month",
+      details: [
+        "Everything in free, plus",
+        "Unlimited issues",
+        "Unlimited file uploads",
+        "Priority Support"
+      ],
+      button: "Get started with Cloud Pro"
+    }
+  ];
+
+  return (
+    <div className="bg-[#00091F] mt-20 relative">
+      <div className="container mx-auto px-5 grid grid-cols-1 lg:grid-cols-2 gap-6 text-white">
+        {pricingData.map((data: any, index: number) => (
+          <div
+            key={index}
+            className="card-border-gradient p-[1.5px] rounded-lg"
+          >
+            <div className="bg-[#00091F] rounded-lg">
+              <div className="card-gradient rounded-lg">
+                <div className="p-8">
+                  <div className="text-center text-[#C0C0C0]">{data.title}</div>
+                  <div className="text-3xl text-center mt-4 whitespace-nowrap">
+                    {data.description}
+                  </div>
+                </div>
+                <div className="border-t-[1px] border-[#2A3144] w-full"></div>
+                <div className="p-4">
+                  {data.details.map((_: any, index: number) => (
+                    <div
+                      key={index}
+                      className="flex gap-4 items-center px-20 my-5"
+                    >
+                      <div className="flex-shrink-0 relative w-[24px] h-[24px]">
+                        <Image
+                          src="/icons/check-circle.svg"
+                          className="w-full h-full object-contain rounded"
+                          layout="fill"
+                          alt="user"
+                        />
+                      </div>
+                      <div className="text-lg font-thin">{_}</div>
+                    </div>
+                  ))}
+                </div>
+                <div className="p-8">
+                  <button className="w-full button-gradient py-3 rounded-lg">
+                    {data.button}
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default CloudPricing;
diff --git a/apps/www/components/pricing/Table.tsx b/apps/www/components/pricing/Table.tsx
new file mode 100644
index 000000000..cb2f14903
--- /dev/null
+++ b/apps/www/components/pricing/Table.tsx
@@ -0,0 +1,177 @@
+// next imports
+import Image from "next/image";
+
+const FeaturesTable = () => {
+  const tableData = [
+    {
+      name: "Lorem ipsum",
+      free: true,
+      pro: true,
+      enterprise: true
+    },
+    {
+      name: "Lorem ipsum",
+      free: true,
+      pro: true,
+      enterprise: true
+    },
+    {
+      name: "Lorem ipsum",
+      free: true,
+      pro: true,
+      enterprise: true
+    },
+    {
+      name: "Lorem ipsum",
+      free: true,
+      pro: true,
+      enterprise: true
+    },
+    {
+      name: "Lorem ipsum",
+      free: false,
+      pro: true,
+      enterprise: true
+    },
+    {
+      name: "Lorem ipsum",
+      free: false,
+      pro: false,
+      enterprise: true
+    }
+  ];
+  return (
+    <div className="w-full pb-20">
+      <div className="container px-5 mx-auto overflow-auto">
+        <table className="min-w-full">
+          <thead className="rounded">
+            <tr className="h-[50px]">
+              <th
+                scope="col"
+                className="px-3 text-left font-medium text-[#ffffff] text-xl"
+              >
+                Lorem ipsum
+              </th>
+              <th
+                scope="col"
+                className="px-3 py-3.5 text-left font-medium text-[#ffffff] text-xl"
+              >
+                <div className="mb-14">Cloud Free</div>
+              </th>
+              <th
+                scope="col"
+                className="px-3 py-3.5 text-left font-medium text-[#ffffff] text-xl"
+              >
+                <div className="mb-14"> Cloud Pro</div>
+              </th>
+              <th
+                scope="col"
+                className="px-3 py-3.5 text-left font-medium text-[#ffffff] text-xl"
+              >
+                <div className="mb-14">Enterprise</div>
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            className="card-gradient mt-10 rounded-lg text-[#C0C0C0] divide-y divide-[#2A3144]"
+          >
+            {tableData.map((data: any) => (
+              <tr key={`data-${data.id}`} className="m-2 h-[50px] rounded-lg">
+                <td className="whitespace-nowrap px-3 py-4 text-">
+                  {data.name}
+                </td>
+                <td className="whitespace-nowrap px-3 py-4">
+                  {data.free && (
+                    <div className="flex-shrink-0 relative w-[24px] h-[24px]">
+                      <Image
+                        src="/icons/check-circle.svg"
+                        className="w-full h-full object-contain rounded"
+                        layout="fill"
+                        alt="user"
+                      />
+                    </div>
+                  )}
+                </td>
+                <td className="whitespace-nowrap px-3 py-4 text-sm">
+                  {" "}
+                  {data.pro && (
+                    <div className="flex-shrink-0 relative w-[24px] h-[24px]">
+                      <Image
+                        src="/icons/check-circle.svg"
+                        className="w-full h-full object-contain rounded"
+                        layout="fill"
+                        alt="user"
+                      />
+                    </div>
+                  )}
+                </td>
+                <td className="whitespace-nowrap px-3 py-4 text-sm">
+                  {data.enterprise && (
+                    <div className="flex-shrink-0 relative w-[24px] h-[24px]">
+                      <Image
+                        src="/icons/check-circle.svg"
+                        className="w-full h-full object-contain rounded"
+                        layout="fill"
+                        alt="user"
+                      />
+                    </div>
+                  )}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+          <div className="mt-10"></div>
+          <div className="text-white mb-4 text-xl px-3">Lorem ipsum</div>
+          <tbody className="card-gradient mt-10 rounded overflow-hidden text-[#C0C0C0] divide-y divide-[#2A3144]">
+            {tableData.map((data: any) => (
+              <tr key={`data-${data.id}`} className="m-2 h-[50px]">
+                <td className="whitespace-nowrap px-3 py-4 text-">
+                  {data.name}
+                </td>
+                <td className="whitespace-nowrap px-3 py-4 text-sm">
+                  {data.free && (
+                    <div className="flex-shrink-0 relative w-[24px] h-[24px]">
+                      <Image
+                        src="/icons/check-circle.svg"
+                        className="w-full h-full object-contain rounded"
+                        layout="fill"
+                        alt="user"
+                      />
+                    </div>
+                  )}
+                </td>
+                <td className="whitespace-nowrap px-3 py-4 text-sm">
+                  {" "}
+                  {data.pro && (
+                    <div className="flex-shrink-0 relative w-[24px] h-[24px]">
+                      <Image
+                        src="/icons/check-circle.svg"
+                        className="w-full h-full object-contain rounded"
+                        layout="fill"
+                        alt="user"
+                      />
+                    </div>
+                  )}
+                </td>
+                <td className="whitespace-nowrap px-3 py-4 text-sm">
+                  {data.enterprise && (
+                    <div className="flex-shrink-0 relative w-[24px] h-[24px]">
+                      <Image
+                        src="/icons/check-circle.svg"
+                        className="w-full h-full object-contain rounded"
+                        layout="fill"
+                        alt="user"
+                      />
+                    </div>
+                  )}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default FeaturesTable;
diff --git a/apps/www/components/workLog/Detail.tsx b/apps/www/components/workLog/Detail.tsx
new file mode 100644
index 000000000..a61b1eec3
--- /dev/null
+++ b/apps/www/components/workLog/Detail.tsx
@@ -0,0 +1,100 @@
+// next imports
+import Link from "next/link";
+import Image from "next/image";
+
+const DetailsPage = () => {
+  const detailsData = [
+    {
+      image: "/images/demo.png",
+      date: "17 December 2022",
+      heading: "Lorem ipsum",
+      description:
+        "Lorem ipsum dolor sit amet consectetur. Id proin enim molestie in quis porttitor lorem orci. Iaculis faucibus morbi tristique eu odio maecenas sagittis a. Eget in id vitae pellentesque neque morbi. Eget sed ornare praesent ac cursus. Sit ut massa vitae mauris mauris justo. Odio amet accumsan interdum ultrices mauris pretium eleifend. Nulla elementum morbi volutpat aliquam accumsan diam cum.",
+      title: "Fixes & Improvements",
+      details: [
+        "Lorem ipsum dolor sit amet consectetur. Id proin enim molestie in quis porttitor lorem orci. Iaculis faucibus morbi tristique eu odio maecenas sagittis a.",
+        "Lorem ipsum dolor sit amet consectetur. Id proin enim molestie in quis porttitor lorem orci. Iaculis faucibus morbi tristique eu odio maecenas sagittis a.",
+        "Lorem ipsum dolor sit amet consectetur. Id proin enim molestie in quis porttitor lorem orci. Iaculis faucibus morbi tristique eu odio maecenas sagittis a.",
+        "Lorem ipsum dolor sit amet consectetur. Id proin enim molestie in quis porttitor lorem orci. Iaculis faucibus morbi tristique eu odio maecenas sagittis a.",
+        "Lorem ipsum dolor sit amet consectetur. Id proin enim molestie in quis porttitor lorem orci. Iaculis faucibus morbi tristique eu odio maecenas sagittis a.",
+        "Lorem ipsum dolor sit amet consectetur. Id proin enim molestie in quis porttitor lorem orci. Iaculis faucibus morbi tristique eu odio maecenas sagittis a."
+      ]
+    },
+    {
+      image: "/images/demo.png",
+      date: "17 December 2022",
+      heading: "Lorem ipsum",
+      description:
+        "Lorem ipsum dolor sit amet consectetur. Id proin enim molestie in quis porttitor lorem orci. Iaculis faucibus morbi tristique eu odio maecenas sagittis a. Eget in id vitae pellentesque neque morbi. Eget sed ornare praesent ac cursus. Sit ut massa vitae mauris mauris justo. Odio amet accumsan interdum ultrices mauris pretium eleifend. Nulla elementum morbi volutpat aliquam accumsan diam cum.",
+      title: "Fixes & Improvements",
+      details: [
+        "Lorem ipsum dolor sit amet consectetur. Id proin enim molestie in quis porttitor lorem orci. Iaculis faucibus morbi tristique eu odio maecenas sagittis a.",
+        "Lorem ipsum dolor sit amet consectetur. Id proin enim molestie in quis porttitor lorem orci. Iaculis faucibus morbi tristique eu odio maecenas sagittis a.",
+        "Lorem ipsum dolor sit amet consectetur. Id proin enim molestie in quis porttitor lorem orci. Iaculis faucibus morbi tristique eu odio maecenas sagittis a.",
+        "Lorem ipsum dolor sit amet consectetur. Id proin enim molestie in quis porttitor lorem orci. Iaculis faucibus morbi tristique eu odio maecenas sagittis a.",
+        "Lorem ipsum dolor sit amet consectetur. Id proin enim molestie in quis porttitor lorem orci. Iaculis faucibus morbi tristique eu odio maecenas sagittis a.",
+        "Lorem ipsum dolor sit amet consectetur. Id proin enim molestie in quis porttitor lorem orci. Iaculis faucibus morbi tristique eu odio maecenas sagittis a."
+      ]
+    },
+    {
+      image: "/images/demo.png",
+      date: "17 December 2022",
+      heading: "Lorem ipsum",
+      description:
+        "Lorem ipsum dolor sit amet consectetur. Id proin enim molestie in quis porttitor lorem orci. Iaculis faucibus morbi tristique eu odio maecenas sagittis a. Eget in id vitae pellentesque neque morbi. Eget sed ornare praesent ac cursus. Sit ut massa vitae mauris mauris justo. Odio amet accumsan interdum ultrices mauris pretium eleifend. Nulla elementum morbi volutpat aliquam accumsan diam cum.",
+      title: "Fixes & Improvements",
+      details: [
+        "Lorem ipsum dolor sit amet consectetur. Id proin enim molestie in quis porttitor lorem orci. Iaculis faucibus morbi tristique eu odio maecenas sagittis a.",
+        "Lorem ipsum dolor sit amet consectetur. Id proin enim molestie in quis porttitor lorem orci. Iaculis faucibus morbi tristique eu odio maecenas sagittis a.",
+        "Lorem ipsum dolor sit amet consectetur. Id proin enim molestie in quis porttitor lorem orci. Iaculis faucibus morbi tristique eu odio maecenas sagittis a.",
+        "Lorem ipsum dolor sit amet consectetur. Id proin enim molestie in quis porttitor lorem orci. Iaculis faucibus morbi tristique eu odio maecenas sagittis a.",
+        "Lorem ipsum dolor sit amet consectetur. Id proin enim molestie in quis porttitor lorem orci. Iaculis faucibus morbi tristique eu odio maecenas sagittis a.",
+        "Lorem ipsum dolor sit amet consectetur. Id proin enim molestie in quis porttitor lorem orci. Iaculis faucibus morbi tristique eu odio maecenas sagittis a."
+      ]
+    }
+  ];
+  return (
+    <div className="bg-[#00091F] relative w-full overflow-visible text-white pt-20">
+      <div className="container mx-auto px-5">
+        {detailsData.map((detail: any, index: number) => (
+          <div key={index} className="my-20">
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 ">
+              <div className="relative h-96 w-full">
+                <Image
+                  className="object-contain z-0"
+                  layout="fill"
+                  src="/images/demo.png"
+                  alt="img features"
+                />
+              </div>
+              <div className="mt-auto">
+                <div className="font-thin text-lg">{detail.date}</div>
+                <div className="text-3xl font-medium my-5">
+                  {detail.heading}
+                </div>
+                <div className="text-sm font-thinok">{detail.description}</div>
+              </div>
+            </div>
+            <div className="mt-10 ml-4 text-xl">{detail.title}</div>
+            {detail.details.map((_: any, index: number) => (
+              <div className="flex gap-4 my-4">
+                <div className="relative h-5 w-5 mt-2 flex-shrink-0">
+                  <Image
+                    layout="fill"
+                    height="40px"
+                    width="40px"
+                    src="/icons/bullet.svg"
+                    alt="Twitter"
+                  />
+                </div>
+                <div className="text-lg">{_}</div>
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default DetailsPage;
diff --git a/apps/www/components/workLog/Hero.tsx b/apps/www/components/workLog/Hero.tsx
new file mode 100644
index 000000000..cf9135670
--- /dev/null
+++ b/apps/www/components/workLog/Hero.tsx
@@ -0,0 +1,25 @@
+// next imports
+import Link from "next/link";
+import Image from "next/image";
+
+const Hero = () => {
+  return (
+    <div className="bg-[#00091F] relative w-full overflow-visible">
+      <div className="absolute w-[100vw] z-0">
+        <img src="/background/hero.svg" className="w-full h-full" alt="" />
+      </div>
+      <div className="container mx-auto px-5 pt-20 pb-16 text-center lg:pt-20 text-white relative z-20">
+        <div className="text-center text-xl tracking-widest">P L A N E</div>
+        <div className="text-4xl md:text-6xl max-w-[700px] mx-auto mt-10">
+          Wanna know about our <span className="text-gradient">Pricing?</span>
+        </div>
+        <div className="text-center max-w-md mx-auto mt-6 text-lg font-thin">
+          Lorem ipsum dolor sit amet consectetur. Amet lacus iaculis ipsum nisi
+          justo tortor ut justo.
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Hero;
diff --git a/apps/www/configuration/axios-configuration.ts b/apps/www/configuration/axios-configuration.ts
new file mode 100644
index 000000000..c312e6357
--- /dev/null
+++ b/apps/www/configuration/axios-configuration.ts
@@ -0,0 +1,27 @@
+import axios from "axios";
+// cookie
+import cookie from "js-cookie";
+// constants
+import { BASE_STAGING, BASE_LOCAL, BASE_PROD } from "@constants/api-routes";
+
+
+if (process.env.NEXT_PUBLIC_APP_ENVIRONMENT === "production") {
+  axios.defaults.baseURL = BASE_PROD;
+} else if (process.env.NEXT_PUBLIC_APP_ENVIRONMENT === "preview") {
+  axios.defaults.baseURL = BASE_STAGING;
+} else {
+  axios.defaults.baseURL = BASE_LOCAL;
+}
+
+const UNAUTHORIZED = [401];
+axios.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    const { status }: any = error.response;
+    if (UNAUTHORIZED.includes(status)) {
+      // logout();
+      // window.location.href = "/login";
+    }
+    return Promise.reject(error);
+  }
+);
diff --git a/apps/www/constants/api-routes.ts b/apps/www/constants/api-routes.ts
new file mode 100644
index 000000000..16d62bd3a
--- /dev/null
+++ b/apps/www/constants/api-routes.ts
@@ -0,0 +1,5 @@
+// Base URLS
+export const BASE_PROD = ``;
+export const BASE_LOCAL = ``;
+export const BASE_STAGING = ``;
+
diff --git a/apps/www/constants/page.ts b/apps/www/constants/page.ts
new file mode 100644
index 000000000..9dcc5fd6c
--- /dev/null
+++ b/apps/www/constants/page.ts
@@ -0,0 +1,4 @@
+export const META_DESCRIPTION = "plane.so";
+export const SITE_NAME = "Plane.so";
+export const SITE_URL = "/";
+export const TWITTER_USER_NAME = "caravel_";
diff --git a/apps/www/constants/seo/seo-variables.ts b/apps/www/constants/seo/seo-variables.ts
new file mode 100644
index 000000000..a4ec2e575
--- /dev/null
+++ b/apps/www/constants/seo/seo-variables.ts
@@ -0,0 +1,5 @@
+export const SITE_NAME = "Default site name";
+export const SITE_DESCRIPTION = "Default site description";
+export const SITE_KEYWORDS = "default site keywords";
+export const SITE_URL = "http://localhost:3000/";
+export const TWITTER_USER_NAME = "caravel";
diff --git a/apps/www/layouts/default.tsx b/apps/www/layouts/default.tsx
new file mode 100644
index 000000000..d8e859ac1
--- /dev/null
+++ b/apps/www/layouts/default.tsx
@@ -0,0 +1,18 @@
+import Navbar from "@components/NavBar";
+import Footer from "@components/Footer";
+
+const DefaultLayout = (props: any) => {
+  return (
+    <div className="absolute min-h-[400px] h-screen w-full bg-[#00091F]">
+      <div>
+        <Navbar />
+      </div>
+      <div className="relative w-full overflow-hidden">{props.children}</div>
+      <div className="">
+        <Footer />
+      </div>
+    </div>
+  );
+};
+
+export default DefaultLayout;
diff --git a/apps/www/layouts/index.tsx b/apps/www/layouts/index.tsx
new file mode 100644
index 000000000..e006ec497
--- /dev/null
+++ b/apps/www/layouts/index.tsx
@@ -0,0 +1 @@
+export { default as DefaultLayout } from "./default";
diff --git a/apps/www/lib/services/index.ts b/apps/www/lib/services/index.ts
new file mode 100644
index 000000000..23f8afc58
--- /dev/null
+++ b/apps/www/lib/services/index.ts
@@ -0,0 +1,11 @@
+import axios from "axios";
+// api routes
+
+export const APIFetcher = async (url: any) => {
+  try {
+    const response = await axios.get(url);
+    return response.data;
+  } catch (error: any) {
+    throw error.response.data;
+  }
+};
diff --git a/apps/www/next-env.d.ts b/apps/www/next-env.d.ts
new file mode 100644
index 000000000..4f11a03dc
--- /dev/null
+++ b/apps/www/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/apps/www/package.json b/apps/www/package.json
new file mode 100644
index 000000000..c31afd796
--- /dev/null
+++ b/apps/www/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "plane",
+  "description": "plane.so",
+  "private": true,
+  "repository": "caravel/plane.so",
+  "author": "caravel",
+  "license": "Apache-2.0",
+  "scripts": {
+    "dev": "next dev --port 3001",
+    "start": "next start",
+    "build": "next build"
+  },
+  "dependencies": {
+    "@headlessui/react": "^1.4.0",
+    "@heroicons/react": "^1.0.4",
+    "autoprefixer": "^10.3.1",
+    "next": "^12.0.1",
+    "next-cookies": "^2.0.3",
+    "nprogress": "0.2.0",
+    "react": "17.0.2",
+    "react-dom": "^17.0.2",
+    "tailwindcss": "^2.2.7"
+  },
+  "devDependencies": {
+    "@types/nprogress": "0.2.0",
+    "@types/react": "17.0.34",
+    "@typescript-eslint/parser": "5.3.1",
+    "eslint": "<8.0.0\n",
+    "eslint-config-next": "12.0.3",
+    "eslint-config-prettier": "8.3.0",
+    "eslint-plugin-react": "7.27.0",
+    "eslint-plugin-react-hooks": "4.3.0",
+    "prettier": "2.4.1",
+    "typescript": "4.4.4"
+  },
+  "prettier": {
+    "arrowParens": "always",
+    "singleQuote": false,
+    "tabWidth": 2,
+    "trailingComma": "none"
+  }
+}
diff --git a/apps/www/pages/_app.tsx b/apps/www/pages/_app.tsx
new file mode 100644
index 000000000..ac4f0da80
--- /dev/null
+++ b/apps/www/pages/_app.tsx
@@ -0,0 +1,16 @@
+import type { AppProps } from "next/app";
+// n-progress
+import NProgress from "@components/nprogress";
+// axios configuration
+import "@configuration/axios-configuration";
+// styles
+import "@styles/global.css"
+
+export default function App({ Component, pageProps }: AppProps) {
+  return (
+    <>
+      <Component {...pageProps} />
+      <NProgress />
+    </>
+  );
+}
diff --git a/apps/www/pages/_document.tsx b/apps/www/pages/_document.tsx
new file mode 100644
index 000000000..d1be4a31c
--- /dev/null
+++ b/apps/www/pages/_document.tsx
@@ -0,0 +1,15 @@
+import Document, { Html, Head, Main, NextScript } from "next/document";
+
+export default class CustomDocument extends Document {
+  render() {
+    return (
+      <Html lang="en">
+        <Head />
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
diff --git a/apps/www/pages/about.tsx b/apps/www/pages/about.tsx
new file mode 100644
index 000000000..a169e5959
--- /dev/null
+++ b/apps/www/pages/about.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+// next imports
+import Link from "next/link";
+// layouts
+import { DefaultLayout } from "layouts";
+// components
+import Page from "@components/page";
+import Hero from "@components/about/Hero";
+import Detail from "@components/about/Detail";
+import Values from "@components/about/Values"
+// constants
+import { META_DESCRIPTION } from "@constants/page";
+
+const HomePage = () => {
+  const meta = {
+    title: "Plane | Work Log",
+    description: META_DESCRIPTION
+  };
+
+  return (
+    <div>
+      <Page meta={meta}>
+        <DefaultLayout>
+          <div className="h-full overflow-hidden bg-[#00091F]">
+            <Hero />
+            <Detail />
+            <Values/>
+          </div>
+        </DefaultLayout>
+      </Page>
+    </div>
+  );
+};
+
+export default HomePage;
diff --git a/apps/www/pages/change-log.tsx b/apps/www/pages/change-log.tsx
new file mode 100644
index 000000000..141123d0c
--- /dev/null
+++ b/apps/www/pages/change-log.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+// next imports
+import Link from "next/link";
+// layouts
+import { DefaultLayout } from "layouts";
+// components
+import Page from "@components/page";
+import Hero from "@components/workLog/Hero";
+import Detail from "@components/workLog/Detail";
+// constants
+import { META_DESCRIPTION } from "@constants/page";
+
+const HomePage = () => {
+  const meta = {
+    title: "Plane | Work Log",
+    description: META_DESCRIPTION
+  };
+
+  return (
+    <div>
+      <Page meta={meta}>
+        <DefaultLayout>
+          <div className="h-full overflow-hidden bg-[#00091F]">
+            <Hero />
+            <Detail />
+          </div>
+        </DefaultLayout>
+      </Page>
+    </div>
+  );
+};
+
+export default HomePage;
diff --git a/apps/www/pages/index.tsx b/apps/www/pages/index.tsx
new file mode 100644
index 000000000..121f5623c
--- /dev/null
+++ b/apps/www/pages/index.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+// next imports
+import Link from "next/link";
+// layouts
+import { DefaultLayout } from "layouts";
+// components
+import Page from "@components/page";
+import Hero from "@components/landing/Hero";
+import Features from "@components/landing/Features";
+import OpenSource from "@components/landing/OpenSource";
+import TimeLine from "@components/landing/TimeLine";
+import Community from "@components/landing/Community";
+// constants
+import { META_DESCRIPTION } from "@constants/page";
+
+const HomePage = () => {
+  const meta = {
+    title: "Plane | Home",
+    description: META_DESCRIPTION
+  };
+
+  return (
+    <div>
+      <Page meta={meta}>
+        <DefaultLayout>
+          <div className="h-full w-full overflow-hidden">
+            <Hero />
+            <Features />
+            <OpenSource />
+            <Community />
+          </div>
+        </DefaultLayout>
+      </Page>
+    </div>
+  );
+};
+
+export default HomePage;
diff --git a/apps/www/pages/pricing.tsx b/apps/www/pages/pricing.tsx
new file mode 100644
index 000000000..c8a3989c8
--- /dev/null
+++ b/apps/www/pages/pricing.tsx
@@ -0,0 +1,75 @@
+import React from "react";
+// next imports
+import Link from "next/link";
+// layouts
+import { DefaultLayout } from "layouts";
+// components
+import Page from "@components/page";
+import Hero from "@components/pricing/Hero";
+import CloudPricing from "@components/pricing/Pricing";
+import Enterprise from "@components/pricing/Enterprise";
+import Community from "@components/pricing/Community";
+import Table from "@components/pricing/Table";
+
+// constants
+import { META_DESCRIPTION } from "@constants/page";
+
+const HomePage = () => {
+  const meta = {
+    title: "Plane | Pricing",
+    description: META_DESCRIPTION
+  };
+  const [state, setState] = React.useState("cloud");
+  const Tabs = [
+    {
+      name: "Cloud",
+      key: "cloud"
+    },
+
+    {
+      name: "Self-hosted",
+      key: "hosted"
+    }
+  ];
+  return (
+    <div>
+      <Page meta={meta}>
+        <DefaultLayout>
+          <div className="h-full overflow-hidden bg-[#00091F]">
+            <Hero />
+            <div className="mb-2 mt-10 flex w-full space-x-10 justify-center relative">
+              {Tabs.map((tab, index) => (
+                <div
+                  key={`tabs-key-index-${index}`}
+                  onClick={() => setState(tab.key)}
+                  className={`${
+                    state === tab.key ? "text-gradient" : "text-[#8B8B8B]"
+                  } cursor-pointer`}
+                >
+                  <p className="mb-2 px-6 leading-[24px] ">{tab.name}</p>
+                  {state === tab.key && (
+                    <div className="w-full h-[2px] rounded-full button-gradient mt-3"></div>
+                  )}
+                </div>
+              ))}
+            </div>
+            {state === "cloud" ? (
+              <div className="">
+                <CloudPricing />
+                <Enterprise />
+                {/* <Table/> */}
+              </div>
+            ) : (
+              <div className="">
+                <Community />
+                {/* <Table/> */}
+              </div>
+            )}
+          </div>
+        </DefaultLayout>
+      </Page>
+    </div>
+  );
+};
+
+export default HomePage;
diff --git a/apps/www/pages/privacy-policy.tsx b/apps/www/pages/privacy-policy.tsx
new file mode 100644
index 000000000..ea7120aa4
--- /dev/null
+++ b/apps/www/pages/privacy-policy.tsx
@@ -0,0 +1,670 @@
+// components
+import Page from "@components/page";
+// layouts
+import DefaultLayout from "@layouts/default";
+// constants
+import { META_DESCRIPTION } from "@constants/page";
+
+const PrivacyPolicy = () => {
+  const meta = {
+    title: "Plane | Privacy Policy",
+    description: META_DESCRIPTION
+  };
+
+  return (
+    <>
+      <Page meta={meta}>
+        <DefaultLayout>
+          <div className="bg-[#00091F] text-white pb-8 sm:pb-12 lg:pb-12">
+            <div className="overflow-hidden pt-8 sm:pt-12 lg:relative px-5 container mx-auto">
+              <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">
+                Privacy Policy
+              </h1>
+              <div className="mt-4">
+                <p className="font-normal my-2">
+                  Last updated: November 19, 2022
+                </p>
+                <p className="font-normal my-2">
+                  This Privacy Policy describes Our policies and procedures on
+                  the collection, use and disclosure of Your information when
+                  You use the Service and tells You about Your privacy rights
+                  and how the law protects You.
+                </p>
+                <p className="font-normal my-2">
+                  We use Your Personal data to provide and improve the Service.
+                  By using the Service, You agree to the collection and use of
+                  information in accordance with this Privacy Policy. This
+                  Privacy Policy has been created with the help of the{" "}
+                  <a
+                    href="https://www.freeprivacypolicy.com/free-privacy-policy-generator/"
+                    target="_blank"
+                  >
+                    Free Privacy Policy Generator
+                  </a>
+                  .
+                </p>
+                <section className="mt-4">
+                  <h1 className="text-xl font-semibold my-10 mb-4">
+                    Interpretation and Definitions
+                  </h1>
+                  <h2>Interpretation</h2>
+                  <p className="font-normal my-2">
+                    The words of which the initial letter is capitalized have
+                    meanings defined under the following conditions. The
+                    following definitions shall have the same meaning regardless
+                    of whether they appear in singular or in plural.
+                  </p>
+                  <h2>Definitions</h2>
+                  <p className="font-normal my-2">
+                    For the purposes of this Privacy Policy:
+                  </p>
+                  <ul className="list-disc pl-8">
+                    <li>
+                      <p className="font-normal my-2">
+                        <strong>Account</strong> means a unique account created
+                        for You to access our Service or parts of our Service.
+                      </p>
+                    </li>
+                    <li>
+                      <p className="font-normal my-2">
+                        <strong>Affiliate</strong> means an entity that
+                        controls, is controlled by or is under common control
+                        with a party, where &quot;control&quot; means ownership
+                        of 50% or more of the shares, equity interest or other
+                        securities entitled to vote for election of directors or
+                        other managing authority.
+                      </p>
+                    </li>
+                    <li>
+                      <p className="font-normal my-2">
+                        <strong>Application</strong> means the software program
+                        provided by the Company downloaded by You on any
+                        electronic device, named Plane
+                      </p>
+                    </li>
+                    <li>
+                      <p className="font-normal my-2">
+                        <strong>Company</strong> (referred to as either
+                        &quot;the Company&quot;, &quot;We&quot;, &quot;Us&quot;
+                        or &quot;Our&quot; in this Agreement) refers to Plane
+                        Software Labs Private Limited, 1905, Block A, Jayabheri
+                        The Summit, Narsingi, Telangana 500032.
+                      </p>
+                    </li>
+                    <li>
+                      <p className="font-normal my-2">
+                        <strong>Cookies</strong> are small files that are placed
+                        on Your computer, mobile device or any other device by a
+                        website, containing the details of Your browsing history
+                        on that website among its many uses.
+                      </p>
+                    </li>
+                    <li>
+                      <p className="font-normal my-2">
+                        <strong>Country</strong> refers to: Telangana, India
+                      </p>
+                    </li>
+                    <li>
+                      <p className="font-normal my-2">
+                        <strong>Device</strong> means any device that can access
+                        the Service such as a computer, a cellphone or a digital
+                        tablet.
+                      </p>
+                    </li>
+                    <li>
+                      <p className="font-normal my-2">
+                        <strong>Personal Data</strong> is any information that
+                        relates to an identified or identifiable individual.
+                      </p>
+                    </li>
+                    <li>
+                      <p className="font-normal my-2">
+                        <strong>Service</strong> refers to the Application or
+                        the Website or both.
+                      </p>
+                    </li>
+                    <li>
+                      <p className="font-normal my-2">
+                        <strong>Service Provider</strong> means any natural or
+                        legal person who processes the data on behalf of the
+                        Company. It refers to third-party companies or
+                        individuals employed by the Company to facilitate the
+                        Service, to provide the Service on behalf of the
+                        Company, to perform services related to the Service or
+                        to assist the Company in analyzing how the Service is
+                        used.
+                      </p>
+                    </li>
+                    <li>
+                      <p className="font-normal my-2">
+                        <strong>Third-party Social Media Service</strong> refers
+                        to any website or any social network website through
+                        which a User can log in or create an account to use the
+                        Service.
+                      </p>
+                    </li>
+                    <li>
+                      <p className="font-normal my-2">
+                        <strong>Usage Data</strong> refers to data collected
+                        automatically, either generated by the use of the
+                        Service or from the Service infrastructure itself (for
+                        example, the duration of a page visit).
+                      </p>
+                    </li>
+                    <li>
+                      <p className="font-normal my-2">
+                        <strong>Website</strong> refers to Plane, accessible
+                        from{" "}
+                        <a
+                          href="https://plane.so"
+                          rel="external nofollow noopener"
+                          target="_blank"
+                        >
+                          https://plane.so
+                        </a>
+                      </p>
+                    </li>
+                    <li>
+                      <p className="font-normal my-2">
+                        <strong>You</strong> means the individual accessing or
+                        using the Service, or the company, or other legal entity
+                        on behalf of which such individual is accessing or using
+                        the Service, as applicable.
+                      </p>
+                    </li>
+                  </ul>
+                </section>
+                <section className="mt-4">
+                  <h1 className="text-xl font-semibold my-10 mb-4">
+                    Collecting and Using Your Personal Data
+                  </h1>
+                  <h2>Types of Data Collected</h2>
+                  <h3>Personal Data</h3>
+                  <p className="font-normal my-2">
+                    While using Our Service, We may ask You to provide Us with
+                    certain personally identifiable information that can be used
+                    to contact or identify You. Personally identifiable
+                    information may include, but is not limited to:
+                  </p>
+                  <ul className="list-disc pl-8">
+                    <li>
+                      <p className="font-normal my-2">Email address</p>
+                    </li>
+                    <li>
+                      <p className="font-normal my-2">
+                        First name and last name
+                      </p>
+                    </li>
+                    <li>
+                      <p className="font-normal my-2">Phone number</p>
+                    </li>
+                    <li>
+                      <p className="font-normal my-2">Usage Data</p>
+                    </li>
+                  </ul>
+                  <h3>Usage Data</h3>
+                  <p className="font-normal my-2">
+                    Usage Data is collected automatically when using the
+                    Service.
+                  </p>
+                  <p className="font-normal my-2">
+                    Usage Data may include information such as Your Device's
+                    Internet Protocol address (e.g. IP address), browser type,
+                    browser version, the pages of our Service that You visit,
+                    the time and date of Your visit, the time spent on those
+                    pages, unique device identifiers and other diagnostic data.
+                  </p>
+                  <p className="font-normal my-2">
+                    When You access the Service by or through a mobile device,
+                    We may collect certain information automatically, including,
+                    but not limited to, the type of mobile device You use, Your
+                    mobile device unique ID, the IP address of Your mobile
+                    device, Your mobile operating system, the type of mobile
+                    Internet browser You use, unique device identifiers and
+                    other diagnostic data.
+                  </p>
+                  <p className="font-normal my-2">
+                    We may also collect information that Your browser sends
+                    whenever You visit our Service or when You access the
+                    Service by or through a mobile device.
+                  </p>
+                  <h3>Information from Third-Party Social Media Services</h3>
+                  <p className="font-normal my-2">
+                    The Company allows You to create an account and log in to
+                    use the Service through the following Third-party Social
+                    Media Services:
+                  </p>
+                  <ul className="list-disc pl-8">
+                    <li>Google</li>
+                    <li>Facebook</li>
+                    <li>Twitter</li>
+                    <li>LinkedIn</li>
+                  </ul>
+                  <p className="font-normal my-2">
+                    If You decide to register through or otherwise grant us
+                    access to a Third-Party Social Media Service, We may collect
+                    Personal data that is already associated with Your
+                    Third-Party Social Media Service's account, such as Your
+                    name, Your email address, Your activities or Your contact
+                    list associated with that account.
+                  </p>
+                  <p className="font-normal my-2">
+                    You may also have the option of sharing additional
+                    information with the Company through Your Third-Party Social
+                    Media Service's account. If You choose to provide such
+                    information and Personal Data, during registration or
+                    otherwise, You are giving the Company permission to use,
+                    share, and store it in a manner consistent with this Privacy
+                    Policy.
+                  </p>
+                  <h3>Tracking Technologies and Cookies</h3>
+                  <p className="font-normal my-2">
+                    We use Cookies and similar tracking technologies to track
+                    the activity on Our Service and store certain information.
+                    Tracking technologies used are beacons, tags, and scripts to
+                    collect and track information and to improve and analyze Our
+                    Service. The technologies We use may include:
+                  </p>
+                  <ul className="list-disc pl-8">
+                    <li>
+                      <strong>Cookies or Browser Cookies.</strong> A cookie is a
+                      small file placed on Your Device. You can instruct Your
+                      browser to refuse all Cookies or to indicate when a Cookie
+                      is being sent. However, if You do not accept Cookies, You
+                      may not be able to use some parts of our Service. Unless
+                      you have adjusted Your browser setting so that it will
+                      refuse Cookies, our Service may use Cookies.
+                    </li>
+                    <li>
+                      <strong>Web Beacons.</strong> Certain sections of our
+                      Service and our emails may contain small electronic files
+                      known as web beacons (also referred to as clear gifs,
+                      pixel tags, and single-pixel gifs) that permit the
+                      Company, for example, to count users who have visited
+                      those pages or opened an email and for other related
+                      website statistics (for example, recording the popularity
+                      of a certain section and verifying system and server
+                      integrity).
+                    </li>
+                  </ul>
+                  <p className="font-normal my-2">
+                    Cookies can be &quot;Persistent&quot; or &quot;Session&quot;
+                    Cookies. Persistent Cookies remain on Your personal computer
+                    or mobile device when You go offline, while Session Cookies
+                    are deleted as soon as You close Your web browser. Learn
+                    more about cookies on the{" "}
+                    <a
+                      href="https://www.freeprivacypolicy.com/blog/sample-privacy-policy-template/#Use_Of_Cookies_And_Tracking"
+                      target="_blank"
+                    >
+                      Free Privacy Policy website
+                    </a>{" "}
+                    article.
+                  </p>
+                  <p className="font-normal my-2">
+                    We use both Session and Persistent Cookies for the purposes
+                    set out below:
+                  </p>
+                  <ul className="list-disc pl-8">
+                    <li>
+                      <p className="font-normal my-2">
+                        <strong>Necessary / Essential Cookies</strong>
+                      </p>
+                      <p className="font-normal my-2">Type: Session Cookies</p>
+                      <p className="font-normal my-2">Administered by: Us</p>
+                      <p className="font-normal my-2">
+                        Purpose: These Cookies are essential to provide You with
+                        services available through the Website and to enable You
+                        to use some of its features. They help to authenticate
+                        users and prevent fraudulent use of user accounts.
+                        Without these Cookies, the services that You have asked
+                        for cannot be provided, and We only use these Cookies to
+                        provide You with those services.
+                      </p>
+                    </li>
+                    <li>
+                      <p className="font-normal my-2">
+                        <strong>
+                          Cookies Policy / Notice Acceptance Cookies
+                        </strong>
+                      </p>
+                      <p className="font-normal my-2">
+                        Type: Persistent Cookies
+                      </p>
+                      <p className="font-normal my-2">Administered by: Us</p>
+                      <p className="font-normal my-2">
+                        Purpose: These Cookies identify if users have accepted
+                        the use of cookies on the Website.
+                      </p>
+                    </li>
+                    <li>
+                      <p className="font-normal my-2">
+                        <strong>Functionality Cookies</strong>
+                      </p>
+                      <p className="font-normal my-2">
+                        Type: Persistent Cookies
+                      </p>
+                      <p className="font-normal my-2">Administered by: Us</p>
+                      <p className="font-normal my-2">
+                        Purpose: These Cookies allow us to remember choices You
+                        make when You use the Website, such as remembering your
+                        login details or language preference. The purpose of
+                        these Cookies is to provide You with a more personal
+                        experience and to avoid You having to re-enter your
+                        preferences every time You use the Website.
+                      </p>
+                    </li>
+                  </ul>
+                  <p className="font-normal my-2">
+                    For more information about the cookies we use and your
+                    choices regarding cookies, please visit our Cookies Policy
+                    or the Cookies section of our Privacy Policy.
+                  </p>
+                  <h2>Use of Your Personal Data</h2>
+                  <p className="font-normal my-2">
+                    The Company may use Personal Data for the following
+                    purposes:
+                  </p>
+                  <ul className="list-disc pl-8">
+                    <li>
+                      <p className="font-normal my-2">
+                        <strong>To provide and maintain our Service</strong>,
+                        including to monitor the usage of our Service.
+                      </p>
+                    </li>
+                    <li>
+                      <p className="font-normal my-2">
+                        <strong>To manage Your Account:</strong> to manage Your
+                        registration as a user of the Service. The Personal Data
+                        You provide can give You access to different
+                        functionalities of the Service that are available to You
+                        as a registered user.
+                      </p>
+                    </li>
+                    <li>
+                      <p className="font-normal my-2">
+                        <strong>For the performance of a contract:</strong> the
+                        development, compliance and undertaking of the purchase
+                        contract for the products, items or services You have
+                        purchased or of any other contract with Us through the
+                        Service.
+                      </p>
+                    </li>
+                    <li>
+                      <p className="font-normal my-2">
+                        <strong>To contact You:</strong> To contact You by
+                        email, telephone calls, SMS, or other equivalent forms
+                        of electronic communication, such as a mobile
+                        application's push notifications regarding updates or
+                        informative communications related to the
+                        functionalities, products or contracted services,
+                        including the security updates, when necessary or
+                        reasonable for their implementation.
+                      </p>
+                    </li>
+                    <li>
+                      <p className="font-normal my-2">
+                        <strong>To provide You</strong> with news, special
+                        offers and general information about other goods,
+                        services and events which we offer that are similar to
+                        those that you have already purchased or enquired about
+                        unless You have opted not to receive such information.
+                      </p>
+                    </li>
+                    <li>
+                      <p className="font-normal my-2">
+                        <strong>To manage Your requests:</strong> To attend and
+                        manage Your requests to Us.
+                      </p>
+                    </li>
+                    <li>
+                      <p className="font-normal my-2">
+                        <strong>For business transfers:</strong> We may use Your
+                        information to evaluate or conduct a merger,
+                        divestiture, restructuring, reorganization, dissolution,
+                        or other sale or transfer of some or all of Our assets,
+                        whether as a going concern or as part of bankruptcy,
+                        liquidation, or similar proceeding, in which Personal
+                        Data held by Us about our Service users is among the
+                        assets transferred.
+                      </p>
+                    </li>
+                    <li>
+                      <p className="font-normal my-2">
+                        <strong>For other purposes</strong>: We may use Your
+                        information for other purposes, such as data analysis,
+                        identifying usage trends, determining the effectiveness
+                        of our promotional campaigns and to evaluate and improve
+                        our Service, products, services, marketing and your
+                        experience.
+                      </p>
+                    </li>
+                  </ul>
+                  <p className="font-normal my-2">
+                    We may share Your personal information in the following
+                    situations:
+                  </p>
+                  <ul className="list-disc pl-8">
+                    <li>
+                      <strong>With Service Providers:</strong> We may share Your
+                      personal information with Service Providers to monitor and
+                      analyze the use of our Service, to contact You.
+                    </li>
+                    <li>
+                      <strong>For business transfers:</strong> We may share or
+                      transfer Your personal information in connection with, or
+                      during negotiations of, any merger, sale of Company
+                      assets, financing, or acquisition of all or a portion of
+                      Our business to another company.
+                    </li>
+                    <li>
+                      <strong>With Affiliates:</strong> We may share Your
+                      information with Our affiliates, in which case we will
+                      require those affiliates to honor this Privacy Policy.
+                      Affiliates include Our parent company and any other
+                      subsidiaries, joint venture partners or other companies
+                      that We control or that are under common control with Us.
+                    </li>
+                    <li>
+                      <strong>With business partners:</strong> We may share Your
+                      information with Our business partners to offer You
+                      certain products, services or promotions.
+                    </li>
+                    <li>
+                      <strong>With other users:</strong> when You share personal
+                      information or otherwise interact in the public areas with
+                      other users, such information may be viewed by all users
+                      and may be publicly distributed outside. If You interact
+                      with other users or register through a Third-Party Social
+                      Media Service, Your contacts on the Third-Party Social
+                      Media Service may see Your name, profile, pictures and
+                      description of Your activity. Similarly, other users will
+                      be able to view descriptions of Your activity, communicate
+                      with You and view Your profile.
+                    </li>
+                    <li>
+                      <strong>With Your consent</strong>: We may disclose Your
+                      personal information for any other purpose with Your
+                      consent.
+                    </li>
+                  </ul>
+                  <h2>Retention of Your Personal Data</h2>
+                  <p className="font-normal my-2">
+                    The Company will retain Your Personal Data only for as long
+                    as is necessary for the purposes set out in this Privacy
+                    Policy. We will retain and use Your Personal Data to the
+                    extent necessary to comply with our legal obligations (for
+                    example, if we are required to retain your data to comply
+                    with applicable laws), resolve disputes, and enforce our
+                    legal agreements and policies.
+                  </p>
+                  <p className="font-normal my-2">
+                    The Company will also retain Usage Data for internal
+                    analysis purposes. Usage Data is generally retained for a
+                    shorter period of time, except when this data is used to
+                    strengthen the security or to improve the functionality of
+                    Our Service, or We are legally obligated to retain this data
+                    for longer time periods.
+                  </p>
+                  <h2>Transfer of Your Personal Data</h2>
+                  <p className="font-normal my-2">
+                    Your information, including Personal Data, is processed at
+                    the Company's operating offices and in any other places
+                    where the parties involved in the processing are located. It
+                    means that this information may be transferred to — and
+                    maintained on — computers located outside of Your state,
+                    province, country or other governmental jurisdiction where
+                    the data protection laws may differ than those from Your
+                    jurisdiction.
+                  </p>
+                  <p className="font-normal my-2">
+                    Your consent to this Privacy Policy followed by Your
+                    submission of such information represents Your agreement to
+                    that transfer.
+                  </p>
+                  <p className="font-normal my-2">
+                    The Company will take all steps reasonably necessary to
+                    ensure that Your data is treated securely and in accordance
+                    with this Privacy Policy and no transfer of Your Personal
+                    Data will take place to an organization or a country unless
+                    there are adequate controls in place including the security
+                    of Your data and other personal information.
+                  </p>
+                  <h2>Delete Your Personal Data</h2>
+                  <p className="font-normal my-2">
+                    You have the right to delete or request that We assist in
+                    deleting the Personal Data that We have collected about You.
+                  </p>
+                  <p className="font-normal my-2">
+                    Our Service may give You the ability to delete certain
+                    information about You from within the Service.
+                  </p>
+                  <p className="font-normal my-2">
+                    You may update, amend, or delete Your information at any
+                    time by signing in to Your Account, if you have one, and
+                    visiting the account settings section that allows you to
+                    manage Your personal information. You may also contact Us to
+                    request access to, correct, or delete any personal
+                    information that You have provided to Us.
+                  </p>
+                  <p className="font-normal my-2">
+                    Please note, however, that We may need to retain certain
+                    information when we have a legal obligation or lawful basis
+                    to do so.
+                  </p>
+                  <h2>Disclosure of Your Personal Data</h2>
+                  <h3>Business Transactions</h3>
+                  <p className="font-normal my-2">
+                    If the Company is involved in a merger, acquisition or asset
+                    sale, Your Personal Data may be transferred. We will provide
+                    notice before Your Personal Data is transferred and becomes
+                    subject to a different Privacy Policy.
+                  </p>
+                  <h3>Law enforcement</h3>
+                  <p className="font-normal my-2">
+                    Under certain circumstances, the Company may be required to
+                    disclose Your Personal Data if required to do so by law or
+                    in response to valid requests by public authorities (e.g. a
+                    court or a government agency).
+                  </p>
+                  <h3>Other legal requirements</h3>
+                  <p className="font-normal my-2">
+                    The Company may disclose Your Personal Data in the good
+                    faith belief that such action is necessary to:
+                  </p>
+                  <ul className="list-disc pl-8">
+                    <li>Comply with a legal obligation</li>
+                    <li>
+                      Protect and defend the rights or property of the Company
+                    </li>
+                    <li>
+                      Prevent or investigate possible wrongdoing in connection
+                      with the Service
+                    </li>
+                    <li>
+                      Protect the personal safety of Users of the Service or the
+                      public
+                    </li>
+                    <li>Protect against legal liability</li>
+                  </ul>
+                  <h2>Security of Your Personal Data</h2>
+                  <p className="font-normal my-2">
+                    The security of Your Personal Data is important to Us, but
+                    remember that no method of transmission over the Internet,
+                    or method of electronic storage is 100% secure. While We
+                    strive to use commercially acceptable means to protect Your
+                    Personal Data, We cannot guarantee its absolute security.
+                  </p>
+                  <h1>Children's Privacy</h1>
+                  <p className="font-normal my-2">
+                    Our Service does not address anyone under the age of 13. We
+                    do not knowingly collect personally identifiable information
+                    from anyone under the age of 13. If You are a parent or
+                    guardian and You are aware that Your child has provided Us
+                    with Personal Data, please contact Us. If We become aware
+                    that We have collected Personal Data from anyone under the
+                    age of 13 without verification of parental consent, We take
+                    steps to remove that information from Our servers.
+                  </p>
+                  <p className="font-normal my-2">
+                    If We need to rely on consent as a legal basis for
+                    processing Your information and Your country requires
+                    consent from a parent, We may require Your parent's consent
+                    before We collect and use that information.
+                  </p>
+                </section>
+                <section className="mt-4">
+                  <h1 className="text-xl font-semibold my-10 mb-4">
+                    Links to Other Websites
+                  </h1>
+                  <p className="font-normal my-2">
+                    Our Service may contain links to other websites that are not
+                    operated by Us. If You click on a third party link, You will
+                    be directed to that third party's site. We strongly advise
+                    You to review the Privacy Policy of every site You visit.
+                  </p>
+                  <p className="font-normal my-2">
+                    We have no control over and assume no responsibility for the
+                    content, privacy policies or practices of any third party
+                    sites or services.
+                  </p>
+                  <h1>Changes to this Privacy Policy</h1>
+                  <p className="font-normal my-2">
+                    We may update Our Privacy Policy from time to time. We will
+                    notify You of any changes by posting the new Privacy Policy
+                    on this page.
+                  </p>
+                  <p className="font-normal my-2">
+                    We will let You know via email and/or a prominent notice on
+                    Our Service, prior to the change becoming effective and
+                    update the &quot;Last updated&quot; date at the top of this
+                    Privacy Policy.
+                  </p>
+                  <p className="font-normal my-2">
+                    You are advised to review this Privacy Policy periodically
+                    for any changes. Changes to this Privacy Policy are
+                    effective when they are posted on this page.
+                  </p>
+                </section>
+                <section className="mt-4">
+                  <h1 className="text-xl font-semibold my-10 mb-4">
+                    Contact Us
+                  </h1>
+                  <p className="font-normal my-2">
+                    If you have any questions about this Privacy Policy, You can
+                    contact us:
+                  </p>
+                  <ul className="list-disc pl-8">
+                    <li>By email: hello@plane.so</li>
+                  </ul>
+                </section>
+              </div>
+            </div>
+          </div>
+        </DefaultLayout>
+      </Page>
+    </>
+  );
+};
+
+export default PrivacyPolicy;
diff --git a/apps/www/pages/terms-and-conditions.tsx b/apps/www/pages/terms-and-conditions.tsx
new file mode 100644
index 000000000..76b417bb0
--- /dev/null
+++ b/apps/www/pages/terms-and-conditions.tsx
@@ -0,0 +1,407 @@
+// components
+import Page from "@components/page";
+// layouts
+import DefaultLayout from "@layouts/default";
+// constants
+import { META_DESCRIPTION } from "@constants/page";
+
+const TermsAndConditions = () => {
+  const meta = {
+    title: "Plane | Terms and Conditions",
+    description: META_DESCRIPTION
+  };
+
+  return (
+    <>
+      <Page meta={meta}>
+        <DefaultLayout>
+          <div className="bg-[#00091F] text-white pb-8 sm:pb-12 lg:pb-12">
+            <div className="overflow-hidden pt-8 sm:pt-12 lg:relative px-5 container mx-auto">
+              <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">
+                Terms and Conditions
+              </h1>
+              <div className="mt-4">
+                <p className="font-normal py-2">
+                  Last updated: November 19, 2022
+                </p>
+                <p className="font-normal py-2">
+                  Please read these terms and conditions carefully before using
+                  Our Service.
+                </p>
+                <section className="mt-4">
+                  <h1 className="text-xl font-semibold my-10 mb-4">
+                    Interpretation and Definitions
+                  </h1>
+                  <h2>Interpretation</h2>
+                  <p className="font-normal py-2">
+                    The words of which the initial letter is capitalized have
+                    meanings defined under the following conditions. The
+                    following definitions shall have the same meaning regardless
+                    of whether they appear in singular or in plural.
+                  </p>
+                  <h2>Definitions</h2>
+                  <p className="font-normal py-2">
+                    For the purposes of these Terms and Conditions:
+                  </p>
+                  <ul className="list-disc pl-8">
+                    <li>
+                      <p className="font-normal py-2">
+                        <strong>Application</strong> means the software program
+                        provided by the Company downloaded by You on any
+                        electronic device, named Plane
+                      </p>
+                    </li>
+                    <li>
+                      <p className="font-normal py-2">
+                        <strong>Application Store</strong> means the digital
+                        distribution service operated and developed by Apple
+                        Inc. (Apple App Store) or Google Inc. (Google Play
+                        Store) in which the Application has been downloaded.
+                      </p>
+                    </li>
+                    <li>
+                      <p className="font-normal py-2">
+                        <strong>Affiliate</strong> means an entity that
+                        controls, is controlled by or is under common control
+                        with a party, where &quot;control&quot; means ownership
+                        of 50% or more of the shares, equity interest or other
+                        securities entitled to vote for election of directors or
+                        other managing authority.
+                      </p>
+                    </li>
+                    <li>
+                      <p className="font-normal py-2">
+                        <strong>Country</strong> refers to: Telangana, India
+                      </p>
+                    </li>
+                    <li>
+                      <p className="font-normal py-2">
+                        <strong>Company</strong> (referred to as either
+                        &quot;the Company&quot;, &quot;We&quot;, &quot;Us&quot;
+                        or &quot;Our&quot; in this Agreement) refers to Plane
+                        Software Labs Private Limited, 1905, Block A, Jayabheri
+                        The Summit, Narsingi, Telangana 500032.
+                      </p>
+                    </li>
+                    <li>
+                      <p className="font-normal py-2">
+                        <strong>Device</strong> means any device that can access
+                        the Service such as a computer, a cellphone or a digital
+                        tablet.
+                      </p>
+                    </li>
+                    <li>
+                      <p className="font-normal py-2">
+                        <strong>Service</strong> refers to the Application or
+                        the Website or both.
+                      </p>
+                    </li>
+                    <li>
+                      <p className="font-normal py-2">
+                        <strong>Terms and Conditions</strong> (also referred as
+                        &quot;Terms&quot;) mean these Terms and Conditions that
+                        form the entire agreement between You and the Company
+                        regarding the use of the Service. This Terms and
+                        Conditions agreement has been created with the help of
+                        the{" "}
+                        <a
+                          href="https://www.freeprivacypolicy.com/free-terms-and-conditions-generator/"
+                          target="_blank"
+                        >
+                          Free Terms and Conditions Generator
+                        </a>
+                        .
+                      </p>
+                    </li>
+                    <li>
+                      <p className="font-normal py-2">
+                        <strong>Third-party Social Media Service</strong> means
+                        any services or content (including data, information,
+                        products or services) provided by a third-party that may
+                        be displayed, included or made available by the Service.
+                      </p>
+                    </li>
+                    <li>
+                      <p className="font-normal py-2">
+                        <strong>Website</strong> refers to Plane, accessible
+                        from{" "}
+                        <a
+                          href="https://plane.so"
+                          rel="external nofollow noopener"
+                          target="_blank"
+                        >
+                          https://plane.so
+                        </a>
+                      </p>
+                    </li>
+                    <li>
+                      <p className="font-normal py-2">
+                        <strong>You</strong> means the individual accessing or
+                        using the Service, or the company, or other legal entity
+                        on behalf of which such individual is accessing or using
+                        the Service, as applicable.
+                      </p>
+                    </li>
+                  </ul>
+                </section>
+                <section className="mt-4">
+                  <h1 className="text-xl font-semibold my-10 mb-4">
+                    Acknowledgment
+                  </h1>
+                  <p className="font-normal py-2">
+                    These are the Terms and Conditions governing the use of this
+                    Service and the agreement that operates between You and the
+                    Company. These Terms and Conditions set out the rights and
+                    obligations of all users regarding the use of the Service.
+                  </p>
+                  <p className="font-normal py-2">
+                    Your access to and use of the Service is conditioned on Your
+                    acceptance of and compliance with these Terms and
+                    Conditions. These Terms and Conditions apply to all
+                    visitors, users and others who access or use the Service.
+                  </p>
+                  <p className="font-normal py-2">
+                    By accessing or using the Service You agree to be bound by
+                    these Terms and Conditions. If You disagree with any part of
+                    these Terms and Conditions then You may not access the
+                    Service.
+                  </p>
+                  <p className="font-normal py-2">
+                    You represent that you are over the age of 18. The Company
+                    does not permit those under 18 to use the Service.
+                  </p>
+                  <p className="font-normal py-2">
+                    Your access to and use of the Service is also conditioned on
+                    Your acceptance of and compliance with the Privacy Policy of
+                    the Company. Our Privacy Policy describes Our policies and
+                    procedures on the collection, use and disclosure of Your
+                    personal information when You use the Application or the
+                    Website and tells You about Your privacy rights and how the
+                    law protects You. Please read Our Privacy Policy carefully
+                    before using Our Service.
+                  </p>
+                </section>
+                <section className="mt-4">
+                  <h1 className="text-xl font-semibold my-10 mb-4">
+                    Links to Other Websites
+                  </h1>
+                  <p className="font-normal py-2">
+                    Our Service may contain links to third-party web sites or
+                    services that are not owned or controlled by the Company.
+                  </p>
+                  <p className="font-normal py-2">
+                    The Company has no control over, and assumes no
+                    responsibility for, the content, privacy policies, or
+                    practices of any third party web sites or services. You
+                    further acknowledge and agree that the Company shall not be
+                    responsible or liable, directly or indirectly, for any
+                    damage or loss caused or alleged to be caused by or in
+                    connection with the use of or reliance on any such content,
+                    goods or services available on or through any such web sites
+                    or services.
+                  </p>
+                  <p className="font-normal py-2">
+                    We strongly advise You to read the terms and conditions and
+                    privacy policies of any third-party web sites or services
+                    that You visit.
+                  </p>
+                </section>
+                <section>
+                  <h1 className="text-xl font-semibold my-10 mb-4">
+                    Termination
+                  </h1>
+                  <p className="font-normal py-2">
+                    We may terminate or suspend Your access immediately, without
+                    prior notice or liability, for any reason whatsoever,
+                    including without limitation if You breach these Terms and
+                    Conditions.
+                  </p>
+                  <p className="font-normal py-2">
+                    Upon termination, Your right to use the Service will cease
+                    immediately.
+                  </p>
+                </section>
+                <section className="mt-4">
+                  <h1 className="text-xl font-semibold my-10 mb-4">
+                    Limitation of Liability
+                  </h1>
+                  <p className="font-normal py-2">
+                    Notwithstanding any damages that You might incur, the entire
+                    liability of the Company and any of its suppliers under any
+                    provision of this Terms and Your exclusive remedy for all of
+                    the foregoing shall be limited to the amount actually paid
+                    by You through the Service or 100 USD if You haven't
+                    purchased anything through the Service.
+                  </p>
+                  <p className="font-normal py-2">
+                    To the maximum extent permitted by applicable law, in no
+                    event shall the Company or its suppliers be liable for any
+                    special, incidental, indirect, or consequential damages
+                    whatsoever (including, but not limited to, damages for loss
+                    of profits, loss of data or other information, for business
+                    interruption, for personal injury, loss of privacy arising
+                    out of or in any way related to the use of or inability to
+                    use the Service, third-party software and/or third-party
+                    hardware used with the Service, or otherwise in connection
+                    with any provision of this Terms), even if the Company or
+                    any supplier has been advised of the possibility of such
+                    damages and even if the remedy fails of its essential
+                    purpose.
+                  </p>
+                  <p className="font-normal py-2">
+                    Some states do not allow the exclusion of implied warranties
+                    or limitation of liability for incidental or consequential
+                    damages, which means that some of the above limitations may
+                    not apply. In these states, each party's liability will be
+                    limited to the greatest extent permitted by law.
+                  </p>
+                </section>
+                <section className="mt-4">
+                  <h1 className="text-xl font-semibold my-10 mb-4">
+                    &quot;AS IS&quot; and &quot;AS AVAILABLE&quot; Disclaimer
+                  </h1>
+                  <p className="font-normal py-2">
+                    The Service is provided to You &quot;AS IS&quot; and
+                    &quot;AS AVAILABLE&quot; and with all faults and defects
+                    without warranty of any kind. To the maximum extent
+                    permitted under applicable law, the Company, on its own
+                    behalf and on behalf of its Affiliates and its and their
+                    respective licensors and service providers, expressly
+                    disclaims all warranties, whether express, implied,
+                    statutory or otherwise, with respect to the Service,
+                    including all implied warranties of merchantability, fitness
+                    for a particular purpose, title and non-infringement, and
+                    warranties that may arise out of course of dealing, course
+                    of performance, usage or trade practice. Without limitation
+                    to the foregoing, the Company provides no warranty or
+                    undertaking, and makes no representation of any kind that
+                    the Service will meet Your requirements, achieve any
+                    intended results, be compatible or work with any other
+                    software, applications, systems or services, operate without
+                    interruption, meet any performance or reliability standards
+                    or be error free or that any errors or defects can or will
+                    be corrected.
+                  </p>
+                  <p className="font-normal py-2">
+                    Without limiting the foregoing, neither the Company nor any
+                    of the company's provider makes any representation or
+                    warranty of any kind, express or implied: (i) as to the
+                    operation or availability of the Service, or the
+                    information, content, and materials or products included
+                    thereon; (ii) that the Service will be uninterrupted or
+                    error-free; (iii) as to the accuracy, reliability, or
+                    currency of any information or content provided through the
+                    Service; or (iv) that the Service, its servers, the content,
+                    or e-mails sent from or on behalf of the Company are free of
+                    viruses, scripts, trojan horses, worms, malware, timebombs
+                    or other harmful components.
+                  </p>
+                  <p className="font-normal py-2">
+                    Some jurisdictions do not allow the exclusion of certain
+                    types of warranties or limitations on applicable statutory
+                    rights of a consumer, so some or all of the above exclusions
+                    and limitations may not apply to You. But in such a case the
+                    exclusions and limitations set forth in this section shall
+                    be applied to the greatest extent enforceable under
+                    applicable law.
+                  </p>
+                  <h1>Governing Law</h1>
+                  <p className="font-normal py-2">
+                    The laws of the Country, excluding its conflicts of law
+                    rules, shall govern this Terms and Your use of the Service.
+                    Your use of the Application may also be subject to other
+                    local, state, national, or international laws.
+                  </p>
+                </section>
+                <section className="mt-4">
+                  <h1 className="text-xl font-semibold my-10 mb-4">
+                    Disputes Resolution
+                  </h1>
+                  <p className="font-normal py-2">
+                    If You have any concern or dispute about the Service, You
+                    agree to first try to resolve the dispute informally by
+                    contacting the Company.
+                  </p>
+                  <h1>For European Union (EU) Users</h1>
+                  <p className="font-normal py-2">
+                    If You are a European Union consumer, you will benefit from
+                    any mandatory provisions of the law of the country in which
+                    you are resident in.
+                  </p>
+                  <h1>United States Legal Compliance</h1>
+                  <p className="font-normal py-2">
+                    You represent and warrant that (i) You are not located in a
+                    country that is subject to the United States government
+                    embargo, or that has been designated by the United States
+                    government as a &quot;terrorist supporting&quot; country,
+                    and (ii) You are not listed on any United States government
+                    list of prohibited or restricted parties.
+                  </p>
+                </section>
+                <section className="mt-4">
+                  <h1 className="text-xl font-semibold my-10 mb-4">
+                    Severability and Waiver
+                  </h1>
+                  <h2>Severability</h2>
+                  <p className="font-normal py-2">
+                    If any provision of these Terms is held to be unenforceable
+                    or invalid, such provision will be changed and interpreted
+                    to accomplish the objectives of such provision to the
+                    greatest extent possible under applicable law and the
+                    remaining provisions will continue in full force and effect.
+                  </p>
+                  <h2>Waiver</h2>
+                  <p className="font-normal py-2">
+                    Except as provided herein, the failure to exercise a right
+                    or to require performance of an obligation under these Terms
+                    shall not effect a party's ability to exercise such right or
+                    require such performance at any time thereafter nor shall
+                    the waiver of a breach constitute a waiver of any subsequent
+                    breach.
+                  </p>
+                </section>
+                <section className="mt-4">
+                  <h1 className="text-xl font-semibold my-10 mb-4">
+                    Translation Interpretation
+                  </h1>
+                  <p className="font-normal py-2">
+                    These Terms and Conditions may have been translated if We
+                    have made them available to You on our Service. You agree
+                    that the original English text shall prevail in the case of
+                    a dispute.
+                  </p>
+                  <h1>Changes to These Terms and Conditions</h1>
+                  <p className="font-normal py-2">
+                    We reserve the right, at Our sole discretion, to modify or
+                    replace these Terms at any time. If a revision is material
+                    We will make reasonable efforts to provide at least 30 days'
+                    notice prior to any new terms taking effect. What
+                    constitutes a material change will be determined at Our sole
+                    discretion.
+                  </p>
+                  <p className="font-normal py-2">
+                    By continuing to access or use Our Service after those
+                    revisions become effective, You agree to be bound by the
+                    revised terms. If You do not agree to the new terms, in
+                    whole or in part, please stop using the website and the
+                    Service.
+                  </p>
+                  <h1>Contact Us</h1>
+                  <p className="font-normal py-2">
+                    If you have any questions about these Terms and Conditions,
+                    You can contact us:
+                  </p>
+                  <ul className="list-disc pl-8">
+                    <li>By email: hello@plane.so</li>
+                  </ul>
+                </section>
+              </div>
+            </div>
+          </div>
+        </DefaultLayout>
+      </Page>
+    </>
+  );
+};
+
+export default TermsAndConditions;
diff --git a/apps/www/postcss.config.js b/apps/www/postcss.config.js
new file mode 100644
index 000000000..33ad091d2
--- /dev/null
+++ b/apps/www/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/apps/www/public/background-features.jpg b/apps/www/public/background-features.jpg
new file mode 100644
index 000000000..6bea10384
Binary files /dev/null and b/apps/www/public/background-features.jpg differ
diff --git a/apps/www/public/background/hero-dots.svg b/apps/www/public/background/hero-dots.svg
new file mode 100644
index 000000000..fca29411a
--- /dev/null
+++ b/apps/www/public/background/hero-dots.svg
@@ -0,0 +1,461 @@
+<svg width="1670" height="1030" viewBox="0 0 1670 1030" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="131" cy="67" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="3" cy="67" r="3" fill="white" fill-opacity="0.02"/>
+<circle cx="131" cy="707" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="3" cy="707" r="3" fill="white" fill-opacity="0.02"/>
+<circle cx="131" cy="771" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="131" cy="963" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="131" cy="1027" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="131" cy="3" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="3" cy="771" r="3" fill="white" fill-opacity="0.02"/>
+<circle cx="3" cy="963" r="3" fill="white" fill-opacity="0.02"/>
+<circle cx="3" cy="1027" r="3" fill="white" fill-opacity="0.02"/>
+<circle cx="3" cy="3" r="3" fill="white" fill-opacity="0.02"/>
+<circle cx="131" cy="835" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="3" cy="835" r="3" fill="white" fill-opacity="0.02"/>
+<circle cx="131" cy="899" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="3" cy="899" r="3" fill="white" fill-opacity="0.02"/>
+<circle cx="131" cy="131" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="3" cy="131" r="3" fill="white" fill-opacity="0.02"/>
+<circle cx="131" cy="195" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="3" cy="195" r="3" fill="white" fill-opacity="0.02"/>
+<circle cx="131" cy="259" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="3" cy="259" r="3" fill="white" fill-opacity="0.02"/>
+<circle cx="131" cy="323" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="3" cy="323" r="3" fill="white" fill-opacity="0.02"/>
+<circle cx="131" cy="387" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="3" cy="387" r="3" fill="white" fill-opacity="0.02"/>
+<circle cx="131" cy="451" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="3" cy="451" r="3" fill="white" fill-opacity="0.02"/>
+<circle cx="131" cy="515" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="3" cy="515" r="3" fill="white" fill-opacity="0.02"/>
+<circle cx="131" cy="579" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="3" cy="579" r="3" fill="white" fill-opacity="0.02"/>
+<circle cx="131" cy="643" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="3" cy="643" r="3" fill="white" fill-opacity="0.02"/>
+<circle cx="195" cy="67" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="67" cy="67" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="195" cy="707" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="67" cy="707" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="195" cy="771" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="195" cy="963" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="195" cy="1027" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="195" cy="3" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="67" cy="771" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="67" cy="963" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="67" cy="1027" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="67" cy="3" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="195" cy="835" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="67" cy="835" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="195" cy="899" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="67" cy="899" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="195" cy="131" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="67" cy="131" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="195" cy="195" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="67" cy="195" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="195" cy="259" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="67" cy="259" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="195" cy="323" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="67" cy="323" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="195" cy="387" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="67" cy="387" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="195" cy="451" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="67" cy="451" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="195" cy="515" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="67" cy="515" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="195" cy="579" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="67" cy="579" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="195" cy="643" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="67" cy="643" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="259" cy="67" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="259" cy="707" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="259" cy="771" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="259" cy="963" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="259" cy="1027" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="259" cy="3" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="259" cy="835" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="259" cy="899" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="259" cy="131" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="259" cy="195" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="259" cy="259" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="259" cy="323" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="259" cy="387" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="259" cy="451" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="259" cy="515" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="259" cy="579" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="259" cy="643" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="323" cy="67" r="3" fill="white" fill-opacity="0.25"/>
+<circle cx="323" cy="707" r="3" fill="white" fill-opacity="0.25"/>
+<circle cx="323" cy="771" r="3" fill="white" fill-opacity="0.25"/>
+<circle cx="323" cy="963" r="3" fill="white" fill-opacity="0.25"/>
+<circle cx="323" cy="1027" r="3" fill="white" fill-opacity="0.25"/>
+<circle cx="323" cy="3" r="3" fill="white" fill-opacity="0.25"/>
+<circle cx="323" cy="835" r="3" fill="white" fill-opacity="0.25"/>
+<circle cx="323" cy="899" r="3" fill="white" fill-opacity="0.25"/>
+<circle cx="323" cy="131" r="3" fill="white" fill-opacity="0.25"/>
+<circle cx="323" cy="195" r="3" fill="white" fill-opacity="0.25"/>
+<circle cx="323" cy="259" r="3" fill="white" fill-opacity="0.25"/>
+<circle cx="323" cy="323" r="3" fill="white" fill-opacity="0.25"/>
+<circle cx="323" cy="387" r="3" fill="white" fill-opacity="0.25"/>
+<circle cx="323" cy="451" r="3" fill="white" fill-opacity="0.25"/>
+<circle cx="323" cy="515" r="3" fill="white" fill-opacity="0.25"/>
+<circle cx="323" cy="579" r="3" fill="white" fill-opacity="0.25"/>
+<circle cx="323" cy="643" r="3" fill="white" fill-opacity="0.25"/>
+<circle cx="387" cy="67" r="3" fill="white" fill-opacity="0.35"/>
+<circle cx="387" cy="707" r="3" fill="white" fill-opacity="0.35"/>
+<circle cx="387" cy="771" r="3" fill="white" fill-opacity="0.35"/>
+<circle cx="387" cy="963" r="3" fill="white" fill-opacity="0.35"/>
+<circle cx="387" cy="1027" r="3" fill="white" fill-opacity="0.35"/>
+<circle cx="387" cy="3" r="3" fill="white" fill-opacity="0.35"/>
+<circle cx="387" cy="835" r="3" fill="white" fill-opacity="0.35"/>
+<circle cx="387" cy="899" r="3" fill="white" fill-opacity="0.35"/>
+<circle cx="387" cy="131" r="3" fill="white" fill-opacity="0.35"/>
+<circle cx="387" cy="195" r="3" fill="white" fill-opacity="0.35"/>
+<circle cx="387" cy="259" r="3" fill="white" fill-opacity="0.35"/>
+<circle cx="387" cy="323" r="3" fill="white" fill-opacity="0.35"/>
+<circle cx="387" cy="387" r="3" fill="white" fill-opacity="0.35"/>
+<circle cx="387" cy="451" r="3" fill="white" fill-opacity="0.35"/>
+<circle cx="387" cy="515" r="3" fill="white" fill-opacity="0.35"/>
+<circle cx="387" cy="579" r="3" fill="white" fill-opacity="0.35"/>
+<circle cx="387" cy="643" r="3" fill="white" fill-opacity="0.35"/>
+<circle cx="451" cy="67" r="3" fill="white" fill-opacity="0.45"/>
+<circle cx="451" cy="707" r="3" fill="white" fill-opacity="0.45"/>
+<circle cx="451" cy="771" r="3" fill="white" fill-opacity="0.45"/>
+<circle cx="451" cy="963" r="3" fill="white" fill-opacity="0.45"/>
+<circle cx="451" cy="1027" r="3" fill="white" fill-opacity="0.45"/>
+<circle cx="451" cy="3" r="3" fill="white" fill-opacity="0.45"/>
+<circle cx="451" cy="835" r="3" fill="white" fill-opacity="0.45"/>
+<circle cx="451" cy="899" r="3" fill="white" fill-opacity="0.45"/>
+<circle cx="451" cy="131" r="3" fill="white" fill-opacity="0.45"/>
+<circle cx="451" cy="195" r="3" fill="white" fill-opacity="0.45"/>
+<circle cx="451" cy="259" r="3" fill="white" fill-opacity="0.45"/>
+<circle cx="451" cy="323" r="3" fill="white" fill-opacity="0.45"/>
+<circle cx="451" cy="387" r="3" fill="white" fill-opacity="0.45"/>
+<circle cx="451" cy="451" r="3" fill="white" fill-opacity="0.45"/>
+<circle cx="451" cy="515" r="3" fill="white" fill-opacity="0.45"/>
+<circle cx="451" cy="579" r="3" fill="white" fill-opacity="0.45"/>
+<circle cx="451" cy="643" r="3" fill="white" fill-opacity="0.45"/>
+<circle cx="515" cy="67" r="3" fill="white" fill-opacity="0.55"/>
+<circle cx="515" cy="707" r="3" fill="white" fill-opacity="0.55"/>
+<circle cx="515" cy="771" r="3" fill="white" fill-opacity="0.55"/>
+<circle cx="515" cy="963" r="3" fill="white" fill-opacity="0.55"/>
+<circle cx="515" cy="1027" r="3" fill="white" fill-opacity="0.55"/>
+<circle cx="515" cy="3" r="3" fill="white" fill-opacity="0.55"/>
+<circle cx="515" cy="835" r="3" fill="white" fill-opacity="0.55"/>
+<circle cx="515" cy="899" r="3" fill="white" fill-opacity="0.55"/>
+<circle cx="515" cy="131" r="3" fill="white" fill-opacity="0.55"/>
+<circle cx="515" cy="195" r="3" fill="white" fill-opacity="0.55"/>
+<circle cx="515" cy="259" r="3" fill="white" fill-opacity="0.55"/>
+<circle cx="515" cy="323" r="3" fill="white" fill-opacity="0.55"/>
+<circle cx="515" cy="387" r="3" fill="white" fill-opacity="0.55"/>
+<circle cx="515" cy="451" r="3" fill="white" fill-opacity="0.55"/>
+<circle cx="515" cy="515" r="3" fill="white" fill-opacity="0.55"/>
+<circle cx="515" cy="579" r="3" fill="white" fill-opacity="0.55"/>
+<circle cx="515" cy="643" r="3" fill="white" fill-opacity="0.55"/>
+<circle cx="579" cy="67" r="3" fill="white" fill-opacity="0.65"/>
+<circle cx="579" cy="707" r="3" fill="white" fill-opacity="0.65"/>
+<circle cx="579" cy="771" r="3" fill="white" fill-opacity="0.65"/>
+<circle cx="579" cy="963" r="3" fill="white" fill-opacity="0.65"/>
+<circle cx="579" cy="1027" r="3" fill="white" fill-opacity="0.65"/>
+<circle cx="579" cy="3" r="3" fill="white" fill-opacity="0.65"/>
+<circle cx="579" cy="835" r="3" fill="white" fill-opacity="0.65"/>
+<circle cx="579" cy="899" r="3" fill="white" fill-opacity="0.65"/>
+<circle cx="579" cy="131" r="3" fill="white" fill-opacity="0.65"/>
+<circle cx="579" cy="195" r="3" fill="white" fill-opacity="0.65"/>
+<circle cx="579" cy="259" r="3" fill="white" fill-opacity="0.65"/>
+<circle cx="579" cy="323" r="3" fill="white" fill-opacity="0.65"/>
+<circle cx="579" cy="387" r="3" fill="white" fill-opacity="0.65"/>
+<circle cx="579" cy="451" r="3" fill="white" fill-opacity="0.65"/>
+<circle cx="579" cy="515" r="3" fill="white" fill-opacity="0.65"/>
+<circle cx="579" cy="579" r="3" fill="white" fill-opacity="0.65"/>
+<circle cx="579" cy="643" r="3" fill="white" fill-opacity="0.65"/>
+<circle cx="643" cy="67" r="3" fill="white" fill-opacity="0.75"/>
+<circle cx="643" cy="707" r="3" fill="white" fill-opacity="0.75"/>
+<circle cx="643" cy="771" r="3" fill="white" fill-opacity="0.75"/>
+<circle cx="643" cy="963" r="3" fill="white" fill-opacity="0.75"/>
+<circle cx="643" cy="1027" r="3" fill="white" fill-opacity="0.75"/>
+<circle cx="643" cy="3" r="3" fill="white" fill-opacity="0.75"/>
+<circle cx="643" cy="835" r="3" fill="white" fill-opacity="0.75"/>
+<circle cx="643" cy="899" r="3" fill="white" fill-opacity="0.75"/>
+<circle cx="643" cy="131" r="3" fill="white" fill-opacity="0.75"/>
+<circle cx="643" cy="195" r="3" fill="white" fill-opacity="0.75"/>
+<circle cx="643" cy="259" r="3" fill="white" fill-opacity="0.75"/>
+<circle cx="643" cy="323" r="3" fill="white" fill-opacity="0.75"/>
+<circle cx="643" cy="387" r="3" fill="white" fill-opacity="0.75"/>
+<circle cx="643" cy="451" r="3" fill="white" fill-opacity="0.75"/>
+<circle cx="643" cy="515" r="3" fill="white" fill-opacity="0.75"/>
+<circle cx="643" cy="579" r="3" fill="white" fill-opacity="0.75"/>
+<circle cx="643" cy="643" r="3" fill="white" fill-opacity="0.75"/>
+<circle cx="707" cy="67" r="3" fill="white" fill-opacity="0.85"/>
+<circle cx="707" cy="707" r="3" fill="white" fill-opacity="0.85"/>
+<circle cx="707" cy="771" r="3" fill="white" fill-opacity="0.85"/>
+<circle cx="707" cy="963" r="3" fill="white" fill-opacity="0.85"/>
+<circle cx="707" cy="1027" r="3" fill="white" fill-opacity="0.85"/>
+<circle cx="707" cy="3" r="3" fill="white" fill-opacity="0.85"/>
+<circle cx="707" cy="835" r="3" fill="white" fill-opacity="0.85"/>
+<circle cx="707" cy="899" r="3" fill="white" fill-opacity="0.85"/>
+<circle cx="707" cy="131" r="3" fill="white" fill-opacity="0.85"/>
+<circle cx="707" cy="195" r="3" fill="white" fill-opacity="0.85"/>
+<circle cx="707" cy="259" r="3" fill="white" fill-opacity="0.85"/>
+<circle cx="707" cy="323" r="3" fill="white" fill-opacity="0.85"/>
+<circle cx="707" cy="387" r="3" fill="white" fill-opacity="0.85"/>
+<circle cx="707" cy="451" r="3" fill="white" fill-opacity="0.85"/>
+<circle cx="707" cy="515" r="3" fill="white" fill-opacity="0.85"/>
+<circle cx="707" cy="579" r="3" fill="white" fill-opacity="0.85"/>
+<circle cx="707" cy="643" r="3" fill="white" fill-opacity="0.85"/>
+<circle opacity="0.95" cx="771" cy="67" r="3" fill="white"/>
+<circle opacity="0.95" cx="771" cy="707" r="3" fill="white"/>
+<circle opacity="0.95" cx="771" cy="771" r="3" fill="white"/>
+<circle opacity="0.95" cx="771" cy="963" r="3" fill="white"/>
+<circle opacity="0.95" cx="771" cy="1027" r="3" fill="white"/>
+<circle opacity="0.95" cx="771" cy="3" r="3" fill="white"/>
+<circle opacity="0.95" cx="771" cy="835" r="3" fill="white"/>
+<circle opacity="0.95" cx="771" cy="899" r="3" fill="white"/>
+<circle opacity="0.95" cx="771" cy="131" r="3" fill="white"/>
+<circle opacity="0.95" cx="771" cy="195" r="3" fill="white"/>
+<circle opacity="0.95" cx="771" cy="259" r="3" fill="white"/>
+<circle opacity="0.95" cx="771" cy="323" r="3" fill="white"/>
+<circle opacity="0.95" cx="771" cy="387" r="3" fill="white"/>
+<circle opacity="0.95" cx="771" cy="451" r="3" fill="white"/>
+<circle opacity="0.95" cx="771" cy="515" r="3" fill="white"/>
+<circle opacity="0.95" cx="771" cy="579" r="3" fill="white"/>
+<circle opacity="0.95" cx="771" cy="643" r="3" fill="white"/>
+<circle cx="835" cy="67" r="3" fill="white"/>
+<circle cx="835" cy="707" r="3" fill="white"/>
+<circle cx="835" cy="771" r="3" fill="white"/>
+<circle cx="835" cy="963" r="3" fill="white"/>
+<circle cx="835" cy="1027" r="3" fill="white"/>
+<circle cx="835" cy="3" r="3" fill="white"/>
+<circle cx="835" cy="835" r="3" fill="white"/>
+<circle cx="835" cy="899" r="3" fill="white"/>
+<circle cx="835" cy="131" r="3" fill="white"/>
+<circle cx="835" cy="195" r="3" fill="white"/>
+<circle cx="835" cy="259" r="3" fill="white"/>
+<circle cx="835" cy="323" r="3" fill="white"/>
+<circle cx="835" cy="387" r="3" fill="white"/>
+<circle cx="835" cy="451" r="3" fill="white"/>
+<circle cx="835" cy="515" r="3" fill="white"/>
+<circle cx="835" cy="579" r="3" fill="white"/>
+<circle cx="835" cy="643" r="3" fill="white"/>
+<circle opacity="0.95" cx="899" cy="67" r="3" fill="white"/>
+<circle opacity="0.95" cx="899" cy="707" r="3" fill="white"/>
+<circle opacity="0.95" cx="899" cy="771" r="3" fill="white"/>
+<circle opacity="0.95" cx="899" cy="963" r="3" fill="white"/>
+<circle opacity="0.95" cx="899" cy="1027" r="3" fill="white"/>
+<circle opacity="0.95" cx="899" cy="3" r="3" fill="white"/>
+<circle opacity="0.95" cx="899" cy="835" r="3" fill="white"/>
+<circle opacity="0.95" cx="899" cy="899" r="3" fill="white"/>
+<circle opacity="0.95" cx="899" cy="131" r="3" fill="white"/>
+<circle opacity="0.95" cx="899" cy="195" r="3" fill="white"/>
+<circle opacity="0.95" cx="899" cy="259" r="3" fill="white"/>
+<circle opacity="0.95" cx="899" cy="323" r="3" fill="white"/>
+<circle opacity="0.95" cx="899" cy="387" r="3" fill="white"/>
+<circle opacity="0.95" cx="899" cy="451" r="3" fill="white"/>
+<circle opacity="0.95" cx="899" cy="515" r="3" fill="white"/>
+<circle opacity="0.95" cx="899" cy="579" r="3" fill="white"/>
+<circle opacity="0.95" cx="899" cy="643" r="3" fill="white"/>
+<circle cx="963" cy="67" r="3" fill="white" fill-opacity="0.85"/>
+<circle cx="963" cy="707" r="3" fill="white" fill-opacity="0.85"/>
+<circle cx="963" cy="771" r="3" fill="white" fill-opacity="0.85"/>
+<circle cx="963" cy="963" r="3" fill="white" fill-opacity="0.85"/>
+<circle cx="963" cy="1027" r="3" fill="white" fill-opacity="0.85"/>
+<circle cx="963" cy="3" r="3" fill="white" fill-opacity="0.85"/>
+<circle cx="963" cy="835" r="3" fill="white" fill-opacity="0.85"/>
+<circle cx="963" cy="899" r="3" fill="white" fill-opacity="0.85"/>
+<circle cx="963" cy="131" r="3" fill="white" fill-opacity="0.85"/>
+<circle cx="963" cy="195" r="3" fill="white" fill-opacity="0.85"/>
+<circle cx="963" cy="259" r="3" fill="white" fill-opacity="0.85"/>
+<circle cx="963" cy="323" r="3" fill="white" fill-opacity="0.85"/>
+<circle cx="963" cy="387" r="3" fill="white" fill-opacity="0.85"/>
+<circle cx="963" cy="451" r="3" fill="white" fill-opacity="0.85"/>
+<circle cx="963" cy="515" r="3" fill="white" fill-opacity="0.85"/>
+<circle cx="963" cy="579" r="3" fill="white" fill-opacity="0.85"/>
+<circle cx="963" cy="643" r="3" fill="white" fill-opacity="0.85"/>
+<circle cx="1027" cy="67" r="3" fill="white" fill-opacity="0.75"/>
+<circle cx="1027" cy="707" r="3" fill="white" fill-opacity="0.75"/>
+<circle cx="1027" cy="771" r="3" fill="white" fill-opacity="0.75"/>
+<circle cx="1027" cy="963" r="3" fill="white" fill-opacity="0.75"/>
+<circle cx="1027" cy="1027" r="3" fill="white" fill-opacity="0.75"/>
+<circle cx="1027" cy="3" r="3" fill="white" fill-opacity="0.75"/>
+<circle cx="1027" cy="835" r="3" fill="white" fill-opacity="0.75"/>
+<circle cx="1027" cy="899" r="3" fill="white" fill-opacity="0.75"/>
+<circle cx="1027" cy="131" r="3" fill="white" fill-opacity="0.75"/>
+<circle cx="1027" cy="195" r="3" fill="white" fill-opacity="0.75"/>
+<circle cx="1027" cy="259" r="3" fill="white" fill-opacity="0.75"/>
+<circle cx="1027" cy="323" r="3" fill="white" fill-opacity="0.75"/>
+<circle cx="1027" cy="387" r="3" fill="white" fill-opacity="0.75"/>
+<circle cx="1027" cy="451" r="3" fill="white" fill-opacity="0.75"/>
+<circle cx="1027" cy="515" r="3" fill="white" fill-opacity="0.75"/>
+<circle cx="1027" cy="579" r="3" fill="white" fill-opacity="0.75"/>
+<circle cx="1027" cy="643" r="3" fill="white" fill-opacity="0.75"/>
+<circle cx="1091" cy="67" r="3" fill="white" fill-opacity="0.65"/>
+<circle cx="1091" cy="707" r="3" fill="white" fill-opacity="0.65"/>
+<circle cx="1091" cy="771" r="3" fill="white" fill-opacity="0.65"/>
+<circle cx="1091" cy="963" r="3" fill="white" fill-opacity="0.65"/>
+<circle cx="1091" cy="1027" r="3" fill="white" fill-opacity="0.65"/>
+<circle cx="1091" cy="3" r="3" fill="white" fill-opacity="0.65"/>
+<circle cx="1091" cy="835" r="3" fill="white" fill-opacity="0.65"/>
+<circle cx="1091" cy="899" r="3" fill="white" fill-opacity="0.65"/>
+<circle cx="1091" cy="131" r="3" fill="white" fill-opacity="0.65"/>
+<circle cx="1091" cy="195" r="3" fill="white" fill-opacity="0.65"/>
+<circle cx="1091" cy="259" r="3" fill="white" fill-opacity="0.65"/>
+<circle cx="1091" cy="323" r="3" fill="white" fill-opacity="0.65"/>
+<circle cx="1091" cy="387" r="3" fill="white" fill-opacity="0.65"/>
+<circle cx="1091" cy="451" r="3" fill="white" fill-opacity="0.65"/>
+<circle cx="1091" cy="515" r="3" fill="white" fill-opacity="0.65"/>
+<circle cx="1091" cy="579" r="3" fill="white" fill-opacity="0.65"/>
+<circle cx="1091" cy="643" r="3" fill="white" fill-opacity="0.65"/>
+<circle cx="1155" cy="67" r="3" fill="white" fill-opacity="0.55"/>
+<circle cx="1155" cy="707" r="3" fill="white" fill-opacity="0.55"/>
+<circle cx="1155" cy="771" r="3" fill="white" fill-opacity="0.55"/>
+<circle cx="1155" cy="963" r="3" fill="white" fill-opacity="0.55"/>
+<circle cx="1155" cy="1027" r="3" fill="white" fill-opacity="0.55"/>
+<circle cx="1155" cy="3" r="3" fill="white" fill-opacity="0.55"/>
+<circle cx="1155" cy="835" r="3" fill="white" fill-opacity="0.55"/>
+<circle cx="1155" cy="899" r="3" fill="white" fill-opacity="0.55"/>
+<circle cx="1155" cy="131" r="3" fill="white" fill-opacity="0.55"/>
+<circle cx="1155" cy="195" r="3" fill="white" fill-opacity="0.55"/>
+<circle cx="1155" cy="259" r="3" fill="white" fill-opacity="0.55"/>
+<circle cx="1155" cy="323" r="3" fill="white" fill-opacity="0.55"/>
+<circle cx="1155" cy="387" r="3" fill="white" fill-opacity="0.55"/>
+<circle cx="1155" cy="451" r="3" fill="white" fill-opacity="0.55"/>
+<circle cx="1155" cy="515" r="3" fill="white" fill-opacity="0.55"/>
+<circle cx="1155" cy="579" r="3" fill="white" fill-opacity="0.55"/>
+<circle cx="1155" cy="643" r="3" fill="white" fill-opacity="0.55"/>
+<circle cx="1219" cy="67" r="3" fill="white" fill-opacity="0.45"/>
+<circle cx="1219" cy="707" r="3" fill="white" fill-opacity="0.45"/>
+<circle cx="1219" cy="771" r="3" fill="white" fill-opacity="0.45"/>
+<circle cx="1219" cy="963" r="3" fill="white" fill-opacity="0.45"/>
+<circle cx="1219" cy="1027" r="3" fill="white" fill-opacity="0.45"/>
+<circle cx="1219" cy="3" r="3" fill="white" fill-opacity="0.45"/>
+<circle cx="1219" cy="835" r="3" fill="white" fill-opacity="0.45"/>
+<circle cx="1219" cy="899" r="3" fill="white" fill-opacity="0.45"/>
+<circle cx="1219" cy="131" r="3" fill="white" fill-opacity="0.45"/>
+<circle cx="1219" cy="195" r="3" fill="white" fill-opacity="0.45"/>
+<circle cx="1219" cy="259" r="3" fill="white" fill-opacity="0.45"/>
+<circle cx="1219" cy="323" r="3" fill="white" fill-opacity="0.45"/>
+<circle cx="1219" cy="387" r="3" fill="white" fill-opacity="0.45"/>
+<circle cx="1219" cy="451" r="3" fill="white" fill-opacity="0.45"/>
+<circle cx="1219" cy="515" r="3" fill="white" fill-opacity="0.45"/>
+<circle cx="1219" cy="579" r="3" fill="white" fill-opacity="0.45"/>
+<circle cx="1219" cy="643" r="3" fill="white" fill-opacity="0.45"/>
+<circle cx="1283" cy="67" r="3" fill="white" fill-opacity="0.35"/>
+<circle cx="1283" cy="707" r="3" fill="white" fill-opacity="0.35"/>
+<circle cx="1283" cy="771" r="3" fill="white" fill-opacity="0.35"/>
+<circle cx="1283" cy="963" r="3" fill="white" fill-opacity="0.35"/>
+<circle cx="1283" cy="1027" r="3" fill="white" fill-opacity="0.35"/>
+<circle cx="1283" cy="3" r="3" fill="white" fill-opacity="0.35"/>
+<circle cx="1283" cy="835" r="3" fill="white" fill-opacity="0.35"/>
+<circle cx="1283" cy="899" r="3" fill="white" fill-opacity="0.35"/>
+<circle cx="1283" cy="131" r="3" fill="white" fill-opacity="0.35"/>
+<circle cx="1283" cy="195" r="3" fill="white" fill-opacity="0.35"/>
+<circle cx="1283" cy="259" r="3" fill="white" fill-opacity="0.35"/>
+<circle cx="1283" cy="323" r="3" fill="white" fill-opacity="0.35"/>
+<circle cx="1283" cy="387" r="3" fill="white" fill-opacity="0.35"/>
+<circle cx="1283" cy="451" r="3" fill="white" fill-opacity="0.35"/>
+<circle cx="1283" cy="515" r="3" fill="white" fill-opacity="0.35"/>
+<circle cx="1283" cy="579" r="3" fill="white" fill-opacity="0.35"/>
+<circle cx="1283" cy="643" r="3" fill="white" fill-opacity="0.35"/>
+<circle cx="1347" cy="67" r="3" fill="white" fill-opacity="0.25"/>
+<circle cx="1347" cy="707" r="3" fill="white" fill-opacity="0.25"/>
+<circle cx="1347" cy="771" r="3" fill="white" fill-opacity="0.25"/>
+<circle cx="1347" cy="963" r="3" fill="white" fill-opacity="0.25"/>
+<circle cx="1347" cy="1027" r="3" fill="white" fill-opacity="0.25"/>
+<circle cx="1347" cy="3" r="3" fill="white" fill-opacity="0.25"/>
+<circle cx="1347" cy="835" r="3" fill="white" fill-opacity="0.25"/>
+<circle cx="1347" cy="899" r="3" fill="white" fill-opacity="0.25"/>
+<circle cx="1347" cy="131" r="3" fill="white" fill-opacity="0.25"/>
+<circle cx="1347" cy="195" r="3" fill="white" fill-opacity="0.25"/>
+<circle cx="1347" cy="259" r="3" fill="white" fill-opacity="0.25"/>
+<circle cx="1347" cy="323" r="3" fill="white" fill-opacity="0.25"/>
+<circle cx="1347" cy="387" r="3" fill="white" fill-opacity="0.25"/>
+<circle cx="1347" cy="451" r="3" fill="white" fill-opacity="0.25"/>
+<circle cx="1347" cy="515" r="3" fill="white" fill-opacity="0.25"/>
+<circle cx="1347" cy="579" r="3" fill="white" fill-opacity="0.25"/>
+<circle cx="1347" cy="643" r="3" fill="white" fill-opacity="0.25"/>
+<circle cx="1411" cy="67" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="1411" cy="707" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="1411" cy="771" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="1411" cy="963" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="1411" cy="1027" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="1411" cy="3" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="1411" cy="835" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="1411" cy="899" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="1411" cy="131" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="1411" cy="195" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="1411" cy="259" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="1411" cy="323" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="1411" cy="387" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="1411" cy="451" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="1411" cy="515" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="1411" cy="579" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="1411" cy="643" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="1475" cy="67" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="1603" cy="67" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1475" cy="707" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="1603" cy="707" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1475" cy="771" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="1475" cy="963" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="1475" cy="1027" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="1475" cy="3" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="1603" cy="771" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1603" cy="963" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1603" cy="1027" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1603" cy="3" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1475" cy="835" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="1603" cy="835" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1475" cy="899" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="1603" cy="899" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1475" cy="131" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="1603" cy="131" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1475" cy="195" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="1603" cy="195" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1475" cy="259" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="1603" cy="259" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1475" cy="323" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="1603" cy="323" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1475" cy="387" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="1603" cy="387" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1475" cy="451" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="1603" cy="451" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1475" cy="515" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="1603" cy="515" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1475" cy="579" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="1603" cy="579" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1475" cy="643" r="3" fill="white" fill-opacity="0.15"/>
+<circle cx="1603" cy="643" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1539" cy="67" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1667" cy="67" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1539" cy="707" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1667" cy="707" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1539" cy="771" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1539" cy="963" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1539" cy="1027" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1539" cy="3" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1667" cy="771" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1667" cy="963" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1667" cy="1027" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1667" cy="3" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1539" cy="835" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1667" cy="835" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1539" cy="899" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1667" cy="899" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1539" cy="131" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1667" cy="131" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1539" cy="195" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1667" cy="195" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1539" cy="259" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1667" cy="259" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1539" cy="323" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1667" cy="323" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1539" cy="387" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1667" cy="387" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1539" cy="451" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1667" cy="451" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1539" cy="515" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1667" cy="515" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1539" cy="579" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1667" cy="579" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1539" cy="643" r="3" fill="white" fill-opacity="0.1"/>
+<circle cx="1667" cy="643" r="3" fill="white" fill-opacity="0.1"/>
+</svg>
diff --git a/apps/www/public/background/hero-small.svg b/apps/www/public/background/hero-small.svg
new file mode 100644
index 000000000..b4cb65370
--- /dev/null
+++ b/apps/www/public/background/hero-small.svg
@@ -0,0 +1,9 @@
+<svg width="1728" height="711" viewBox="0 0 1728 711" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect y="711" width="711" height="1728" transform="rotate(-90 0 711)" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_414_268" transform="translate(-0.71519) scale(0.00528344 0.00217391)"/>
+</pattern>
+<image id="image0_414_268" width="460" height="460" xlink:href="data:image/png;base64,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"/>
+</defs>
+</svg>
diff --git a/apps/www/public/background/hero.svg b/apps/www/public/background/hero.svg
new file mode 100644
index 000000000..cdd68efeb
--- /dev/null
+++ b/apps/www/public/background/hero.svg
@@ -0,0 +1,15 @@
+<svg width="1728" height="1043" viewBox="0 0 1728 1043" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect y="934" width="934" height="1728" transform="rotate(-90 0 934)" fill="url(#pattern0)"/>
+<path d="M1282.24 994.673C1310.39 973.951 1343 929 1343 929H785C785 929 814.032 940.334 832.597 947.691C900.34 974.539 934.515 1000.91 1005.26 1018.42C1074.32 1035.51 1117.23 1052.64 1186.54 1036.6C1226.3 1027.4 1249.39 1018.85 1282.24 994.673Z" fill="url(#paint0_linear_688_478)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_688_478" transform="translate(-0.339401) scale(0.00402197 0.00217391)"/>
+</pattern>
+<linearGradient id="paint0_linear_688_478" x1="1332.87" y1="945.671" x2="881.207" y2="950.239" gradientUnits="userSpaceOnUse">
+<stop stop-color="#000B29"/>
+<stop offset="0.597616" stop-color="#000B26"/>
+<stop offset="1" stop-color="#00081E"/>
+</linearGradient>
+<image id="image0_688_478" width="460" height="460" xlink:href="data:image/png;base64,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"/>
+</defs>
+</svg>
diff --git a/apps/www/public/background/open-source.svg b/apps/www/public/background/open-source.svg
new file mode 100644
index 000000000..3de411d5c
--- /dev/null
+++ b/apps/www/public/background/open-source.svg
@@ -0,0 +1,16 @@
+<svg width="1726" height="577" viewBox="0 0 1726 577" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M701.516 575.843C691.473 576.196 681.251 575.843 666 575.843H701.516C713.204 575.433 724.65 574.066 743.5 570.076C760.261 566.527 775.741 569.155 792.5 565.59C811.383 561.572 820.499 567.474 837.5 555.977C844.058 551.542 859.841 549.351 867 547.005C882.995 541.763 908.5 541.878 920.5 527.779C933.321 512.716 965.329 509.341 973 502.786C989.5 488.687 1013.29 506.28 1028.5 489.969C1039.5 478.175 1062.85 441.9 1080.5 438.06C1123.48 428.709 1109.51 406.161 1143.5 399.609C1160.78 396.277 1173.02 392.559 1180 392.559C1193 392.559 1193.97 365.827 1218.5 365.003C1233.84 364.487 1243.13 355.106 1255.5 343.214C1263 336.006 1276.5 306.685 1286.11 306.685C1310.56 306.685 1319.18 273.074 1342 262.466C1364 252.241 1388.52 254.97 1411.5 249.649C1432.57 244.772 1455.48 229.237 1470 208.635C1487.43 183.899 1486.57 234.497 1508.5 216.966C1518.57 208.914 1534.37 224.092 1546 221.5C1574.1 215.238 1560.21 191.213 1587.5 180.437C1621.34 167.073 1623.42 163.066 1639 121.479C1653.5 82.7753 1668.5 62.4832 1677.5 34.9636C1687.09 5.62927 1695 8.0485 1695 8.0485H1726V575.843H701.516Z" fill="url(#paint0_linear_688_509)"/>
+<path d="M0 575.843C0 575.843 35 575.843 61 575.843C82.2685 575.843 106 575.843 123.5 575.843C163.543 575.843 172.287 575.843 212.5 575.843C231 575.843 273 575.843 303.5 575.843C323.5 575.843 344 575.843 378.5 575.843C414.443 575.843 449.565 575.843 485.5 575.843C513.491 575.843 537 575.843 564 575.843C574.038 575.843 592 575.843 601 575.843C613.355 575.843 620 575.843 632 575.843C644.103 575.843 653.893 575.843 666 575.843C699 575.843 708.453 577.495 743.5 570.076C760.261 566.527 775.741 569.155 792.5 565.59C811.383 561.572 820.499 567.474 837.5 555.977C844.058 551.542 859.841 549.351 867 547.005C882.995 541.763 908.5 541.878 920.5 527.779C933.321 512.716 965.329 509.341 973 502.786C989.5 488.687 1013.29 506.28 1028.5 489.969C1039.5 478.175 1062.85 441.9 1080.5 438.06C1123.48 428.709 1109.51 406.161 1143.5 399.609C1160.78 396.277 1173.02 392.559 1180 392.559C1193 392.559 1193.97 365.827 1218.5 365.003C1233.84 364.487 1243.13 355.106 1255.5 343.214C1263 336.006 1276.5 306.685 1286.11 306.685C1310.56 306.685 1319.18 273.074 1342 262.466C1364 252.241 1388.52 254.97 1411.5 249.649C1432.57 244.772 1455.48 229.237 1470 208.635C1487.43 183.899 1486.57 234.497 1508.5 216.966C1518.57 208.914 1531.37 224.592 1543 222C1571.1 215.738 1560.21 191.213 1587.5 180.437C1621.34 167.073 1623.42 163.066 1639 121.479C1653.5 82.7753 1668.5 62.4832 1677.5 34.9636C1687.09 5.62927 1695 8.0485 1695 8.0485" stroke="url(#paint1_linear_688_509)" stroke-opacity="0.7" stroke-width="1.5"/>
+<circle cx="1702.5" cy="7.5" r="7.5" fill="#3F76FF" fill-opacity="0.7"/>
+<circle cx="1702.5" cy="7.5" r="4.5" fill="#05C3FF" fill-opacity="0.7"/>
+<defs>
+<linearGradient id="paint0_linear_688_509" x1="863" y1="8" x2="863" y2="576" gradientUnits="userSpaceOnUse">
+<stop offset="0.0135415" stop-color="#0C1E49" stop-opacity="0.3"/>
+<stop offset="1" stop-color="#00091F"/>
+</linearGradient>
+<linearGradient id="paint1_linear_688_509" x1="1667.5" y1="-141.911" x2="-42.5191" y2="337.527" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3F76FF"/>
+<stop offset="1" stop-color="#05C3FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/apps/www/public/community.jpg b/apps/www/public/community.jpg
new file mode 100644
index 000000000..d9de04f7e
Binary files /dev/null and b/apps/www/public/community.jpg differ
diff --git a/apps/www/public/favicon/android-chrome-192x192.png b/apps/www/public/favicon/android-chrome-192x192.png
new file mode 100644
index 000000000..1f63de8ce
Binary files /dev/null and b/apps/www/public/favicon/android-chrome-192x192.png differ
diff --git a/apps/www/public/favicon/android-chrome-512x512.png b/apps/www/public/favicon/android-chrome-512x512.png
new file mode 100644
index 000000000..5333d88f6
Binary files /dev/null and b/apps/www/public/favicon/android-chrome-512x512.png differ
diff --git a/apps/www/public/favicon/apple-touch-icon.png b/apps/www/public/favicon/apple-touch-icon.png
new file mode 100644
index 000000000..40fa17cba
Binary files /dev/null and b/apps/www/public/favicon/apple-touch-icon.png differ
diff --git a/apps/www/public/favicon/favicon-16x16.png b/apps/www/public/favicon/favicon-16x16.png
new file mode 100644
index 000000000..e33f44b09
Binary files /dev/null and b/apps/www/public/favicon/favicon-16x16.png differ
diff --git a/apps/www/public/favicon/favicon-32x32.png b/apps/www/public/favicon/favicon-32x32.png
new file mode 100644
index 000000000..be1a75304
Binary files /dev/null and b/apps/www/public/favicon/favicon-32x32.png differ
diff --git a/apps/www/public/favicon/favicon.ico b/apps/www/public/favicon/favicon.ico
new file mode 100644
index 000000000..56366837a
Binary files /dev/null and b/apps/www/public/favicon/favicon.ico differ
diff --git a/apps/www/public/favicon/site.webmanifest b/apps/www/public/favicon/site.webmanifest
new file mode 100644
index 000000000..45dc8a206
--- /dev/null
+++ b/apps/www/public/favicon/site.webmanifest
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
\ No newline at end of file
diff --git a/apps/www/public/icons/bullet.svg b/apps/www/public/icons/bullet.svg
new file mode 100644
index 000000000..b5a7b793c
--- /dev/null
+++ b/apps/www/public/icons/bullet.svg
@@ -0,0 +1,14 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="10" y="10" width="10" height="10" fill="url(#paint0_linear_404_540)"/>
+<rect width="10" height="10" fill="url(#paint1_linear_404_540)"/>
+<defs>
+<linearGradient id="paint0_linear_404_540" x1="9.41176" y1="10.8824" x2="25.4412" y2="21.3235" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3F76FF"/>
+<stop offset="1" stop-color="#05C3FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_404_540" x1="-0.588235" y1="0.882353" x2="15.4412" y2="11.3235" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3F76FF"/>
+<stop offset="1" stop-color="#05C3FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/apps/www/public/icons/check-circle.svg b/apps/www/public/icons/check-circle.svg
new file mode 100644
index 000000000..808f996e3
--- /dev/null
+++ b/apps/www/public/icons/check-circle.svg
@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.0597 15.0236L7.25244 12.2163C7.08057 12.0444 6.8705 11.9585 6.62223 11.9585C6.37397 11.9585 6.15435 12.054 5.96338 12.245C5.77241 12.4359 5.67692 12.6555 5.67692 12.9038C5.67692 13.1521 5.77241 13.3621 5.96338 13.534L9.45817 17.0288C9.63004 17.2007 9.83057 17.2866 10.0597 17.2866C10.2889 17.2866 10.4894 17.2007 10.6613 17.0288L17.5363 10.1538C17.7082 9.98193 17.7893 9.77186 17.7798 9.5236C17.7702 9.27534 17.6795 9.06527 17.5076 8.89339C17.3358 8.70242 17.1209 8.60693 16.8631 8.60693C16.6053 8.60693 16.3809 8.70242 16.1899 8.89339L10.0597 15.0236ZM11.7498 23.8752C10.1266 23.8752 8.61789 23.5839 7.2238 23.0015C5.8297 22.419 4.61702 21.6121 3.58577 20.5809C2.55452 19.5496 1.74767 18.337 1.1652 16.9429C0.582737 15.5488 0.291504 14.0401 0.291504 12.4168C0.291504 10.8127 0.582737 9.31353 1.1652 7.91943C1.74767 6.52534 2.55452 5.31266 3.58577 4.28141C4.61702 3.25016 5.8297 2.43853 7.2238 1.84652C8.61789 1.2545 10.1266 0.958496 11.7498 0.958496C13.354 0.958496 14.8531 1.2545 16.2472 1.84652C17.6413 2.43853 18.854 3.25016 19.8853 4.28141C20.9165 5.31266 21.7281 6.52534 22.3201 7.91943C22.9122 9.31353 23.2082 10.8127 23.2082 12.4168C23.2082 14.0401 22.9122 15.5488 22.3201 16.9429C21.7281 18.337 20.9165 19.5496 19.8853 20.5809C18.854 21.6121 17.6413 22.419 16.2472 23.0015C14.8531 23.5839 13.354 23.8752 11.7498 23.8752ZM11.7498 22.1564C14.5189 22.1564 16.8345 21.2254 18.6965 19.3634C20.5584 17.5015 21.4894 15.1859 21.4894 12.4168C21.4894 9.64773 20.5584 7.33219 18.6965 5.47021C16.8345 3.60824 14.5189 2.67725 11.7498 2.67725C8.98074 2.67725 6.6652 3.60824 4.80322 5.47021C2.94124 7.33219 2.01025 9.64773 2.01025 12.4168C2.01025 15.1859 2.94124 17.5015 4.80322 19.3634C6.6652 21.2254 8.98074 22.1564 11.7498 22.1564Z" fill="url(#paint0_linear_688_1436)"/>
+<defs>
+<linearGradient id="paint0_linear_688_1436" x1="11.7498" y1="0.958496" x2="11.7498" y2="23.8752" gradientUnits="userSpaceOnUse">
+<stop stop-color="#05C3FF"/>
+<stop offset="1" stop-color="#3F76FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/apps/www/public/icons/discord-white.svg b/apps/www/public/icons/discord-white.svg
new file mode 100644
index 000000000..044018a2e
--- /dev/null
+++ b/apps/www/public/icons/discord-white.svg
@@ -0,0 +1,3 @@
+<svg width="56" height="44" viewBox="0 0 56 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M47.4372 3.66969C43.7647 1.93284 39.8795 0.698737 35.8842 0C35.3865 0.909407 34.8051 2.13256 34.4041 3.10565C30.0965 2.45095 25.8285 2.45095 21.6 3.10565C21.1993 2.13278 20.6047 0.909407 20.1025 0C16.1033 0.699059 12.2147 1.93631 8.54042 3.67875C1.22892 14.8466 -0.753172 25.7367 0.237766 36.4727C5.08723 40.1331 9.78686 42.3567 14.4073 43.8118C15.5556 42.2157 16.5707 40.5259 17.442 38.7598C15.7831 38.1214 14.1838 37.3347 12.6632 36.409C13.0634 36.1092 13.4541 35.7968 13.8348 35.4722C23.049 39.8284 33.0608 39.8284 42.1651 35.4722C42.5475 35.7946 42.9381 36.107 43.3365 36.409C41.8135 37.3371 40.2113 38.1254 38.549 38.7644C39.4253 40.5377 40.4385 42.2292 41.5837 43.8163C46.2085 42.3614 50.9125 40.1377 55.762 36.4727C56.9249 24.0271 53.7757 13.2367 47.4372 3.66947V3.66969ZM18.6974 29.8703C15.9313 29.8703 13.6629 27.2601 13.6629 24.0817C13.6629 20.9033 15.883 18.2887 18.6974 18.2887C21.5121 18.2887 23.7803 20.8987 23.732 24.0817C23.7363 27.2601 21.5121 29.8703 18.6974 29.8703ZM37.3023 29.8703C34.5362 29.8703 32.268 27.2601 32.268 24.0817C32.268 20.9033 34.4879 18.2887 37.3023 18.2887C40.117 18.2887 42.3852 20.8987 42.3369 24.0817C42.3369 27.2601 40.117 29.8703 37.3023 29.8703Z" fill="white"/>
+</svg>
diff --git a/apps/www/public/icons/discord.svg b/apps/www/public/icons/discord.svg
new file mode 100644
index 000000000..7ba4d4900
--- /dev/null
+++ b/apps/www/public/icons/discord.svg
@@ -0,0 +1,3 @@
+<svg width="133" height="103" viewBox="0 0 133 103" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M112.663 8.59041C103.941 4.52461 94.7137 1.63568 85.2249 0C84.043 2.12884 82.6621 4.99214 81.7098 7.27004C71.4791 5.73746 61.3426 5.73746 51.3 7.27004C50.3483 4.99265 48.9362 2.12884 47.7433 0C38.2452 1.63643 29.0099 4.53272 20.2835 8.61163C2.91869 34.7545 -1.78878 60.2472 0.564694 85.3792C12.0822 93.9479 23.2438 99.1533 34.2173 102.56C36.9445 98.8231 39.3553 94.8674 41.4248 90.7332C37.4848 89.2388 33.6865 87.3972 30.0751 85.2302C31.0255 84.5284 31.9535 83.797 32.8577 83.0372C54.7414 93.2347 78.5193 93.2347 100.142 83.0372C101.05 83.792 101.978 84.5233 102.924 85.2302C99.3071 87.4028 95.5017 89.2482 91.5538 90.744C93.6351 94.8951 96.0415 98.8546 98.7613 102.57C109.745 99.1642 120.917 93.9588 132.435 85.3792C135.197 56.2452 127.717 30.9859 112.663 8.58989V8.59041ZM44.4064 69.9235C37.8369 69.9235 32.4494 63.8134 32.4494 56.3731C32.4494 48.9328 37.7221 42.8123 44.4064 42.8123C51.0912 42.8123 56.4782 48.9219 56.3634 56.3731C56.3738 63.8134 51.0912 69.9235 44.4064 69.9235ZM88.593 69.9235C82.0236 69.9235 76.6365 63.8134 76.6365 56.3731C76.6365 48.9328 81.9087 42.8123 88.593 42.8123C95.2778 42.8123 100.665 48.9219 100.55 56.3731C100.55 63.8134 95.2778 69.9235 88.593 69.9235Z" fill="#6D8AF5"/>
+</svg>
diff --git a/apps/www/public/icons/github.svg b/apps/www/public/icons/github.svg
new file mode 100644
index 000000000..e38509b91
--- /dev/null
+++ b/apps/www/public/icons/github.svg
@@ -0,0 +1,3 @@
+<svg width="114" height="111" viewBox="0 0 114 111" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M57.0007 0.333496C49.5591 0.333496 42.1904 1.79922 35.3153 4.64699C28.4401 7.49476 22.1933 11.6688 16.9313 16.9308C6.30421 27.5578 0.333984 41.9712 0.333984 57.0002C0.333984 82.0468 16.5973 103.297 39.094 110.834C41.9273 111.287 42.834 109.53 42.834 108V98.4235C27.1373 101.824 23.794 90.8302 23.794 90.8302C21.1873 84.2568 17.504 82.5002 17.504 82.5002C12.3473 78.9868 17.9007 79.1002 17.9007 79.1002C23.5673 79.4968 26.5707 84.9368 26.5707 84.9368C31.5007 93.5502 39.8307 91.0002 43.0607 89.6402C43.5707 85.9568 45.044 83.4635 46.6307 82.0468C34.0507 80.6302 20.8473 75.7568 20.8473 54.1668C20.8473 47.8768 23.0007 42.8335 26.684 38.8102C26.1173 37.3935 24.134 31.5002 27.2507 23.8502C27.2507 23.8502 32.0107 22.3202 42.834 29.6302C47.3107 28.3835 52.184 27.7602 57.0007 27.7602C61.8173 27.7602 66.6907 28.3835 71.1673 29.6302C81.9907 22.3202 86.7507 23.8502 86.7507 23.8502C89.8673 31.5002 87.884 37.3935 87.3173 38.8102C91.0007 42.8335 93.154 47.8768 93.154 54.1668C93.154 75.8135 79.894 80.5735 67.2573 81.9902C69.2973 83.7468 71.1673 87.2035 71.1673 92.4735V108C71.1673 109.53 72.074 111.344 74.964 110.834C97.4607 103.24 113.667 82.0468 113.667 57.0002C113.667 49.5586 112.202 42.1899 109.354 35.3148C106.506 28.4397 102.332 22.1928 97.07 16.9308C91.8081 11.6688 85.5612 7.49476 78.6861 4.64699C71.8109 1.79922 64.4422 0.333496 57.0007 0.333496Z" fill="white"/>
+</svg>
diff --git a/apps/www/public/icons/twitter-white.svg b/apps/www/public/icons/twitter-white.svg
new file mode 100644
index 000000000..7226a2fa0
--- /dev/null
+++ b/apps/www/public/icons/twitter-white.svg
@@ -0,0 +1,3 @@
+<svg width="53" height="43" viewBox="0 0 53 43" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M52.2812 5.76271C50.3471 6.60313 48.3006 7.15682 46.2065 7.40627C48.4073 6.11761 50.0623 4.07035 50.8611 1.64846C48.7805 2.86511 46.5079 3.71877 44.1408 4.17287C43.144 3.12822 41.9453 2.29718 40.6173 1.73025C39.2894 1.16332 37.86 0.87235 36.4161 0.875018C30.5702 0.875018 25.8394 5.53713 25.8394 11.2842C25.8352 12.0836 25.9268 12.8806 26.1122 13.6582C21.9203 13.4617 17.8155 12.3923 14.0605 10.5186C10.3055 8.64476 6.98304 6.00781 4.30557 2.77638C3.36624 4.35991 2.86948 6.16667 2.86719 8.00783C2.86719 11.6172 4.75029 14.8076 7.59375 16.6768C5.90908 16.6368 4.25894 16.1909 2.7834 15.377V15.5059C2.7834 20.5547 6.43574 24.7549 11.2697 25.711C10.3607 25.9533 9.42397 26.0761 8.4832 26.0762C7.81566 26.0774 7.14963 26.0126 6.49482 25.8828C7.83867 30.0186 11.7499 33.0264 16.383 33.1123C12.6183 36.0137 7.99617 37.5819 3.24316 37.5703C2.39949 37.5691 1.5566 37.5189 0.71875 37.4199C5.554 40.5075 11.1746 42.1406 16.9115 42.125C36.3936 42.125 47.0369 26.2588 47.0369 12.4981C47.0369 12.0469 47.0251 11.5957 47.0036 11.1553C49.0694 9.68582 50.8566 7.85971 52.2812 5.76271Z" fill="white"/>
+</svg>
diff --git a/apps/www/public/icons/twitter.svg b/apps/www/public/icons/twitter.svg
new file mode 100644
index 000000000..97f6dbab8
--- /dev/null
+++ b/apps/www/public/icons/twitter.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" fill="#1da1f1"/></svg>
\ No newline at end of file
diff --git a/apps/www/public/images/colab1.png b/apps/www/public/images/colab1.png
new file mode 100644
index 000000000..7d5d516f6
Binary files /dev/null and b/apps/www/public/images/colab1.png differ
diff --git a/apps/www/public/images/colab3.png b/apps/www/public/images/colab3.png
new file mode 100644
index 000000000..95a56841e
Binary files /dev/null and b/apps/www/public/images/colab3.png differ
diff --git a/apps/www/public/images/demo.png b/apps/www/public/images/demo.png
new file mode 100644
index 000000000..172a5bcd7
Binary files /dev/null and b/apps/www/public/images/demo.png differ
diff --git a/apps/www/public/images/plan1.png b/apps/www/public/images/plan1.png
new file mode 100644
index 000000000..e22f34a42
Binary files /dev/null and b/apps/www/public/images/plan1.png differ
diff --git a/apps/www/public/images/plan2.png b/apps/www/public/images/plan2.png
new file mode 100644
index 000000000..b4a4b32d8
Binary files /dev/null and b/apps/www/public/images/plan2.png differ
diff --git a/apps/www/public/images/plan3.png b/apps/www/public/images/plan3.png
new file mode 100644
index 000000000..82c2f5589
Binary files /dev/null and b/apps/www/public/images/plan3.png differ
diff --git a/apps/www/public/images/progress1.png b/apps/www/public/images/progress1.png
new file mode 100644
index 000000000..ffae03c52
Binary files /dev/null and b/apps/www/public/images/progress1.png differ
diff --git a/apps/www/public/images/progress2.png b/apps/www/public/images/progress2.png
new file mode 100644
index 000000000..d6a8aa7b1
Binary files /dev/null and b/apps/www/public/images/progress2.png differ
diff --git a/apps/www/public/logo/plane-wordmark.svg b/apps/www/public/logo/plane-wordmark.svg
new file mode 100644
index 000000000..0e7889d52
--- /dev/null
+++ b/apps/www/public/logo/plane-wordmark.svg
@@ -0,0 +1,10 @@
+<svg width="151" height="35" viewBox="0 0 151 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M40.3301 1.00018H50.4301C52.3344 0.96393 54.2273 1.30375 56.0001 2.00018C57.6195 2.6545 59.0106 3.77086 60.0001 5.21018C61.0612 6.872 61.585 8.82028 61.5001 10.7902C61.5813 12.8037 61.059 14.7956 60.0001 16.5102C59.0273 18.0146 57.6374 19.203 56.0001 19.9302C54.244 20.708 52.3405 21.0969 50.4201 21.0702H45.5501V34.4302H40.3301V1.00018ZM45.5501 16.8002H49.0001C50.19 16.8126 51.3734 16.6233 52.5001 16.2402C53.5061 15.8944 54.3798 15.2444 55.0001 14.3802C55.6514 13.3769 55.9731 12.1952 55.9201 11.0002C56.001 9.78031 55.6777 8.56776 55.0001 7.55018C54.3614 6.72011 53.4809 6.10866 52.4801 5.80018C51.3552 5.44259 50.1804 5.26704 49.0001 5.28018H45.5501V16.8002Z" fill="#F2F2F2"/>
+<path d="M71.7895 34.43H66.4395V1H71.7895V34.43Z" fill="#F2F2F2"/>
+<path d="M93.8298 34.4302V30.0502C93.5569 30.6645 93.1739 31.2237 92.6998 31.7002C91.9689 32.4725 91.1095 33.112 90.1598 33.5902C88.9837 34.1748 87.6827 34.4631 86.3698 34.4302C84.5743 34.4627 82.8051 33.9967 81.2586 33.084C79.7121 32.1713 78.4491 30.8477 77.6098 29.2602C76.7044 27.5276 76.2504 25.5947 76.2898 23.6402C76.2479 21.679 76.702 19.7391 77.6098 18.0002C78.4481 16.4104 79.7104 15.084 81.2567 14.1679C82.8029 13.2518 84.5727 12.7818 86.3698 12.8102C87.6462 12.776 88.9141 13.0289 90.0798 13.5502C91.0124 13.9744 91.8649 14.5562 92.5998 15.2702C93.1209 15.7485 93.5247 16.3405 93.7798 17.0002V13.4102H99.0598V34.4102L93.8298 34.4302ZM81.5398 23.6402C81.5121 24.8414 81.813 26.0273 82.4098 27.0702C82.9484 27.9992 83.7213 28.7706 84.6513 29.3076C85.5813 29.8445 86.6359 30.1281 87.7098 30.1302C88.7975 30.1636 89.8724 29.8871 90.809 29.3329C91.7456 28.7787 92.5054 27.9697 92.9998 27.0002C93.538 25.9528 93.8061 24.7875 93.7798 23.6102C93.8074 22.4295 93.5393 21.2607 92.9998 20.2102C92.4768 19.2938 91.7214 18.5315 90.8098 18.0002C89.8742 17.4394 88.8003 17.1519 87.7098 17.1702C86.656 17.172 85.6213 17.4514 84.7098 17.9802C83.7655 18.526 82.9798 19.3084 82.4298 20.2502C81.8348 21.2801 81.5275 22.4509 81.5398 23.6402V23.6402Z" fill="#F2F2F2"/>
+<path d="M116.77 12.8203C118.147 12.8219 119.509 13.1079 120.77 13.6603C122.074 14.2354 123.184 15.1725 123.97 16.3603C124.866 17.7998 125.306 19.4766 125.23 21.1703V34.4303H119.88V22.1403C119.942 21.4105 119.858 20.6759 119.633 19.9789C119.408 19.2819 119.047 18.6366 118.57 18.0803C118.128 17.6437 117.6 17.3023 117.021 17.077C116.441 16.8517 115.822 16.7474 115.2 16.7703C114.275 16.7765 113.371 17.0434 112.59 17.5403C111.765 18.0656 111.079 18.7826 110.59 19.6303C110.065 20.542 109.796 21.5784 109.81 22.6303V34.4303H104.48V13.4303H109.81V16.8703C110.041 16.1787 110.456 15.5632 111.01 15.0903C111.746 14.4206 112.592 13.8828 113.51 13.5003C114.539 13.052 115.649 12.8205 116.77 12.8203V12.8203Z" fill="#F2F2F2"/>
+<path d="M134.179 24.88C134.194 25.8983 134.459 26.8973 134.949 27.79C135.444 28.6538 136.186 29.3503 137.079 29.79C138.149 30.3092 139.33 30.5598 140.519 30.52C141.54 30.5376 142.555 30.3751 143.519 30.04C144.283 29.7577 145.001 29.3634 145.649 28.87C146.119 28.5014 146.536 28.0708 146.889 27.59L149.249 30.8C148.706 31.52 148.051 32.148 147.309 32.66C146.428 33.2585 145.445 33.6922 144.409 33.94C143.015 34.2761 141.583 34.4308 140.149 34.4C138.13 34.4525 136.131 33.9805 134.349 33.03C132.731 32.1419 131.405 30.8048 130.529 29.18C129.596 27.3848 129.131 25.3828 129.179 23.36C129.17 21.4953 129.612 19.6562 130.469 18C131.288 16.4157 132.544 15.1001 134.089 14.21C135.802 13.3226 137.698 12.847 139.626 12.821C141.555 12.7949 143.463 13.2192 145.199 14.06C146.707 14.8728 147.939 16.1154 148.739 17.63C149.622 19.3649 150.056 21.2939 149.999 23.24C149.999 23.37 149.999 23.65 149.999 24.06C150.004 24.335 149.981 24.6098 149.929 24.88H134.179ZM144.999 21C144.958 20.3618 144.777 19.7406 144.469 19.18C144.091 18.4566 143.529 17.846 142.839 17.41C141.939 16.858 140.893 16.593 139.839 16.65C138.755 16.5995 137.678 16.8523 136.729 17.38C136.083 17.764 135.531 18.289 135.116 18.9158C134.7 19.5425 134.431 20.2549 134.329 21H144.999Z" fill="#F2F2F2"/>
+<path d="M32.8492 1.30029H10.9492V12.2503H21.8992V23.2003H32.8492V1.30029Z" fill="#F2F2F2"/>
+<path d="M10.95 12.25H0V23.18H10.95V12.25Z" fill="#F2F2F2"/>
+<path d="M21.9105 23.2002H10.9805V34.1502H21.9105V23.2002Z" fill="#F2F2F2"/>
+</svg>
diff --git a/apps/www/public/logo/plane.svg b/apps/www/public/logo/plane.svg
new file mode 100644
index 000000000..eb57894d7
--- /dev/null
+++ b/apps/www/public/logo/plane.svg
@@ -0,0 +1,5 @@
+<svg width="37" height="37" viewBox="0 0 37 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M36.8286 0.171143H12.3906V12.3906H24.6091V24.6091H36.8286V0.171143Z" fill="#F2F2F2"/>
+<path d="M12.3904 12.3906H0.171875V24.5818H12.3904V12.3906Z" fill="#F2F2F2"/>
+<path d="M24.6091 24.6094H12.418V36.8279H24.6091V24.6094Z" fill="#F2F2F2"/>
+</svg>
diff --git a/apps/www/public/open-source.jpg b/apps/www/public/open-source.jpg
new file mode 100644
index 000000000..13d8ee593
Binary files /dev/null and b/apps/www/public/open-source.jpg differ
diff --git a/apps/www/public/plane-dashboard.png b/apps/www/public/plane-dashboard.png
new file mode 100644
index 000000000..04319781d
Binary files /dev/null and b/apps/www/public/plane-dashboard.png differ
diff --git a/apps/www/styles/global.css b/apps/www/styles/global.css
new file mode 100644
index 000000000..180bad4b5
--- /dev/null
+++ b/apps/www/styles/global.css
@@ -0,0 +1,132 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@font-face {
+  font-family: "Lexend", sans-serif;
+  font-style: normal;
+  font-weight: 100 300 400 500 600 900;
+  font-display: optional;
+  src: url(/fonts/inter-v7-latin-regular.woff2) format("woff2");
+}
+
+html {
+  scroll-behavior: smooth;
+  min-width: 360px;
+}
+
+body {
+  font-family: "Lexend", sans-serif, BlinkMacSystemFont, "Segoe UI", Helvetica,
+    "Apple Color Emoji", Inter, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
+  /* background-color: #e5e5e5; */
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+}
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 8px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+@layer utilities {
+  @variants responsive {
+    /* Chrome, Safari and Opera */
+    .scrollbar-hidden::-webkit-scrollbar {
+      display: none;
+    }
+
+    /* Hide scrollbar for IE, Edge add Firefox */
+    .scrollbar-hidden {
+      -ms-overflow-style: none;
+      scrollbar-width: none; /* Firefox */
+    }
+  }
+}
+
+.loader {
+  border-top-color: #3498db;
+  -webkit-animation: spinner 1.5s linear infinite;
+  animation: spinner 1.5s linear infinite;
+}
+@-webkit-keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+@keyframes spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.hero-gradient {
+  background: linear-gradient(
+    145.77deg,
+    #18c0ea 0%,
+    #848fec 26.36%,
+    #c671eb 51.56%,
+    #e55c8f 76.51%,
+    #f5515f 100%
+  );
+}
+.form-gradient {
+  background: linear-gradient(110.01deg, #0575e6 0%, #021b79 100%);
+}
+.triangle-right {
+  border-left: 96vw solid #f8f8fa;
+  border-bottom: 200px solid transparent;
+}
+
+
+
+.button-gradient {
+  background: linear-gradient(98.61deg, #3f76ff -1.18%, #05c3ff 102.69%);
+}
+
+.text-gradient {
+  background: linear-gradient(98.61deg, #3f76ff -1.18%, #05c3ff 102.69%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  text-fill-color: transparent;
+}
+
+.card-gradient {
+  background: linear-gradient(
+    138.04deg,
+    rgba(255, 255, 255, 0.1) 10.76%,
+    rgba(255, 255, 255, 0.05) 87.87%
+  );
+}
+
+.nav-border-gradient {
+  background: linear-gradient(
+    270deg,
+    rgba(255, 255, 255, 0) 0%,
+    #ffffff 47.71%,
+    rgba(255, 255, 255, 0) 100%
+  );
+}
+
+.card-border-gradient {
+  background: linear-gradient(141.85deg, #096e8d 4.6%, #00091f 100%);
+}
+.nav-gradient {
+  background: linear-gradient(
+    90.09deg,
+    rgba(21, 21, 21, 0.4) 2.9%,
+    rgba(21, 21, 21, 0.32) 98.12%
+  );
+}
diff --git a/apps/www/tailwind.config.js b/apps/www/tailwind.config.js
new file mode 100644
index 000000000..118c020f6
--- /dev/null
+++ b/apps/www/tailwind.config.js
@@ -0,0 +1,22 @@
+module.exports = {
+  mode: "jit",
+  purge: [
+    "./pages/**/*.tsx",
+    "./components/**/*.tsx",
+    "./layouts/**/*.tsx",
+    "./ui/**/*.tsx"
+  ],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {
+      colors: {},
+      gridTemplateRows: {
+        10: "repeat(10,minmax(0, 1fr))"
+      }
+    }
+  },
+  variants: {
+    extend: {}
+  },
+  plugins: []
+};
diff --git a/apps/www/tsconfig.json b/apps/www/tsconfig.json
new file mode 100644
index 000000000..36f19f753
--- /dev/null
+++ b/apps/www/tsconfig.json
@@ -0,0 +1,58 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "paths": {
+      "@components/*": [
+        "components/*"
+      ],
+      "@layouts/*": [
+        "layouts/*"
+      ],
+      "@lib/*": [
+        "lib/*"
+      ],
+      "@config/*": [
+        "config/*"
+      ],
+      "@styles/*": [
+        "styles/*"
+      ],
+      "@constants/*": [
+        "constants/*"
+      ],
+      "@icons/*": [
+        "icons/*"
+      ],
+      "@configuration/*": [
+        "configuration/*"
+      ]
+    },
+    "incremental": true
+  },
+  "exclude": [
+    "node_modules"
+  ],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "next.config.js"
+  ]
+}
diff --git a/package.json b/package.json
index 7fe4250af..86579ab82 100644
--- a/package.json
+++ b/package.json
@@ -16,5 +16,6 @@
     "eslint": "^8.28.0",
     "eslint-config-turbo": "latest",
     "turbo": "latest"
-  }
+  },
+  "packageManager": "pnpm@7.17.1"
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6779c9081..3c1c5c1f8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -105,8 +105,77 @@ importers:
       tailwindcss: 3.2.4_postcss@8.4.19
       typescript: 4.7.4
 
+  apps/www:
+    specifiers:
+      '@headlessui/react': ^1.4.0
+      '@heroicons/react': ^1.0.4
+      '@types/nprogress': 0.2.0
+      '@types/react': 17.0.34
+      '@typescript-eslint/parser': 5.3.1
+      autoprefixer: ^10.3.1
+      eslint: |
+        <8.0.0
+      eslint-config-next: 12.0.3
+      eslint-config-prettier: 8.3.0
+      eslint-plugin-react: 7.27.0
+      eslint-plugin-react-hooks: 4.3.0
+      next: ^12.0.1
+      next-cookies: ^2.0.3
+      nprogress: 0.2.0
+      prettier: 2.4.1
+      react: 17.0.2
+      react-dom: ^17.0.2
+      tailwindcss: ^2.2.7
+      typescript: 4.4.4
+    dependencies:
+      '@headlessui/react': 1.7.4_sfoxds7t5ydpegc3knd667wn6m
+      '@heroicons/react': 1.0.6_react@17.0.2
+      autoprefixer: 10.4.13
+      next: 12.2.2_sfoxds7t5ydpegc3knd667wn6m
+      next-cookies: 2.0.3
+      nprogress: 0.2.0
+      react: 17.0.2
+      react-dom: 17.0.2_react@17.0.2
+      tailwindcss: 2.2.19_autoprefixer@10.4.13
+    devDependencies:
+      '@types/nprogress': 0.2.0
+      '@types/react': 17.0.34
+      '@typescript-eslint/parser': 5.3.1_wnilx7boviscikmvsfkd6ljepe
+      eslint: 7.32.0
+      eslint-config-next: 12.0.3_aspctlc26mrbkkrn6pfqr4iakm
+      eslint-config-prettier: 8.3.0_eslint@7.32.0
+      eslint-plugin-react: 7.27.0_eslint@7.32.0
+      eslint-plugin-react-hooks: 4.3.0_eslint@7.32.0
+      prettier: 2.4.1
+      typescript: 4.4.4
+
 packages:
 
+  /@babel/code-frame/7.12.11:
+    resolution: {integrity: sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==}
+    dependencies:
+      '@babel/highlight': 7.18.6
+    dev: true
+
+  /@babel/code-frame/7.18.6:
+    resolution: {integrity: sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/highlight': 7.18.6
+    dev: false
+
+  /@babel/helper-validator-identifier/7.19.1:
+    resolution: {integrity: sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==}
+    engines: {node: '>=6.9.0'}
+
+  /@babel/highlight/7.18.6:
+    resolution: {integrity: sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-validator-identifier': 7.19.1
+      chalk: 2.4.2
+      js-tokens: 4.0.0
+
   /@babel/runtime-corejs3/7.20.6:
     resolution: {integrity: sha512-tqeujPiuEfcH067mx+7otTQWROVMKHXEaOQcAeNV5dDdbPWvPcFA8/W9LXw2NfjNmOetqLl03dfnG2WALPlsRQ==}
     engines: {node: '>=6.9.0'}
@@ -121,6 +190,23 @@ packages:
     dependencies:
       regenerator-runtime: 0.13.11
 
+  /@eslint/eslintrc/0.4.3:
+    resolution: {integrity: sha512-J6KFFz5QCYUJq3pf0mjEcCJVERbzv71PUIDczuh9JkwGEzced6CO5ADLHB1rbf/+oPBtoPfMYNOpGDzCANlbXw==}
+    engines: {node: ^10.12.0 || >=12.0.0}
+    dependencies:
+      ajv: 6.12.6
+      debug: 4.3.4
+      espree: 7.3.1
+      globals: 13.18.0
+      ignore: 4.0.6
+      import-fresh: 3.3.0
+      js-yaml: 3.14.1
+      minimatch: 3.1.2
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@eslint/eslintrc/1.3.3:
     resolution: {integrity: sha512-uj3pT6Mg+3t39fvLrj8iuCIJ38zKO9FpGtJ4BBJebJhEwjoT+KLVNCcHT5QC9NGRIEi7fZ0ZR8YRb884auB4Lg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -150,6 +236,26 @@ packages:
       react-dom: 18.2.0_react@18.2.0
     dev: false
 
+  /@headlessui/react/1.7.4_sfoxds7t5ydpegc3knd667wn6m:
+    resolution: {integrity: sha512-D8n5yGCF3WIkPsjEYeM8knn9jQ70bigGGb5aUvN6y4BGxcT3OcOQOKcM3zRGllRCZCFxCZyQvYJF6ZE7bQUOyQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: ^16 || ^17 || ^18
+      react-dom: ^16 || ^17 || ^18
+    dependencies:
+      client-only: 0.0.1
+      react: 17.0.2
+      react-dom: 17.0.2_react@17.0.2
+    dev: false
+
+  /@heroicons/react/1.0.6_react@17.0.2:
+    resolution: {integrity: sha512-JJCXydOFWMDpCP4q13iEplA503MQO3xLoZiKum+955ZCtHINWnx26CUxVxxFQu/uLb4LW3ge15ZpzIkXKkJ8oQ==}
+    peerDependencies:
+      react: '>= 16'
+    dependencies:
+      react: 17.0.2
+    dev: false
+
   /@heroicons/react/2.0.13_react@18.2.0:
     resolution: {integrity: sha512-iSN5XwmagrnirWlYEWNPdCDj9aRYVD/lnK3JlsC9/+fqGF80k8C7rl+1HCvBX0dBoagKqOFBs6fMhJJ1hOg1EQ==}
     peerDependencies:
@@ -169,6 +275,17 @@ packages:
       - supports-color
     dev: true
 
+  /@humanwhocodes/config-array/0.5.0:
+    resolution: {integrity: sha512-FagtKFz74XrTl7y6HCzQpwDfXP0yhxe9lHLD1UZxjvZIcbyRz8zTFF/yYNfSfzU414eDwZ1SrO0Qvtyf+wFMQg==}
+    engines: {node: '>=10.10.0'}
+    dependencies:
+      '@humanwhocodes/object-schema': 1.2.1
+      debug: 4.3.4
+      minimatch: 3.1.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@humanwhocodes/config-array/0.9.5:
     resolution: {integrity: sha512-ObyMyWxZiCu/yTisA7uzx81s40xR2fD5Cg/2Kq7G02ajkNubJf6BopgDTmDyc3U7sXpNKM8cYOw7s7Tyr+DnCw==}
     engines: {node: '>=10.10.0'}
@@ -451,7 +568,12 @@ packages:
 
   /@next/env/12.2.2:
     resolution: {integrity: sha512-BqDwE4gDl1F608TpnNxZqrCn6g48MBjvmWFEmeX5wEXDXh3IkAOw6ASKUgjT8H4OUePYFqghDFUss5ZhnbOUjw==}
-    dev: false
+
+  /@next/eslint-plugin-next/12.0.3:
+    resolution: {integrity: sha512-P7i+bMypneQcoRN+CX79xssvvIJCaw7Fndzbe7/lB0+LyRbVvGVyMUsFmLLbSxtZq4hvFMJ1p8wML/gsulMZWQ==}
+    dependencies:
+      glob: 7.1.7
+    dev: true
 
   /@next/eslint-plugin-next/12.2.2:
     resolution: {integrity: sha512-XOi0WzJhGH3Lk51SkSu9eZxF+IY1ZZhWcJTIGBycAbWU877IQa6+6KxMATWCOs7c+bmp6Sd8KywXJaDRxzu0JA==}
@@ -465,7 +587,6 @@ packages:
     cpu: [arm]
     os: [android]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@next/swc-android-arm64/12.2.2:
@@ -474,7 +595,6 @@ packages:
     cpu: [arm64]
     os: [android]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@next/swc-darwin-arm64/12.2.2:
@@ -483,7 +603,6 @@ packages:
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@next/swc-darwin-x64/12.2.2:
@@ -492,7 +611,6 @@ packages:
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@next/swc-freebsd-x64/12.2.2:
@@ -501,7 +619,6 @@ packages:
     cpu: [x64]
     os: [freebsd]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@next/swc-linux-arm-gnueabihf/12.2.2:
@@ -510,7 +627,6 @@ packages:
     cpu: [arm]
     os: [linux]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@next/swc-linux-arm64-gnu/12.2.2:
@@ -519,7 +635,6 @@ packages:
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@next/swc-linux-arm64-musl/12.2.2:
@@ -528,7 +643,6 @@ packages:
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@next/swc-linux-x64-gnu/12.2.2:
@@ -537,7 +651,6 @@ packages:
     cpu: [x64]
     os: [linux]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@next/swc-linux-x64-musl/12.2.2:
@@ -546,7 +659,6 @@ packages:
     cpu: [x64]
     os: [linux]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@next/swc-win32-arm64-msvc/12.2.2:
@@ -555,7 +667,6 @@ packages:
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@next/swc-win32-ia32-msvc/12.2.2:
@@ -564,7 +675,6 @@ packages:
     cpu: [ia32]
     os: [win32]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@next/swc-win32-x64-msvc/12.2.2:
@@ -573,7 +683,6 @@ packages:
     cpu: [x64]
     os: [win32]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@nodelib/fs.scandir/2.1.5:
@@ -582,12 +691,10 @@ packages:
     dependencies:
       '@nodelib/fs.stat': 2.0.5
       run-parallel: 1.2.0
-    dev: true
 
   /@nodelib/fs.stat/2.0.5:
     resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
     engines: {node: '>= 8'}
-    dev: true
 
   /@nodelib/fs.walk/1.2.8:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
@@ -595,7 +702,6 @@ packages:
     dependencies:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.13.0
-    dev: true
 
   /@rushstack/eslint-patch/1.2.0:
     resolution: {integrity: sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==}
@@ -605,6 +711,9 @@ packages:
     resolution: {integrity: sha512-556Az0VX7WR6UdoTn4htt/l3zPQ7bsQWK+HqdG4swV7beUCxo/BqmvbOpUkTIm/9ih86LIf1qsUnywNL3obGHw==}
     dependencies:
       tslib: 2.4.1
+
+  /@types/cookie/0.3.3:
+    resolution: {integrity: sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow==}
     dev: false
 
   /@types/hoist-non-react-statics/3.3.1:
@@ -630,6 +739,14 @@ packages:
     resolution: {integrity: sha512-/xUq6H2aQm261exT6iZTMifUySEt4GR5KX8eYyY+C4MSNPqSh9oNIP7tz2GLKTlFaiBbgZNxffoR3CVRG+cljw==}
     dev: true
 
+  /@types/nprogress/0.2.0:
+    resolution: {integrity: sha512-1cYJrqq9GezNFPsWTZpFut/d4CjpZqA0vhqDUPFWYKF1oIyBz5qnoYMzR+0C/T96t3ebLAC1SSnwrVOm5/j74A==}
+    dev: true
+
+  /@types/parse-json/4.0.0:
+    resolution: {integrity: sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==}
+    dev: false
+
   /@types/prop-types/15.7.5:
     resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==}
 
@@ -661,6 +778,14 @@ packages:
       redux: 4.2.0
     dev: false
 
+  /@types/react/17.0.34:
+    resolution: {integrity: sha512-46FEGrMjc2+8XhHXILr+3+/sTe3OfzSPU9YGKILLrUYbQ1CLQC9Daqo1KzENGXAWwrFwiY0l4ZbF20gRvgpWTg==}
+    dependencies:
+      '@types/prop-types': 15.7.5
+      '@types/scheduler': 0.16.2
+      csstype: 3.1.1
+    dev: true
+
   /@types/react/18.0.15:
     resolution: {integrity: sha512-iz3BtLuIYH1uWdsv6wXYdhozhqj20oD4/Hk2DNXIn1kFsmp9x8d9QB6FnPhfkbhd2PgEONt9Q1x/ebkwjfFLow==}
     dependencies:
@@ -681,6 +806,46 @@ packages:
     resolution: {integrity: sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==}
     dev: true
 
+  /@typescript-eslint/parser/4.33.0_wnilx7boviscikmvsfkd6ljepe:
+    resolution: {integrity: sha512-ZohdsbXadjGBSK0/r+d87X0SBmKzOq4/S5nzK6SBgJspFo9/CUDJ7hjayuze+JK7CZQLDMroqytp7pOcFKTxZA==}
+    engines: {node: ^10.12.0 || >=12.0.0}
+    peerDependencies:
+      eslint: ^5.0.0 || ^6.0.0 || ^7.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/scope-manager': 4.33.0
+      '@typescript-eslint/types': 4.33.0
+      '@typescript-eslint/typescript-estree': 4.33.0_typescript@4.4.4
+      debug: 4.3.4
+      eslint: 7.32.0
+      typescript: 4.4.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@typescript-eslint/parser/5.3.1_wnilx7boviscikmvsfkd6ljepe:
+    resolution: {integrity: sha512-TD+ONlx5c+Qhk21x9gsJAMRohWAUMavSOmJgv3JGy9dgPhuBd5Wok0lmMClZDyJNLLZK1JRKiATzCKZNUmoyfw==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/scope-manager': 5.3.1
+      '@typescript-eslint/types': 5.3.1
+      '@typescript-eslint/typescript-estree': 5.3.1_typescript@4.4.4
+      debug: 4.3.4
+      eslint: 7.32.0
+      typescript: 4.4.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@typescript-eslint/parser/5.45.0_he2ccbldppg44uulnyq4rwocfa:
     resolution: {integrity: sha512-brvs/WSM4fKUmF5Ot/gEve6qYiCMjm6w4HkHPfS6ZNmxTS0m0iNN4yOChImaCkqc1hRwFGqUyanMXuGal6oyyQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -701,6 +866,22 @@ packages:
       - supports-color
     dev: true
 
+  /@typescript-eslint/scope-manager/4.33.0:
+    resolution: {integrity: sha512-5IfJHpgTsTZuONKbODctL4kKuQje/bzBRkwHE8UOZ4f89Zeddg+EGZs8PD8NcN4LdM3ygHWYB3ukPAYjvl/qbQ==}
+    engines: {node: ^8.10.0 || ^10.13.0 || >=11.10.1}
+    dependencies:
+      '@typescript-eslint/types': 4.33.0
+      '@typescript-eslint/visitor-keys': 4.33.0
+    dev: true
+
+  /@typescript-eslint/scope-manager/5.3.1:
+    resolution: {integrity: sha512-XksFVBgAq0Y9H40BDbuPOTUIp7dn4u8oOuhcgGq7EoDP50eqcafkMVGrypyVGvDYHzjhdUCUwuwVUK4JhkMAMg==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      '@typescript-eslint/types': 5.3.1
+      '@typescript-eslint/visitor-keys': 5.3.1
+    dev: true
+
   /@typescript-eslint/scope-manager/5.45.0:
     resolution: {integrity: sha512-noDMjr87Arp/PuVrtvN3dXiJstQR1+XlQ4R1EvzG+NMgXi8CuMCXpb8JqNtFHKceVSQ985BZhfRdowJzbv4yKw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -709,11 +890,63 @@ packages:
       '@typescript-eslint/visitor-keys': 5.45.0
     dev: true
 
+  /@typescript-eslint/types/4.33.0:
+    resolution: {integrity: sha512-zKp7CjQzLQImXEpLt2BUw1tvOMPfNoTAfb8l51evhYbOEEzdWyQNmHWWGPR6hwKJDAi+1VXSBmnhL9kyVTTOuQ==}
+    engines: {node: ^8.10.0 || ^10.13.0 || >=11.10.1}
+    dev: true
+
+  /@typescript-eslint/types/5.3.1:
+    resolution: {integrity: sha512-bG7HeBLolxKHtdHG54Uac750eXuQQPpdJfCYuw4ZI3bZ7+GgKClMWM8jExBtp7NSP4m8PmLRM8+lhzkYnSmSxQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dev: true
+
   /@typescript-eslint/types/5.45.0:
     resolution: {integrity: sha512-QQij+u/vgskA66azc9dCmx+rev79PzX8uDHpsqSjEFtfF2gBUTRCpvYMh2gw2ghkJabNkPlSUCimsyBEQZd1DA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
+  /@typescript-eslint/typescript-estree/4.33.0_typescript@4.4.4:
+    resolution: {integrity: sha512-rkWRY1MPFzjwnEVHsxGemDzqqddw2QbTJlICPD9p9I9LfsO8fdmfQPOX3uKfUaGRDFJbfrtm/sXhVXN4E+bzCA==}
+    engines: {node: ^10.12.0 || >=12.0.0}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/types': 4.33.0
+      '@typescript-eslint/visitor-keys': 4.33.0
+      debug: 4.3.4
+      globby: 11.1.0
+      is-glob: 4.0.3
+      semver: 7.3.8
+      tsutils: 3.21.0_typescript@4.4.4
+      typescript: 4.4.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@typescript-eslint/typescript-estree/5.3.1_typescript@4.4.4:
+    resolution: {integrity: sha512-PwFbh/PKDVo/Wct6N3w+E4rLZxUDgsoII/GrWM2A62ETOzJd4M6s0Mu7w4CWsZraTbaC5UQI+dLeyOIFF1PquQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/types': 5.3.1
+      '@typescript-eslint/visitor-keys': 5.3.1
+      debug: 4.3.4
+      globby: 11.1.0
+      is-glob: 4.0.3
+      semver: 7.3.8
+      tsutils: 3.21.0_typescript@4.4.4
+      typescript: 4.4.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@typescript-eslint/typescript-estree/5.45.0_typescript@4.7.4:
     resolution: {integrity: sha512-maRhLGSzqUpFcZgXxg1qc/+H0bT36lHK4APhp0AEUVrpSwXiRAomm/JGjSG+kNUio5kAa3uekCYu/47cnGn5EQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -735,6 +968,22 @@ packages:
       - supports-color
     dev: true
 
+  /@typescript-eslint/visitor-keys/4.33.0:
+    resolution: {integrity: sha512-uqi/2aSz9g2ftcHWf8uLPJA70rUv6yuMW5Bohw+bwcuzaxQIHaKFZCKGoGXIrc9vkTJ3+0txM73K0Hq3d5wgIg==}
+    engines: {node: ^8.10.0 || ^10.13.0 || >=11.10.1}
+    dependencies:
+      '@typescript-eslint/types': 4.33.0
+      eslint-visitor-keys: 2.1.0
+    dev: true
+
+  /@typescript-eslint/visitor-keys/5.3.1:
+    resolution: {integrity: sha512-3cHUzUuVTuNHx0Gjjt5pEHa87+lzyqOiHXy/Gz+SJOCW1mpw9xQHIIEwnKn+Thph1mgWyZ90nboOcSuZr/jTTQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      '@typescript-eslint/types': 5.3.1
+      eslint-visitor-keys: 3.3.0
+    dev: true
+
   /@typescript-eslint/visitor-keys/5.45.0:
     resolution: {integrity: sha512-jc6Eccbn2RtQPr1s7th6jJWQHBHI6GBVQkCHoJFQ5UreaKm59Vxw+ynQUPPY2u2Amquc+7tmEoC2G52ApsGNNg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -743,6 +992,14 @@ packages:
       eslint-visitor-keys: 3.3.0
     dev: true
 
+  /acorn-jsx/5.3.2_acorn@7.4.1:
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+    dependencies:
+      acorn: 7.4.1
+    dev: true
+
   /acorn-jsx/5.3.2_acorn@8.8.1:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -757,18 +1014,15 @@ packages:
       acorn: 7.4.1
       acorn-walk: 7.2.0
       xtend: 4.0.2
-    dev: true
 
   /acorn-walk/7.2.0:
     resolution: {integrity: sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==}
     engines: {node: '>=0.4.0'}
-    dev: true
 
   /acorn/7.4.1:
     resolution: {integrity: sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==}
     engines: {node: '>=0.4.0'}
     hasBin: true
-    dev: true
 
   /acorn/8.8.1:
     resolution: {integrity: sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==}
@@ -785,17 +1039,36 @@ packages:
       uri-js: 4.4.1
     dev: true
 
+  /ajv/8.11.2:
+    resolution: {integrity: sha512-E4bfmKAhGiSTvMfL1Myyycaub+cUEU2/IvpylXkUu7CHBkBj1f/ikdzbD7YQ6FKUbixDxeYvB/xY4fvyroDlQg==}
+    dependencies:
+      fast-deep-equal: 3.1.3
+      json-schema-traverse: 1.0.0
+      require-from-string: 2.0.2
+      uri-js: 4.4.1
+    dev: true
+
+  /ansi-colors/4.1.3:
+    resolution: {integrity: sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==}
+    engines: {node: '>=6'}
+    dev: true
+
   /ansi-regex/5.0.1:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
     dev: true
 
+  /ansi-styles/3.2.1:
+    resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
+    engines: {node: '>=4'}
+    dependencies:
+      color-convert: 1.9.3
+
   /ansi-styles/4.3.0:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
     engines: {node: '>=8'}
     dependencies:
       color-convert: 2.0.1
-    dev: true
 
   /anymatch/3.1.3:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
@@ -803,10 +1076,14 @@ packages:
     dependencies:
       normalize-path: 3.0.0
       picomatch: 2.3.1
-    dev: true
 
   /arg/5.0.2:
     resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
+
+  /argparse/1.0.10:
+    resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
+    dependencies:
+      sprintf-js: 1.0.3
     dev: true
 
   /argparse/2.0.1:
@@ -871,6 +1148,11 @@ packages:
     resolution: {integrity: sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag==}
     dev: true
 
+  /astral-regex/2.0.0:
+    resolution: {integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==}
+    engines: {node: '>=8'}
+    dev: true
+
   /asynckit/0.4.0:
     resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
     dev: false
@@ -880,6 +1162,21 @@ packages:
     engines: {node: '>=4'}
     dev: false
 
+  /autoprefixer/10.4.13:
+    resolution: {integrity: sha512-49vKpMqcZYsJjwotvt4+h/BCjJVnhGwcLpDt5xkcaOG3eLrG/HUYLagrihYsQ+qrIBgIzX1Rw7a6L8I/ZA1Atg==}
+    engines: {node: ^10 || ^12 || >=14}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.1.0
+    dependencies:
+      browserslist: 4.21.4
+      caniuse-lite: 1.0.30001435
+      fraction.js: 4.2.0
+      normalize-range: 0.1.2
+      picocolors: 1.0.0
+      postcss-value-parser: 4.2.0
+    dev: false
+
   /autoprefixer/10.4.13_postcss@8.4.19:
     resolution: {integrity: sha512-49vKpMqcZYsJjwotvt4+h/BCjJVnhGwcLpDt5xkcaOG3eLrG/HUYLagrihYsQ+qrIBgIzX1Rw7a6L8I/ZA1Atg==}
     engines: {node: ^10 || ^12 || >=14}
@@ -917,26 +1214,22 @@ packages:
 
   /balanced-match/1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
-    dev: true
 
   /binary-extensions/2.2.0:
     resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
     engines: {node: '>=8'}
-    dev: true
 
   /brace-expansion/1.1.11:
     resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
     dependencies:
       balanced-match: 1.0.2
       concat-map: 0.0.1
-    dev: true
 
   /braces/3.0.2:
     resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==}
     engines: {node: '>=8'}
     dependencies:
       fill-range: 7.0.1
-    dev: true
 
   /browserslist/4.21.4:
     resolution: {integrity: sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==}
@@ -947,7 +1240,11 @@ packages:
       electron-to-chromium: 1.4.284
       node-releases: 2.0.6
       update-browserslist-db: 1.0.10_browserslist@4.21.4
-    dev: true
+
+  /bytes/3.1.2:
+    resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==}
+    engines: {node: '>= 0.8'}
+    dev: false
 
   /call-bind/1.0.2:
     resolution: {integrity: sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==}
@@ -959,23 +1256,28 @@ packages:
   /callsites/3.1.0:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
-    dev: true
 
   /camelcase-css/2.0.1:
     resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
     engines: {node: '>= 6'}
-    dev: true
 
   /caniuse-lite/1.0.30001435:
     resolution: {integrity: sha512-kdCkUTjR+v4YAJelyiDTqiu82BDr4W4CP5sgTA0ZBmqn30XfS2ZghPLMowik9TPhS+psWJiUNxsqLyurDbmutA==}
 
+  /chalk/2.4.2:
+    resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
+    engines: {node: '>=4'}
+    dependencies:
+      ansi-styles: 3.2.1
+      escape-string-regexp: 1.0.5
+      supports-color: 5.5.0
+
   /chalk/4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
     dependencies:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
-    dev: true
 
   /chokidar/3.5.3:
     resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
@@ -990,22 +1292,42 @@ packages:
       readdirp: 3.6.0
     optionalDependencies:
       fsevents: 2.3.2
-    dev: true
 
   /client-only/0.0.1:
     resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
     dev: false
 
+  /color-convert/1.9.3:
+    resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
+    dependencies:
+      color-name: 1.1.3
+
   /color-convert/2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
     dependencies:
       color-name: 1.1.4
-    dev: true
+
+  /color-name/1.1.3:
+    resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
 
   /color-name/1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
-    dev: true
+
+  /color-string/1.9.1:
+    resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==}
+    dependencies:
+      color-name: 1.1.4
+      simple-swizzle: 0.2.2
+    dev: false
+
+  /color/4.2.3:
+    resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==}
+    engines: {node: '>=12.5.0'}
+    dependencies:
+      color-convert: 2.0.1
+      color-string: 1.9.1
+    dev: false
 
   /combined-stream/1.0.8:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
@@ -1014,15 +1336,35 @@ packages:
       delayed-stream: 1.0.0
     dev: false
 
+  /commander/8.3.0:
+    resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
+    engines: {node: '>= 12'}
+    dev: false
+
   /concat-map/0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
-    dev: true
+
+  /cookie/0.4.2:
+    resolution: {integrity: sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==}
+    engines: {node: '>= 0.6'}
+    dev: false
 
   /core-js-pure/3.26.1:
     resolution: {integrity: sha512-VVXcDpp/xJ21KdULRq/lXdLzQAtX7+37LzpyfFM973il0tWSsDEoyzG38G14AjTpK9VTfiNM9jnFauq/CpaWGQ==}
     requiresBuild: true
     dev: true
 
+  /cosmiconfig/7.1.0:
+    resolution: {integrity: sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==}
+    engines: {node: '>=10'}
+    dependencies:
+      '@types/parse-json': 4.0.0
+      import-fresh: 3.3.0
+      parse-json: 5.2.0
+      path-type: 4.0.0
+      yaml: 1.10.2
+    dev: false
+
   /crelt/1.0.5:
     resolution: {integrity: sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA==}
     dev: false
@@ -1042,11 +1384,18 @@ packages:
       tiny-invariant: 1.3.1
     dev: false
 
+  /css-color-names/0.0.4:
+    resolution: {integrity: sha512-zj5D7X1U2h2zsXOAM8EyUREBnnts6H+Jm+d1M2DbiQQcUtnqgQsMrdo8JW9R80YFUmIdBZeMu5wvYM7hcgWP/Q==}
+    dev: false
+
+  /css-unit-converter/1.1.2:
+    resolution: {integrity: sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==}
+    dev: false
+
   /cssesc/3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
     hasBin: true
-    dev: true
 
   /csstype/3.1.1:
     resolution: {integrity: sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==}
@@ -1103,7 +1452,6 @@ packages:
 
   /defined/1.0.1:
     resolution: {integrity: sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==}
-    dev: true
 
   /delayed-stream/1.0.0:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
@@ -1118,11 +1466,9 @@ packages:
       acorn-node: 1.8.2
       defined: 1.0.1
       minimist: 1.2.7
-    dev: true
 
   /didyoumean/1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
-    dev: true
 
   /dir-glob/3.0.1:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
@@ -1133,7 +1479,6 @@ packages:
 
   /dlv/1.1.3:
     resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
-    dev: true
 
   /doctrine/2.1.0:
     resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
@@ -1151,12 +1496,28 @@ packages:
 
   /electron-to-chromium/1.4.284:
     resolution: {integrity: sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==}
+
+  /emoji-regex/8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
     dev: true
 
   /emoji-regex/9.2.2:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
     dev: true
 
+  /enquirer/2.3.6:
+    resolution: {integrity: sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==}
+    engines: {node: '>=8.6'}
+    dependencies:
+      ansi-colors: 4.1.3
+    dev: true
+
+  /error-ex/1.3.2:
+    resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
+    dependencies:
+      is-arrayish: 0.2.1
+    dev: false
+
   /es-abstract/1.20.4:
     resolution: {integrity: sha512-0UtvRN79eMe2L+UNEF1BwRe364sj/DXhQ/k5FmivgoSdpM90b8Jc0mDzKMGo7QS0BVbOP/bTwBKNnDc9rNzaPA==}
     engines: {node: '>= 0.4'}
@@ -1205,13 +1566,43 @@ packages:
   /escalade/3.1.1:
     resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
     engines: {node: '>=6'}
-    dev: true
+
+  /escape-string-regexp/1.0.5:
+    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
+    engines: {node: '>=0.8.0'}
 
   /escape-string-regexp/4.0.0:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
     dev: true
 
+  /eslint-config-next/12.0.3_aspctlc26mrbkkrn6pfqr4iakm:
+    resolution: {integrity: sha512-q+mX6jhk3HrCo39G18MLhiC6f8zJnTA00f30RSuVUWsv45SQUm6r62oXVqrbAgMEybe0yx/GDRvfA6LvSolw6Q==}
+    peerDependencies:
+      eslint: ^7.23.0
+      next: '>=10.2.0'
+      typescript: '>=3.3.1'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@next/eslint-plugin-next': 12.0.3
+      '@rushstack/eslint-patch': 1.2.0
+      '@typescript-eslint/parser': 4.33.0_wnilx7boviscikmvsfkd6ljepe
+      eslint: 7.32.0
+      eslint-import-resolver-node: 0.3.6
+      eslint-import-resolver-typescript: 2.7.1_hpmu7kn6tcn2vnxpfzvv33bxmy
+      eslint-plugin-import: 2.26.0_k2fj7mtd2vnwiotnzv3dk5dwma
+      eslint-plugin-jsx-a11y: 6.6.1_eslint@7.32.0
+      eslint-plugin-react: 7.31.11_eslint@7.32.0
+      eslint-plugin-react-hooks: 4.6.0_eslint@7.32.0
+      next: 12.2.2_sfoxds7t5ydpegc3knd667wn6m
+      typescript: 4.4.4
+    transitivePeerDependencies:
+      - eslint-import-resolver-webpack
+      - supports-color
+    dev: true
+
   /eslint-config-next/12.2.2_he2ccbldppg44uulnyq4rwocfa:
     resolution: {integrity: sha512-oJhWBLC4wDYYUFv/5APbjHUFd0QRFCojMdj/QnMoOEktmeTvwnnoA8F8uaXs0fQgsaTK0tbUxBRv9/Y4/rpxOA==}
     peerDependencies:
@@ -1237,6 +1628,15 @@ packages:
       - supports-color
     dev: true
 
+  /eslint-config-prettier/8.3.0_eslint@7.32.0:
+    resolution: {integrity: sha512-BgZuLUSeKzvlL/VUjx/Yb787VQ26RU3gGjA3iiFvdsp/2bMfVIWUVP7tjxtjS0e+HP409cPlPvNkQloz8C91ew==}
+    hasBin: true
+    peerDependencies:
+      eslint: '>=7.0.0'
+    dependencies:
+      eslint: 7.32.0
+    dev: true
+
   /eslint-config-turbo/0.0.7_eslint@8.28.0:
     resolution: {integrity: sha512-WbrGlyfs94rOXrhombi1wjIAYGdV2iosgJRndOZtmDQeq5GLTzYmBUCJQZWtLBEBUPCj96RxZ2OL7Cn+xv/Azg==}
     peerDependencies:
@@ -1273,6 +1673,54 @@ packages:
       - supports-color
     dev: true
 
+  /eslint-import-resolver-typescript/2.7.1_hpmu7kn6tcn2vnxpfzvv33bxmy:
+    resolution: {integrity: sha512-00UbgGwV8bSgUv34igBDbTOtKhqoRMy9bFjNehT40bXg6585PNIct8HhXZ0SybqB9rWtXj9crcku8ndDn/gIqQ==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      eslint: '*'
+      eslint-plugin-import: '*'
+    dependencies:
+      debug: 4.3.4
+      eslint: 7.32.0
+      eslint-plugin-import: 2.26.0_k2fj7mtd2vnwiotnzv3dk5dwma
+      glob: 7.2.3
+      is-glob: 4.0.3
+      resolve: 1.22.1
+      tsconfig-paths: 3.14.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /eslint-module-utils/2.7.4_iy2qznq4xg5ozlfdp4q3uhifbm:
+    resolution: {integrity: sha512-j4GT+rqzCoRKHwURX7pddtIPGySnX9Si/cgMI5ztrcqOPtk5dDEeZ34CQVPphnqkJytlc97Vuk05Um2mJ3gEQA==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint: '*'
+      eslint-import-resolver-node: '*'
+      eslint-import-resolver-typescript: '*'
+      eslint-import-resolver-webpack: '*'
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+      eslint:
+        optional: true
+      eslint-import-resolver-node:
+        optional: true
+      eslint-import-resolver-typescript:
+        optional: true
+      eslint-import-resolver-webpack:
+        optional: true
+    dependencies:
+      '@typescript-eslint/parser': 4.33.0_wnilx7boviscikmvsfkd6ljepe
+      debug: 3.2.7
+      eslint: 7.32.0
+      eslint-import-resolver-node: 0.3.6
+      eslint-import-resolver-typescript: 2.7.1_hpmu7kn6tcn2vnxpfzvv33bxmy
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /eslint-module-utils/2.7.4_poxfrw2j4ftqqsskchfqmwnsqu:
     resolution: {integrity: sha512-j4GT+rqzCoRKHwURX7pddtIPGySnX9Si/cgMI5ztrcqOPtk5dDEeZ34CQVPphnqkJytlc97Vuk05Um2mJ3gEQA==}
     engines: {node: '>=4'}
@@ -1334,6 +1782,59 @@ packages:
       - supports-color
     dev: true
 
+  /eslint-plugin-import/2.26.0_k2fj7mtd2vnwiotnzv3dk5dwma:
+    resolution: {integrity: sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+    dependencies:
+      '@typescript-eslint/parser': 4.33.0_wnilx7boviscikmvsfkd6ljepe
+      array-includes: 3.1.6
+      array.prototype.flat: 1.3.1
+      debug: 2.6.9
+      doctrine: 2.1.0
+      eslint: 7.32.0
+      eslint-import-resolver-node: 0.3.6
+      eslint-module-utils: 2.7.4_iy2qznq4xg5ozlfdp4q3uhifbm
+      has: 1.0.3
+      is-core-module: 2.11.0
+      is-glob: 4.0.3
+      minimatch: 3.1.2
+      object.values: 1.1.6
+      resolve: 1.22.1
+      tsconfig-paths: 3.14.1
+    transitivePeerDependencies:
+      - eslint-import-resolver-typescript
+      - eslint-import-resolver-webpack
+      - supports-color
+    dev: true
+
+  /eslint-plugin-jsx-a11y/6.6.1_eslint@7.32.0:
+    resolution: {integrity: sha512-sXgFVNHiWffBq23uiS/JaP6eVR622DqwB4yTzKvGZGcPq6/yZ3WmOZfuBks/vHWo9GaFOqC2ZK4i6+C35knx7Q==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
+    dependencies:
+      '@babel/runtime': 7.20.6
+      aria-query: 4.2.2
+      array-includes: 3.1.6
+      ast-types-flow: 0.0.7
+      axe-core: 4.5.2
+      axobject-query: 2.2.0
+      damerau-levenshtein: 1.0.8
+      emoji-regex: 9.2.2
+      eslint: 7.32.0
+      has: 1.0.3
+      jsx-ast-utils: 3.3.3
+      language-tags: 1.0.5
+      minimatch: 3.1.2
+      semver: 6.3.0
+    dev: true
+
   /eslint-plugin-jsx-a11y/6.6.1_eslint@8.20.0:
     resolution: {integrity: sha512-sXgFVNHiWffBq23uiS/JaP6eVR622DqwB4yTzKvGZGcPq6/yZ3WmOZfuBks/vHWo9GaFOqC2ZK4i6+C35knx7Q==}
     engines: {node: '>=4.0'}
@@ -1356,6 +1857,24 @@ packages:
       semver: 6.3.0
     dev: true
 
+  /eslint-plugin-react-hooks/4.3.0_eslint@7.32.0:
+    resolution: {integrity: sha512-XslZy0LnMn+84NEG9jSGR6eGqaZB3133L8xewQo3fQagbQuGt7a63gf+P1NGKZavEYEC3UXaWEAA/AqDkuN6xA==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0
+    dependencies:
+      eslint: 7.32.0
+    dev: true
+
+  /eslint-plugin-react-hooks/4.6.0_eslint@7.32.0:
+    resolution: {integrity: sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0
+    dependencies:
+      eslint: 7.32.0
+    dev: true
+
   /eslint-plugin-react-hooks/4.6.0_eslint@8.20.0:
     resolution: {integrity: sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==}
     engines: {node: '>=10'}
@@ -1365,6 +1884,53 @@ packages:
       eslint: 8.20.0
     dev: true
 
+  /eslint-plugin-react/7.27.0_eslint@7.32.0:
+    resolution: {integrity: sha512-0Ut+CkzpppgFtoIhdzi2LpdpxxBvgFf99eFqWxJnUrO7mMe0eOiNpou6rvNYeVVV6lWZvTah0BFne7k5xHjARg==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
+    dependencies:
+      array-includes: 3.1.6
+      array.prototype.flatmap: 1.3.1
+      doctrine: 2.1.0
+      eslint: 7.32.0
+      estraverse: 5.3.0
+      jsx-ast-utils: 3.3.3
+      minimatch: 3.1.2
+      object.entries: 1.1.6
+      object.fromentries: 2.0.6
+      object.hasown: 1.1.2
+      object.values: 1.1.6
+      prop-types: 15.8.1
+      resolve: 2.0.0-next.4
+      semver: 6.3.0
+      string.prototype.matchall: 4.0.8
+    dev: true
+
+  /eslint-plugin-react/7.31.11_eslint@7.32.0:
+    resolution: {integrity: sha512-TTvq5JsT5v56wPa9OYHzsrOlHzKZKjV+aLgS+55NJP/cuzdiQPC7PfYoUjMoxlffKtvijpk7vA/jmuqRb9nohw==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
+    dependencies:
+      array-includes: 3.1.6
+      array.prototype.flatmap: 1.3.1
+      array.prototype.tosorted: 1.1.1
+      doctrine: 2.1.0
+      eslint: 7.32.0
+      estraverse: 5.3.0
+      jsx-ast-utils: 3.3.3
+      minimatch: 3.1.2
+      object.entries: 1.1.6
+      object.fromentries: 2.0.6
+      object.hasown: 1.1.2
+      object.values: 1.1.6
+      prop-types: 15.8.1
+      resolve: 2.0.0-next.4
+      semver: 6.3.0
+      string.prototype.matchall: 4.0.8
+    dev: true
+
   /eslint-plugin-react/7.31.11_eslint@8.20.0:
     resolution: {integrity: sha512-TTvq5JsT5v56wPa9OYHzsrOlHzKZKjV+aLgS+55NJP/cuzdiQPC7PfYoUjMoxlffKtvijpk7vA/jmuqRb9nohw==}
     engines: {node: '>=4'}
@@ -1397,6 +1963,14 @@ packages:
       eslint: 8.28.0
     dev: true
 
+  /eslint-scope/5.1.1:
+    resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==}
+    engines: {node: '>=8.0.0'}
+    dependencies:
+      esrecurse: 4.3.0
+      estraverse: 4.3.0
+    dev: true
+
   /eslint-scope/7.1.1:
     resolution: {integrity: sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -1405,6 +1979,13 @@ packages:
       estraverse: 5.3.0
     dev: true
 
+  /eslint-utils/2.1.0:
+    resolution: {integrity: sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==}
+    engines: {node: '>=6'}
+    dependencies:
+      eslint-visitor-keys: 1.3.0
+    dev: true
+
   /eslint-utils/3.0.0_eslint@8.20.0:
     resolution: {integrity: sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==}
     engines: {node: ^10.0.0 || ^12.0.0 || >= 14.0.0}
@@ -1425,6 +2006,11 @@ packages:
       eslint-visitor-keys: 2.1.0
     dev: true
 
+  /eslint-visitor-keys/1.3.0:
+    resolution: {integrity: sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==}
+    engines: {node: '>=4'}
+    dev: true
+
   /eslint-visitor-keys/2.1.0:
     resolution: {integrity: sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==}
     engines: {node: '>=10'}
@@ -1435,6 +2021,55 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
+  /eslint/7.32.0:
+    resolution: {integrity: sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA==}
+    engines: {node: ^10.12.0 || >=12.0.0}
+    hasBin: true
+    dependencies:
+      '@babel/code-frame': 7.12.11
+      '@eslint/eslintrc': 0.4.3
+      '@humanwhocodes/config-array': 0.5.0
+      ajv: 6.12.6
+      chalk: 4.1.2
+      cross-spawn: 7.0.3
+      debug: 4.3.4
+      doctrine: 3.0.0
+      enquirer: 2.3.6
+      escape-string-regexp: 4.0.0
+      eslint-scope: 5.1.1
+      eslint-utils: 2.1.0
+      eslint-visitor-keys: 2.1.0
+      espree: 7.3.1
+      esquery: 1.4.0
+      esutils: 2.0.3
+      fast-deep-equal: 3.1.3
+      file-entry-cache: 6.0.1
+      functional-red-black-tree: 1.0.1
+      glob-parent: 5.1.2
+      globals: 13.18.0
+      ignore: 4.0.6
+      import-fresh: 3.3.0
+      imurmurhash: 0.1.4
+      is-glob: 4.0.3
+      js-yaml: 3.14.1
+      json-stable-stringify-without-jsonify: 1.0.1
+      levn: 0.4.1
+      lodash.merge: 4.6.2
+      minimatch: 3.1.2
+      natural-compare: 1.4.0
+      optionator: 0.9.1
+      progress: 2.0.3
+      regexpp: 3.2.0
+      semver: 7.3.8
+      strip-ansi: 6.0.1
+      strip-json-comments: 3.1.1
+      table: 6.8.1
+      text-table: 0.2.0
+      v8-compile-cache: 2.3.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /eslint/8.20.0:
     resolution: {integrity: sha512-d4ixhz5SKCa1D6SCPrivP7yYVi7nyD6A4vs6HIAul9ujBzcEmZVM3/0NN/yu5nKhmO1wjp5xQ46iRfmDGlOviA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -1527,6 +2162,15 @@ packages:
       - supports-color
     dev: true
 
+  /espree/7.3.1:
+    resolution: {integrity: sha512-v3JCNCE64umkFpmkFGqzVKsOT0tN1Zr+ueqLZfpV1Ob8e+CEgPWa+OxCoGH3tnhimMKIaBm4m/vaRpJ/krRz2g==}
+    engines: {node: ^10.12.0 || >=12.0.0}
+    dependencies:
+      acorn: 7.4.1
+      acorn-jsx: 5.3.2_acorn@7.4.1
+      eslint-visitor-keys: 1.3.0
+    dev: true
+
   /espree/9.4.1:
     resolution: {integrity: sha512-XwctdmTO6SIvCzd9810yyNzIrOrqNYV9Koizx4C/mRhf9uq0o4yHoCEU/670pOxOL/MSraektvSAji79kX90Vg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -1536,6 +2180,12 @@ packages:
       eslint-visitor-keys: 3.3.0
     dev: true
 
+  /esprima/4.0.1:
+    resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
+    engines: {node: '>=4'}
+    hasBin: true
+    dev: true
+
   /esquery/1.4.0:
     resolution: {integrity: sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==}
     engines: {node: '>=0.10'}
@@ -1550,6 +2200,11 @@ packages:
       estraverse: 5.3.0
     dev: true
 
+  /estraverse/4.3.0:
+    resolution: {integrity: sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==}
+    engines: {node: '>=4.0'}
+    dev: true
+
   /estraverse/5.3.0:
     resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
     engines: {node: '>=4.0'}
@@ -1573,7 +2228,6 @@ packages:
       glob-parent: 5.1.2
       merge2: 1.4.1
       micromatch: 4.0.5
-    dev: true
 
   /fast-json-stable-stringify/2.1.0:
     resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
@@ -1587,7 +2241,6 @@ packages:
     resolution: {integrity: sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==}
     dependencies:
       reusify: 1.0.4
-    dev: true
 
   /file-entry-cache/6.0.1:
     resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
@@ -1608,7 +2261,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       to-regex-range: 5.0.1
-    dev: true
 
   /find-up/5.0.0:
     resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
@@ -1651,23 +2303,28 @@ packages:
 
   /fraction.js/4.2.0:
     resolution: {integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==}
-    dev: true
+
+  /fs-extra/10.1.0:
+    resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      graceful-fs: 4.2.10
+      jsonfile: 6.1.0
+      universalify: 2.0.0
+    dev: false
 
   /fs.realpath/1.0.0:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
-    dev: true
 
   /fsevents/2.3.2:
     resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /function-bind/1.1.1:
     resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
-    dev: true
 
   /function.prototype.name/1.1.5:
     resolution: {integrity: sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==}
@@ -1708,14 +2365,12 @@ packages:
     engines: {node: '>= 6'}
     dependencies:
       is-glob: 4.0.3
-    dev: true
 
   /glob-parent/6.0.2:
     resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
     engines: {node: '>=10.13.0'}
     dependencies:
       is-glob: 4.0.3
-    dev: true
 
   /glob/7.1.7:
     resolution: {integrity: sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==}
@@ -1737,7 +2392,6 @@ packages:
       minimatch: 3.1.2
       once: 1.4.0
       path-is-absolute: 1.0.1
-    dev: true
 
   /globals/13.18.0:
     resolution: {integrity: sha512-/mR4KI8Ps2spmoc0Ulu9L7agOF0du1CZNQ3dke8yItYlyKNmGrkONemBbd6V8UTc1Wgcqn21t3WYB7dbRmh6/A==}
@@ -1758,6 +2412,10 @@ packages:
       slash: 3.0.0
     dev: true
 
+  /graceful-fs/4.2.10:
+    resolution: {integrity: sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==}
+    dev: false
+
   /grapheme-splitter/1.0.4:
     resolution: {integrity: sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==}
     dev: true
@@ -1766,10 +2424,13 @@ packages:
     resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==}
     dev: true
 
+  /has-flag/3.0.0:
+    resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
+    engines: {node: '>=4'}
+
   /has-flag/4.0.0:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
-    dev: true
 
   /has-property-descriptors/1.0.0:
     resolution: {integrity: sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==}
@@ -1794,7 +2455,10 @@ packages:
     engines: {node: '>= 0.4.0'}
     dependencies:
       function-bind: 1.1.1
-    dev: true
+
+  /hex-color-regex/1.1.0:
+    resolution: {integrity: sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==}
+    dev: false
 
   /hoist-non-react-statics/3.3.2:
     resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
@@ -1802,6 +2466,24 @@ packages:
       react-is: 16.13.1
     dev: false
 
+  /hsl-regex/1.0.0:
+    resolution: {integrity: sha512-M5ezZw4LzXbBKMruP+BNANf0k+19hDQMgpzBIYnya//Al+fjNct9Wf3b1WedLqdEs2hKBvxq/jh+DsHJLj0F9A==}
+    dev: false
+
+  /hsla-regex/1.0.0:
+    resolution: {integrity: sha512-7Wn5GMLuHBjZCb2bTmnDOycho0p/7UVaAeqXZGbHrBCl6Yd/xDhQJAXe6Ga9AXJH2I5zY1dEdYw2u1UptnSBJA==}
+    dev: false
+
+  /html-tags/3.2.0:
+    resolution: {integrity: sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg==}
+    engines: {node: '>=8'}
+    dev: false
+
+  /ignore/4.0.6:
+    resolution: {integrity: sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==}
+    engines: {node: '>= 4'}
+    dev: true
+
   /ignore/5.2.1:
     resolution: {integrity: sha512-d2qQLzTJ9WxQftPAuEQpSPmKqzxePjzVbpAVv62AQ64NTL+wR4JkrVqR/LqFsFEUsHDAiId52mJteHDFuDkElA==}
     engines: {node: '>= 4'}
@@ -1813,7 +2495,6 @@ packages:
     dependencies:
       parent-module: 1.0.1
       resolve-from: 4.0.0
-    dev: true
 
   /imurmurhash/0.1.4:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
@@ -1825,11 +2506,9 @@ packages:
     dependencies:
       once: 1.4.0
       wrappy: 1.0.2
-    dev: true
 
   /inherits/2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
-    dev: true
 
   /internal-slot/1.0.3:
     resolution: {integrity: sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==}
@@ -1840,6 +2519,14 @@ packages:
       side-channel: 1.0.4
     dev: true
 
+  /is-arrayish/0.2.1:
+    resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
+    dev: false
+
+  /is-arrayish/0.3.2:
+    resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
+    dev: false
+
   /is-bigint/1.0.4:
     resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==}
     dependencies:
@@ -1851,7 +2538,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       binary-extensions: 2.2.0
-    dev: true
 
   /is-boolean-object/1.1.2:
     resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==}
@@ -1866,11 +2552,21 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
+  /is-color-stop/1.1.0:
+    resolution: {integrity: sha512-H1U8Vz0cfXNujrJzEcvvwMDW9Ra+biSYA3ThdQvAnMLJkEHQXn6bWzLkxHtVYJ+Sdbx0b6finn3jZiaVe7MAHA==}
+    dependencies:
+      css-color-names: 0.0.4
+      hex-color-regex: 1.1.0
+      hsl-regex: 1.0.0
+      hsla-regex: 1.0.0
+      rgb-regex: 1.0.1
+      rgba-regex: 1.0.0
+    dev: false
+
   /is-core-module/2.11.0:
     resolution: {integrity: sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==}
     dependencies:
       has: 1.0.3
-    dev: true
 
   /is-date-object/1.0.5:
     resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==}
@@ -1882,6 +2578,10 @@ packages:
   /is-extglob/2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
+
+  /is-fullwidth-code-point/3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
     dev: true
 
   /is-glob/4.0.3:
@@ -1889,7 +2589,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       is-extglob: 2.1.1
-    dev: true
 
   /is-negative-zero/2.0.2:
     resolution: {integrity: sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==}
@@ -1906,7 +2605,6 @@ packages:
   /is-number/7.0.0:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
-    dev: true
 
   /is-path-inside/3.0.3:
     resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
@@ -1963,6 +2661,14 @@ packages:
   /js-tokens/4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
+  /js-yaml/3.14.1:
+    resolution: {integrity: sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==}
+    hasBin: true
+    dependencies:
+      argparse: 1.0.10
+      esprima: 4.0.1
+    dev: true
+
   /js-yaml/4.1.0:
     resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
     hasBin: true
@@ -1970,10 +2676,18 @@ packages:
       argparse: 2.0.1
     dev: true
 
+  /json-parse-even-better-errors/2.3.1:
+    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
+    dev: false
+
   /json-schema-traverse/0.4.1:
     resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
     dev: true
 
+  /json-schema-traverse/1.0.0:
+    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
+    dev: true
+
   /json-stable-stringify-without-jsonify/1.0.1:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
     dev: true
@@ -1985,6 +2699,14 @@ packages:
       minimist: 1.2.7
     dev: true
 
+  /jsonfile/6.1.0:
+    resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
+    dependencies:
+      universalify: 2.0.0
+    optionalDependencies:
+      graceful-fs: 4.2.10
+    dev: false
+
   /jsx-ast-utils/3.3.3:
     resolution: {integrity: sha512-fYQHZTZ8jSfmWZ0iyzfwiU4WDX4HpHbMCZ3gPlWYiCl3BoeOTsqKBqnTVfH2rYT7eP5c3sVbeSPHnnJOaTrWiw==}
     engines: {node: '>=4.0'}
@@ -2018,7 +2740,10 @@ packages:
   /lilconfig/2.0.6:
     resolution: {integrity: sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==}
     engines: {node: '>=10'}
-    dev: true
+
+  /lines-and-columns/1.2.4:
+    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+    dev: false
 
   /locate-path/6.0.0:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
@@ -2035,6 +2760,14 @@ packages:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
     dev: true
 
+  /lodash.topath/4.5.2:
+    resolution: {integrity: sha512-1/W4dM+35DwvE/iEd1M9ekewOSTlpFekhw9mhAtrwjVqUr83/ilQiyAvmg4tVX7Unkcfl1KC+i9WdaT4B6aQcg==}
+    dev: false
+
+  /lodash.truncate/4.4.2:
+    resolution: {integrity: sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==}
+    dev: true
+
   /lodash/4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
     dev: false
@@ -2063,7 +2796,6 @@ packages:
   /merge2/1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
-    dev: true
 
   /micromatch/4.0.5:
     resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==}
@@ -2071,7 +2803,6 @@ packages:
     dependencies:
       braces: 3.0.2
       picomatch: 2.3.1
-    dev: true
 
   /mime-db/1.52.0:
     resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
@@ -2089,11 +2820,14 @@ packages:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
     dependencies:
       brace-expansion: 1.1.11
-    dev: true
 
   /minimist/1.2.7:
     resolution: {integrity: sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==}
-    dev: true
+
+  /modern-normalize/1.1.0:
+    resolution: {integrity: sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA==}
+    engines: {node: '>=6'}
+    dev: false
 
   /ms/2.0.0:
     resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
@@ -2112,6 +2846,12 @@ packages:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
     dev: true
 
+  /next-cookies/2.0.3:
+    resolution: {integrity: sha512-YVCQzwZx+sz+KqLO4y9niHH9jjz6jajlEQbAKfsYVT6DOfngb/0k5l6vFK4rmpExVug96pGag8OBsdSRL9FZhQ==}
+    dependencies:
+      universal-cookie: 4.0.4
+    dev: false
+
   /next/12.2.2_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-zAYFY45aBry/PlKONqtlloRFqU/We3zWYdn2NoGvDZkoYUYQSJC8WMcalS5C19MxbCZLUVCX7D7a6gTGgl2yLg==}
     engines: {node: '>=12.22.0'}
@@ -2157,24 +2897,80 @@ packages:
       - babel-plugin-macros
     dev: false
 
+  /next/12.2.2_sfoxds7t5ydpegc3knd667wn6m:
+    resolution: {integrity: sha512-zAYFY45aBry/PlKONqtlloRFqU/We3zWYdn2NoGvDZkoYUYQSJC8WMcalS5C19MxbCZLUVCX7D7a6gTGgl2yLg==}
+    engines: {node: '>=12.22.0'}
+    hasBin: true
+    peerDependencies:
+      fibers: '>= 3.1.0'
+      node-sass: ^6.0.0 || ^7.0.0
+      react: ^17.0.2 || ^18.0.0-0
+      react-dom: ^17.0.2 || ^18.0.0-0
+      sass: ^1.3.0
+    peerDependenciesMeta:
+      fibers:
+        optional: true
+      node-sass:
+        optional: true
+      sass:
+        optional: true
+    dependencies:
+      '@next/env': 12.2.2
+      '@swc/helpers': 0.4.2
+      caniuse-lite: 1.0.30001435
+      postcss: 8.4.5
+      react: 17.0.2
+      react-dom: 17.0.2_react@17.0.2
+      styled-jsx: 5.0.2_react@17.0.2
+      use-sync-external-store: 1.1.0_react@17.0.2
+    optionalDependencies:
+      '@next/swc-android-arm-eabi': 12.2.2
+      '@next/swc-android-arm64': 12.2.2
+      '@next/swc-darwin-arm64': 12.2.2
+      '@next/swc-darwin-x64': 12.2.2
+      '@next/swc-freebsd-x64': 12.2.2
+      '@next/swc-linux-arm-gnueabihf': 12.2.2
+      '@next/swc-linux-arm64-gnu': 12.2.2
+      '@next/swc-linux-arm64-musl': 12.2.2
+      '@next/swc-linux-x64-gnu': 12.2.2
+      '@next/swc-linux-x64-musl': 12.2.2
+      '@next/swc-win32-arm64-msvc': 12.2.2
+      '@next/swc-win32-ia32-msvc': 12.2.2
+      '@next/swc-win32-x64-msvc': 12.2.2
+    transitivePeerDependencies:
+      - '@babel/core'
+      - babel-plugin-macros
+
+  /node-emoji/1.11.0:
+    resolution: {integrity: sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A==}
+    dependencies:
+      lodash: 4.17.21
+    dev: false
+
   /node-releases/2.0.6:
     resolution: {integrity: sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==}
-    dev: true
 
   /normalize-path/3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /normalize-range/0.1.2:
     resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
     engines: {node: '>=0.10.0'}
-    dev: true
+
+  /nprogress/0.2.0:
+    resolution: {integrity: sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==}
+    dev: false
 
   /object-assign/4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
 
+  /object-hash/2.2.0:
+    resolution: {integrity: sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==}
+    engines: {node: '>= 6'}
+    dev: false
+
   /object-hash/3.0.0:
     resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
     engines: {node: '>= 6'}
@@ -2237,7 +3033,6 @@ packages:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
     dependencies:
       wrappy: 1.0.2
-    dev: true
 
   /optionator/0.9.1:
     resolution: {integrity: sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==}
@@ -2274,7 +3069,16 @@ packages:
     engines: {node: '>=6'}
     dependencies:
       callsites: 3.1.0
-    dev: true
+
+  /parse-json/5.2.0:
+    resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
+    engines: {node: '>=8'}
+    dependencies:
+      '@babel/code-frame': 7.18.6
+      error-ex: 1.3.2
+      json-parse-even-better-errors: 2.3.1
+      lines-and-columns: 1.2.4
+    dev: false
 
   /path-exists/4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
@@ -2284,7 +3088,6 @@ packages:
   /path-is-absolute/1.0.1:
     resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /path-key/3.1.1:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
@@ -2293,12 +3096,10 @@ packages:
 
   /path-parse/1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
-    dev: true
 
   /path-type/4.0.0:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
-    dev: true
 
   /picocolors/1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
@@ -2306,7 +3107,6 @@ packages:
   /picomatch/2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
-    dev: true
 
   /pify/2.3.0:
     resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
@@ -2325,6 +3125,14 @@ packages:
       resolve: 1.22.1
     dev: true
 
+  /postcss-js/3.0.3:
+    resolution: {integrity: sha512-gWnoWQXKFw65Hk/mi2+WTQTHdPD5UJdDXZmX073EY/B3BWnYjO4F4t0VneTCnCGQ5E5GsCdMkzPaTXwl3r5dJw==}
+    engines: {node: '>=10.0'}
+    dependencies:
+      camelcase-css: 2.0.1
+      postcss: 8.4.19
+    dev: false
+
   /postcss-js/4.0.0_postcss@8.4.19:
     resolution: {integrity: sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==}
     engines: {node: ^12 || ^14 || >= 16}
@@ -2335,6 +3143,22 @@ packages:
       postcss: 8.4.19
     dev: true
 
+  /postcss-load-config/3.1.4:
+    resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
+    engines: {node: '>= 10'}
+    peerDependencies:
+      postcss: '>=8.0.9'
+      ts-node: '>=9.0.0'
+    peerDependenciesMeta:
+      postcss:
+        optional: true
+      ts-node:
+        optional: true
+    dependencies:
+      lilconfig: 2.0.6
+      yaml: 1.10.2
+    dev: false
+
   /postcss-load-config/3.1.4_postcss@8.4.19:
     resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
     engines: {node: '>= 10'}
@@ -2352,6 +3176,15 @@ packages:
       yaml: 1.10.2
     dev: true
 
+  /postcss-nested/5.0.6:
+    resolution: {integrity: sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.2.14
+    dependencies:
+      postcss-selector-parser: 6.0.11
+    dev: false
+
   /postcss-nested/6.0.0_postcss@8.4.19:
     resolution: {integrity: sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==}
     engines: {node: '>=12.0'}
@@ -2368,11 +3201,13 @@ packages:
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
-    dev: true
+
+  /postcss-value-parser/3.3.1:
+    resolution: {integrity: sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==}
+    dev: false
 
   /postcss-value-parser/4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
-    dev: true
 
   /postcss/8.4.19:
     resolution: {integrity: sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==}
@@ -2381,7 +3216,6 @@ packages:
       nanoid: 3.3.4
       picocolors: 1.0.0
       source-map-js: 1.0.2
-    dev: true
 
   /postcss/8.4.5:
     resolution: {integrity: sha512-jBDboWM8qpaqwkMwItqTQTiFikhs/67OYVvblFFTM7MrZjt6yMKd6r2kgXizEbTTljacm4NldIlZnhbjr84QYg==}
@@ -2390,18 +3224,33 @@ packages:
       nanoid: 3.3.4
       picocolors: 1.0.0
       source-map-js: 1.0.2
-    dev: false
 
   /prelude-ls/1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
     dev: true
 
+  /prettier/2.4.1:
+    resolution: {integrity: sha512-9fbDAXSBcc6Bs1mZrDYb3XKzDLm4EXXL9sC1LqKP5rZkT6KRr/rf9amVUcODVXgguK/isJz0d0hP72WeaKWsvA==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+    dev: true
+
+  /pretty-hrtime/1.0.3:
+    resolution: {integrity: sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==}
+    engines: {node: '>= 0.8'}
+    dev: false
+
   /prismjs/1.29.0:
     resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
     engines: {node: '>=6'}
     dev: false
 
+  /progress/2.0.3:
+    resolution: {integrity: sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==}
+    engines: {node: '>=0.4.0'}
+    dev: true
+
   /prop-types/15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
     dependencies:
@@ -2530,14 +3379,22 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /purgecss/4.1.3:
+    resolution: {integrity: sha512-99cKy4s+VZoXnPxaoM23e5ABcP851nC2y2GROkkjS8eJaJtlciGavd7iYAw2V84WeBqggZ12l8ef44G99HmTaw==}
+    hasBin: true
+    dependencies:
+      commander: 8.3.0
+      glob: 7.2.3
+      postcss: 8.4.19
+      postcss-selector-parser: 6.0.11
+    dev: false
+
   /queue-microtask/1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
-    dev: true
 
   /quick-lru/5.1.1:
     resolution: {integrity: sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==}
     engines: {node: '>=10'}
-    dev: true
 
   /raf-schd/4.0.3:
     resolution: {integrity: sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==}
@@ -2577,6 +3434,16 @@ packages:
       tinycolor2: 1.4.2
     dev: false
 
+  /react-dom/17.0.2_react@17.0.2:
+    resolution: {integrity: sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==}
+    peerDependencies:
+      react: 17.0.2
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+      react: 17.0.2
+      scheduler: 0.20.2
+
   /react-dom/18.2.0_react@18.2.0:
     resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
     peerDependencies:
@@ -2647,6 +3514,13 @@ packages:
       react-is: 17.0.2
     dev: false
 
+  /react/17.0.2:
+    resolution: {integrity: sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+
   /react/18.2.0:
     resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
     engines: {node: '>=0.10.0'}
@@ -2674,7 +3548,13 @@ packages:
     engines: {node: '>=8.10.0'}
     dependencies:
       picomatch: 2.3.1
-    dev: true
+
+  /reduce-css-calc/2.1.8:
+    resolution: {integrity: sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==}
+    dependencies:
+      css-unit-converter: 1.1.2
+      postcss-value-parser: 3.3.1
+    dev: false
 
   /redux/4.2.0:
     resolution: {integrity: sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==}
@@ -2699,10 +3579,14 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /require-from-string/2.0.2:
+    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /resolve-from/4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
-    dev: true
 
   /resolve/1.22.1:
     resolution: {integrity: sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==}
@@ -2711,7 +3595,6 @@ packages:
       is-core-module: 2.11.0
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
-    dev: true
 
   /resolve/2.0.0-next.4:
     resolution: {integrity: sha512-iMDbmAWtfU+MHpxt/I5iWI7cY6YVEZUQ3MBgPQ++XD1PELuJHIl82xBmObyP2KyQmkNB2dsqF7seoQQiAn5yDQ==}
@@ -2725,14 +3608,20 @@ packages:
   /reusify/1.0.4:
     resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
-    dev: true
+
+  /rgb-regex/1.0.1:
+    resolution: {integrity: sha512-gDK5mkALDFER2YLqH6imYvK6g02gpNGM4ILDZ472EwWfXZnC2ZEpoB2ECXTyOVUKuk/bPJZMzwQPBYICzP+D3w==}
+    dev: false
+
+  /rgba-regex/1.0.0:
+    resolution: {integrity: sha512-zgn5OjNQXLUTdq8m17KdaicF6w89TZs8ZU8y0AYENIU6wG8GG6LLm0yLSiPY8DmaYmHdgRW8rnApjoT0fQRfMg==}
+    dev: false
 
   /rimraf/3.0.2:
     resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
     hasBin: true
     dependencies:
       glob: 7.2.3
-    dev: true
 
   /rope-sequence/1.3.3:
     resolution: {integrity: sha512-85aZYCxweiD5J8yTEbw+E6A27zSnLPNDL0WfPdw3YYodq7WjnTKo0q4dtyQ2gz23iPT8Q9CUyJtAaUNcTxRf5Q==}
@@ -2742,7 +3631,6 @@ packages:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
     dependencies:
       queue-microtask: 1.2.3
-    dev: true
 
   /safe-regex-test/1.0.0:
     resolution: {integrity: sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==}
@@ -2752,6 +3640,12 @@ packages:
       is-regex: 1.1.4
     dev: true
 
+  /scheduler/0.20.2:
+    resolution: {integrity: sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==}
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+
   /scheduler/0.23.0:
     resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}
     dependencies:
@@ -2791,15 +3685,43 @@ packages:
       object-inspect: 1.12.2
     dev: true
 
+  /simple-swizzle/0.2.2:
+    resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
+    dependencies:
+      is-arrayish: 0.3.2
+    dev: false
+
   /slash/3.0.0:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
     engines: {node: '>=8'}
     dev: true
 
+  /slice-ansi/4.0.0:
+    resolution: {integrity: sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==}
+    engines: {node: '>=10'}
+    dependencies:
+      ansi-styles: 4.3.0
+      astral-regex: 2.0.0
+      is-fullwidth-code-point: 3.0.0
+    dev: true
+
   /source-map-js/1.0.2:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
 
+  /sprintf-js/1.0.3:
+    resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
+    dev: true
+
+  /string-width/4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
+    dependencies:
+      emoji-regex: 8.0.0
+      is-fullwidth-code-point: 3.0.0
+      strip-ansi: 6.0.1
+    dev: true
+
   /string.prototype.matchall/4.0.8:
     resolution: {integrity: sha512-6zOCOcJ+RJAQshcTvXPHoxoQGONa3e/Lqx90wUA+wEzX78sg5Bo+1tQo4N0pohS0erG9qtCqJDjNCQBjeWVxyg==}
     dependencies:
@@ -2846,6 +3768,21 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /styled-jsx/5.0.2_react@17.0.2:
+    resolution: {integrity: sha512-LqPQrbBh3egD57NBcHET4qcgshPks+yblyhPlH2GY8oaDgKs8SK4C3dBh3oSJjgzJ3G5t1SYEZGHkP+QEpX9EQ==}
+    engines: {node: '>= 12.0.0'}
+    peerDependencies:
+      '@babel/core': '*'
+      babel-plugin-macros: '*'
+      react: '>= 16.8.0 || 17.x.x || ^18.0.0-0'
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+      babel-plugin-macros:
+        optional: true
+    dependencies:
+      react: 17.0.2
+
   /styled-jsx/5.0.2_react@18.2.0:
     resolution: {integrity: sha512-LqPQrbBh3egD57NBcHET4qcgshPks+yblyhPlH2GY8oaDgKs8SK4C3dBh3oSJjgzJ3G5t1SYEZGHkP+QEpX9EQ==}
     engines: {node: '>= 12.0.0'}
@@ -2862,17 +3799,21 @@ packages:
       react: 18.2.0
     dev: false
 
+  /supports-color/5.5.0:
+    resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
+    engines: {node: '>=4'}
+    dependencies:
+      has-flag: 3.0.0
+
   /supports-color/7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
     dependencies:
       has-flag: 4.0.0
-    dev: true
 
   /supports-preserve-symlinks-flag/1.0.0:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
-    dev: true
 
   /swr/1.3.0_react@18.2.0:
     resolution: {integrity: sha512-dkghQrOl2ORX9HYrMDtPa7LTVHJjCTeZoB1dqTbnnEDlSvN8JEKpYIYurDfvbQFUUS8Cg8PceFVZNkW0KNNYPw==}
@@ -2882,6 +3823,62 @@ packages:
       react: 18.2.0
     dev: false
 
+  /table/6.8.1:
+    resolution: {integrity: sha512-Y4X9zqrCftUhMeH2EptSSERdVKt/nEdijTOacGD/97EKjhQ/Qs8RTlEGABSJNNN8lac9kheH+af7yAkEWlgneA==}
+    engines: {node: '>=10.0.0'}
+    dependencies:
+      ajv: 8.11.2
+      lodash.truncate: 4.4.2
+      slice-ansi: 4.0.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+    dev: true
+
+  /tailwindcss/2.2.19_autoprefixer@10.4.13:
+    resolution: {integrity: sha512-6Ui7JSVtXadtTUo2NtkBBacobzWiQYVjYW0ZnKaP9S1ZCKQ0w7KVNz+YSDI/j7O7KCMHbOkz94ZMQhbT9pOqjw==}
+    engines: {node: '>=12.13.0'}
+    hasBin: true
+    peerDependencies:
+      autoprefixer: ^10.0.2
+      postcss: ^8.0.9
+    dependencies:
+      arg: 5.0.2
+      autoprefixer: 10.4.13
+      bytes: 3.1.2
+      chalk: 4.1.2
+      chokidar: 3.5.3
+      color: 4.2.3
+      cosmiconfig: 7.1.0
+      detective: 5.2.1
+      didyoumean: 1.2.2
+      dlv: 1.1.3
+      fast-glob: 3.2.12
+      fs-extra: 10.1.0
+      glob-parent: 6.0.2
+      html-tags: 3.2.0
+      is-color-stop: 1.1.0
+      is-glob: 4.0.3
+      lodash: 4.17.21
+      lodash.topath: 4.5.2
+      modern-normalize: 1.1.0
+      node-emoji: 1.11.0
+      normalize-path: 3.0.0
+      object-hash: 2.2.0
+      postcss-js: 3.0.3
+      postcss-load-config: 3.1.4
+      postcss-nested: 5.0.6
+      postcss-selector-parser: 6.0.11
+      postcss-value-parser: 4.2.0
+      pretty-hrtime: 1.0.3
+      purgecss: 4.1.3
+      quick-lru: 5.1.1
+      reduce-css-calc: 2.1.8
+      resolve: 1.22.1
+      tmp: 0.2.1
+    transitivePeerDependencies:
+      - ts-node
+    dev: false
+
   /tailwindcss/3.2.4_postcss@8.4.19:
     resolution: {integrity: sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==}
     engines: {node: '>=12.13.0'}
@@ -2928,12 +3925,18 @@ packages:
     resolution: {integrity: sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==}
     dev: false
 
+  /tmp/0.2.1:
+    resolution: {integrity: sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==}
+    engines: {node: '>=8.17.0'}
+    dependencies:
+      rimraf: 3.0.2
+    dev: false
+
   /to-regex-range/5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
     dependencies:
       is-number: 7.0.0
-    dev: true
 
   /tsconfig-paths/3.14.1:
     resolution: {integrity: sha512-fxDhWnFSLt3VuTwtvJt5fpwxBHg5AdKWMsgcPOOIilyjymcYVZoCQF8fvFRezCNfblEXmi+PcM1eYHeOAgXCOQ==}
@@ -2950,7 +3953,16 @@ packages:
 
   /tslib/2.4.1:
     resolution: {integrity: sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==}
-    dev: false
+
+  /tsutils/3.21.0_typescript@4.4.4:
+    resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
+    engines: {node: '>= 6'}
+    peerDependencies:
+      typescript: '>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta'
+    dependencies:
+      tslib: 1.14.1
+      typescript: 4.4.4
+    dev: true
 
   /tsutils/3.21.0_typescript@4.7.4:
     resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
@@ -3035,6 +4047,12 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /typescript/4.4.4:
+    resolution: {integrity: sha512-DqGhF5IKoBl8WNf8C1gu8q0xZSInh9j1kJJMqT3a94w1JzVaBU4EXOSMrz9yDqMT0xt3selp83fuFMQ0uzv6qA==}
+    engines: {node: '>=4.2.0'}
+    hasBin: true
+    dev: true
+
   /typescript/4.7.4:
     resolution: {integrity: sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==}
     engines: {node: '>=4.2.0'}
@@ -3050,6 +4068,18 @@ packages:
       which-boxed-primitive: 1.0.2
     dev: true
 
+  /universal-cookie/4.0.4:
+    resolution: {integrity: sha512-lbRVHoOMtItjWbM7TwDLdl8wug7izB0tq3/YVKhT/ahB4VDvWMyvnADfnJI8y6fSvsjh51Ix7lTGC6Tn4rMPhw==}
+    dependencies:
+      '@types/cookie': 0.3.3
+      cookie: 0.4.2
+    dev: false
+
+  /universalify/2.0.0:
+    resolution: {integrity: sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==}
+    engines: {node: '>= 10.0.0'}
+    dev: false
+
   /update-browserslist-db/1.0.10_browserslist@4.21.4:
     resolution: {integrity: sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==}
     hasBin: true
@@ -3059,7 +4089,6 @@ packages:
       browserslist: 4.21.4
       escalade: 3.1.1
       picocolors: 1.0.0
-    dev: true
 
   /uri-js/4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
@@ -3075,6 +4104,13 @@ packages:
       react: 18.2.0
     dev: false
 
+  /use-sync-external-store/1.1.0_react@17.0.2:
+    resolution: {integrity: sha512-SEnieB2FPKEVne66NpXPd1Np4R1lTNKfjuy3XdIoPQKYBAFdzbzSZlSn1KJZUiihQLQC5Znot4SBz1EOTBwQAQ==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      react: 17.0.2
+
   /use-sync-external-store/1.1.0_react@18.2.0:
     resolution: {integrity: sha512-SEnieB2FPKEVne66NpXPd1Np4R1lTNKfjuy3XdIoPQKYBAFdzbzSZlSn1KJZUiihQLQC5Znot4SBz1EOTBwQAQ==}
     peerDependencies:
@@ -3085,7 +4121,6 @@ packages:
 
   /util-deprecate/1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
-    dev: true
 
   /uuid/9.0.0:
     resolution: {integrity: sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==}
@@ -3125,12 +4160,10 @@ packages:
 
   /wrappy/1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
-    dev: true
 
   /xtend/4.0.2:
     resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
     engines: {node: '>=0.4'}
-    dev: true
 
   /yallist/4.0.0:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
@@ -3139,7 +4172,6 @@ packages:
   /yaml/1.10.2:
     resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
     engines: {node: '>= 6'}
-    dev: true
 
   /yocto-queue/0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
diff --git a/yarn.lock b/yarn.lock
index 5b0237717..0d9a4575a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -778,7 +778,12 @@ camelcase-css@^2.0.1:
   resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
   integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
 
-caniuse-lite@^1.0.30001332, caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001426:
+caniuse-lite@^1.0.30001332:
+  version "1.0.30001439"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001439.tgz#ab7371faeb4adff4b74dad1718a6fd122e45d9cb"
+  integrity sha512-1MgUzEkoMO6gKfXflStpYgZDlFM7M/ck/bgfVCACO5vnAf0fXoNVHdWtqGU+MYca+4bL9Z5bpOVmR33cWW9G2A==
+
+caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001426:
   version "1.0.30001434"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001434.tgz#ec1ec1cfb0a93a34a0600d37903853030520a4e5"
   integrity sha512-aOBHrLmTQw//WFa2rcF1If9fa3ypkC1wzqqiKHgfdrXTWcU8C4gKVZT77eQAPWN1APys3+uQ0Df07rKauXGEYA==