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/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/project/common/board-view/single-issue.tsx b/apps/app/components/project/common/board-view/single-issue.tsx
new file mode 100644
index 000000000..a1c7b6ab3
--- /dev/null
+++ b/apps/app/components/project/common/board-view/single-issue.tsx
@@ -0,0 +1,388 @@
+// 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 right-1 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-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 ${
+                        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-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>{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.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 ${
+                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()
+                      ? `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>
+          )}
+          {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-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>
+                      {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/cycles/board-view/index.tsx b/apps/app/components/project/cycles/board-view/index.tsx
index 97ecd8290..d051ef064 100644
--- a/apps/app/components/project/cycles/board-view/index.tsx
+++ b/apps/app/components/project/cycles/board-view/index.tsx
@@ -16,6 +16,8 @@ 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>>;
 };
 
 const CyclesBoardView: React.FC<Props> = ({
@@ -26,6 +28,8 @@ const CyclesBoardView: React.FC<Props> = ({
   openCreateIssueModal,
   openIssuesListModal,
   removeIssueFromCycle,
+  partialUpdateIssue,
+  handleDeleteIssue,
 }) => {
   const { states } = useUser();
 
@@ -57,6 +61,8 @@ const CyclesBoardView: React.FC<Props> = ({
                     removeIssueFromCycle={removeIssueFromCycle}
                     openIssuesListModal={openIssuesListModal}
                     openCreateIssueModal={openCreateIssueModal}
+                    partialUpdateIssue={partialUpdateIssue}
+                    handleDeleteIssue={handleDeleteIssue}
                   />
                 ))}
               </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 e8f44d8d1..2ba9bfe50 100644
--- a/apps/app/components/project/cycles/board-view/single-board.tsx
+++ b/apps/app/components/project/cycles/board-view/single-board.tsx
@@ -1,29 +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 workspaceService from "lib/services/workspace.service";
 // hooks
 import useUser from "lib/hooks/useUser";
+// components
+import SingleIssue from "components/project/common/board-view/single-issue";
+// headless ui
+import { Menu, Transition } from "@headlessui/react";
 // ui
 import { CustomMenu } from "ui";
 // icons
-import { CalendarDaysIcon, PlusIcon } from "@heroicons/react/24/outline";
-import User from "public/user.png";
+import { PlusIcon } from "@heroicons/react/24/outline";
 // types
 import { IIssue, IWorkspaceMember, NestedKeyOf, Properties } from "types";
-// constants
+// fetch-keys
 import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
-import {
-  addSpaceIfCamelCase,
-  classNames,
-  findHowManyDaysLeft,
-  renderShortNumericDateFormat,
-} from "constants/common";
-import workspaceService from "lib/services/workspace.service";
-import { Menu, Transition } from "@headlessui/react";
+// common
+import { addSpaceIfCamelCase, classNames } from "constants/common";
 
 type Props = {
   properties: Properties;
@@ -37,6 +33,8 @@ 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>>;
 };
 
 const SingleCycleBoard: React.FC<Props> = ({
@@ -49,11 +47,13 @@ const SingleCycleBoard: React.FC<Props> = ({
   openCreateIssueModal,
   openIssuesListModal,
   removeIssueFromCycle,
+  partialUpdateIssue,
+  handleDeleteIssue,
 }) => {
   // Collapse/Expand
   const [show, setState] = useState(true);
 
-  const { activeWorkspace, activeProject } = useUser();
+  const { activeWorkspace } = useUser();
 
   if (selectedGroup === "priority")
     groupTitle === "high"
@@ -138,172 +138,15 @@ 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}
+              />
             );
           })}
 
diff --git a/apps/app/components/project/issues/BoardView/single-board.tsx b/apps/app/components/project/issues/BoardView/single-board.tsx
index 8a30e330d..f9f579618 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/project/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 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..10f186bd2
--- /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="w-8 h-8 shrink-0">
+        <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-50 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..25ab04a6c 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/create-update-issue-modal/index.tsx b/apps/app/components/project/issues/create-update-issue-modal/index.tsx
index a325bb62e..551979cdf 100644
--- a/apps/app/components/project/issues/create-update-issue-modal/index.tsx
+++ b/apps/app/components/project/issues/create-update-issue-modal/index.tsx
@@ -25,7 +25,7 @@ import SelectProject from "components/project/issues/create-update-issue-modal/s
 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/CreateUpdateStateModal";
+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 } from "types";
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..fe55bdbf5 100644
--- a/apps/app/components/project/issues/issue-detail/comment/IssueCommentSection.tsx
+++ b/apps/app/components/project/issues/issue-detail/comment/IssueCommentSection.tsx
@@ -13,8 +13,6 @@ import CommentCard from "components/project/issues/issue-detail/comment/IssueCom
 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[];
@@ -41,11 +39,10 @@ const IssueCommentSection: React.FC<Props> = ({ comments, issueId, projectId, wo
       .createIssueComment(workspaceSlug, projectId, issueId, formData)
       .then((response) => {
         console.log(response);
-        mutate<IIssueComment[]>(
-          PROJECT_ISSUES_COMMENTS,
-          (prevData) => [...(prevData ?? []), response],
-          false
-        );
+        mutate<IIssueComment[]>(PROJECT_ISSUES_COMMENTS(issueId), (prevData) => [
+          response,
+          ...(prevData ?? []),
+        ]);
         reset(defaultValues);
       })
       .catch((error) => {
@@ -58,6 +55,12 @@ const IssueCommentSection: React.FC<Props> = ({ comments, issueId, projectId, wo
       .patchIssueComment(workspaceSlug, projectId, issueId, comment.id, comment)
       .then((response) => {
         console.log(response);
+        mutate<IIssueComment[]>(PROJECT_ISSUES_COMMENTS(issueId), (prevData) => {
+          const newData = prevData ?? [];
+          const index = newData.findIndex((comment) => comment.id === response.id);
+          newData[index] = response;
+          return [...newData];
+        });
       });
   };
 
@@ -65,6 +68,9 @@ const IssueCommentSection: React.FC<Props> = ({ comments, issueId, projectId, wo
     await issuesServices
       .deleteIssueComment(workspaceSlug, projectId, issueId, commentId)
       .then((response) => {
+        mutate<IIssueComment[]>(PROJECT_ISSUES_COMMENTS(issueId), (prevData) =>
+          (prevData ?? []).filter((c) => c.id !== commentId)
+        );
         console.log(response);
       });
   };
diff --git a/apps/app/components/project/issues/list-view/index.tsx b/apps/app/components/project/issues/list-view/index.tsx
index ecafe2abf..4fe8d6162 100644
--- a/apps/app/components/project/issues/list-view/index.tsx
+++ b/apps/app/components/project/issues/list-view/index.tsx
@@ -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>
                       ) : (
diff --git a/apps/app/components/project/settings/StatesSettings.tsx b/apps/app/components/project/settings/StatesSettings.tsx
index a191c58af..cfb642c69 100644
--- a/apps/app/components/project/settings/StatesSettings.tsx
+++ b/apps/app/components/project/settings/StatesSettings.tsx
@@ -1,74 +1,120 @@
-// react
-import { useState } from "react";
+import React, { 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";
+import {
+  StateGroup,
+  CreateUpdateStateInline,
+} from "components/project/issues/BoardView/state/create-update-state-inline";
+import ConfirmStateDeletion from "components/project/issues/BoardView/state/confirm-state-delete";
 // icons
-import { PencilSquareIcon, PlusIcon } from "@heroicons/react/24/outline";
+import { PencilSquareIcon, PlusIcon, TrashIcon } from "@heroicons/react/24/outline";
 // constants
-import { addSpaceIfCamelCase } from "constants/common";
+import { addSpaceIfCamelCase, groupBy } from "constants/common";
+// types
+import type { IState } from "types";
 
 type Props = {
   projectId: string | string[] | undefined;
 };
 
 const StatesSettings: React.FC<Props> = ({ projectId }) => {
-  const [isCreateStateModal, setIsCreateStateModal] = useState(false);
-  const [selectedState, setSelectedState] = useState<string | undefined>();
+  const [activeGroup, setActiveGroup] = useState<StateGroup>(null);
+  const [selectedState, setSelectedState] = useState<string | null>(null);
+  const [selectDeleteState, setSelectDeleteState] = useState<string | null>(null);
 
-  const { states } = useUser();
+  const { states, activeWorkspace } = useUser();
+
+  const groupedStates: {
+    [key: string]: Array<IState>;
+  } = groupBy(states ?? [], "group");
 
   return (
     <>
-      <CreateUpdateStateModal
-        isOpen={isCreateStateModal || Boolean(selectedState)}
-        handleClose={() => {
-          setSelectedState(undefined);
-          setIsCreateStateModal(false);
-        }}
-        projectId={projectId as string}
-        data={selectedState ? states?.find((state) => state.id === selectedState) : undefined}
+      <ConfirmStateDeletion
+        isOpen={!!selectDeleteState}
+        data={states?.find((state) => state.id === selectDeleteState) ?? null}
+        onClose={() => setSelectDeleteState(null)}
       />
+
       <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 className="flex flex-col justify-between gap-3">
+          {Object.keys(groupedStates).map((key) => (
+            <React.Fragment key={key}>
+              <div className="flex justify-between w-full md:w-2/3">
+                <p className="font-medium capitalize">{key} states</p>
+                <button
+                  type="button"
+                  onClick={() => setActiveGroup(key as keyof StateGroup)}
+                  className="flex items-center gap-x-2 text-theme"
+                >
+                  <PlusIcon className="h-4 w-4 text-theme" />
+                  <span>Add</span>
+                </button>
               </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 className="w-full md:w-2/3 space-y-1 border p-1 rounded-xl bg-gray-50">
+                <div className="w-full">
+                  {groupedStates[key]?.map((state) =>
+                    state.id !== selectedState ? (
+                      <div
+                        key={state.id}
+                        className={`bg-gray-50 px-5 py-4 flex justify-between items-center border-b ${
+                          Boolean(activeGroup !== key) ? "last:border-0" : ""
+                        }`}
+                      >
+                        <div className="flex items-center gap-x-8">
+                          <div
+                            className="w-6 h-6 rounded-full"
+                            style={{
+                              backgroundColor: state.color,
+                            }}
+                          ></div>
+                          <h4>{addSpaceIfCamelCase(state.name)}</h4>
+                        </div>
+                        <div className="flex gap-x-2">
+                          <button type="button" onClick={() => setSelectDeleteState(state.id)}>
+                            <TrashIcon className="h-5 w-5 text-red-400" />
+                          </button>
+                          <button type="button" onClick={() => setSelectedState(state.id)}>
+                            <PencilSquareIcon className="h-5 w-5 text-gray-400" />
+                          </button>
+                        </div>
+                      </div>
+                    ) : (
+                      <div className={`border-b last:border-b-0`} key={state.id}>
+                        <CreateUpdateStateInline
+                          projectId={projectId as string}
+                          onClose={() => {
+                            setActiveGroup(null);
+                            setSelectedState(null);
+                          }}
+                          workspaceSlug={activeWorkspace?.slug}
+                          data={states?.find((state) => state.id === selectedState) ?? null}
+                          selectedGroup={key as keyof StateGroup}
+                        />
+                      </div>
+                    )
+                  )}
+                </div>
+                {key === activeGroup && (
+                  <CreateUpdateStateInline
+                    projectId={projectId as string}
+                    onClose={() => {
+                      setActiveGroup(null);
+                      setSelectedState(null);
+                    }}
+                    workspaceSlug={activeWorkspace?.slug}
+                    data={null}
+                    selectedGroup={key as keyof StateGroup}
+                  />
+                )}
+              </div>
+            </React.Fragment>
+          ))}
         </div>
       </section>
     </>
diff --git a/apps/app/components/socialbuttons/google-login.tsx b/apps/app/components/socialbuttons/google-login.tsx
index 51979cc81..62d9402c7 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 } from "react";
 // next
 import Script from "next/script";
 
@@ -10,32 +10,38 @@ export interface IGoogleLoginButton {
 }
 
 export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
+  const googleSignInButton = useRef<HTMLDivElement>(null);
+
+  const loadScript = useCallback(() => {
+    if (!googleSignInButton.current) 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
+  }, [props.onSuccess]);
+
+  useEffect(() => {
+    if (window?.google?.accounts?.id) {
+      loadScript();
+    }
+  }, [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/common.ts b/apps/app/constants/common.ts
index dbc65ebcd..036aff99c 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;
   }, {});
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/index.ts b/apps/app/constants/index.ts
index 603652e9f..0e9a67788 100644
--- a/apps/app/constants/index.ts
+++ b/apps/app/constants/index.ts
@@ -8,3 +8,11 @@ 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",
+};
diff --git a/apps/app/contexts/theme.context.tsx b/apps/app/contexts/theme.context.tsx
index bece44540..ee0b88e83 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,
@@ -10,6 +12,12 @@ import {
 } from "constants/theme.context.constants";
 // components
 import ToastAlert from "components/toast-alert";
+// hooks
+import useUser from "lib/hooks/useUser";
+// constants
+import { PROJECT_MEMBERS, USER_PROJECT_VIEW } from "constants/fetch-keys";
+// services
+import projectService from "lib/services/project.service";
 
 export const themeContext = createContext<ContextType>({} as ContextType);
 
@@ -122,53 +130,89 @@ export const reducer: ReducerFunctionType = (state, action) => {
 export const ThemeContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [state, dispatch] = useReducer(reducer, initialState);
 
+  const { activeProject, activeWorkspace, user } = useUser();
+
+  const { data: projectMember } = useSWR(
+    activeWorkspace && activeProject ? PROJECT_MEMBERS(activeProject.id) : null,
+    activeWorkspace && activeProject
+      ? () => projectService.projectMembers(activeWorkspace.slug, activeProject.id)
+      : null
+  );
+
   const toggleCollapsed = useCallback(() => {
     dispatch({
       type: TOGGLE_SIDEBAR,
     });
   }, []);
 
-  const setIssueView = useCallback((display: "list" | "kanban") => {
-    dispatch({
-      type: SET_ISSUE_VIEW,
-      payload: {
-        issueView: display,
-      },
-    });
-  }, []);
+  const saveDataToServer = useCallback(() => {
+    if (!activeProject || !activeWorkspace) return;
+    projectService
+      .setProjectView(activeWorkspace.slug, activeProject.id, state)
+      .then((res) => {
+        console.log("saved", res);
+      })
+      .catch((error) => {});
+  }, [activeProject, activeWorkspace, state]);
 
-  const setGroupByProperty = useCallback((property: NestedKeyOf<IIssue> | null) => {
-    dispatch({
-      type: SET_GROUP_BY_PROPERTY,
-      payload: {
-        groupByProperty: property,
-      },
-    });
-  }, []);
+  const setIssueView = useCallback(
+    (display: "list" | "kanban") => {
+      dispatch({
+        type: SET_ISSUE_VIEW,
+        payload: {
+          issueView: display,
+        },
+      });
+      saveDataToServer();
+    },
+    [saveDataToServer]
+  );
 
-  const setOrderBy = useCallback((property: NestedKeyOf<IIssue> | null) => {
-    dispatch({
-      type: SET_ORDER_BY_PROPERTY,
-      payload: {
-        orderBy: property,
-      },
-    });
-  }, []);
+  const setGroupByProperty = useCallback(
+    (property: NestedKeyOf<IIssue> | null) => {
+      dispatch({
+        type: SET_GROUP_BY_PROPERTY,
+        payload: {
+          groupByProperty: property,
+        },
+      });
+      saveDataToServer();
+    },
+    [saveDataToServer]
+  );
 
-  const setFilterIssue = useCallback((property: "activeIssue" | "backlogIssue" | null) => {
-    dispatch({
-      type: SET_FILTER_ISSUES,
-      payload: {
-        filterIssue: property,
-      },
-    });
-  }, []);
+  const setOrderBy = useCallback(
+    (property: NestedKeyOf<IIssue> | null) => {
+      dispatch({
+        type: SET_ORDER_BY_PROPERTY,
+        payload: {
+          orderBy: property,
+        },
+      });
+      saveDataToServer();
+    },
+    [saveDataToServer]
+  );
+
+  const setFilterIssue = useCallback(
+    (property: "activeIssue" | "backlogIssue" | null) => {
+      dispatch({
+        type: SET_FILTER_ISSUES,
+        payload: {
+          filterIssue: property,
+        },
+      });
+      saveDataToServer();
+    },
+    [saveDataToServer]
+  );
 
   useEffect(() => {
     dispatch({
       type: REHYDRATE_THEME,
+      payload: projectMember?.find((member) => member.member.id === user?.id)?.view_props,
     });
-  }, []);
+  }, [projectMember, user]);
 
   return (
     <themeContext.Provider
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/lib/hooks/useMyIssueFilter.tsx b/apps/app/lib/hooks/useMyIssueFilter.tsx
new file mode 100644
index 000000000..2d16f1442
--- /dev/null
+++ b/apps/app/lib/hooks/useMyIssueFilter.tsx
@@ -0,0 +1,105 @@
+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,
+  target_date: false,
+  cycle: 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/services/project.service.ts b/apps/app/lib/services/project.service.ts
index 01de73ddf..98891c796 100644
--- a/apps/app/lib/services/project.service.ts
+++ b/apps/app/lib/services/project.service.ts
@@ -132,6 +132,20 @@ class ProjectServices extends APIService {
       });
   }
 
+  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,
@@ -207,7 +221,7 @@ class ProjectServices extends APIService {
     projectId: string,
     data: 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/pages/me/my-issues.tsx b/apps/app/pages/me/my-issues.tsx
index 28420f210..1a7b2f78b 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={
diff --git a/apps/app/pages/projects/[projectId]/cycles/[cycleId].tsx b/apps/app/pages/projects/[projectId]/cycles/[cycleId].tsx
index c4e2fdcf8..641a93825 100644
--- a/apps/app/pages/projects/[projectId]/cycles/[cycleId].tsx
+++ b/apps/app/pages/projects/[projectId]/cycles/[cycleId].tsx
@@ -31,18 +31,20 @@ import { ArrowPathIcon, ChevronDownIcon, ListBulletIcon } from "@heroicons/react
 import {
   CycleIssueResponse,
   IIssue,
+  IssueResponse,
   NestedKeyOf,
   Properties,
   SelectIssue,
   SelectSprintType,
 } from "types";
 // fetch-keys
-import { CYCLE_ISSUES, PROJECT_MEMBERS } from "constants/fetch-keys";
+import { CYCLE_ISSUES, PROJECT_ISSUES_LIST, PROJECT_MEMBERS } from "constants/fetch-keys";
 // constants
 import { classNames, replaceUnderscoreIfSnakeCase } from "constants/common";
 import CreateUpdateIssuesModal from "components/project/issues/create-update-issue-modal";
 import CycleIssuesListModal from "components/project/cycles/cycle-issues-list-modal";
 import ConfirmCycleDeletion from "components/project/cycles/confirm-cycle-deletion";
+import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
 
 const groupByOptions: Array<{ name: string; key: NestedKeyOf<IIssue> | null }> = [
   { name: "State", key: "state_detail.name" },
@@ -82,6 +84,7 @@ const SingleCycle: React.FC<Props> = () => {
   const [selectedCycle, setSelectedCycle] = useState<SelectSprintType>();
   const [selectedIssues, setSelectedIssues] = useState<SelectIssue>();
   const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false);
+  const [deleteIssue, setDeleteIssue] = useState<string | undefined>(undefined);
 
   const { activeWorkspace, activeProject, cycles, issues } = useUser();
 
@@ -118,6 +121,18 @@ 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,
@@ -230,6 +245,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>
@@ -420,6 +440,8 @@ const SingleCycle: React.FC<Props> = () => {
               members={members}
               openCreateIssueModal={openCreateIssueModal}
               openIssuesListModal={openIssuesListModal}
+              handleDeleteIssue={setDeleteIssue}
+              partialUpdateIssue={partialUpdateIssue}
             />
           </div>
         )}
diff --git a/apps/app/pages/projects/[projectId]/issues/[issueId].tsx b/apps/app/pages/projects/[projectId]/issues/[issueId].tsx
index 0e6c87550..3c0a648a6 100644
--- a/apps/app/pages/projects/[projectId]/issues/[issueId].tsx
+++ b/apps/app/pages/projects/[projectId]/issues/[issueId].tsx
@@ -112,7 +112,7 @@ const IssueDetail: NextPage = () => {
   );
 
   const { data: issueComments } = useSWR<IIssueComment[]>(
-    activeWorkspace && projectId && issueId ? PROJECT_ISSUES_COMMENTS : null,
+    activeWorkspace && projectId && issueId ? PROJECT_ISSUES_COMMENTS(issueId as string) : null,
     activeWorkspace && projectId && issueId
       ? () =>
           issuesServices.getIssueComments(
diff --git a/apps/app/pages/projects/[projectId]/issues/index.tsx b/apps/app/pages/projects/[projectId]/issues/index.tsx
index ba1f47b33..9606fffcf 100644
--- a/apps/app/pages/projects/[projectId]/issues/index.tsx
+++ b/apps/app/pages/projects/[projectId]/issues/index.tsx
@@ -49,6 +49,7 @@ 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: "Cycle", key: "issue_cycle.cycle_detail.name" },
   { name: "Created By", key: "created_by" },
   { name: "None", key: null },
 ];
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..a15de2ad7 100644
--- a/apps/app/types/issues.d.ts
+++ b/apps/app/types/issues.d.ts
@@ -11,6 +11,19 @@ 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;
@@ -60,6 +73,8 @@ export interface IIssue {
   blocked_issue_details: any[];
   sprints: string | null;
   cycle: string | null;
+
+  issue_cycle: IIssueCycle;
 }
 
 export interface BlockeIssue {
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/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==