From 0cda15408d9bb28826d43c7be4f39f24d8fab019 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Thu, 15 Dec 2022 09:47:56 +0530
Subject: [PATCH 01/10] fix: bug fixes in cycles

---
 .../project/cycles/BoardView/single-board.tsx | 662 ----------------
 .../project/cycles/ListView/index.tsx         | 714 ------------------
 .../{BoardView => board-view}/index.tsx       |   8 +-
 .../cycles/board-view/single-board.tsx        | 377 +++++++++
 .../project/cycles/list-view/index.tsx        | 352 +++++++++
 .../project/cycles/stats-view/index.tsx       |  23 +
 .../project/cycles/stats-view/single-stat.tsx | 102 +++
 .../project/issues/IssuesListModal.tsx        |   5 +-
 .../index.tsx}                                | 407 ++++------
 .../issue-detail-sidebar/select-assignee.tsx  | 181 +++++
 .../issue-detail-sidebar/select-cycle.tsx     |  98 +++
 .../issue-detail-sidebar/select-parent.tsx    |  74 ++
 .../issue-detail-sidebar/select-priority.tsx  |  84 +++
 .../issue-detail-sidebar/select-state.tsx     | 116 +++
 .../components/sidebar/workspace-options.tsx  | 189 +++--
 apps/app/layouts/app-layout.tsx               |   4 +-
 apps/app/layouts/types.d.ts                   |   2 +
 apps/app/pages/me/my-issues.tsx               | 643 +++++++++++++---
 .../projects/[projectId]/cycles/[cycleId].tsx | 386 +++++-----
 .../projects/[projectId]/cycles/index.tsx     |   9 +-
 .../projects/[projectId]/issues/[issueId].tsx |   8 +-
 .../pages/projects/[projectId]/settings.tsx   |   7 +-
 apps/app/pages/workspace/index.tsx            | 151 ++--
 23 files changed, 2550 insertions(+), 2052 deletions(-)
 delete mode 100644 apps/app/components/project/cycles/BoardView/single-board.tsx
 delete mode 100644 apps/app/components/project/cycles/ListView/index.tsx
 rename apps/app/components/project/cycles/{BoardView => board-view}/index.tsx (91%)
 create mode 100644 apps/app/components/project/cycles/board-view/single-board.tsx
 create mode 100644 apps/app/components/project/cycles/list-view/index.tsx
 create mode 100644 apps/app/components/project/cycles/stats-view/index.tsx
 create mode 100644 apps/app/components/project/cycles/stats-view/single-stat.tsx
 rename apps/app/components/project/issues/issue-detail/{IssueDetailSidebar.tsx => issue-detail-sidebar/index.tsx} (55%)
 create mode 100644 apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-assignee.tsx
 create mode 100644 apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-cycle.tsx
 create mode 100644 apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-parent.tsx
 create mode 100644 apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-priority.tsx
 create mode 100644 apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-state.tsx

diff --git a/apps/app/components/project/cycles/BoardView/single-board.tsx b/apps/app/components/project/cycles/BoardView/single-board.tsx
deleted file mode 100644
index 92ff37110..000000000
--- a/apps/app/components/project/cycles/BoardView/single-board.tsx
+++ /dev/null
@@ -1,662 +0,0 @@
-// react
-import React, { useState } from "react";
-// next
-import Link from "next/link";
-import Image from "next/image";
-// swr
-import useSWR from "swr";
-// services
-import cycleServices from "lib/services/cycles.service";
-// hooks
-import useUser from "lib/hooks/useUser";
-// ui
-import { Spinner } from "ui";
-// icons
-import {
-  ArrowsPointingInIcon,
-  ArrowsPointingOutIcon,
-  CalendarDaysIcon,
-  PlusIcon,
-  EllipsisHorizontalIcon,
-  TrashIcon,
-} from "@heroicons/react/24/outline";
-import User from "public/user.png";
-// types
-import {
-  CycleIssueResponse,
-  ICycle,
-  IIssue,
-  IWorkspaceMember,
-  NestedKeyOf,
-  Properties,
-} from "types";
-// constants
-import { CYCLE_ISSUES, WORKSPACE_MEMBERS } from "constants/fetch-keys";
-import {
-  addSpaceIfCamelCase,
-  findHowManyDaysLeft,
-  renderShortNumericDateFormat,
-} from "constants/common";
-import { Menu, Transition } from "@headlessui/react";
-import workspaceService from "lib/services/workspace.service";
-
-type Props = {
-  properties: Properties;
-  groupedByIssues: {
-    [key: string]: IIssue[];
-  };
-  selectedGroup: NestedKeyOf<IIssue> | null;
-  groupTitle: string;
-  createdBy: string | null;
-  bgColor?: string;
-  openCreateIssueModal: (
-    sprintId: string,
-    issue?: IIssue,
-    actionType?: "create" | "edit" | "delete"
-  ) => void;
-  openIssuesListModal: (cycleId: string) => void;
-  removeIssueFromCycle: (cycleId: string, bridgeId: string) => void;
-};
-
-const SingleCycleBoard: React.FC<Props> = ({
-  properties,
-  groupedByIssues,
-  selectedGroup,
-  groupTitle,
-  createdBy,
-  bgColor,
-  openCreateIssueModal,
-  openIssuesListModal,
-  removeIssueFromCycle,
-}) => {
-  // Collapse/Expand
-  const [show, setState] = useState(true);
-
-  const { activeWorkspace, activeProject } = useUser();
-
-  if (selectedGroup === "priority")
-    groupTitle === "high"
-      ? (bgColor = "#dc2626")
-      : groupTitle === "medium"
-      ? (bgColor = "#f97316")
-      : groupTitle === "low"
-      ? (bgColor = "#22c55e")
-      : (bgColor = "#ff0000");
-
-  const { data: people } = useSWR<IWorkspaceMember[]>(
-    activeWorkspace ? WORKSPACE_MEMBERS : null,
-    activeWorkspace ? () => workspaceService.workspaceMembers(activeWorkspace.slug) : null
-  );
-
-  return (
-    <div className={`rounded flex-shrink-0 h-full ${!show ? "" : "w-80 bg-gray-50 border"}`}>
-      <div className={`${!show ? "" : "h-full space-y-3 overflow-y-auto flex flex-col"}`}>
-        <div
-          className={`flex justify-between p-3 pb-0 ${
-            !show ? "flex-col bg-gray-50 rounded-md border" : ""
-          }`}
-        >
-          <div className={`flex items-center ${!show ? "flex-col gap-2" : "gap-1"}`}>
-            <div
-              className={`flex items-center gap-x-1 px-2 bg-slate-900 rounded-md cursor-pointer ${
-                !show ? "py-2 mb-2 flex-col gap-y-2" : ""
-              }`}
-              style={{
-                border: `2px solid ${bgColor}`,
-                backgroundColor: `${bgColor}20`,
-              }}
-            >
-              <span
-                className={`w-3 h-3 block rounded-full ${!show ? "" : "mr-1"}`}
-                style={{
-                  backgroundColor: Boolean(bgColor) ? bgColor : undefined,
-                }}
-              />
-              <h2
-                className={`text-[0.9rem] font-medium capitalize`}
-                style={{
-                  writingMode: !show ? "vertical-rl" : "horizontal-tb",
-                }}
-              >
-                {groupTitle === null || groupTitle === "null"
-                  ? "None"
-                  : createdBy
-                  ? createdBy
-                  : addSpaceIfCamelCase(groupTitle)}
-              </h2>
-              <span className="text-gray-500 text-sm ml-0.5">
-                {groupedByIssues[groupTitle].length}
-              </span>
-            </div>
-          </div>
-        </div>
-        <div
-          className={`mt-3 space-y-3 h-full overflow-y-auto px-3 pb-3 ${
-            !show ? "hidden" : "block"
-          }`}
-        >
-          {groupedByIssues[groupTitle].map((childIssue, index: number) => {
-            const assignees = [
-              ...(childIssue?.assignees_list ?? []),
-              ...(childIssue?.assignees ?? []),
-            ]?.map((assignee) => {
-              const tempPerson = people?.find((p) => p.member.id === assignee)?.member;
-
-              return {
-                avatar: tempPerson?.avatar,
-                first_name: tempPerson?.first_name,
-                email: tempPerson?.email,
-              };
-            });
-
-            return (
-              <div key={childIssue.id} className={`border rounded bg-white shadow-sm`}>
-                <div className="group/card relative p-2 select-none">
-                  <div className="opacity-0 group-hover/card:opacity-100 absolute top-1 right-1">
-                    <button
-                      type="button"
-                      className="h-7 w-7 p-1 grid place-items-center rounded text-red-500 hover:bg-red-50 duration-300 outline-none"
-                      // onClick={() => handleDeleteIssue(childIssue.id)}
-                    >
-                      <TrashIcon className="h-4 w-4" />
-                    </button>
-                  </div>
-                  <Link href={`/projects/${childIssue.project}/issues/${childIssue.id}`}>
-                    <a>
-                      {properties.key && (
-                        <div className="text-xs font-medium text-gray-500 mb-2">
-                          {activeProject?.identifier}-{childIssue.sequence_id}
-                        </div>
-                      )}
-                      <h5
-                        className="group-hover:text-theme text-sm break-all mb-3"
-                        style={{ lineClamp: 3, WebkitLineClamp: 3 }}
-                      >
-                        {childIssue.name}
-                      </h5>
-                    </a>
-                  </Link>
-                  <div className="flex items-center gap-x-1 gap-y-2 text-xs flex-wrap">
-                    {properties.priority && (
-                      <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>
-            );
-          })}
-          <button
-            type="button"
-            className="flex items-center text-xs font-medium hover:bg-gray-100 p-2 rounded duration-300 outline-none"
-          >
-            <PlusIcon className="h-3 w-3 mr-1" />
-            Create
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-
-  // return (
-  //   <div className={`rounded flex-shrink-0 h-full ${!show ? "" : "w-80 bg-gray-50 border"}`}>
-  //     <div className={`${!show ? "" : "h-full space-y-3 overflow-y-auto flex flex-col"}`}>
-  //       <div
-  //         className={`flex justify-between p-3 pb-0 ${
-  //           !show ? "flex-col bg-gray-50 rounded-md border" : ""
-  //         }`}
-  //       >
-  //         <div className={`flex items-center ${!show ? "flex-col gap-2" : "gap-1"}`}>
-  //           <div
-  //             className={`flex items-center gap-x-1 rounded-md cursor-pointer ${
-  //               !show ? "py-2 mb-2 flex-col gap-y-2" : ""
-  //             }`}
-  //           >
-  //             <h2
-  //               className={`text-[0.9rem] font-medium capitalize`}
-  //               style={{
-  //                 writingMode: !show ? "vertical-rl" : "horizontal-tb",
-  //               }}
-  //             >
-  //               {cycle.name}
-  //             </h2>
-  //             <span className="text-gray-500 text-sm ml-0.5">{cycleIssues?.length}</span>
-  //           </div>
-  //         </div>
-
-  //         <div className={`flex items-center ${!show ? "flex-col pb-2" : ""}`}>
-  //           <button
-  //             type="button"
-  //             className="h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none"
-  //             onClick={() => {
-  //               setState(!show);
-  //             }}
-  //           >
-  //             {show ? (
-  //               <ArrowsPointingInIcon className="h-4 w-4" />
-  //             ) : (
-  //               <ArrowsPointingOutIcon className="h-4 w-4" />
-  //             )}
-  //           </button>
-  //           <Menu as="div" className="relative inline-block">
-  //             <Menu.Button className="h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none">
-  //               <EllipsisHorizontalIcon className="h-4 w-4" />
-  //             </Menu.Button>
-
-  //             <Transition
-  //               as={React.Fragment}
-  //               enter="transition ease-out duration-100"
-  //               enterFrom="transform opacity-0 scale-95"
-  //               enterTo="transform opacity-100 scale-100"
-  //               leave="transition ease-in duration-75"
-  //               leaveFrom="transform opacity-100 scale-100"
-  //               leaveTo="transform opacity-0 scale-95"
-  //             >
-  //               <Menu.Items className="absolute right-0 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
-  //                 <div className="p-1">
-  //                   <Menu.Item as="div">
-  //                     {(active) => (
-  //                       <button
-  //                         type="button"
-  //                         className="text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full"
-  //                         onClick={() => openCreateIssueModal(cycle.id)}
-  //                       >
-  //                         Create new
-  //                       </button>
-  //                     )}
-  //                   </Menu.Item>
-  //                   <Menu.Item as="div">
-  //                     {(active) => (
-  //                       <button
-  //                         type="button"
-  //                         className="p-2 text-left text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap"
-  //                         onClick={() => openIssuesListModal(cycle.id)}
-  //                       >
-  //                         Add an existing issue
-  //                       </button>
-  //                     )}
-  //                   </Menu.Item>
-  //                 </div>
-  //               </Menu.Items>
-  //             </Transition>
-  //           </Menu>
-  //         </div>
-  //       </div>
-  //       <div
-  //         className={`mt-3 space-y-3 h-full overflow-y-auto px-3 pb-3 ${
-  //           !show ? "hidden" : "block"
-  //         }`}
-  //       >
-  //         {cycleIssues ? (
-  //           cycleIssues.map((issue, index: number) => (
-  //             <div key={childIssue.id} className="border rounded bg-white shadow-sm">
-  //               <div className="group/card relative p-2 select-none">
-  //                 <div className="opacity-0 group-hover/card:opacity-100 absolute top-1 right-1">
-  //                   <Menu as="div" className="relative">
-  //                     <Menu.Button
-  //                       as="button"
-  //                       className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-100 duration-300 outline-none`}
-  //                     >
-  //                       <EllipsisHorizontalIcon className="h-4 w-4" />
-  //                     </Menu.Button>
-  //                     <Menu.Items className="absolute origin-top-right right-0.5 mt-1 p-1 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
-  //                       <Menu.Item>
-  //                         <div className="hover:bg-gray-100 border-b last:border-0">
-  //                           <button
-  //                             className="text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full"
-  //                             type="button"
-  //                             onClick={() => removeIssueFromCycle(issue.cycle, issue.id)}
-  //                           >
-  //                             Remove from cycle
-  //                           </button>
-  //                         </div>
-  //                       </Menu.Item>
-  //                       <Menu.Item>
-  //                         <div className="hover:bg-gray-100 border-b last:border-0">
-  //                           <button
-  //                             className="text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full"
-  //                             type="button"
-  //                             onClick={() =>
-  //                               openCreateIssueModal(cycle.id, childIssue, "delete")
-  //                             }
-  //                           >
-  //                             Delete permanently
-  //                           </button>
-  //                         </div>
-  //                       </Menu.Item>
-  //                     </Menu.Items>
-  //                   </Menu>
-  //                 </div>
-  //                 <Link
-  //                   href={`/projects/${childIssue.project}/issues/${childIssue.id}`}
-  //                 >
-  //                   <a>
-  //                     {properties.key && (
-  //                       <div className="text-xs font-medium text-gray-500 mb-2">
-  //                         {activeProject?.identifier}-{childIssue.sequence_id}
-  //                       </div>
-  //                     )}
-  //                     <h5
-  //                       className="group-hover:text-theme text-sm break-all mb-3"
-  //                       style={{ lineClamp: 3, WebkitLineClamp: 3 }}
-  //                     >
-  //                       {childIssue.name}
-  //                     </h5>
-  //                   </a>
-  //                 </Link>
-  //                 <div className="flex items-center gap-x-1 gap-y-2 text-xs flex-wrap">
-  //                   {properties.priority && (
-  //                     <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>
-  //           ))
-  //         ) : (
-  //           <div className="w-full h-full flex justify-center items-center">
-  //             <Spinner />
-  //           </div>
-  //         )}
-  //         <button
-  //           type="button"
-  //           className="flex items-center text-xs font-medium hover:bg-gray-100 p-2 rounded duration-300 outline-none"
-  //           onClick={() => openCreateIssueModal(cycle.id)}
-  //         >
-  //           <PlusIcon className="h-3 w-3 mr-1" />
-  //           Create
-  //         </button>
-  //       </div>
-  //     </div>
-  //   </div>
-  // );
-};
-
-export default SingleCycleBoard;
diff --git a/apps/app/components/project/cycles/ListView/index.tsx b/apps/app/components/project/cycles/ListView/index.tsx
deleted file mode 100644
index 5add9687a..000000000
--- a/apps/app/components/project/cycles/ListView/index.tsx
+++ /dev/null
@@ -1,714 +0,0 @@
-// react
-import React from "react";
-// next
-import Link from "next/link";
-// swr
-import useSWR from "swr";
-// headless ui
-import { Disclosure, Transition, Menu } from "@headlessui/react";
-// services
-import cycleServices from "lib/services/cycles.service";
-// hooks
-import useUser from "lib/hooks/useUser";
-// ui
-import { Spinner } from "ui";
-// icons
-import { PlusIcon, EllipsisHorizontalIcon, ChevronDownIcon } from "@heroicons/react/20/solid";
-import { CalendarDaysIcon } from "@heroicons/react/24/outline";
-// types
-import { IIssue, IWorkspaceMember, NestedKeyOf, Properties, SelectSprintType } from "types";
-// fetch keys
-import { CYCLE_ISSUES, WORKSPACE_MEMBERS } from "constants/fetch-keys";
-// constants
-import {
-  addSpaceIfCamelCase,
-  findHowManyDaysLeft,
-  renderShortNumericDateFormat,
-} from "constants/common";
-import workspaceService from "lib/services/workspace.service";
-
-type Props = {
-  groupedByIssues: {
-    [key: string]: IIssue[];
-  };
-  properties: Properties;
-  selectedGroup: NestedKeyOf<IIssue> | null;
-  openCreateIssueModal: (
-    sprintId: string,
-    issue?: IIssue,
-    actionType?: "create" | "edit" | "delete"
-  ) => void;
-  openIssuesListModal: (cycleId: string) => void;
-  removeIssueFromCycle: (cycleId: string, bridgeId: string) => void;
-};
-
-const CyclesListView: React.FC<Props> = ({
-  groupedByIssues,
-  selectedGroup,
-  openCreateIssueModal,
-  openIssuesListModal,
-  properties,
-  removeIssueFromCycle,
-}) => {
-  const { activeWorkspace, activeProject } = useUser();
-
-  const { data: people } = useSWR<IWorkspaceMember[]>(
-    activeWorkspace ? WORKSPACE_MEMBERS : null,
-    activeWorkspace ? () => workspaceService.workspaceMembers(activeWorkspace.slug) : null
-  );
-
-  return (
-    <div className="flex flex-col space-y-5">
-      {Object.keys(groupedByIssues).map((singleGroup) => (
-        <Disclosure key={singleGroup} as="div" defaultOpen>
-          {({ open }) => (
-            <div className="bg-white rounded-lg">
-              <div className="bg-gray-100 px-4 py-3 rounded-t-lg">
-                <Disclosure.Button>
-                  <div className="flex items-center gap-x-2">
-                    <span>
-                      <ChevronDownIcon
-                        className={`h-4 w-4 text-gray-500 ${!open ? "transform -rotate-90" : ""}`}
-                      />
-                    </span>
-                    {selectedGroup !== null ? (
-                      <h2 className="font-medium leading-5 capitalize">
-                        {singleGroup === null || singleGroup === "null"
-                          ? selectedGroup === "priority" && "No priority"
-                          : addSpaceIfCamelCase(singleGroup)}
-                      </h2>
-                    ) : (
-                      <h2 className="font-medium leading-5">All Issues</h2>
-                    )}
-                    <p className="text-gray-500 text-sm">
-                      {groupedByIssues[singleGroup as keyof IIssue].length}
-                    </p>
-                  </div>
-                </Disclosure.Button>
-              </div>
-              <Transition
-                show={open}
-                enter="transition duration-100 ease-out"
-                enterFrom="transform opacity-0"
-                enterTo="transform opacity-100"
-                leave="transition duration-75 ease-out"
-                leaveFrom="transform opacity-100"
-                leaveTo="transform opacity-0"
-              >
-                <Disclosure.Panel>
-                  <div className="divide-y-2">
-                    {groupedByIssues[singleGroup] ? (
-                      groupedByIssues[singleGroup].length > 0 ? (
-                        groupedByIssues[singleGroup].map((issue: IIssue) => {
-                          const assignees = [
-                            ...(issue?.assignees_list ?? []),
-                            ...(issue?.assignees ?? []),
-                          ]?.map((assignee) => {
-                            const tempPerson = people?.find(
-                              (p) => p.member.id === assignee
-                            )?.member;
-
-                            return {
-                              avatar: tempPerson?.avatar,
-                              first_name: tempPerson?.first_name,
-                              email: tempPerson?.email,
-                            };
-                          });
-
-                          return (
-                            <div
-                              key={issue.id}
-                              className="px-4 py-3 text-sm rounded flex justify-between items-center gap-2"
-                            >
-                              <div className="flex items-center gap-2">
-                                <span
-                                  className={`flex-shrink-0 h-1.5 w-1.5 block rounded-full`}
-                                  style={{
-                                    backgroundColor: issue.state_detail.color,
-                                  }}
-                                />
-                                <Link href={`/projects/${activeProject?.id}/issues/${issue.id}`}>
-                                  <a className="group relative flex items-center gap-2">
-                                    {properties.key && (
-                                      <span className="flex-shrink-0 text-xs text-gray-500">
-                                        {activeProject?.identifier}-{issue.sequence_id}
-                                      </span>
-                                    )}
-                                    <span className="">{issue.name}</span>
-                                    <div className="absolute bottom-full left-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md max-w-sm whitespace-nowrap">
-                                      <h5 className="font-medium mb-1">Name</h5>
-                                      <div>{issue.name}</div>
-                                    </div>
-                                  </a>
-                                </Link>
-                              </div>
-                              <div className="flex-shrink-0 flex items-center gap-x-1 gap-y-2 text-xs flex-wrap">
-                                {properties.priority && (
-                                  <div
-                                    className={`group relative flex-shrink-0 flex items-center gap-1 text-xs rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 capitalize ${
-                                      issue.priority === "urgent"
-                                        ? "bg-red-100 text-red-600"
-                                        : issue.priority === "high"
-                                        ? "bg-orange-100 text-orange-500"
-                                        : issue.priority === "medium"
-                                        ? "bg-yellow-100 text-yellow-500"
-                                        : issue.priority === "low"
-                                        ? "bg-green-100 text-green-500"
-                                        : "bg-gray-100"
-                                    }`}
-                                  >
-                                    {/* {getPriorityIcon(issue.priority ?? "")} */}
-                                    {issue.priority ?? "None"}
-                                    <div className="absolute bottom-full right-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
-                                      <h5 className="font-medium mb-1 text-gray-900">Priority</h5>
-                                      <div
-                                        className={`capitalize ${
-                                          issue.priority === "urgent"
-                                            ? "text-red-600"
-                                            : issue.priority === "high"
-                                            ? "text-orange-500"
-                                            : issue.priority === "medium"
-                                            ? "text-yellow-500"
-                                            : issue.priority === "low"
-                                            ? "text-green-500"
-                                            : ""
-                                        }`}
-                                      >
-                                        {issue.priority ?? "None"}
-                                      </div>
-                                    </div>
-                                  </div>
-                                )}
-                                {properties.state && (
-                                  <div className="group relative flex-shrink-0 flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300">
-                                    <span
-                                      className="flex-shrink-0 h-1.5 w-1.5 rounded-full"
-                                      style={{
-                                        backgroundColor: issue?.state_detail?.color,
-                                      }}
-                                    ></span>
-                                    {addSpaceIfCamelCase(issue?.state_detail.name)}
-                                    <div className="absolute bottom-full right-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
-                                      <h5 className="font-medium mb-1">State</h5>
-                                      <div>{issue?.state_detail.name}</div>
-                                    </div>
-                                  </div>
-                                )}
-                                {properties.start_date && (
-                                  <div className="group relative flex-shrink-0 flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300">
-                                    <CalendarDaysIcon className="h-4 w-4" />
-                                    {issue.start_date
-                                      ? renderShortNumericDateFormat(issue.start_date)
-                                      : "N/A"}
-                                    <div className="absolute bottom-full right-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
-                                      <h5 className="font-medium mb-1">Started at</h5>
-                                      <div>
-                                        {renderShortNumericDateFormat(issue.start_date ?? "")}
-                                      </div>
-                                    </div>
-                                  </div>
-                                )}
-                                {properties.target_date && (
-                                  <div
-                                    className={`group relative flex-shrink-0 group flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300 ${
-                                      issue.target_date === null
-                                        ? ""
-                                        : issue.target_date < new Date().toISOString()
-                                        ? "text-red-600"
-                                        : findHowManyDaysLeft(issue.target_date) <= 3 &&
-                                          "text-orange-400"
-                                    }`}
-                                  >
-                                    <CalendarDaysIcon className="h-4 w-4" />
-                                    {issue.target_date
-                                      ? renderShortNumericDateFormat(issue.target_date)
-                                      : "N/A"}
-                                    <div className="absolute bottom-full right-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
-                                      <h5 className="font-medium mb-1 text-gray-900">
-                                        Target date
-                                      </h5>
-                                      <div>
-                                        {renderShortNumericDateFormat(issue.target_date ?? "")}
-                                      </div>
-                                      <div>
-                                        {issue.target_date &&
-                                          (issue.target_date < new Date().toISOString()
-                                            ? `Target date has passed by ${findHowManyDaysLeft(
-                                                issue.target_date
-                                              )} days`
-                                            : findHowManyDaysLeft(issue.target_date) <= 3
-                                            ? `Target date is in ${findHowManyDaysLeft(
-                                                issue.target_date
-                                              )} days`
-                                            : "Target date")}
-                                      </div>
-                                    </div>
-                                  </div>
-                                )}
-                                <Menu as="div" className="relative">
-                                  <Menu.Button
-                                    as="button"
-                                    className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-100 duration-300 outline-none`}
-                                  >
-                                    <EllipsisHorizontalIcon className="h-4 w-4" />
-                                  </Menu.Button>
-                                  <Menu.Items className="absolute origin-top-right right-0.5 mt-1 p-1 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
-                                    <Menu.Item>
-                                      <button
-                                        className="text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full"
-                                        type="button"
-                                        // onClick={() =>
-                                        //   openCreateIssueModal(cycle.id, issue, "edit")
-                                        // }
-                                      >
-                                        Edit
-                                      </button>
-                                    </Menu.Item>
-                                    <Menu.Item>
-                                      <div className="hover:bg-gray-100 border-b last:border-0">
-                                        <button
-                                          className="text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full"
-                                          type="button"
-                                          // onClick={() =>
-                                          //   removeIssueFromCycle(issue.cycle, issue.id)
-                                          // }
-                                        >
-                                          Remove from cycle
-                                        </button>
-                                      </div>
-                                    </Menu.Item>
-                                    <Menu.Item>
-                                      <div className="hover:bg-gray-100 border-b last:border-0">
-                                        <button
-                                          className="text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full"
-                                          type="button"
-                                          // onClick={() =>
-                                          //   openCreateIssueModal(cycle.id, issue, "delete")
-                                          // }
-                                        >
-                                          Delete permanently
-                                        </button>
-                                      </div>
-                                    </Menu.Item>
-                                  </Menu.Items>
-                                </Menu>
-                              </div>
-                            </div>
-                          );
-                        })
-                      ) : (
-                        <p className="text-sm px-4 py-3 text-gray-500">No issues.</p>
-                      )
-                    ) : (
-                      <div className="h-full w-full flex items-center justify-center">
-                        <Spinner />
-                      </div>
-                    )}
-                  </div>
-                </Disclosure.Panel>
-              </Transition>
-              <div className="p-3">
-                <button
-                  type="button"
-                  className="flex items-center gap-1 px-2 py-1 rounded hover:bg-gray-100 text-xs font-medium"
-                  // onClick={() => {
-                  //   setIsCreateIssuesModalOpen(true);
-                  //   if (selectedGroup !== null) {
-                  //     const stateId =
-                  //       selectedGroup === "state_detail.name"
-                  //         ? states?.find((s) => s.name === singleGroup)?.id ?? null
-                  //         : null;
-                  //     setPreloadedData({
-                  //       state: stateId !== null ? stateId : undefined,
-                  //       [selectedGroup]: singleGroup,
-                  //       actionType: "createIssue",
-                  //     });
-                  //   }
-                  // }}
-                >
-                  <PlusIcon className="h-3 w-3" />
-                  Add issue
-                </button>
-              </div>
-            </div>
-          )}
-        </Disclosure>
-      ))}
-    </div>
-  );
-
-  // return (
-  //   <>
-  //     <Disclosure as="div" defaultOpen>
-  //       {({ open }) => (
-  //         <div className="bg-white rounded-lg">
-  //           <div className="flex justify-between items-center bg-gray-100 px-4 py-3 rounded-t-lg">
-  //             <div className="flex items-center gap-2">
-  //               <Disclosure.Button>
-  //                 <ChevronDownIcon
-  //                   className={`h-4 w-4 text-gray-500 ${!open ? "transform -rotate-90" : ""}`}
-  //                 />
-  //               </Disclosure.Button>
-  //               <Link href={`/projects/${activeProject?.id}/cycles/${cycle.id}`}>
-  //                 <a className="flex items-center gap-2">
-  //                   <h2 className="font-medium leading-5">{cycle.name}</h2>
-  //                   <p className="flex gap-2 text-xs text-gray-500">
-  //                     <span>
-  //                       {cycle.status === "started"
-  //                         ? cycle.start_date
-  //                           ? `${renderShortNumericDateFormat(cycle.start_date)} - `
-  //                           : ""
-  //                         : cycle.status}
-  //                     </span>
-  //                     <span>
-  //                       {cycle.end_date ? renderShortNumericDateFormat(cycle.end_date) : ""}
-  //                     </span>
-  //                   </p>
-  //                 </a>
-  //               </Link>
-  //               <p className="text-gray-500 text-sm ml-0.5">{cycleIssues?.length}</p>
-  //             </div>
-
-  //             <Menu as="div" className="relative inline-block">
-  //               <Menu.Button
-  //                 as="button"
-  //                 className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none`}
-  //               >
-  //                 <EllipsisHorizontalIcon className="h-4 w-4" />
-  //               </Menu.Button>
-  //               <Menu.Items className="absolute origin-top-right right-0 mt-1 p-1 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
-  //                 <Menu.Item>
-  //                   <button
-  //                     type="button"
-  //                     className="text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full"
-  //                     onClick={() => selectSprint({ ...cycle, actionType: "edit" })}
-  //                   >
-  //                     Edit
-  //                   </button>
-  //                 </Menu.Item>
-  //                 <Menu.Item>
-  //                   <button
-  //                     type="button"
-  //                     className="text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full"
-  //                     onClick={() => selectSprint({ ...cycle, actionType: "delete" })}
-  //                   >
-  //                     Delete
-  //                   </button>
-  //                 </Menu.Item>
-  //               </Menu.Items>
-  //             </Menu>
-  //           </div>
-  //           <Transition
-  //             show={open}
-  //             enter="transition duration-100 ease-out"
-  //             enterFrom="transform opacity-0"
-  //             enterTo="transform opacity-100"
-  //             leave="transition duration-75 ease-out"
-  //             leaveFrom="transform opacity-100"
-  //             leaveTo="transform opacity-0"
-  //           >
-  //             <Disclosure.Panel>
-  //               <StrictModeDroppable droppableId={cycle.id}>
-  //                 {(provided) => (
-  //                   <div
-  //                     ref={provided.innerRef}
-  //                     {...provided.droppableProps}
-  //                     className="divide-y-2"
-  //                   >
-  //                     {cycleIssues ? (
-  //                       cycleIssues.length > 0 ? (
-  //                         cycleIssues.map((issue, index) => (
-  //                           <Draggable
-  //                             key={issue.id}
-  //                             draggableId={`${issue.id},${issue.issue}`} // bridge id, issue id
-  //                             index={index}
-  //                           >
-  //                             {(provided, snapshot) => (
-  //                               <div
-  //                                 className={`px-2 py-3 text-sm rounded flex justify-between items-center gap-2 ${
-  //                                   snapshot.isDragging
-  //                                     ? "bg-gray-100 shadow-lg border border-theme"
-  //                                     : ""
-  //                                 }`}
-  //                                 ref={provided.innerRef}
-  //                                 {...provided.draggableProps}
-  //                               >
-  //                                 <div className="flex items-center gap-2">
-  //                                   <button
-  //                                     type="button"
-  //                                     className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-100 duration-300 rotate-90 outline-none`}
-  //                                     {...provided.dragHandleProps}
-  //                                   >
-  //                                     <EllipsisHorizontalIcon className="h-4 w-4 text-gray-600" />
-  //                                     <EllipsisHorizontalIcon className="h-4 w-4 text-gray-600 mt-[-0.7rem]" />
-  //                                   </button>
-  //                                   <span
-  //                                     className="flex-shrink-0 h-1.5 w-1.5 block rounded-full"
-  //                                     style={{
-  //                                       backgroundColor: issue?.state_detail?.color,
-  //                                     }}
-  //                                   />
-  //                                   <Link
-  //                                     href={`/projects/${projectId}/issues/${issue.id}`}
-  //                                   >
-  //                                     <a className="flex items-center gap-2">
-  //                                       {properties.key && (
-  //                                         <span className="flex-shrink-0 text-xs text-gray-500">
-  //                                           {activeProject?.identifier}-
-  //                                           {issue.sequence_id}
-  //                                         </span>
-  //                                       )}
-  //                                       <span>{issue.name}</span>
-  //                                     </a>
-  //                                   </Link>
-  //                                 </div>
-  //                                 <div className="flex items-center gap-2">
-  //                                   {properties.priority && (
-  //                                     <div
-  //                                       className={`group relative flex-shrink-0 flex items-center gap-1 text-xs rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 capitalize ${
-  //                                         issue.priority === "urgent"
-  //                                           ? "bg-red-100 text-red-600"
-  //                                           : issue.priority === "high"
-  //                                           ? "bg-orange-100 text-orange-500"
-  //                                           : issue.priority === "medium"
-  //                                           ? "bg-yellow-100 text-yellow-500"
-  //                                           : issue.priority === "low"
-  //                                           ? "bg-green-100 text-green-500"
-  //                                           : "bg-gray-100"
-  //                                       }`}
-  //                                     >
-  //                                       {/* {getPriorityIcon(issue.priority ?? "")} */}
-  //                                       {issue.priority ?? "None"}
-  //                                       <div className="absolute bottom-full right-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
-  //                                         <h5 className="font-medium mb-1 text-gray-900">
-  //                                           Priority
-  //                                         </h5>
-  //                                         <div
-  //                                           className={`capitalize ${
-  //                                             issue.priority === "urgent"
-  //                                               ? "text-red-600"
-  //                                               : issue.priority === "high"
-  //                                               ? "text-orange-500"
-  //                                               : issue.priority === "medium"
-  //                                               ? "text-yellow-500"
-  //                                               : issue.priority === "low"
-  //                                               ? "text-green-500"
-  //                                               : ""
-  //                                           }`}
-  //                                         >
-  //                                           {issue.priority ?? "None"}
-  //                                         </div>
-  //                                       </div>
-  //                                     </div>
-  //                                   )}
-  //                                   {properties.state && (
-  //                                     <div className="group relative flex-shrink-0 flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300">
-  //                                       <span
-  //                                         className="flex-shrink-0 h-1.5 w-1.5 rounded-full"
-  //                                         style={{
-  //                                           backgroundColor:
-  //                                             issue?.state_detail?.color,
-  //                                         }}
-  //                                       ></span>
-  //                                       {addSpaceIfCamelCase(
-  //                                         issue?.state_detail.name
-  //                                       )}
-  //                                       <div className="absolute bottom-full right-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
-  //                                         <h5 className="font-medium mb-1">State</h5>
-  //                                         <div>{issue?.state_detail.name}</div>
-  //                                       </div>
-  //                                     </div>
-  //                                   )}
-  //                                   {properties.start_date && (
-  //                                     <div className="group relative flex-shrink-0 flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300">
-  //                                       <CalendarDaysIcon className="h-4 w-4" />
-  //                                       {issue.start_date
-  //                                         ? renderShortNumericDateFormat(
-  //                                             issue.start_date
-  //                                           )
-  //                                         : "N/A"}
-  //                                       <div className="absolute bottom-full right-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
-  //                                         <h5 className="font-medium mb-1">Started at</h5>
-  //                                         <div>
-  //                                           {renderShortNumericDateFormat(
-  //                                             issue.start_date ?? ""
-  //                                           )}
-  //                                         </div>
-  //                                       </div>
-  //                                     </div>
-  //                                   )}
-  //                                   {properties.target_date && (
-  //                                     <div
-  //                                       className={`group relative flex-shrink-0 group flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300 ${
-  //                                         issue.target_date === null
-  //                                           ? ""
-  //                                           : issue.target_date <
-  //                                             new Date().toISOString()
-  //                                           ? "text-red-600"
-  //                                           : findHowManyDaysLeft(
-  //                                               issue.target_date
-  //                                             ) <= 3 && "text-orange-400"
-  //                                       }`}
-  //                                     >
-  //                                       <CalendarDaysIcon className="h-4 w-4" />
-  //                                       {issue.target_date
-  //                                         ? renderShortNumericDateFormat(
-  //                                             issue.target_date
-  //                                           )
-  //                                         : "N/A"}
-  //                                       <div className="absolute bottom-full right-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
-  //                                         <h5 className="font-medium mb-1 text-gray-900">
-  //                                           Target date
-  //                                         </h5>
-  //                                         <div>
-  //                                           {renderShortNumericDateFormat(
-  //                                             issue.target_date ?? ""
-  //                                           )}
-  //                                         </div>
-  //                                         <div>
-  //                                           {issue.target_date &&
-  //                                             (issue.target_date <
-  //                                             new Date().toISOString()
-  //                                               ? `Target date has passed by ${findHowManyDaysLeft(
-  //                                                   issue.target_date
-  //                                                 )} days`
-  //                                               : findHowManyDaysLeft(
-  //                                                   issue.target_date
-  //                                                 ) <= 3
-  //                                               ? `Target date is in ${findHowManyDaysLeft(
-  //                                                   issue.target_date
-  //                                                 )} days`
-  //                                               : "Target date")}
-  //                                         </div>
-  //                                       </div>
-  //                                     </div>
-  //                                   )}
-  //                                   <Menu as="div" className="relative">
-  //                                     <Menu.Button
-  //                                       as="button"
-  //                                       className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-100 duration-300 outline-none`}
-  //                                     >
-  //                                       <EllipsisHorizontalIcon className="h-4 w-4" />
-  //                                     </Menu.Button>
-  //                                     <Menu.Items className="absolute origin-top-right right-0.5 mt-1 p-1 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
-  //                                       <Menu.Item>
-  //                                         <button
-  //                                           className="text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full"
-  //                                           type="button"
-  //                                           onClick={() =>
-  //                                             openCreateIssueModal(
-  //                                               cycle.id,
-  //                                               issue,
-  //                                               "edit"
-  //                                             )
-  //                                           }
-  //                                         >
-  //                                           Edit
-  //                                         </button>
-  //                                       </Menu.Item>
-  //                                       <Menu.Item>
-  //                                         <div className="hover:bg-gray-100 border-b last:border-0">
-  //                                           <button
-  //                                             className="text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full"
-  //                                             type="button"
-  //                                             onClick={() =>
-  //                                               removeIssueFromCycle(issue.cycle, issue.id)
-  //                                             }
-  //                                           >
-  //                                             Remove from cycle
-  //                                           </button>
-  //                                         </div>
-  //                                       </Menu.Item>
-  //                                       <Menu.Item>
-  //                                         <div className="hover:bg-gray-100 border-b last:border-0">
-  //                                           <button
-  //                                             className="text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full"
-  //                                             type="button"
-  //                                             onClick={() =>
-  //                                               openCreateIssueModal(
-  //                                                 cycle.id,
-  //                                                 issue,
-  //                                                 "delete"
-  //                                               )
-  //                                             }
-  //                                           >
-  //                                             Delete permanently
-  //                                           </button>
-  //                                         </div>
-  //                                       </Menu.Item>
-  //                                     </Menu.Items>
-  //                                   </Menu>
-  //                                 </div>
-  //                               </div>
-  //                             )}
-  //                           </Draggable>
-  //                         ))
-  //                       ) : (
-  //                         <p className="text-sm px-4 py-3 text-gray-500">
-  //                           This cycle has no issue.
-  //                         </p>
-  //                       )
-  //                     ) : (
-  //                       <div className="w-full h-full flex items-center justify-center">
-  //                         <Spinner />
-  //                       </div>
-  //                     )}
-  //                     {provided.placeholder}
-  //                   </div>
-  //                 )}
-  //               </StrictModeDroppable>
-  //             </Disclosure.Panel>
-  //           </Transition>
-  //           <div className="p-3">
-  //             <Menu as="div" className="relative inline-block">
-  //               <Menu.Button className="flex items-center gap-1 px-2 py-1 rounded hover:bg-gray-100 text-xs font-medium">
-  //                 <PlusIcon className="h-3 w-3" />
-  //                 Add issue
-  //               </Menu.Button>
-
-  //               <Transition
-  //                 as={React.Fragment}
-  //                 enter="transition ease-out duration-100"
-  //                 enterFrom="transform opacity-0 scale-95"
-  //                 enterTo="transform opacity-100 scale-100"
-  //                 leave="transition ease-in duration-75"
-  //                 leaveFrom="transform opacity-100 scale-100"
-  //                 leaveTo="transform opacity-0 scale-95"
-  //               >
-  //                 <Menu.Items className="absolute left-0 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
-  //                   <div className="p-1">
-  //                     <Menu.Item as="div">
-  //                       {(active) => (
-  //                         <button
-  //                           type="button"
-  //                           className="text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full"
-  //                           onClick={() => openCreateIssueModal(cycle.id)}
-  //                         >
-  //                           Create new
-  //                         </button>
-  //                       )}
-  //                     </Menu.Item>
-  //                     <Menu.Item as="div">
-  //                       {(active) => (
-  //                         <button
-  //                           type="button"
-  //                           className="p-2 text-left text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap"
-  //                           onClick={() => openIssuesListModal(cycle.id)}
-  //                         >
-  //                           Add an existing issue
-  //                         </button>
-  //                       )}
-  //                     </Menu.Item>
-  //                   </div>
-  //                 </Menu.Items>
-  //               </Transition>
-  //             </Menu>
-  //           </div>
-  //         </div>
-  //       )}
-  //     </Disclosure>
-  //   </>
-  // );
-};
-
-export default CyclesListView;
diff --git a/apps/app/components/project/cycles/BoardView/index.tsx b/apps/app/components/project/cycles/board-view/index.tsx
similarity index 91%
rename from apps/app/components/project/cycles/BoardView/index.tsx
rename to apps/app/components/project/cycles/board-view/index.tsx
index 8026786c4..07d68f20d 100644
--- a/apps/app/components/project/cycles/BoardView/index.tsx
+++ b/apps/app/components/project/cycles/board-view/index.tsx
@@ -1,5 +1,5 @@
 // components
-import SingleBoard from "components/project/cycles/BoardView/single-board";
+import SingleBoard from "components/project/cycles/board-view/single-board";
 // ui
 import { Spinner } from "ui";
 // types
@@ -13,11 +13,7 @@ type Props = {
   properties: Properties;
   selectedGroup: NestedKeyOf<IIssue> | null;
   members: IProjectMember[] | undefined;
-  openCreateIssueModal: (
-    sprintId: string,
-    issue?: IIssue,
-    actionType?: "create" | "edit" | "delete"
-  ) => void;
+  openCreateIssueModal: (issue?: IIssue, actionType?: "create" | "edit" | "delete") => void;
   openIssuesListModal: (cycleId: string) => void;
   removeIssueFromCycle: (cycleId: string, bridgeId: string) => void;
 };
diff --git a/apps/app/components/project/cycles/board-view/single-board.tsx b/apps/app/components/project/cycles/board-view/single-board.tsx
new file mode 100644
index 000000000..c437824e4
--- /dev/null
+++ b/apps/app/components/project/cycles/board-view/single-board.tsx
@@ -0,0 +1,377 @@
+// react
+import React, { useState } from "react";
+// next
+import Link from "next/link";
+import Image from "next/image";
+// swr
+import useSWR from "swr";
+// services
+import cycleServices from "lib/services/cycles.service";
+// hooks
+import useUser from "lib/hooks/useUser";
+// ui
+import { Spinner } from "ui";
+// icons
+import {
+  ArrowsPointingInIcon,
+  ArrowsPointingOutIcon,
+  CalendarDaysIcon,
+  PlusIcon,
+  EllipsisHorizontalIcon,
+  TrashIcon,
+} from "@heroicons/react/24/outline";
+import User from "public/user.png";
+// types
+import {
+  CycleIssueResponse,
+  ICycle,
+  IIssue,
+  IWorkspaceMember,
+  NestedKeyOf,
+  Properties,
+} from "types";
+// constants
+import { CYCLE_ISSUES, WORKSPACE_MEMBERS } from "constants/fetch-keys";
+import {
+  addSpaceIfCamelCase,
+  findHowManyDaysLeft,
+  renderShortNumericDateFormat,
+} from "constants/common";
+import { Menu, Transition } from "@headlessui/react";
+import workspaceService from "lib/services/workspace.service";
+
+type Props = {
+  properties: Properties;
+  groupedByIssues: {
+    [key: string]: IIssue[];
+  };
+  selectedGroup: NestedKeyOf<IIssue> | null;
+  groupTitle: string;
+  createdBy: string | null;
+  bgColor?: string;
+  openCreateIssueModal: (issue?: IIssue, actionType?: "create" | "edit" | "delete") => void;
+  openIssuesListModal: (cycleId: string) => void;
+  removeIssueFromCycle: (cycleId: string, bridgeId: string) => void;
+};
+
+const SingleCycleBoard: React.FC<Props> = ({
+  properties,
+  groupedByIssues,
+  selectedGroup,
+  groupTitle,
+  createdBy,
+  bgColor,
+  openCreateIssueModal,
+  openIssuesListModal,
+  removeIssueFromCycle,
+}) => {
+  // Collapse/Expand
+  const [show, setState] = useState(true);
+
+  const { activeWorkspace, activeProject } = useUser();
+
+  if (selectedGroup === "priority")
+    groupTitle === "high"
+      ? (bgColor = "#dc2626")
+      : groupTitle === "medium"
+      ? (bgColor = "#f97316")
+      : groupTitle === "low"
+      ? (bgColor = "#22c55e")
+      : (bgColor = "#ff0000");
+
+  const { data: people } = useSWR<IWorkspaceMember[]>(
+    activeWorkspace ? WORKSPACE_MEMBERS : null,
+    activeWorkspace ? () => workspaceService.workspaceMembers(activeWorkspace.slug) : null
+  );
+
+  return (
+    <div className={`rounded flex-shrink-0 h-full ${!show ? "" : "w-80 bg-gray-50 border"}`}>
+      <div className={`${!show ? "" : "h-full space-y-3 overflow-y-auto flex flex-col"}`}>
+        <div
+          className={`flex justify-between p-3 pb-0 ${
+            !show ? "flex-col bg-gray-50 rounded-md border" : ""
+          }`}
+        >
+          <div
+            className={`w-full flex justify-between items-center ${
+              !show ? "flex-col gap-2" : "gap-1"
+            }`}
+          >
+            <div
+              className={`flex items-center gap-x-1 px-2 bg-slate-900 rounded-md cursor-pointer ${
+                !show ? "py-2 mb-2 flex-col gap-y-2" : ""
+              }`}
+              style={{
+                border: `2px solid ${bgColor}`,
+                backgroundColor: `${bgColor}20`,
+              }}
+            >
+              <span
+                className={`w-3 h-3 block rounded-full ${!show ? "" : "mr-1"}`}
+                style={{
+                  backgroundColor: Boolean(bgColor) ? bgColor : undefined,
+                }}
+              />
+              <h2
+                className={`text-[0.9rem] font-medium capitalize`}
+                style={{
+                  writingMode: !show ? "vertical-rl" : "horizontal-tb",
+                }}
+              >
+                {groupTitle === null || groupTitle === "null"
+                  ? "None"
+                  : createdBy
+                  ? createdBy
+                  : addSpaceIfCamelCase(groupTitle)}
+              </h2>
+              <span className="text-gray-500 text-sm ml-0.5">
+                {groupedByIssues[groupTitle].length}
+              </span>
+            </div>
+
+            <Menu as="div" className="relative inline-block">
+              <Menu.Button className="h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none">
+                <EllipsisHorizontalIcon className="h-4 w-4" />
+              </Menu.Button>
+
+              <Transition
+                as={React.Fragment}
+                enter="transition ease-out duration-100"
+                enterFrom="transform opacity-0 scale-95"
+                enterTo="transform opacity-100 scale-100"
+                leave="transition ease-in duration-75"
+                leaveFrom="transform opacity-100 scale-100"
+                leaveTo="transform opacity-0 scale-95"
+              >
+                <Menu.Items className="absolute right-0 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
+                  <div className="p-1">
+                    <Menu.Item as="div">
+                      {(active) => (
+                        <button
+                          type="button"
+                          className="text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full"
+                          onClick={() => openCreateIssueModal()}
+                        >
+                          Create new
+                        </button>
+                      )}
+                    </Menu.Item>
+                    <Menu.Item as="div">
+                      {(active) => (
+                        <button
+                          type="button"
+                          className="p-2 text-left text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap"
+                          // onClick={() => openIssuesListModal()}
+                        >
+                          Add an existing issue
+                        </button>
+                      )}
+                    </Menu.Item>
+                  </div>
+                </Menu.Items>
+              </Transition>
+            </Menu>
+          </div>
+        </div>
+        <div
+          className={`mt-3 space-y-3 h-full overflow-y-auto px-3 pb-3 ${
+            !show ? "hidden" : "block"
+          }`}
+        >
+          {groupedByIssues[groupTitle].map((childIssue, index: number) => {
+            const assignees = [
+              ...(childIssue?.assignees_list ?? []),
+              ...(childIssue?.assignees ?? []),
+            ]?.map((assignee) => {
+              const tempPerson = people?.find((p) => p.member.id === assignee)?.member;
+
+              return {
+                avatar: tempPerson?.avatar,
+                first_name: tempPerson?.first_name,
+                email: tempPerson?.email,
+              };
+            });
+
+            return (
+              <div key={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>
+            );
+          })}
+          <button
+            type="button"
+            className="flex items-center text-xs font-medium hover:bg-gray-100 p-2 rounded duration-300 outline-none"
+          >
+            <PlusIcon className="h-3 w-3 mr-1" />
+            Create
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SingleCycleBoard;
diff --git a/apps/app/components/project/cycles/list-view/index.tsx b/apps/app/components/project/cycles/list-view/index.tsx
new file mode 100644
index 000000000..2ec0c6731
--- /dev/null
+++ b/apps/app/components/project/cycles/list-view/index.tsx
@@ -0,0 +1,352 @@
+// react
+import React from "react";
+// next
+import Link from "next/link";
+// swr
+import useSWR from "swr";
+// headless ui
+import { Disclosure, Transition, Menu } from "@headlessui/react";
+// services
+import cycleServices from "lib/services/cycles.service";
+// hooks
+import useUser from "lib/hooks/useUser";
+// ui
+import { Spinner } from "ui";
+// icons
+import { PlusIcon, EllipsisHorizontalIcon, ChevronDownIcon } from "@heroicons/react/20/solid";
+import { CalendarDaysIcon } from "@heroicons/react/24/outline";
+// types
+import { IIssue, IWorkspaceMember, NestedKeyOf, Properties, SelectSprintType } from "types";
+// fetch keys
+import { CYCLE_ISSUES, WORKSPACE_MEMBERS } from "constants/fetch-keys";
+// constants
+import {
+  addSpaceIfCamelCase,
+  findHowManyDaysLeft,
+  renderShortNumericDateFormat,
+} from "constants/common";
+import workspaceService from "lib/services/workspace.service";
+
+type Props = {
+  groupedByIssues: {
+    [key: string]: IIssue[];
+  };
+  properties: Properties;
+  selectedGroup: NestedKeyOf<IIssue> | null;
+  openCreateIssueModal: (issue?: IIssue, actionType?: "create" | "edit" | "delete") => void;
+  openIssuesListModal: (cycleId: string) => void;
+  removeIssueFromCycle: (cycleId: string, bridgeId: string) => void;
+};
+
+const CyclesListView: React.FC<Props> = ({
+  groupedByIssues,
+  selectedGroup,
+  openCreateIssueModal,
+  openIssuesListModal,
+  properties,
+  removeIssueFromCycle,
+}) => {
+  const { activeWorkspace, activeProject } = useUser();
+
+  const { data: people } = useSWR<IWorkspaceMember[]>(
+    activeWorkspace ? WORKSPACE_MEMBERS : null,
+    activeWorkspace ? () => workspaceService.workspaceMembers(activeWorkspace.slug) : null
+  );
+
+  return (
+    <div className="flex flex-col space-y-5">
+      {Object.keys(groupedByIssues).map((singleGroup) => (
+        <Disclosure key={singleGroup} as="div" defaultOpen>
+          {({ open }) => (
+            <div className="bg-white rounded-lg">
+              <div className="bg-gray-100 px-4 py-3 rounded-t-lg">
+                <Disclosure.Button>
+                  <div className="flex items-center gap-x-2">
+                    <span>
+                      <ChevronDownIcon
+                        className={`h-4 w-4 text-gray-500 ${!open ? "transform -rotate-90" : ""}`}
+                      />
+                    </span>
+                    {selectedGroup !== null ? (
+                      <h2 className="font-medium leading-5 capitalize">
+                        {singleGroup === null || singleGroup === "null"
+                          ? selectedGroup === "priority" && "No priority"
+                          : addSpaceIfCamelCase(singleGroup)}
+                      </h2>
+                    ) : (
+                      <h2 className="font-medium leading-5">All Issues</h2>
+                    )}
+                    <p className="text-gray-500 text-sm">
+                      {groupedByIssues[singleGroup as keyof IIssue].length}
+                    </p>
+                  </div>
+                </Disclosure.Button>
+              </div>
+              <Transition
+                show={open}
+                enter="transition duration-100 ease-out"
+                enterFrom="transform opacity-0"
+                enterTo="transform opacity-100"
+                leave="transition duration-75 ease-out"
+                leaveFrom="transform opacity-100"
+                leaveTo="transform opacity-0"
+              >
+                <Disclosure.Panel>
+                  <div className="divide-y-2">
+                    {groupedByIssues[singleGroup] ? (
+                      groupedByIssues[singleGroup].length > 0 ? (
+                        groupedByIssues[singleGroup].map((issue: IIssue) => {
+                          const assignees = [
+                            ...(issue?.assignees_list ?? []),
+                            ...(issue?.assignees ?? []),
+                          ]?.map((assignee) => {
+                            const tempPerson = people?.find(
+                              (p) => p.member.id === assignee
+                            )?.member;
+
+                            return {
+                              avatar: tempPerson?.avatar,
+                              first_name: tempPerson?.first_name,
+                              email: tempPerson?.email,
+                            };
+                          });
+
+                          return (
+                            <div
+                              key={issue.id}
+                              className="px-4 py-3 text-sm rounded flex justify-between items-center gap-2"
+                            >
+                              <div className="flex items-center gap-2">
+                                <span
+                                  className={`flex-shrink-0 h-1.5 w-1.5 block rounded-full`}
+                                  style={{
+                                    backgroundColor: issue.state_detail.color,
+                                  }}
+                                />
+                                <Link href={`/projects/${activeProject?.id}/issues/${issue.id}`}>
+                                  <a className="group relative flex items-center gap-2">
+                                    {properties.key && (
+                                      <span className="flex-shrink-0 text-xs text-gray-500">
+                                        {activeProject?.identifier}-{issue.sequence_id}
+                                      </span>
+                                    )}
+                                    <span className="">{issue.name}</span>
+                                    <div className="absolute bottom-full left-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md max-w-sm whitespace-nowrap">
+                                      <h5 className="font-medium mb-1">Name</h5>
+                                      <div>{issue.name}</div>
+                                    </div>
+                                  </a>
+                                </Link>
+                              </div>
+                              <div className="flex-shrink-0 flex items-center gap-x-1 gap-y-2 text-xs flex-wrap">
+                                {properties.priority && (
+                                  <div
+                                    className={`group relative flex-shrink-0 flex items-center gap-1 text-xs rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 capitalize ${
+                                      issue.priority === "urgent"
+                                        ? "bg-red-100 text-red-600"
+                                        : issue.priority === "high"
+                                        ? "bg-orange-100 text-orange-500"
+                                        : issue.priority === "medium"
+                                        ? "bg-yellow-100 text-yellow-500"
+                                        : issue.priority === "low"
+                                        ? "bg-green-100 text-green-500"
+                                        : "bg-gray-100"
+                                    }`}
+                                  >
+                                    {/* {getPriorityIcon(issue.priority ?? "")} */}
+                                    {issue.priority ?? "None"}
+                                    <div className="absolute bottom-full right-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
+                                      <h5 className="font-medium mb-1 text-gray-900">Priority</h5>
+                                      <div
+                                        className={`capitalize ${
+                                          issue.priority === "urgent"
+                                            ? "text-red-600"
+                                            : issue.priority === "high"
+                                            ? "text-orange-500"
+                                            : issue.priority === "medium"
+                                            ? "text-yellow-500"
+                                            : issue.priority === "low"
+                                            ? "text-green-500"
+                                            : ""
+                                        }`}
+                                      >
+                                        {issue.priority ?? "None"}
+                                      </div>
+                                    </div>
+                                  </div>
+                                )}
+                                {properties.state && (
+                                  <div className="group relative flex-shrink-0 flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300">
+                                    <span
+                                      className="flex-shrink-0 h-1.5 w-1.5 rounded-full"
+                                      style={{
+                                        backgroundColor: issue?.state_detail?.color,
+                                      }}
+                                    ></span>
+                                    {addSpaceIfCamelCase(issue?.state_detail.name)}
+                                    <div className="absolute bottom-full right-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
+                                      <h5 className="font-medium mb-1">State</h5>
+                                      <div>{issue?.state_detail.name}</div>
+                                    </div>
+                                  </div>
+                                )}
+                                {properties.start_date && (
+                                  <div className="group relative flex-shrink-0 flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300">
+                                    <CalendarDaysIcon className="h-4 w-4" />
+                                    {issue.start_date
+                                      ? renderShortNumericDateFormat(issue.start_date)
+                                      : "N/A"}
+                                    <div className="absolute bottom-full right-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
+                                      <h5 className="font-medium mb-1">Started at</h5>
+                                      <div>
+                                        {renderShortNumericDateFormat(issue.start_date ?? "")}
+                                      </div>
+                                    </div>
+                                  </div>
+                                )}
+                                {properties.target_date && (
+                                  <div
+                                    className={`group relative flex-shrink-0 group flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300 ${
+                                      issue.target_date === null
+                                        ? ""
+                                        : issue.target_date < new Date().toISOString()
+                                        ? "text-red-600"
+                                        : findHowManyDaysLeft(issue.target_date) <= 3 &&
+                                          "text-orange-400"
+                                    }`}
+                                  >
+                                    <CalendarDaysIcon className="h-4 w-4" />
+                                    {issue.target_date
+                                      ? renderShortNumericDateFormat(issue.target_date)
+                                      : "N/A"}
+                                    <div className="absolute bottom-full right-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
+                                      <h5 className="font-medium mb-1 text-gray-900">
+                                        Target date
+                                      </h5>
+                                      <div>
+                                        {renderShortNumericDateFormat(issue.target_date ?? "")}
+                                      </div>
+                                      <div>
+                                        {issue.target_date &&
+                                          (issue.target_date < new Date().toISOString()
+                                            ? `Target date has passed by ${findHowManyDaysLeft(
+                                                issue.target_date
+                                              )} days`
+                                            : findHowManyDaysLeft(issue.target_date) <= 3
+                                            ? `Target date is in ${findHowManyDaysLeft(
+                                                issue.target_date
+                                              )} days`
+                                            : "Target date")}
+                                      </div>
+                                    </div>
+                                  </div>
+                                )}
+                                <Menu as="div" className="relative">
+                                  <Menu.Button
+                                    as="button"
+                                    className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-100 duration-300 outline-none`}
+                                  >
+                                    <EllipsisHorizontalIcon className="h-4 w-4" />
+                                  </Menu.Button>
+                                  <Menu.Items className="absolute origin-top-right right-0.5 mt-1 p-1 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
+                                    <Menu.Item>
+                                      <button
+                                        className="text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full"
+                                        type="button"
+                                        onClick={() => openCreateIssueModal(issue, "edit")}
+                                      >
+                                        Edit
+                                      </button>
+                                    </Menu.Item>
+                                    <Menu.Item>
+                                      <div className="hover:bg-gray-100 border-b last:border-0">
+                                        <button
+                                          className="text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full"
+                                          type="button"
+                                          // onClick={() =>
+                                          //   removeIssueFromCycle(issue.cycle, issue.id)
+                                          // }
+                                        >
+                                          Remove from cycle
+                                        </button>
+                                      </div>
+                                    </Menu.Item>
+                                    <Menu.Item>
+                                      <div className="hover:bg-gray-100 border-b last:border-0">
+                                        <button
+                                          className="text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full"
+                                          type="button"
+                                          // onClick={() =>
+                                          //   openCreateIssueModal(cycle.id, issue, "delete")
+                                          // }
+                                        >
+                                          Delete permanently
+                                        </button>
+                                      </div>
+                                    </Menu.Item>
+                                  </Menu.Items>
+                                </Menu>
+                              </div>
+                            </div>
+                          );
+                        })
+                      ) : (
+                        <p className="text-sm px-4 py-3 text-gray-500">No issues.</p>
+                      )
+                    ) : (
+                      <div className="h-full w-full flex items-center justify-center">
+                        <Spinner />
+                      </div>
+                    )}
+                  </div>
+                </Disclosure.Panel>
+              </Transition>
+              <div className="p-3">
+                <button
+                  type="button"
+                  className="flex items-center gap-1 px-2 py-1 rounded hover:bg-gray-100 text-xs font-medium"
+                  // onClick={() => {
+                  //   setIsCreateIssuesModalOpen(true);
+                  //   if (selectedGroup !== null) {
+                  //     const stateId =
+                  //       selectedGroup === "state_detail.name"
+                  //         ? states?.find((s) => s.name === singleGroup)?.id ?? null
+                  //         : null;
+                  //     setPreloadedData({
+                  //       state: stateId !== null ? stateId : undefined,
+                  //       [selectedGroup]: singleGroup,
+                  //       actionType: "createIssue",
+                  //     });
+                  //   }
+                  // }}
+                >
+                  <PlusIcon className="h-3 w-3" />
+                  Add issue
+                </button>
+              </div>
+            </div>
+          )}
+        </Disclosure>
+      ))}
+    </div>
+    // <button
+    //                     type="button"
+    //                     className="text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full"
+    //                     onClick={() => selectSprint({ ...cycle, actionType: "edit" })}
+    //                   >
+    //                     Edit
+    //                   </button>
+    //                 </Menu.Item>
+    //                 <Menu.Item>
+    //                   <button
+    //                     type="button"
+    //                     className="text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full"
+    //                     onClick={() => selectSprint({ ...cycle, actionType: "delete" })}
+    //                   >
+    //                     Delete
+    //                   </button>
+    //                 </Menu.Item
+  );
+};
+
+export default CyclesListView;
diff --git a/apps/app/components/project/cycles/stats-view/index.tsx b/apps/app/components/project/cycles/stats-view/index.tsx
new file mode 100644
index 000000000..4eb14608b
--- /dev/null
+++ b/apps/app/components/project/cycles/stats-view/index.tsx
@@ -0,0 +1,23 @@
+// next
+import Link from "next/link";
+// hooks
+import useUser from "lib/hooks/useUser";
+// types
+import { ICycle } from "types";
+import SingleStat from "./single-stat";
+
+type Props = {
+  cycles: ICycle[];
+};
+
+const CycleStatsView: React.FC<Props> = ({ cycles }) => {
+  return (
+    <>
+      {cycles.map((cycle) => (
+        <SingleStat key={cycle.id} cycle={cycle} />
+      ))}
+    </>
+  );
+};
+
+export default CycleStatsView;
diff --git a/apps/app/components/project/cycles/stats-view/single-stat.tsx b/apps/app/components/project/cycles/stats-view/single-stat.tsx
new file mode 100644
index 000000000..ae5301fe9
--- /dev/null
+++ b/apps/app/components/project/cycles/stats-view/single-stat.tsx
@@ -0,0 +1,102 @@
+// next
+import Link from "next/link";
+// swr
+import useSWR from "swr";
+// services
+import cyclesService from "lib/services/cycles.service";
+// hooks
+import useUser from "lib/hooks/useUser";
+// types
+import { CycleIssueResponse, ICycle } from "types";
+// fetch-keys
+import { CYCLE_ISSUES } from "constants/fetch-keys";
+import { groupBy, renderShortNumericDateFormat } from "constants/common";
+import {
+  CheckIcon,
+  ExclamationCircleIcon,
+  ExclamationTriangleIcon,
+} from "@heroicons/react/24/outline";
+
+type Props = { cycle: ICycle };
+
+const stateGroupIcons: {
+  [key: string]: JSX.Element;
+} = {
+  backlog: <ExclamationTriangleIcon className="h-4 w-4" />,
+  unstarted: <CheckIcon className="h-4 w-4" />,
+  started: <CheckIcon className="h-4 w-4" />,
+  cancelled: <ExclamationCircleIcon className="h-4 w-4" />,
+  completed: <CheckIcon className="h-4 w-4" />,
+};
+
+const SingleStat: React.FC<Props> = ({ cycle }) => {
+  const { activeWorkspace, activeProject } = useUser();
+
+  const { data: cycleIssues } = useSWR<CycleIssueResponse[]>(
+    activeWorkspace && activeProject && cycle.id ? CYCLE_ISSUES(cycle.id as string) : null,
+    activeWorkspace && activeProject && cycle.id
+      ? () =>
+          cyclesService.getCycleIssues(activeWorkspace?.slug, activeProject?.id, cycle.id as string)
+      : null
+  );
+  const groupedIssues = {
+    backlog: [],
+    unstarted: [],
+    started: [],
+    cancelled: [],
+    completed: [],
+    ...groupBy(cycleIssues ?? [], "issue_details.state_detail.group"),
+  };
+
+  // status calculator
+  const startDate = new Date(cycle.start_date ?? "");
+  const endDate = new Date(cycle.end_date ?? "");
+  const today = new Date();
+
+  return (
+    <>
+      <div className="bg-white p-3">
+        <div className="flex justify-between items-center gap-2">
+          <div className="flex items-center gap-2">
+            <Link href={`/projects/${activeProject?.id}/cycles/${cycle.id}`}>
+              <a className="block rounded-md">{cycle.name}</a>
+            </Link>
+            <div className="text-xs text-gray-500">
+              <span>{renderShortNumericDateFormat(startDate)}</span>
+              {" - "}
+              <span>{renderShortNumericDateFormat(endDate)}</span>
+            </div>
+          </div>
+          <div className="text-xs bg-gray-100 px-2 py-1 rounded">
+            {today.getDate() < startDate.getDate()
+              ? "Not started"
+              : today.getDate() > endDate.getDate()
+              ? "Over"
+              : "Active"}
+          </div>
+        </div>
+        <div className="text-sm mt-6 mb-4 space-y-2">
+          <div className="grid grid-cols-5 gap-4">
+            {Object.keys(groupedIssues).map((group) => {
+              return (
+                <div key={group} className="bg-gray-100 rounded-md p-3 flex items-center gap-3">
+                  <div>
+                    <div className="h-8 w-8 rounded-full grid place-items-center bg-green-500 text-white">
+                      {stateGroupIcons[group]}
+                    </div>
+                  </div>
+                  <div>
+                    <h5 className="capitalize">{group}</h5>
+                    <span>{groupedIssues[group].length}</span>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default SingleStat;
diff --git a/apps/app/components/project/issues/IssuesListModal.tsx b/apps/app/components/project/issues/IssuesListModal.tsx
index aba9a0c34..b635a16b6 100644
--- a/apps/app/components/project/issues/IssuesListModal.tsx
+++ b/apps/app/components/project/issues/IssuesListModal.tsx
@@ -19,6 +19,7 @@ type Props = {
   issues: IIssue[];
   title?: string;
   multiple?: boolean;
+  customDisplay?: JSX.Element;
 };
 
 const IssuesListModal: React.FC<Props> = ({
@@ -29,6 +30,7 @@ const IssuesListModal: React.FC<Props> = ({
   issues,
   title = "Issues",
   multiple = false,
+  customDisplay,
 }) => {
   const [query, setQuery] = useState("");
   const [values, setValues] = useState<string[]>([]);
@@ -90,9 +92,10 @@ const IssuesListModal: React.FC<Props> = ({
                       className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 placeholder-gray-500 focus:ring-0 sm:text-sm outline-none"
                       placeholder="Search..."
                       onChange={(e) => setQuery(e.target.value)}
+                      displayValue={() => ""}
                     />
                   </div>
-
+                  <div className="p-3">{customDisplay}</div>
                   <Combobox.Options
                     static
                     className="max-h-80 scroll-py-2 divide-y divide-gray-500 divide-opacity-10 overflow-y-auto"
diff --git a/apps/app/components/project/issues/issue-detail/IssueDetailSidebar.tsx b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/index.tsx
similarity index 55%
rename from apps/app/components/project/issues/issue-detail/IssueDetailSidebar.tsx
rename to apps/app/components/project/issues/issue-detail/issue-detail-sidebar/index.tsx
index c6e1eb573..0e839ca94 100644
--- a/apps/app/components/project/issues/issue-detail/IssueDetailSidebar.tsx
+++ b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/index.tsx
@@ -15,12 +15,7 @@ import useToast from "lib/hooks/useToast";
 // components
 import IssuesListModal from "components/project/issues/IssuesListModal";
 // fetching keys
-import {
-  PROJECT_ISSUES_LIST,
-  STATE_LIST,
-  WORKSPACE_MEMBERS,
-  PROJECT_ISSUE_LABELS,
-} from "constants/fetch-keys";
+import { STATE_LIST, WORKSPACE_MEMBERS, PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
 // commons
 import { classNames, copyTextToClipboard } from "constants/common";
 import { PRIORITIES } from "constants/";
@@ -48,6 +43,11 @@ import type { Control } from "react-hook-form";
 import type { IIssue, IIssueLabels, IssueResponse, IState, NestedKeyOf } from "types";
 import { TwitterPicker } from "react-color";
 import { positionEditorElement } from "components/lexical/helpers/editor";
+import SelectState from "./select-state";
+import SelectPriority from "./select-priority";
+import SelectParent from "./select-parent";
+import SelectCycle from "./select-cycle";
+import SelectAssignee from "./select-assignee";
 
 type Props = {
   control: Control<IIssue, any>;
@@ -71,25 +71,12 @@ const IssueDetailSidebar: React.FC<Props> = ({
 }) => {
   const [isBlockerModalOpen, setIsBlockerModalOpen] = useState(false);
   const [isBlockedModalOpen, setIsBlockedModalOpen] = useState(false);
-  const [isParentModalOpen, setIsParentModalOpen] = useState(false);
   const [createLabelForm, setCreateLabelForm] = useState(false);
 
   const { activeWorkspace, activeProject, cycles, issues } = useUser();
 
   const { setToastAlert } = useToast();
 
-  const { data: states } = useSWR<IState[]>(
-    activeWorkspace && activeProject ? STATE_LIST(activeProject.id) : null,
-    activeWorkspace && activeProject
-      ? () => stateServices.getStates(activeWorkspace.slug, activeProject.id)
-      : null
-  );
-
-  const { data: people } = useSWR(
-    activeWorkspace ? WORKSPACE_MEMBERS(activeWorkspace.slug) : null,
-    activeWorkspace ? () => workspaceService.workspaceMembers(activeWorkspace.slug) : null
-  );
-
   const { data: issueLabels, mutate: issueLabelMutate } = useSWR<IIssueLabels[]>(
     activeProject && activeWorkspace ? PROJECT_ISSUE_LABELS(activeProject.id) : null,
     activeProject && activeWorkspace
@@ -108,7 +95,7 @@ const IssueDetailSidebar: React.FC<Props> = ({
     defaultValues,
   });
 
-  const onSubmit = (formData: any) => {
+  const handleNewLabel = (formData: any) => {
     if (!activeWorkspace || !activeProject || isSubmitting) return;
     issuesServices
       .createIssueLabel(activeWorkspace.slug, activeProject.id, formData)
@@ -133,58 +120,6 @@ const IssueDetailSidebar: React.FC<Props> = ({
     }>
   > = [
     [
-      {
-        label: "Status",
-        name: "state",
-        canSelectMultipleOptions: false,
-        icon: Squares2X2Icon,
-        options: states?.map((state) => ({
-          label: state.name,
-          value: state.id,
-          color: state.color,
-        })),
-        modal: false,
-      },
-      {
-        label: "Assignees",
-        name: "assignees_list",
-        canSelectMultipleOptions: true,
-        icon: UserGroupIcon,
-        options: people?.map((person) => ({
-          label: person.member.first_name,
-          value: person.member.id,
-        })),
-        modal: false,
-      },
-      {
-        label: "Priority",
-        name: "priority",
-        canSelectMultipleOptions: false,
-        icon: ChartBarIcon,
-        options: PRIORITIES.map((property) => ({
-          label: property,
-          value: property,
-        })),
-        modal: false,
-      },
-    ],
-    [
-      {
-        label: "Parent",
-        name: "parent",
-        canSelectMultipleOptions: false,
-        icon: UserIcon,
-        issuesList:
-          issues?.results.filter(
-            (i) =>
-              i.id !== issueDetail?.id &&
-              i.id !== issueDetail?.parent &&
-              i.parent !== issueDetail?.id
-          ) ?? [],
-        modal: true,
-        isOpen: isParentModalOpen,
-        setIsOpen: setIsParentModalOpen,
-      },
       // {
       //   label: "Blocker",
       //   name: "blockers_list",
@@ -205,26 +140,6 @@ const IssueDetailSidebar: React.FC<Props> = ({
       //   isOpen: isBlockedModalOpen,
       //   setIsOpen: setIsBlockedModalOpen,
       // },
-      {
-        label: "Target Date",
-        name: "target_date",
-        canSelectMultipleOptions: true,
-        icon: CalendarDaysIcon,
-        modal: false,
-      },
-    ],
-    [
-      {
-        label: "Cycle",
-        name: "cycle",
-        canSelectMultipleOptions: false,
-        icon: ArrowPathIcon,
-        options: cycles?.map((cycle) => ({
-          label: cycle.name,
-          value: cycle.id,
-        })),
-        modal: false,
-      },
     ],
   ];
 
@@ -297,7 +212,69 @@ const IssueDetailSidebar: React.FC<Props> = ({
           </div>
         </div>
         <div className="divide-y-2 divide-gray-100">
-          {sidebarSections.map((section, index) => (
+          <div className="py-1">
+            <SelectState control={control} submitChanges={submitChanges} />
+            <SelectAssignee control={control} submitChanges={submitChanges} />
+            <SelectPriority control={control} submitChanges={submitChanges} />
+          </div>
+          <div className="py-1">
+            <SelectParent
+              control={control}
+              submitChanges={submitChanges}
+              issuesList={
+                issues?.results.filter(
+                  (i) =>
+                    i.id !== issueDetail?.id &&
+                    i.id !== issueDetail?.parent &&
+                    i.parent !== issueDetail?.id
+                ) ?? []
+              }
+              customDisplay={
+                issueDetail?.parent_detail ? (
+                  <button
+                    type="button"
+                    className="flex items-center gap-2 bg-gray-100 px-3 py-2 text-xs rounded"
+                    onClick={() => submitChanges({ parent: null })}
+                  >
+                    {issueDetail.parent_detail?.name}
+                    <XMarkIcon className="h-3 w-3" />
+                  </button>
+                ) : (
+                  <div className="inline-block bg-gray-100 px-3 py-2 text-xs rounded">
+                    No parent selected
+                  </div>
+                )
+              }
+              watchIssue={watchIssue}
+            />
+            <div className="flex items-center py-2 flex-wrap">
+              <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
+                <CalendarDaysIcon className="flex-shrink-0 h-4 w-4" />
+                <p>Due date</p>
+              </div>
+              <div className="sm:basis-1/2">
+                <Controller
+                  control={control}
+                  name="target_date"
+                  render={({ field: { value, onChange } }) => (
+                    <input
+                      type="date"
+                      value={value ?? ""}
+                      onChange={(e: any) => {
+                        submitChanges({ target_date: e.target.value });
+                        onChange(e.target.value);
+                      }}
+                      className="hover:bg-gray-100 border rounded-md 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 w-full"
+                    />
+                  )}
+                />
+              </div>
+            </div>
+          </div>
+          <div className="py-1">
+            <SelectCycle control={control} handleCycleChange={handleCycleChange} />
+          </div>
+          {/* {sidebarSections.map((section, index) => (
             <div key={index} className="py-1">
               {section.map((item) => (
                 <div key={item.label} className="flex items-center py-2 flex-wrap">
@@ -306,154 +283,63 @@ const IssueDetailSidebar: React.FC<Props> = ({
                     <p>{item.label}</p>
                   </div>
                   <div className="sm:basis-1/2">
-                    {item.name === "target_date" ? (
-                      <Controller
-                        control={control}
-                        name="target_date"
-                        render={({ field: { value, onChange } }) => (
-                          <input
-                            type="date"
-                            value={value ?? ""}
-                            onChange={(e: any) => {
-                              submitChanges({ target_date: e.target.value });
-                              onChange(e.target.value);
+                    <Controller
+                      control={control}
+                      name={item.name as keyof IIssue}
+                      render={({ field: { value, onChange } }) => (
+                        <>
+                          <IssuesListModal
+                            isOpen={Boolean(item?.isOpen)}
+                            handleClose={() => item.setIsOpen && item.setIsOpen(false)}
+                            onChange={(val) => {
+                              console.log(val);
+                              submitChanges({ [item.name]: val });
+                              onChange(val);
                             }}
-                            className="hover:bg-gray-100 border rounded-md 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 w-full"
+                            issues={item?.issuesList ?? []}
+                            title={`Select ${item.label}`}
+                            multiple={item.canSelectMultipleOptions}
+                            value={value}
+                            customDisplay={
+                              issueDetail?.parent_detail ? (
+                                <button
+                                  type="button"
+                                  className="flex items-center gap-2 bg-gray-100 px-3 py-2 text-xs rounded"
+                                  onClick={() => submitChanges({ parent: null })}
+                                >
+                                  {issueDetail.parent_detail?.name}
+                                  <XMarkIcon className="h-3 w-3" />
+                                </button>
+                              ) : (
+                                <div className="inline-block bg-gray-100 px-3 py-2 text-xs rounded">
+                                  No parent selected
+                                </div>
+                              )
+                            }
                           />
-                        )}
-                      />
-                    ) : item.modal ? (
-                      <Controller
-                        control={control}
-                        name={item.name as keyof IIssue}
-                        render={({ field: { value, onChange } }) => (
-                          <>
-                            <IssuesListModal
-                              isOpen={Boolean(item?.isOpen)}
-                              handleClose={() => item.setIsOpen && item.setIsOpen(false)}
-                              onChange={(val) => {
-                                console.log(val);
-                                // submitChanges({ [item.name]: val });
-                                onChange(val);
-                              }}
-                              issues={item?.issuesList ?? []}
-                              title={`Select ${item.label}`}
-                              multiple={item.canSelectMultipleOptions}
-                              value={value}
-                            />
-                            <button
-                              type="button"
-                              className="flex justify-between items-center gap-1 hover:bg-gray-100 border rounded-md 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 w-full"
-                              onClick={() => item.setIsOpen && item.setIsOpen(true)}
-                            >
-                              {watchIssue(`${item.name as keyof IIssue}`) &&
-                              watchIssue(`${item.name as keyof IIssue}`) !== ""
-                                ? `${activeProject?.identifier}-
+                          <button
+                            type="button"
+                            className="flex justify-between items-center gap-1 hover:bg-gray-100 border rounded-md 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 w-full"
+                            onClick={() => item.setIsOpen && item.setIsOpen(true)}
+                          >
+                            {watchIssue(`${item.name as keyof IIssue}`) &&
+                            watchIssue(`${item.name as keyof IIssue}`) !== ""
+                              ? `${activeProject?.identifier}-
                                 ${
                                   issues?.results.find(
                                     (i) => i.id === watchIssue(`${item.name as keyof IIssue}`)
                                   )?.sequence_id
                                 }`
-                                : `Select ${item.label}`}
-                            </button>
-                          </>
-                        )}
-                      />
-                    ) : (
-                      <Controller
-                        control={control}
-                        name={item.name as keyof IIssue}
-                        render={({ field: { value } }) => (
-                          <Listbox
-                            as="div"
-                            value={value}
-                            multiple={item.canSelectMultipleOptions}
-                            onChange={(value: any) => {
-                              if (item.name === "cycle") handleCycleChange(value);
-                              else submitChanges({ [item.name]: value });
-                            }}
-                            className="flex-shrink-0"
-                          >
-                            {({ open }) => (
-                              <div className="relative">
-                                <Listbox.Button className="flex justify-between items-center gap-1 hover:bg-gray-100 border rounded-md shadow-sm px-2 w-full py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300">
-                                  <span
-                                    className={classNames(
-                                      value ? "" : "text-gray-900",
-                                      "hidden truncate sm:block text-left",
-                                      item.label === "Priority" ? "capitalize" : ""
-                                    )}
-                                  >
-                                    {value
-                                      ? Array.isArray(value)
-                                        ? value
-                                            .map(
-                                              (i: any) =>
-                                                item.options?.find((option) => option.value === i)
-                                                  ?.label
-                                            )
-                                            .join(", ") || item.label
-                                        : item.options?.find((option) => option.value === value)
-                                            ?.label
-                                      : "None"}
-                                  </span>
-                                  <ChevronDownIcon className="h-3 w-3" />
-                                </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 right-0 mt-1 w-40 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
-                                    <div className="p-1">
-                                      {item.options ? (
-                                        item.options.length > 0 ? (
-                                          item.options.map((option) => (
-                                            <Listbox.Option
-                                              key={option.value}
-                                              className={({ active, selected }) =>
-                                                `${
-                                                  active || selected
-                                                    ? "text-white bg-theme"
-                                                    : "text-gray-900"
-                                                } ${
-                                                  item.label === "Priority" && "capitalize"
-                                                } flex items-center gap-2 cursor-pointer select-none relative p-2 rounded-md truncate`
-                                              }
-                                              value={option.value}
-                                            >
-                                              {option.color && (
-                                                <span
-                                                  className="h-2 w-2 rounded-full flex-shrink-0"
-                                                  style={{ backgroundColor: option.color }}
-                                                ></span>
-                                              )}
-                                              {option.label}
-                                            </Listbox.Option>
-                                          ))
-                                        ) : (
-                                          <div className="text-center">No {item.label}s found</div>
-                                        )
-                                      ) : (
-                                        <Spinner />
-                                      )}
-                                    </div>
-                                  </Listbox.Options>
-                                </Transition>
-                              </div>
-                            )}
-                          </Listbox>
-                        )}
-                      />
-                    )}
+                              : `Select ${item.label}`}
+                          </button>
+                        </>
+                      )}
+                    />
                   </div>
                 </div>
               ))}
             </div>
-          ))}
+          ))} */}
         </div>
         <div className="pt-3 space-y-3">
           <div className="flex justify-between items-start">
@@ -466,18 +352,20 @@ const IssueDetailSidebar: React.FC<Props> = ({
                 {issueDetail?.label_details.map((label) => (
                   <span
                     key={label.id}
-                    className="flex items-center gap-2 border rounded-2xl text-xs px-1 py-0.5 hover:bg-gray-100 cursor-pointer"
-                    // onClick={() =>
-                    //   submitChanges({
-                    //     labels_list: issueDetail?.labels_list.filter((l) => l !== label.id),
-                    //   })
-                    // }
+                    className="group flex items-center gap-1 border rounded-2xl text-xs px-1 py-0.5 hover:bg-red-50 hover:border-red-500 cursor-pointer"
+                    onClick={() => {
+                      const updatedLabels = issueDetail?.labels.filter((l) => l !== label.id);
+                      submitChanges({
+                        labels_list: updatedLabels,
+                      });
+                    }}
                   >
                     <span
                       className="h-2 w-2 rounded-full flex-shrink-0"
                       style={{ backgroundColor: label.colour ?? "green" }}
                     ></span>
                     {label.name}
+                    <XMarkIcon className="h-2 w-2 group-hover:text-red-500" />
                   </span>
                 ))}
                 <Controller
@@ -488,22 +376,15 @@ const IssueDetailSidebar: React.FC<Props> = ({
                       as="div"
                       value={value}
                       multiple
-                      onChange={(value: any) => submitChanges({ labels_list: value })}
+                      onChange={(val) => submitChanges({ labels_list: val })}
                       className="flex-shrink-0"
                     >
                       {({ open }) => (
                         <>
                           <Listbox.Label className="sr-only">Label</Listbox.Label>
                           <div className="relative">
-                            <Listbox.Button className="flex items-center gap-2 border rounded-2xl text-xs px-1 py-0.5 hover:bg-gray-100 cursor-pointer">
-                              <span
-                                className={classNames(
-                                  value ? "" : "text-gray-900",
-                                  "hidden sm:block text-left"
-                                )}
-                              >
-                                Select Label
-                              </span>
+                            <Listbox.Button className="flex items-center gap-2 border rounded-2xl text-xs px-2 py-0.5 hover:bg-gray-100 cursor-pointer">
+                              Select Label
                             </Listbox.Button>
 
                             <Transition
@@ -551,28 +432,26 @@ const IssueDetailSidebar: React.FC<Props> = ({
                     </Listbox>
                   )}
                 />
+                <button
+                  type="button"
+                  className="flex items-center gap-1 border rounded-2xl text-xs px-2 py-0.5 hover:bg-gray-100 cursor-pointer"
+                  onClick={() => setCreateLabelForm((prevData) => !prevData)}
+                >
+                  {createLabelForm ? (
+                    <>
+                      <XMarkIcon className="h-3 w-3" /> Cancel
+                    </>
+                  ) : (
+                    <>
+                      <PlusIcon className="h-3 w-3" /> New
+                    </>
+                  )}
+                </button>
               </div>
             </div>
           </div>
-          <div className="flex justify-end">
-            <button
-              type="button"
-              className="flex items-center gap-1 px-2 py-1 rounded hover:bg-gray-100 text-xs font-medium"
-              onClick={() => setCreateLabelForm((prevData) => !prevData)}
-            >
-              {createLabelForm ? (
-                <>
-                  <XMarkIcon className="h-3 w-3" /> Cancel
-                </>
-              ) : (
-                <>
-                  <PlusIcon className="h-3 w-3" /> Create new
-                </>
-              )}
-            </button>
-          </div>
           {createLabelForm && (
-            <form className="flex items-center gap-x-2" onSubmit={handleSubmit(onSubmit)}>
+            <form className="flex items-center gap-x-2" onSubmit={handleSubmit(handleNewLabel)}>
               <div>
                 <Popover className="relative">
                   {({ open }) => (
diff --git a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-assignee.tsx b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-assignee.tsx
new file mode 100644
index 000000000..0fff8006b
--- /dev/null
+++ b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-assignee.tsx
@@ -0,0 +1,181 @@
+// react
+import React from "react";
+// next
+import Image from "next/image";
+// swr
+import useSWR from "swr";
+// react-hook-form
+import { Control, Controller } from "react-hook-form";
+// services
+import workspaceService from "lib/services/workspace.service";
+// hooks
+import useUser from "lib/hooks/useUser";
+// headless ui
+import { Listbox, Transition } from "@headlessui/react";
+// ui
+import { Spinner } from "ui";
+// icons
+import { ArrowPathIcon, ChevronDownIcon } from "@heroicons/react/24/outline";
+import User from "public/user.png";
+// types
+import { IIssue } from "types";
+// constants
+import { classNames } from "constants/common";
+import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
+
+type Props = {
+  control: Control<IIssue, any>;
+  submitChanges: (formData: Partial<IIssue>) => void;
+};
+
+const SelectAssignee: React.FC<Props> = ({ control, submitChanges }) => {
+  const { activeWorkspace } = useUser();
+
+  const { data: people } = useSWR(
+    activeWorkspace ? WORKSPACE_MEMBERS(activeWorkspace.slug) : null,
+    activeWorkspace ? () => workspaceService.workspaceMembers(activeWorkspace.slug) : null
+  );
+
+  return (
+    <div className="flex items-center py-2 flex-wrap">
+      <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
+        <ArrowPathIcon className="flex-shrink-0 h-4 w-4" />
+        <p>Assignees</p>
+      </div>
+      <div className="sm:basis-1/2">
+        <Controller
+          control={control}
+          name="assignees_list"
+          render={({ field: { value } }) => (
+            <Listbox
+              as="div"
+              value={value}
+              multiple={true}
+              onChange={(value: any) => {
+                submitChanges({ assignees_list: value });
+              }}
+              className="flex-shrink-0"
+            >
+              {({ open }) => (
+                <div className="relative">
+                  <Listbox.Button className="w-full flex justify-end items-center gap-1 text-xs cursor-pointer">
+                    <span
+                      className={classNames(
+                        value ? "" : "text-gray-900",
+                        "hidden truncate sm:block text-left"
+                      )}
+                    >
+                      <div className="flex items-center gap-1 text-xs cursor-pointer">
+                        {value && Array.isArray(value) ? (
+                          <>
+                            {value.length > 0 ? (
+                              value.map((assignee, index: number) => {
+                                const person = people?.find(
+                                  (p) => p.member.id === assignee
+                                )?.member;
+
+                                return (
+                                  <div
+                                    key={index}
+                                    className={`relative z-[1] h-5 w-5 rounded-full ${
+                                      index !== 0 ? "-ml-2.5" : ""
+                                    }`}
+                                  >
+                                    {person && person.avatar && person.avatar !== "" ? (
+                                      <div className="h-5 w-5 border-2 bg-white border-white rounded-full">
+                                        <Image
+                                          src={person.avatar}
+                                          height="100%"
+                                          width="100%"
+                                          className="rounded-full"
+                                          alt={person.first_name}
+                                        />
+                                      </div>
+                                    ) : (
+                                      <div
+                                        className={`h-5 w-5 bg-gray-700 text-white border-2 border-white grid place-items-center rounded-full`}
+                                      >
+                                        {person?.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>
+                            )}
+                          </>
+                        ) : null}
+                      </div>
+                    </span>
+                  </Listbox.Button>
+
+                  <Transition
+                    show={open}
+                    as={React.Fragment}
+                    leave="transition ease-in duration-100"
+                    leaveFrom="opacity-100"
+                    leaveTo="opacity-0"
+                  >
+                    <Listbox.Options className="absolute z-10 right-0 mt-1 w-40 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
+                      <div className="p-1">
+                        {people ? (
+                          people.length > 0 ? (
+                            people.map((option) => (
+                              <Listbox.Option
+                                key={option.member.id}
+                                className={({ active, selected }) =>
+                                  `${
+                                    active || selected ? "text-white bg-theme" : "text-gray-900"
+                                  } flex items-center gap-2 cursor-pointer select-none relative p-2 rounded-md truncate`
+                                }
+                                value={option.member.id}
+                              >
+                                {option.member.avatar && option.member.avatar !== "" ? (
+                                  <div className="relative h-4 w-4">
+                                    <Image
+                                      src={option.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">
+                                    {option.member.first_name && option.member.first_name !== ""
+                                      ? option.member.first_name.charAt(0)
+                                      : option.member.email.charAt(0)}
+                                  </div>
+                                )}
+                                {option.member.first_name}
+                              </Listbox.Option>
+                            ))
+                          ) : (
+                            <div className="text-center">No assignees found</div>
+                          )
+                        ) : (
+                          <Spinner />
+                        )}
+                      </div>
+                    </Listbox.Options>
+                  </Transition>
+                </div>
+              )}
+            </Listbox>
+          )}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default SelectAssignee;
diff --git a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-cycle.tsx b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-cycle.tsx
new file mode 100644
index 000000000..0e36c54af
--- /dev/null
+++ b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-cycle.tsx
@@ -0,0 +1,98 @@
+// react-hook-form
+import { Control, Controller } from "react-hook-form";
+// hooks
+import useUser from "lib/hooks/useUser";
+// headless ui
+import { Listbox, Transition } from "@headlessui/react";
+// types
+import { IIssue } from "types";
+import { classNames } from "constants/common";
+import { Spinner } from "ui";
+import React from "react";
+import { ArrowPathIcon, ChevronDownIcon } from "@heroicons/react/24/outline";
+
+type Props = {
+  control: Control<IIssue, any>;
+  handleCycleChange: (cycleId: string) => void;
+};
+
+const SelectCycle: React.FC<Props> = ({ control, handleCycleChange }) => {
+  const { cycles } = useUser();
+
+  return (
+    <div className="flex items-center py-2 flex-wrap">
+      <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
+        <ArrowPathIcon className="flex-shrink-0 h-4 w-4" />
+        <p>Cycle</p>
+      </div>
+      <div className="sm:basis-1/2">
+        <Controller
+          control={control}
+          name="cycle"
+          render={({ field: { value } }) => (
+            <Listbox
+              as="div"
+              value={value}
+              onChange={(value: any) => {
+                handleCycleChange(value);
+              }}
+              className="flex-shrink-0"
+            >
+              {({ open }) => (
+                <div className="relative">
+                  <Listbox.Button className="flex justify-between items-center gap-1 hover:bg-gray-100 border rounded-md shadow-sm px-2 w-full py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300">
+                    <span
+                      className={classNames(
+                        value ? "" : "text-gray-900",
+                        "hidden truncate sm:block text-left"
+                      )}
+                    >
+                      {value ? cycles?.find((c) => c.id === value)?.name : "None"}
+                    </span>
+                    <ChevronDownIcon className="h-3 w-3" />
+                  </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 right-0 mt-1 w-40 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
+                      <div className="p-1">
+                        {cycles ? (
+                          cycles.length > 0 ? (
+                            cycles.map((option) => (
+                              <Listbox.Option
+                                key={option.id}
+                                className={({ active, selected }) =>
+                                  `${
+                                    active || selected ? "text-white bg-theme" : "text-gray-900"
+                                  } flex items-center gap-2 cursor-pointer select-none relative p-2 rounded-md truncate`
+                                }
+                                value={option.id}
+                              >
+                                {option.name}
+                              </Listbox.Option>
+                            ))
+                          ) : (
+                            <div className="text-center">No cycles found</div>
+                          )
+                        ) : (
+                          <Spinner />
+                        )}
+                      </div>
+                    </Listbox.Options>
+                  </Transition>
+                </div>
+              )}
+            </Listbox>
+          )}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default SelectCycle;
diff --git a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-parent.tsx b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-parent.tsx
new file mode 100644
index 000000000..03cf0be4e
--- /dev/null
+++ b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-parent.tsx
@@ -0,0 +1,74 @@
+// react
+import React, { useState } from "react";
+// react-hook-form
+import { Control, Controller, UseFormWatch } from "react-hook-form";
+// hooks
+import useUser from "lib/hooks/useUser";
+// components
+import IssuesListModal from "components/project/issues/IssuesListModal";
+// icons
+import { UserIcon } from "@heroicons/react/24/outline";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  control: Control<IIssue, any>;
+  submitChanges: (formData: Partial<IIssue>) => void;
+  issuesList: IIssue[];
+  customDisplay: JSX.Element;
+  watchIssue: UseFormWatch<IIssue>;
+};
+
+const SelectParent: React.FC<Props> = ({
+  control,
+  submitChanges,
+  issuesList,
+  customDisplay,
+  watchIssue,
+}) => {
+  const [isParentModalOpen, setIsParentModalOpen] = useState(false);
+
+  const { activeProject, issues } = useUser();
+
+  return (
+    <div className="flex items-center py-2 flex-wrap">
+      <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
+        <UserIcon className="flex-shrink-0 h-4 w-4" />
+        <p>Parent</p>
+      </div>
+      <div className="sm:basis-1/2">
+        <Controller
+          control={control}
+          name="parent"
+          render={({ field: { value, onChange } }) => (
+            <IssuesListModal
+              isOpen={isParentModalOpen}
+              handleClose={() => setIsParentModalOpen(false)}
+              onChange={(val) => {
+                submitChanges({ parent: val });
+                onChange(val);
+              }}
+              issues={issuesList}
+              title="Select Parent"
+              value={value}
+              customDisplay={customDisplay}
+            />
+          )}
+        />
+        <button
+          type="button"
+          className="flex justify-between items-center gap-1 hover:bg-gray-100 border rounded-md 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 w-full"
+          onClick={() => setIsParentModalOpen(true)}
+        >
+          {watchIssue("parent") && watchIssue("parent") !== ""
+            ? `${activeProject?.identifier}-${
+                issues?.results.find((i) => i.id === watchIssue("parent"))?.sequence_id
+              }`
+            : "Select Parent"}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default SelectParent;
diff --git a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-priority.tsx b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-priority.tsx
new file mode 100644
index 000000000..e76beeb25
--- /dev/null
+++ b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-priority.tsx
@@ -0,0 +1,84 @@
+// react
+import React from "react";
+// react-hook-form
+import { Control, Controller } from "react-hook-form";
+// headless ui
+import { Listbox, Transition } from "@headlessui/react";
+// icons
+import { ChevronDownIcon, ChartBarIcon } from "@heroicons/react/24/outline";
+// types
+import { IIssue } from "types";
+// constants
+import { classNames } from "constants/common";
+import { PRIORITIES } from "constants/";
+
+type Props = {
+  control: Control<IIssue, any>;
+  submitChanges: (formData: Partial<IIssue>) => void;
+};
+
+const SelectPriority: React.FC<Props> = ({ control, submitChanges }) => {
+  return (
+    <div className="flex items-center py-2 flex-wrap">
+      <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
+        <ChartBarIcon className="flex-shrink-0 h-4 w-4" />
+        <p>Priority</p>
+      </div>
+      <div className="sm:basis-1/2">
+        <Controller
+          control={control}
+          name="state"
+          render={({ field: { value } }) => (
+            <Listbox
+              as="div"
+              value={value}
+              onChange={(value: any) => {
+                submitChanges({ priority: value });
+              }}
+              className="flex-shrink-0"
+            >
+              {({ open }) => (
+                <div className="relative">
+                  <Listbox.Button className="flex justify-between items-center gap-1 hover:bg-gray-100 border rounded-md shadow-sm px-2 w-full py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300">
+                    <span className={classNames(value ? "" : "text-gray-900", "text-left")}>
+                      {value}
+                    </span>
+                    <ChevronDownIcon className="h-3 w-3" />
+                  </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 right-0 mt-1 w-40 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
+                      <div className="p-1">
+                        {PRIORITIES.map((option) => (
+                          <Listbox.Option
+                            key={option}
+                            className={({ active, selected }) =>
+                              `${
+                                active || selected ? "text-white bg-theme" : "text-gray-900"
+                              } flex items-center gap-2 cursor-pointer select-none relative p-2 rounded-md truncate capitalize`
+                            }
+                            value={option}
+                          >
+                            {option}
+                          </Listbox.Option>
+                        ))}
+                      </div>
+                    </Listbox.Options>
+                  </Transition>
+                </div>
+              )}
+            </Listbox>
+          )}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default SelectPriority;
diff --git a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-state.tsx b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-state.tsx
new file mode 100644
index 000000000..cc129c536
--- /dev/null
+++ b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-state.tsx
@@ -0,0 +1,116 @@
+// react-hook-form
+import { Control, Controller } from "react-hook-form";
+// hooks
+import useUser from "lib/hooks/useUser";
+// headless ui
+import { Listbox, Transition } from "@headlessui/react";
+// types
+import { IIssue } from "types";
+import { classNames } from "constants/common";
+import { Spinner } from "ui";
+import React from "react";
+import { ChevronDownIcon, Squares2X2Icon } from "@heroicons/react/24/outline";
+
+type Props = {
+  control: Control<IIssue, any>;
+  submitChanges: (formData: Partial<IIssue>) => void;
+};
+
+const SelectState: React.FC<Props> = ({ control, submitChanges }) => {
+  const { states } = useUser();
+
+  return (
+    <div className="flex items-center py-2 flex-wrap">
+      <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
+        <Squares2X2Icon className="flex-shrink-0 h-4 w-4" />
+        <p>State</p>
+      </div>
+      <div className="sm:basis-1/2">
+        <Controller
+          control={control}
+          name="state"
+          render={({ field: { value } }) => (
+            <Listbox
+              as="div"
+              value={value}
+              onChange={(value: any) => {
+                submitChanges({ state: value });
+              }}
+              className="flex-shrink-0"
+            >
+              {({ open }) => (
+                <div className="relative">
+                  <Listbox.Button className="flex justify-between items-center gap-1 hover:bg-gray-100 border rounded-md shadow-sm px-2 w-full py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300">
+                    <span
+                      className={classNames(
+                        value ? "" : "text-gray-900",
+                        "flex items-center gap-2 text-left"
+                      )}
+                    >
+                      {value ? (
+                        <>
+                          <span
+                            className="h-2 w-2 rounded-full flex-shrink-0"
+                            style={{
+                              backgroundColor: states?.find((option) => option.id === value)?.color,
+                            }}
+                          ></span>
+                          {states?.find((option) => option.id === value)?.name}
+                        </>
+                      ) : (
+                        "None"
+                      )}
+                    </span>
+                    <ChevronDownIcon className="h-3 w-3" />
+                  </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 right-0 mt-1 w-40 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
+                      <div className="p-1">
+                        {states ? (
+                          states.length > 0 ? (
+                            states.map((option) => (
+                              <Listbox.Option
+                                key={option.id}
+                                className={({ active, selected }) =>
+                                  `${
+                                    active || selected ? "text-white bg-theme" : "text-gray-900"
+                                  } flex items-center gap-2 cursor-pointer select-none relative p-2 rounded-md truncate`
+                                }
+                                value={option.id}
+                              >
+                                {option.color && (
+                                  <span
+                                    className="h-2 w-2 rounded-full flex-shrink-0"
+                                    style={{ backgroundColor: option.color }}
+                                  ></span>
+                                )}
+                                {option.name}
+                              </Listbox.Option>
+                            ))
+                          ) : (
+                            <div className="text-center">No states found</div>
+                          )
+                        ) : (
+                          <Spinner />
+                        )}
+                      </div>
+                    </Listbox.Options>
+                  </Transition>
+                </div>
+              )}
+            </Listbox>
+          )}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default SelectState;
diff --git a/apps/app/components/sidebar/workspace-options.tsx b/apps/app/components/sidebar/workspace-options.tsx
index b7760a49e..749eba17d 100644
--- a/apps/app/components/sidebar/workspace-options.tsx
+++ b/apps/app/components/sidebar/workspace-options.tsx
@@ -82,9 +82,7 @@ const WorkspaceOptions: React.FC<Props> = ({ sidebarCollapse }) => {
 
   return (
     <div className="px-2">
-      <div
-        className={`relative ${sidebarCollapse ? "flex" : "grid grid-cols-5 gap-2 items-center"}`}
-      >
+      <div className="relative">
         <Menu as="div" className="col-span-4 inline-block text-left w-full">
           <div className="w-full">
             <Menu.Button
@@ -102,14 +100,19 @@ const WorkspaceOptions: React.FC<Props> = ({ sidebarCollapse }) => {
                       alt="Workspace Logo"
                       layout="fill"
                       objectFit="cover"
+                      className="rounded"
                     />
                   ) : (
                     activeWorkspace?.name?.charAt(0) ?? "N"
                   )}
                 </div>
                 {!sidebarCollapse && (
-                  <p className="truncate w-20 text-left ml-1">
-                    {activeWorkspace?.name ?? "Loading..."}
+                  <p className="text-left ml-1">
+                    {activeWorkspace?.name
+                      ? activeWorkspace.name.length > 17
+                        ? `${activeWorkspace.name.substring(0, 17)}...`
+                        : activeWorkspace.name
+                      : "Loading..."}
                   </p>
                 )}
               </div>
@@ -131,74 +134,124 @@ const WorkspaceOptions: React.FC<Props> = ({ sidebarCollapse }) => {
             leaveTo="transform opacity-0 scale-95"
           >
             <Menu.Items className="origin-top-left fixed max-w-[15rem] ml-2 left-0 mt-2 w-full rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-20">
-              <div className="p-1">
-                {workspaces ? (
-                  <>
-                    {workspaces.length > 0 ? (
-                      workspaces.map((workspace: any) => (
-                        <Menu.Item key={workspace.id}>
-                          {({ active }) => (
-                            <button
-                              type="button"
-                              onClick={() => {
-                                mutateUser(
-                                  (prevData) => ({
-                                    ...(prevData as IUser),
-                                    last_workspace_id: workspace.id,
-                                  }),
-                                  false
-                                );
-                                userService
-                                  .updateUser({
-                                    last_workspace_id: workspace?.id,
-                                  })
-                                  .then((res) => {
-                                    const isInProject = router.pathname.includes("/[projectId]/");
-                                    if (isInProject) router.push("/workspace");
-                                  })
-                                  .catch((err) => console.error(err));
-                              }}
-                              className={`${
-                                active ? "bg-theme text-white" : "text-gray-900"
-                              } group flex w-full items-center rounded-md p-2 text-sm`}
-                            >
-                              {workspace.name}
-                            </button>
-                          )}
-                        </Menu.Item>
-                      ))
-                    ) : (
-                      <p>No workspace found!</p>
-                    )}
-                    <Menu.Item
-                      as="button"
-                      onClick={() => {
-                        router.push("/create-workspace");
-                      }}
-                      className="w-full"
-                    >
-                      {({ active }) => (
-                        <a
-                          className={`flex items-center gap-x-1 p-2 w-full text-left text-gray-900 hover:bg-theme hover:text-white rounded-md text-sm ${
-                            active ? "bg-theme text-white" : "text-gray-900"
-                          }`}
-                        >
-                          <PlusIcon className="w-5 h-5" />
-                          <span>Create Workspace</span>
-                        </a>
+              <div className="px-1 py-2 divide-y">
+                <div>
+                  <Menu.Item as="div" className="text-xs px-2 pb-2">
+                    {user?.email}
+                  </Menu.Item>
+                </div>
+                <div className="py-2">
+                  {workspaces ? (
+                    <>
+                      {workspaces.length > 0 ? (
+                        workspaces.map((workspace: any) => (
+                          <Menu.Item key={workspace.id}>
+                            {({ active }) => (
+                              <button
+                                type="button"
+                                onClick={() => {
+                                  mutateUser(
+                                    (prevData) => ({
+                                      ...(prevData as IUser),
+                                      last_workspace_id: workspace.id,
+                                    }),
+                                    false
+                                  );
+                                  userService
+                                    .updateUser({
+                                      last_workspace_id: workspace?.id,
+                                    })
+                                    .then((res) => {
+                                      const isInProject = router.pathname.includes("/[projectId]/");
+                                      if (isInProject) router.push("/workspace");
+                                    })
+                                    .catch((err) => console.error(err));
+                                }}
+                                className={`${
+                                  active ? "bg-indigo-50" : ""
+                                } w-full flex items-center gap-2 text-gray-900 rounded-md p-2 text-sm`}
+                              >
+                                <div className="h-5 w-5 p-4 flex items-center justify-center bg-gray-700 text-white rounded uppercase relative">
+                                  {workspace?.logo && workspace.logo !== "" ? (
+                                    <Image
+                                      src={workspace.logo}
+                                      alt="Workspace Logo"
+                                      layout="fill"
+                                      objectFit="cover"
+                                      className="rounded"
+                                    />
+                                  ) : (
+                                    activeWorkspace?.name?.charAt(0) ?? "N"
+                                  )}
+                                </div>
+                                <div className="text-left">
+                                  <h5 className="text-sm">{workspace.name}</h5>
+                                  <div className="text-xs text-gray-500">1 members</div>
+                                </div>
+                              </button>
+                            )}
+                          </Menu.Item>
+                        ))
+                      ) : (
+                        <p>No workspace found!</p>
                       )}
+                      <Menu.Item
+                        as="button"
+                        type="button"
+                        onClick={() => {
+                          router.push("/create-workspace");
+                        }}
+                        className="w-full text-xs flex items-center gap-2 px-2 py-1 text-left rounded hover:bg-gray-100"
+                      >
+                        <PlusIcon className="h-3 w-3" />
+                        Create Workspace
+                      </Menu.Item>
+                    </>
+                  ) : (
+                    <div className="w-full flex justify-center">
+                      <Spinner />
+                    </div>
+                  )}
+                </div>
+                <div className="text-xs pt-2 space-y-1">
+                  {userLinks.map((link, index) => (
+                    <Menu.Item key={index} as="div">
+                      <Link href={link.href}>
+                        <a className="block px-2 py-1 text-left rounded hover:bg-gray-100">
+                          {link.name}
+                        </a>
+                      </Link>
                     </Menu.Item>
-                  </>
-                ) : (
-                  <div className="w-full flex justify-center">
-                    <Spinner />
-                  </div>
-                )}
+                  ))}
+                  <Menu.Item
+                    as="button"
+                    type="button"
+                    className="w-full px-2 py-1 text-left rounded hover:bg-gray-100"
+                    onClick={async () => {
+                      await authenticationService
+                        .signOut({
+                          refresh_token: authenticationService.getRefreshToken(),
+                        })
+                        .then((response) => {
+                          console.log("user signed out", response);
+                        })
+                        .catch((error) => {
+                          console.log("Failed to sign out", error);
+                        })
+                        .finally(() => {
+                          mutateUser();
+                          router.push("/signin");
+                        });
+                    }}
+                  >
+                    Sign out
+                  </Menu.Item>
+                </div>
               </div>
             </Menu.Items>
           </Transition>
         </Menu>
-        {!sidebarCollapse && (
+        {/* {!sidebarCollapse && (
           <Menu as="div" className="inline-block text-left flex-shrink-0 w-full">
             <div className="h-10 w-10">
               <Menu.Button className="h-full w-full grid relative place-items-center rounded-md shadow-sm bg-white text-gray-700 hover:bg-gray-50 focus:outline-none">
@@ -261,7 +314,7 @@ const WorkspaceOptions: React.FC<Props> = ({ sidebarCollapse }) => {
               </Menu.Items>
             </Transition>
           </Menu>
-        )}
+        )} */}
       </div>
       <div className="mt-3 flex-1 space-y-1 bg-white">
         {workspaceLinks.map((link, index) => (
diff --git a/apps/app/layouts/app-layout.tsx b/apps/app/layouts/app-layout.tsx
index fd0f0b134..9f1500a6d 100644
--- a/apps/app/layouts/app-layout.tsx
+++ b/apps/app/layouts/app-layout.tsx
@@ -18,7 +18,9 @@ const AppLayout: React.FC<Props> = ({
   children,
   noPadding = false,
   bg = "primary",
+  noHeader = false,
   breadcrumbs,
+  left,
   right,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
@@ -37,7 +39,7 @@ const AppLayout: React.FC<Props> = ({
       <div className="h-screen w-full flex overflow-x-hidden">
         <Sidebar />
         <main className="h-screen w-full flex flex-col overflow-y-auto min-w-0">
-          <Header breadcrumbs={breadcrumbs} right={right} />
+          {noHeader ? null : <Header breadcrumbs={breadcrumbs} left={left} right={right} />}
           <div
             className={`w-full flex-grow ${noPadding ? "" : "p-5"} ${
               bg === "primary" ? "bg-primary" : bg === "secondary" ? "bg-secondary" : "bg-primary"
diff --git a/apps/app/layouts/types.d.ts b/apps/app/layouts/types.d.ts
index d21fc4cb3..3c7b7a46f 100644
--- a/apps/app/layouts/types.d.ts
+++ b/apps/app/layouts/types.d.ts
@@ -10,6 +10,8 @@ export type Props = {
   children: React.ReactNode;
   noPadding?: boolean;
   bg?: "primary" | "secondary";
+  noHeader?: boolean;
   breadcrumbs?: JSX.Element;
+  left?: JSX.Element;
   right?: JSX.Element;
 };
diff --git a/apps/app/pages/me/my-issues.tsx b/apps/app/pages/me/my-issues.tsx
index 4358a9b19..28420f210 100644
--- a/apps/app/pages/me/my-issues.tsx
+++ b/apps/app/pages/me/my-issues.tsx
@@ -1,45 +1,71 @@
 // react
-import React, { useState } from "react";
+import React from "react";
 // next
 import type { NextPage } from "next";
+import Link from "next/link";
+import Image from "next/image";
 // swr
 import useSWR from "swr";
 // 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 } from "ui";
-import { BreadcrumbItem, Breadcrumbs } from "ui/Breadcrumbs";
-import { EmptySpace, EmptySpaceItem } from "ui/EmptySpace";
-import HeaderButton from "ui/HeaderButton";
-// constants
-import { USER_ISSUE } from "constants/fetch-keys";
-import { classNames } from "constants/common";
+import { Spinner, Breadcrumbs, BreadcrumbItem, EmptySpace, EmptySpaceItem, HeaderButton } from "ui";
+// icons
+import {
+  CalendarDaysIcon,
+  ChevronDownIcon,
+  EllipsisHorizontalIcon,
+  PlusIcon,
+  RectangleStackIcon,
+} from "@heroicons/react/24/outline";
+import User from "public/user.png";
 // services
 import userService from "lib/services/user.service";
 import issuesServices from "lib/services/issues.service";
+import workspaceService from "lib/services/workspace.service";
+// hooks
+import useIssuesProperties from "lib/hooks/useIssuesProperties";
 // hoc
 import withAuth from "lib/hoc/withAuthWrapper";
 // components
 import ChangeStateDropdown from "components/project/issues/my-issues/ChangeStateDropdown";
-// icons
-import { ChevronDownIcon, PlusIcon, RectangleStackIcon } from "@heroicons/react/24/outline";
 // types
-import { IIssue } from "types";
-import Link from "next/link";
-import { Menu, Transition } from "@headlessui/react";
+import { IIssue, IWorkspaceMember, Properties } from "types";
+// constants
+import { USER_ISSUE, WORKSPACE_MEMBERS } from "constants/fetch-keys";
+import {
+  addSpaceIfCamelCase,
+  classNames,
+  findHowManyDaysLeft,
+  renderShortNumericDateFormat,
+  replaceUnderscoreIfSnakeCase,
+} from "constants/common";
+import { PRIORITIES } from "constants/";
 
 const MyIssues: NextPage = () => {
-  const [selectedWorkspace, setSelectedWorkspace] = useState<string | null>(null);
+  const { activeWorkspace, user, states } = useUser();
 
-  const { user, workspaces, activeWorkspace } = useUser();
+  console.log(states);
 
   const { data: myIssues, mutate: mutateMyIssues } = useSWR<IIssue[]>(
     user && activeWorkspace ? USER_ISSUE(activeWorkspace.slug) : null,
     user && activeWorkspace ? () => userService.userIssues(activeWorkspace.slug) : null
   );
 
+  const { data: people } = useSWR<IWorkspaceMember[]>(
+    activeWorkspace ? WORKSPACE_MEMBERS : null,
+    activeWorkspace ? () => workspaceService.workspaceMembers(activeWorkspace.slug) : null
+  );
+
+  const [properties, setProperties] = useIssuesProperties(
+    activeWorkspace?.slug,
+    "21b5fab2-cb0c-4875-9496-619134bf1f32"
+  );
+
   const updateMyIssues = (
     workspaceSlug: string,
     projectId: string,
@@ -79,98 +105,515 @@ const MyIssues: NextPage = () => {
         </Breadcrumbs>
       }
       right={
-        <HeaderButton
-          Icon={PlusIcon}
-          label="Add Issue"
-          onClick={() => {
-            const e = new KeyboardEvent("keydown", {
-              key: "i",
-              ctrlKey: true,
-            });
-            document.dispatchEvent(e);
-          }}
-        />
+        <div className="flex items-center gap-2">
+          <Popover className="relative">
+            {({ open }) => (
+              <>
+                <Popover.Button
+                  className={classNames(
+                    open ? "bg-gray-100 text-gray-900" : "text-gray-500",
+                    "group flex gap-2 items-center rounded-md bg-transparent text-xs font-medium hover:bg-gray-100 hover:text-gray-900 focus:outline-none border p-2"
+                  )}
+                >
+                  <span>View</span>
+                  <ChevronDownIcon className="h-4 w-4" aria-hidden="true" />
+                </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 mr-5 right-1/2 z-10 mt-1 w-screen max-w-xs translate-x-1/2 transform p-3 bg-white rounded-lg shadow-lg overflow-hidden">
+                    <div className="relative flex flex-col gap-1 gap-y-4">
+                      <div className="relative flex flex-col gap-1">
+                        <h4 className="text-base text-gray-600">Properties</h4>
+                        <div className="flex items-center gap-2 flex-wrap">
+                          {Object.keys(properties).map((key) => (
+                            <button
+                              key={key}
+                              type="button"
+                              className={`px-2 py-1 capitalize rounded border border-theme text-xs ${
+                                properties[key as keyof Properties]
+                                  ? "border-theme bg-theme text-white"
+                                  : ""
+                              }`}
+                              onClick={() => setProperties(key as keyof Properties)}
+                            >
+                              {replaceUnderscoreIfSnakeCase(key)}
+                            </button>
+                          ))}
+                        </div>
+                      </div>
+                    </div>
+                  </Popover.Panel>
+                </Transition>
+              </>
+            )}
+          </Popover>
+          <HeaderButton
+            Icon={PlusIcon}
+            label="Add Issue"
+            onClick={() => {
+              const e = new KeyboardEvent("keydown", {
+                key: "i",
+                ctrlKey: true,
+              });
+              document.dispatchEvent(e);
+            }}
+          />
+        </div>
       }
     >
       <div className="w-full h-full flex flex-col space-y-5">
         {myIssues ? (
           <>
             {myIssues.length > 0 ? (
-              <div className="flex flex-col">
-                <div className="overflow-x-auto ">
-                  <div className="inline-block min-w-full align-middle px-0.5 py-2">
-                    <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
-                      <table className="min-w-full">
-                        <thead className="bg-gray-100">
-                          <tr className="text-left">
-                            <th
-                              scope="col"
-                              className="px-3 py-3.5 text-sm font-semibold text-gray-900"
-                            >
-                              NAME
-                            </th>
-                            <th
-                              scope="col"
-                              className="px-3 py-3.5 text-sm font-semibold text-gray-900"
-                            >
-                              DESCRIPTION
-                            </th>
-                            <th
-                              scope="col"
-                              className="px-3 py-3.5 text-sm font-semibold text-gray-900"
-                            >
-                              PROJECT
-                            </th>
-                            <th
-                              scope="col"
-                              className="px-3 py-3.5 text-sm font-semibold text-gray-900"
-                            >
-                              PRIORITY
-                            </th>
-                            <th
-                              scope="col"
-                              className="px-3 py-3.5 text-sm font-semibold text-gray-900"
-                            >
-                              STATUS
-                            </th>
-                          </tr>
-                        </thead>
-                        <tbody className="bg-white">
-                          {myIssues.map((myIssue, index) => (
-                            <tr
-                              key={myIssue.id}
-                              className={classNames(
-                                index === 0 ? "border-gray-300" : "border-gray-200",
-                                "border-t text-sm text-gray-900"
-                              )}
-                            >
-                              <td className="px-3 py-4 text-sm font-medium text-gray-900 hover:text-theme max-w-[15rem] duration-300">
-                                <Link href={`/projects/${myIssue.project}/issues/${myIssue.id}`}>
-                                  <a>{myIssue.name}</a>
-                                </Link>
-                              </td>
-                              <td className="px-3 py-4 max-w-[15rem] truncate">
-                                {/* {myIssue.description} */}
-                              </td>
-                              <td className="px-3 py-4">
-                                {myIssue.project_detail?.name}
-                                <br />
-                                <span className="text-xs">{`(${myIssue.project_detail?.identifier}-${myIssue.sequence_id})`}</span>
-                              </td>
-                              <td className="px-3 py-4 capitalize">{myIssue.priority}</td>
-                              <td className="relative px-3 py-4">
-                                <ChangeStateDropdown
-                                  issue={myIssue}
-                                  updateIssues={updateMyIssues}
-                                />
-                              </td>
-                            </tr>
-                          ))}
-                        </tbody>
-                      </table>
+              <div className="flex flex-col space-y-5">
+                <Disclosure as="div" defaultOpen>
+                  {({ open }) => (
+                    <div className="bg-white rounded-lg">
+                      <div className="bg-gray-100 px-4 py-3 rounded-t-lg">
+                        <Disclosure.Button>
+                          <div className="flex items-center gap-x-2">
+                            <span>
+                              <ChevronDownIcon
+                                className={`h-4 w-4 text-gray-500 ${
+                                  !open ? "transform -rotate-90" : ""
+                                }`}
+                              />
+                            </span>
+                            <h2 className="font-medium leading-5">My Issues</h2>
+                            <p className="text-gray-500 text-sm">{myIssues.length}</p>
+                          </div>
+                        </Disclosure.Button>
+                      </div>
+                      <Transition
+                        show={open}
+                        enter="transition duration-100 ease-out"
+                        enterFrom="transform opacity-0"
+                        enterTo="transform opacity-100"
+                        leave="transition duration-75 ease-out"
+                        leaveFrom="transform opacity-100"
+                        leaveTo="transform opacity-0"
+                      >
+                        <Disclosure.Panel>
+                          <div className="divide-y-2">
+                            {myIssues.map((issue: IIssue) => {
+                              const assignees = [
+                                ...(issue?.assignees_list ?? []),
+                                ...(issue?.assignees ?? []),
+                              ]?.map((assignee) => {
+                                const tempPerson = people?.find(
+                                  (p) => p.member.id === assignee
+                                )?.member;
+
+                                return {
+                                  avatar: tempPerson?.avatar,
+                                  first_name: tempPerson?.first_name,
+                                  email: tempPerson?.email,
+                                };
+                              });
+
+                              return (
+                                <div
+                                  key={issue.id}
+                                  className="px-4 py-3 text-sm rounded flex justify-between items-center gap-2"
+                                >
+                                  <div className="flex items-center gap-2">
+                                    <span
+                                      className={`flex-shrink-0 h-1.5 w-1.5 block rounded-full`}
+                                      style={{
+                                        backgroundColor: issue.state_detail.color,
+                                      }}
+                                    />
+                                    <Link href={`/projects/${issue.project}/issues/${issue.id}`}>
+                                      <a className="group relative flex items-center gap-2">
+                                        {/* {properties.key && (
+                                          <span className="flex-shrink-0 text-xs text-gray-500">
+                                            {issue.project_detail.identifier}-{issue.sequence_id}
+                                          </span>
+                                        )} */}
+                                        <span className="">{issue.name}</span>
+                                        <div className="absolute bottom-full left-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md max-w-sm whitespace-nowrap">
+                                          <h5 className="font-medium mb-1">Name</h5>
+                                          <div>{issue.name}</div>
+                                        </div>
+                                      </a>
+                                    </Link>
+                                  </div>
+                                  <div className="flex-shrink-0 flex items-center gap-x-1 gap-y-2 text-xs flex-wrap">
+                                    {properties.priority && (
+                                      <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 relative flex-shrink-0 flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300">
+                                        <CalendarDaysIcon className="h-4 w-4" />
+                                        {issue.start_date
+                                          ? renderShortNumericDateFormat(issue.start_date)
+                                          : "N/A"}
+                                        <div className="absolute bottom-full right-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
+                                          <h5 className="font-medium mb-1">Started at</h5>
+                                          <div>
+                                            {renderShortNumericDateFormat(issue.start_date ?? "")}
+                                          </div>
+                                        </div>
+                                      </div>
+                                    )}
+                                    {properties.target_date && (
+                                      <div
+                                        className={`group relative flex-shrink-0 group flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300 ${
+                                          issue.target_date === null
+                                            ? ""
+                                            : issue.target_date < new Date().toISOString()
+                                            ? "text-red-600"
+                                            : findHowManyDaysLeft(issue.target_date) <= 3 &&
+                                              "text-orange-400"
+                                        }`}
+                                      >
+                                        <CalendarDaysIcon className="h-4 w-4" />
+                                        {issue.target_date
+                                          ? renderShortNumericDateFormat(issue.target_date)
+                                          : "N/A"}
+                                        <div className="absolute bottom-full right-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
+                                          <h5 className="font-medium mb-1 text-gray-900">
+                                            Target date
+                                          </h5>
+                                          <div>
+                                            {renderShortNumericDateFormat(issue.target_date ?? "")}
+                                          </div>
+                                          <div>
+                                            {issue.target_date &&
+                                              (issue.target_date < new Date().toISOString()
+                                                ? `Target date has passed by ${findHowManyDaysLeft(
+                                                    issue.target_date
+                                                  )} days`
+                                                : findHowManyDaysLeft(issue.target_date) <= 3
+                                                ? `Target date is in ${findHowManyDaysLeft(
+                                                    issue.target_date
+                                                  )} days`
+                                                : "Target date")}
+                                          </div>
+                                        </div>
+                                      </div>
+                                    )}
+                                    {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`}
+                                                          >
+                                                            {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 right-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 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">Assigned to</h5>
+                                              <div>
+                                                {issue.assignee_details?.length > 0
+                                                  ? issue.assignee_details
+                                                      .map((assignee) => assignee.first_name)
+                                                      .join(", ")
+                                                  : "No one"}
+                                              </div>
+                                            </div>
+                                          </>
+                                        )}
+                                      </Listbox>
+                                    )}
+                                    <Menu as="div" className="relative">
+                                      <Menu.Button
+                                        as="button"
+                                        className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-100 duration-300 outline-none`}
+                                      >
+                                        <EllipsisHorizontalIcon className="h-4 w-4" />
+                                      </Menu.Button>
+                                      <Menu.Items className="absolute origin-top-right right-0.5 mt-1 p-1 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
+                                        <Menu.Item>
+                                          <button
+                                            type="button"
+                                            className="text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full"
+                                            onClick={() => {
+                                              // setSelectedIssue({
+                                              //   ...issue,
+                                              //   actionType: "edit",
+                                              // });
+                                            }}
+                                          >
+                                            Edit
+                                          </button>
+                                        </Menu.Item>
+                                        <Menu.Item>
+                                          <div className="hover:bg-gray-100 border-b last:border-0">
+                                            <button
+                                              type="button"
+                                              className="text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full"
+                                              onClick={() => {
+                                                // handleDeleteIssue(issue.id);
+                                              }}
+                                            >
+                                              Delete permanently
+                                            </button>
+                                          </div>
+                                        </Menu.Item>
+                                      </Menu.Items>
+                                    </Menu>
+                                  </div>
+                                </div>
+                              );
+                            })}
+                          </div>
+                        </Disclosure.Panel>
+                      </Transition>
                     </div>
-                  </div>
-                </div>
+                  )}
+                </Disclosure>
               </div>
             ) : (
               <div className="w-full h-full flex flex-col justify-center items-center px-4">
diff --git a/apps/app/pages/projects/[projectId]/cycles/[cycleId].tsx b/apps/app/pages/projects/[projectId]/cycles/[cycleId].tsx
index f1dc51c6b..1f339bec1 100644
--- a/apps/app/pages/projects/[projectId]/cycles/[cycleId].tsx
+++ b/apps/app/pages/projects/[projectId]/cycles/[cycleId].tsx
@@ -1,6 +1,7 @@
 // react
-import React from "react";
+import React, { useState } from "react";
 // next
+import Link from "next/link";
 import { useRouter } from "next/router";
 // swr
 import useSWR, { mutate } from "swr";
@@ -9,8 +10,8 @@ import { DropResult } from "react-beautiful-dnd";
 // layouots
 import AppLayout from "layouts/app-layout";
 // components
-import CyclesListView from "components/project/cycles/ListView";
-import CyclesBoardView from "components/project/cycles/BoardView";
+import CyclesListView from "components/project/cycles/list-view";
+import CyclesBoardView from "components/project/cycles/board-view";
 // services
 import issuesServices from "lib/services/issues.service";
 import cycleServices from "lib/services/cycles.service";
@@ -25,19 +26,21 @@ import { Menu, Popover, Transition } from "@headlessui/react";
 import { BreadcrumbItem, Breadcrumbs, CustomMenu } from "ui";
 // icons
 import { Squares2X2Icon } from "@heroicons/react/20/solid";
-import {
-  ArrowPathIcon,
-  ChevronDownIcon,
-  EllipsisHorizontalIcon,
-  ListBulletIcon,
-} from "@heroicons/react/24/outline";
+import { ArrowPathIcon, ChevronDownIcon, ListBulletIcon } from "@heroicons/react/24/outline";
 // types
-import { CycleIssueResponse, IIssue, NestedKeyOf, Properties } from "types";
+import {
+  CycleIssueResponse,
+  IIssue,
+  NestedKeyOf,
+  Properties,
+  SelectIssue,
+  SelectSprintType,
+} from "types";
 // fetch-keys
 import { CYCLE_ISSUES, PROJECT_MEMBERS } from "constants/fetch-keys";
 // constants
 import { classNames, replaceUnderscoreIfSnakeCase } from "constants/common";
-import Link from "next/link";
+import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal";
 
 const groupByOptions: Array<{ name: string; key: NestedKeyOf<IIssue> | null }> = [
   { name: "State", key: "state_detail.name" },
@@ -73,6 +76,10 @@ const filterIssueOptions: Array<{
 type Props = {};
 
 const SingleCycle: React.FC<Props> = () => {
+  const [isIssueModalOpen, setIsIssueModalOpen] = useState(false);
+  const [selectedCycle, setSelectedCycle] = useState<SelectSprintType>();
+  const [selectedIssues, setSelectedIssues] = useState<SelectIssue>();
+
   const { activeWorkspace, activeProject, cycles } = useUser();
 
   const router = useRouter();
@@ -121,6 +128,21 @@ const SingleCycle: React.FC<Props> = () => {
     filterIssue,
   } = useIssuesFilter(cycleIssuesArray ?? []);
 
+  const openCreateIssueModal = (
+    issue?: IIssue,
+    actionType: "create" | "edit" | "delete" = "create"
+  ) => {
+    const cycle = cycles?.find((cycle) => cycle.id === cycleId);
+    if (cycle) {
+      setSelectedCycle({
+        ...cycle,
+        actionType: "create-issue",
+      });
+      if (issue) setSelectedIssues({ ...issue, actionType });
+      setIsIssueModalOpen(true);
+    }
+  };
+
   const addIssueToCycle = (cycleId: string, issueId: string) => {
     if (!activeWorkspace || !activeProject?.id) return;
 
@@ -200,18 +222,32 @@ const SingleCycle: React.FC<Props> = () => {
   };
 
   return (
-    <AppLayout
-      breadcrumbs={
-        <Breadcrumbs>
-          <BreadcrumbItem
-            title={`${activeProject?.name ?? "Project"} Cycles`}
-            link={`/projects/${activeProject?.id}/cycles`}
-          />
-          {/* <BreadcrumbItem title={`${cycles?.find((c) => c.id === cycleId)?.name ?? "Cycle"} `} /> */}
+    <>
+      <CreateUpdateIssuesModal
+        isOpen={
+          isIssueModalOpen &&
+          selectedCycle?.actionType === "create-issue" &&
+          selectedIssues?.actionType !== "delete"
+        }
+        data={selectedIssues}
+        prePopulateData={{ sprints: selectedCycle?.id }}
+        setIsOpen={setIsIssueModalOpen}
+        projectId={activeProject?.id}
+      />
+      <AppLayout
+        breadcrumbs={
+          <Breadcrumbs>
+            <BreadcrumbItem
+              title={`${activeProject?.name ?? "Project"} Cycles`}
+              link={`/projects/${activeProject?.id}/cycles`}
+            />
+          </Breadcrumbs>
+        }
+        left={
           <Menu as="div" className="relative inline-block">
-            <Menu.Button className="flex items-center gap-1 border ml-3 px-2 py-1 rounded hover:bg-gray-100 text-xs font-medium">
+            <Menu.Button className="flex items-center gap-1 border ml-2 px-2 py-1 rounded hover:bg-gray-100 text-xs font-medium">
               <ArrowPathIcon className="h-3 w-3" />
-              Cycle
+              {cycles?.find((c) => c.id === cycleId)?.name}
             </Menu.Button>
 
             <Transition
@@ -240,176 +276,172 @@ const SingleCycle: React.FC<Props> = () => {
               </Menu.Items>
             </Transition>
           </Menu>
-        </Breadcrumbs>
-      }
-      right={
-        <div className="flex items-center gap-2">
-          <div className="flex items-center gap-x-1">
-            <button
-              type="button"
-              className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none ${
-                issueView === "list" ? "bg-gray-200" : ""
-              }`}
-              onClick={() => {
-                setIssueView("list");
-                setGroupByProperty(null);
-              }}
-            >
-              <ListBulletIcon className="h-4 w-4" />
-            </button>
-            <button
-              type="button"
-              className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none ${
-                issueView === "kanban" ? "bg-gray-200" : ""
-              }`}
-              onClick={() => {
-                setIssueView("kanban");
-                setGroupByProperty("state_detail.name");
-              }}
-            >
-              <Squares2X2Icon className="h-4 w-4" />
-            </button>
-          </div>
-          <Popover className="relative">
-            {({ open }) => (
-              <>
-                <Popover.Button
-                  className={classNames(
-                    open ? "bg-gray-100 text-gray-900" : "text-gray-500",
-                    "group flex gap-2 items-center rounded-md bg-transparent text-xs font-medium hover:bg-gray-100 hover:text-gray-900 focus:outline-none border p-2"
-                  )}
-                >
-                  <span>View</span>
-                  <ChevronDownIcon className="h-4 w-4" aria-hidden="true" />
-                </Popover.Button>
+        }
+        right={
+          <div className="flex items-center gap-2">
+            <div className="flex items-center gap-x-1">
+              <button
+                type="button"
+                className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none ${
+                  issueView === "list" ? "bg-gray-200" : ""
+                }`}
+                onClick={() => {
+                  setIssueView("list");
+                  setGroupByProperty(null);
+                }}
+              >
+                <ListBulletIcon className="h-4 w-4" />
+              </button>
+              <button
+                type="button"
+                className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none ${
+                  issueView === "kanban" ? "bg-gray-200" : ""
+                }`}
+                onClick={() => {
+                  setIssueView("kanban");
+                  setGroupByProperty("state_detail.name");
+                }}
+              >
+                <Squares2X2Icon className="h-4 w-4" />
+              </button>
+            </div>
+            <Popover className="relative">
+              {({ open }) => (
+                <>
+                  <Popover.Button
+                    className={classNames(
+                      open ? "bg-gray-100 text-gray-900" : "text-gray-500",
+                      "group flex gap-2 items-center rounded-md bg-transparent text-xs font-medium hover:bg-gray-100 hover:text-gray-900 focus:outline-none border p-2"
+                    )}
+                  >
+                    <span>View</span>
+                    <ChevronDownIcon className="h-4 w-4" aria-hidden="true" />
+                  </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 mr-5 right-1/2 z-10 mt-1 w-screen max-w-xs translate-x-1/2 transform p-3 bg-white rounded-lg shadow-lg overflow-hidden">
-                    <div className="relative flex flex-col gap-1 gap-y-4">
-                      <div className="flex justify-between items-center">
-                        <h4 className="text-sm text-gray-600">Group by</h4>
-                        <CustomMenu
-                          label={
-                            groupByOptions.find((option) => option.key === groupByProperty)?.name ??
-                            "Select"
-                          }
-                        >
-                          {groupByOptions.map((option) => (
-                            <CustomMenu.MenuItem
-                              key={option.key}
-                              onClick={() => setGroupByProperty(option.key)}
-                            >
-                              {option.name}
-                            </CustomMenu.MenuItem>
-                          ))}
-                        </CustomMenu>
-                      </div>
-                      <div className="flex justify-between items-center">
-                        <h4 className="text-sm text-gray-600">Order by</h4>
-                        <CustomMenu
-                          label={
-                            orderByOptions.find((option) => option.key === orderBy)?.name ??
-                            "Select"
-                          }
-                        >
-                          {orderByOptions.map((option) =>
-                            groupByProperty === "priority" && option.key === "priority" ? null : (
+                  <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 mr-5 right-1/2 z-10 mt-1 w-screen max-w-xs translate-x-1/2 transform p-3 bg-white rounded-lg shadow-lg overflow-hidden">
+                      <div className="relative flex flex-col gap-1 gap-y-4">
+                        <div className="flex justify-between items-center">
+                          <h4 className="text-sm text-gray-600">Group by</h4>
+                          <CustomMenu
+                            label={
+                              groupByOptions.find((option) => option.key === groupByProperty)
+                                ?.name ?? "Select"
+                            }
+                          >
+                            {groupByOptions.map((option) => (
                               <CustomMenu.MenuItem
                                 key={option.key}
-                                onClick={() => setOrderBy(option.key)}
+                                onClick={() => setGroupByProperty(option.key)}
                               >
                                 {option.name}
                               </CustomMenu.MenuItem>
-                            )
-                          )}
-                        </CustomMenu>
-                      </div>
-                      <div className="flex justify-between items-center">
-                        <h4 className="text-sm text-gray-600">Issue type</h4>
-                        <CustomMenu
-                          label={
-                            filterIssueOptions.find((option) => option.key === filterIssue)?.name ??
-                            "Select"
-                          }
-                        >
-                          {filterIssueOptions.map((option) => (
-                            <CustomMenu.MenuItem
-                              key={option.key}
-                              onClick={() => setFilterIssue(option.key)}
-                            >
-                              {option.name}
-                            </CustomMenu.MenuItem>
-                          ))}
-                        </CustomMenu>
-                      </div>
-                      <div className="border-b-2"></div>
-                      <div className="relative flex flex-col gap-1">
-                        <h4 className="text-base text-gray-600">Properties</h4>
-                        <div className="flex items-center gap-2 flex-wrap">
-                          {Object.keys(properties).map((key) => (
-                            <button
-                              key={key}
-                              type="button"
-                              className={`px-2 py-1 capitalize rounded border border-theme text-xs ${
-                                properties[key as keyof Properties]
-                                  ? "border-theme bg-theme text-white"
-                                  : ""
-                              }`}
-                              onClick={() => setProperties(key as keyof Properties)}
-                            >
-                              {replaceUnderscoreIfSnakeCase(key)}
-                            </button>
-                          ))}
+                            ))}
+                          </CustomMenu>
+                        </div>
+                        <div className="flex justify-between items-center">
+                          <h4 className="text-sm text-gray-600">Order by</h4>
+                          <CustomMenu
+                            label={
+                              orderByOptions.find((option) => option.key === orderBy)?.name ??
+                              "Select"
+                            }
+                          >
+                            {orderByOptions.map((option) =>
+                              groupByProperty === "priority" && option.key === "priority" ? null : (
+                                <CustomMenu.MenuItem
+                                  key={option.key}
+                                  onClick={() => setOrderBy(option.key)}
+                                >
+                                  {option.name}
+                                </CustomMenu.MenuItem>
+                              )
+                            )}
+                          </CustomMenu>
+                        </div>
+                        <div className="flex justify-between items-center">
+                          <h4 className="text-sm text-gray-600">Issue type</h4>
+                          <CustomMenu
+                            label={
+                              filterIssueOptions.find((option) => option.key === filterIssue)
+                                ?.name ?? "Select"
+                            }
+                          >
+                            {filterIssueOptions.map((option) => (
+                              <CustomMenu.MenuItem
+                                key={option.key}
+                                onClick={() => setFilterIssue(option.key)}
+                              >
+                                {option.name}
+                              </CustomMenu.MenuItem>
+                            ))}
+                          </CustomMenu>
+                        </div>
+                        <div className="border-b-2"></div>
+                        <div className="relative flex flex-col gap-1">
+                          <h4 className="text-base text-gray-600">Properties</h4>
+                          <div className="flex items-center gap-2 flex-wrap">
+                            {Object.keys(properties).map((key) => (
+                              <button
+                                key={key}
+                                type="button"
+                                className={`px-2 py-1 capitalize rounded border border-theme text-xs ${
+                                  properties[key as keyof Properties]
+                                    ? "border-theme bg-theme text-white"
+                                    : ""
+                                }`}
+                                onClick={() => setProperties(key as keyof Properties)}
+                              >
+                                {replaceUnderscoreIfSnakeCase(key)}
+                              </button>
+                            ))}
+                          </div>
                         </div>
                       </div>
-                    </div>
-                  </Popover.Panel>
-                </Transition>
-              </>
-            )}
-          </Popover>
-        </div>
-      }
-    >
-      {issueView === "list" ? (
-        <CyclesListView
-          groupedByIssues={groupedByIssues}
-          selectedGroup={groupByProperty}
-          properties={properties}
-          openCreateIssueModal={() => {
-            return;
-          }}
-          openIssuesListModal={() => {
-            return;
-          }}
-          removeIssueFromCycle={removeIssueFromCycle}
-        />
-      ) : (
-        <div className="h-screen">
-          <CyclesBoardView
+                    </Popover.Panel>
+                  </Transition>
+                </>
+              )}
+            </Popover>
+          </div>
+        }
+      >
+        {issueView === "list" ? (
+          <CyclesListView
             groupedByIssues={groupedByIssues}
-            properties={properties}
-            removeIssueFromCycle={removeIssueFromCycle}
             selectedGroup={groupByProperty}
-            members={members}
-            openCreateIssueModal={() => {
-              return;
-            }}
+            properties={properties}
+            openCreateIssueModal={openCreateIssueModal}
             openIssuesListModal={() => {
               return;
             }}
+            removeIssueFromCycle={removeIssueFromCycle}
           />
-        </div>
-      )}
-    </AppLayout>
+        ) : (
+          <div className="h-screen">
+            <CyclesBoardView
+              groupedByIssues={groupedByIssues}
+              properties={properties}
+              removeIssueFromCycle={removeIssueFromCycle}
+              selectedGroup={groupByProperty}
+              members={members}
+              openCreateIssueModal={openCreateIssueModal}
+              openIssuesListModal={() => {
+                return;
+              }}
+            />
+          </div>
+        )}
+      </AppLayout>
+    </>
   );
 };
 
diff --git a/apps/app/pages/projects/[projectId]/cycles/index.tsx b/apps/app/pages/projects/[projectId]/cycles/index.tsx
index 9a2709500..16d3d2227 100644
--- a/apps/app/pages/projects/[projectId]/cycles/index.tsx
+++ b/apps/app/pages/projects/[projectId]/cycles/index.tsx
@@ -3,11 +3,9 @@ import React, { useEffect, useState } from "react";
 // next
 import { useRouter } from "next/router";
 import type { NextPage } from "next";
-import Link from "next/link";
 // swr
 import useSWR from "swr";
 // services
-import issuesServices from "lib/services/issues.service";
 import sprintService from "lib/services/cycles.service";
 // hooks
 import useUser from "lib/hooks/useUser";
@@ -24,6 +22,7 @@ import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deleti
 import ConfirmSprintDeletion from "components/project/cycles/ConfirmCycleDeletion";
 import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal";
 import CreateUpdateSprintsModal from "components/project/cycles/CreateUpdateCyclesModal";
+import CycleStatsView from "components/project/cycles/stats-view";
 // headless ui
 import { Popover, Transition } from "@headlessui/react";
 // ui
@@ -204,11 +203,7 @@ const ProjectSprints: NextPage = () => {
       {cycles ? (
         cycles.length > 0 ? (
           <div className="space-y-5">
-            {cycles.map((cycle) => (
-              <Link key={cycle.id} href={`/projects/${activeProject?.id}/cycles/${cycle.id}`}>
-                <a className="block bg-white p-3 rounded-md">{cycle.name}</a>
-              </Link>
-            ))}
+            <CycleStatsView cycles={cycles} />
           </div>
         ) : (
           <div className="w-full h-full flex flex-col justify-center items-center px-4">
diff --git a/apps/app/pages/projects/[projectId]/issues/[issueId].tsx b/apps/app/pages/projects/[projectId]/issues/[issueId].tsx
index e4eb8d2a2..3940e3a1e 100644
--- a/apps/app/pages/projects/[projectId]/issues/[issueId].tsx
+++ b/apps/app/pages/projects/[projectId]/issues/[issueId].tsx
@@ -1,4 +1,5 @@
 // next
+import Link from "next/link";
 import type { NextPage } from "next";
 import { useRouter } from "next/router";
 import dynamic from "next/dynamic";
@@ -27,10 +28,12 @@ import AppLayout from "layouts/app-layout";
 // components
 import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal";
 import IssueCommentSection from "components/project/issues/issue-detail/comment/IssueCommentSection";
+import AddAsSubIssue from "components/command-palette/addAsSubIssue";
+import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
 // common
 import { debounce } from "constants/common";
 // components
-import IssueDetailSidebar from "components/project/issues/issue-detail/IssueDetailSidebar";
+import IssueDetailSidebar from "components/project/issues/issue-detail/issue-detail-sidebar";
 // activites
 import IssueActivitySection from "components/project/issues/issue-detail/activity";
 // ui
@@ -46,9 +49,6 @@ import {
   EllipsisHorizontalIcon,
   PlusIcon,
 } from "@heroicons/react/24/outline";
-import Link from "next/link";
-import AddAsSubIssue from "components/command-palette/addAsSubIssue";
-import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
 
 const RichTextEditor = dynamic(() => import("components/lexical/editor"), {
   ssr: false,
diff --git a/apps/app/pages/projects/[projectId]/settings.tsx b/apps/app/pages/projects/[projectId]/settings.tsx
index 6e7800d0e..18d5ed567 100644
--- a/apps/app/pages/projects/[projectId]/settings.tsx
+++ b/apps/app/pages/projects/[projectId]/settings.tsx
@@ -13,6 +13,7 @@ import { Tab } from "@headlessui/react";
 import withAuth from "lib/hoc/withAuthWrapper";
 // layouts
 import SettingsLayout from "layouts/settings-layout";
+import AppLayout from "layouts/app-layout";
 // service
 import projectServices from "lib/services/project.service";
 // hooks
@@ -155,14 +156,14 @@ const ProjectSettings: NextPage = () => {
   ];
 
   return (
-    <SettingsLayout
+    <AppLayout
       breadcrumbs={
         <Breadcrumbs>
           <BreadcrumbItem title="Projects" link="/projects" />
           <BreadcrumbItem title={`${activeProject?.name ?? "Project"} Settings`} />
         </Breadcrumbs>
       }
-      links={sidebarLinks}
+      // links={sidebarLinks}
     >
       {projectDetails ? (
         <div className="space-y-3">
@@ -209,7 +210,7 @@ const ProjectSettings: NextPage = () => {
           <Spinner />
         </div>
       )}
-    </SettingsLayout>
+    </AppLayout>
   );
 };
 
diff --git a/apps/app/pages/workspace/index.tsx b/apps/app/pages/workspace/index.tsx
index 94921eaf2..3c671e5f7 100644
--- a/apps/app/pages/workspace/index.tsx
+++ b/apps/app/pages/workspace/index.tsx
@@ -18,9 +18,14 @@ import userService from "lib/services/user.service";
 // ui
 import { Spinner } from "ui";
 // icons
-import { ArrowRightIcon } from "@heroicons/react/24/outline";
+import { ArrowRightIcon, CalendarDaysIcon } from "@heroicons/react/24/outline";
 // types
 import type { IIssue } from "types";
+import {
+  addSpaceIfCamelCase,
+  findHowManyDaysLeft,
+  renderShortNumericDateFormat,
+} from "constants/common";
 
 const Workspace: NextPage = () => {
   const { user, activeWorkspace, projects } = useUser();
@@ -46,7 +51,7 @@ const Workspace: NextPage = () => {
   const hours = new Date().getHours();
 
   return (
-    <AppLayout>
+    <AppLayout noHeader={true}>
       <div className="h-full w-full space-y-5">
         {user ? (
           <div className="font-medium text-2xl">
@@ -78,49 +83,105 @@ const Workspace: NextPage = () => {
             <div className="max-h-[30rem] overflow-y-auto w-full border border-gray-200 bg-white rounded-lg shadow-sm col-span-2">
               {myIssues ? (
                 myIssues.length > 0 ? (
-                  <table className="h-full w-full overflow-y-auto">
-                    <thead className="border-b bg-gray-50 text-sm">
-                      <tr>
-                        <th scope="col" className="px-3 py-4 text-left">
-                          ISSUE
-                        </th>
-                        <th scope="col" className="px-3 py-4 text-left">
-                          KEY
-                        </th>
-                        <th scope="col" className="px-3 py-4 text-left">
-                          STATUS
-                        </th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {myIssues?.map((issue, index) => (
-                        <tr
-                          className="border-t transition duration-300 ease-in-out hover:bg-gray-100 text-gray-900 gap-3 text-sm"
-                          key={index}
-                        >
-                          <td className="px-3 py-4 font-medium">
-                            <Link href={`/projects/${issue.project}/issues/${issue.id}`}>
-                              <a className="hover:text-theme duration-300">{issue.name}</a>
-                            </Link>
-                          </td>
-                          <td className="px-3 py-4">
-                            {issue.project_detail?.identifier}-{issue.sequence_id}
-                          </td>
-                          <td className="px-3 py-4">
-                            <span
-                              className="rounded px-2 py-1 text-xs font-medium"
-                              style={{
-                                border: `2px solid ${issue.state_detail.color}`,
-                                backgroundColor: `${issue.state_detail.color}20`,
-                              }}
-                            >
-                              {issue.state_detail.name ?? "None"}
-                            </span>
-                          </td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
+                  <div className="flex flex-col space-y-5">
+                    <div className="bg-white rounded-lg">
+                      <div className="bg-gray-100 px-4 py-3 rounded-t-lg">
+                        <div className="flex items-center gap-x-2">
+                          <h2 className="font-medium leading-5">My Issues</h2>
+                          <p className="text-gray-500 text-sm">{myIssues.length}</p>
+                        </div>
+                      </div>
+                      <div className="divide-y-2">
+                        {myIssues.map((issue) => (
+                          <div
+                            key={issue.id}
+                            className="px-4 py-3 text-sm rounded flex justify-between items-center gap-2"
+                          >
+                            <div className="flex items-center gap-2">
+                              <span
+                                className={`flex-shrink-0 h-1.5 w-1.5 block rounded-full`}
+                                style={{
+                                  backgroundColor: issue.state_detail.color,
+                                }}
+                              />
+                              <Link href={`/projects/${issue.project}/issues/${issue.id}`}>
+                                <a className="group relative flex items-center gap-2">
+                                  {/* {properties.key && (
+                                          <span className="flex-shrink-0 text-xs text-gray-500">
+                                            {issue.project_detail.identifier}-{issue.sequence_id}
+                                          </span>
+                                        )} */}
+                                  <span className="">{issue.name}</span>
+                                  <div className="absolute bottom-full left-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md max-w-sm whitespace-nowrap">
+                                    <h5 className="font-medium mb-1">Name</h5>
+                                    <div>{issue.name}</div>
+                                  </div>
+                                </a>
+                              </Link>
+                            </div>
+                            <div className="flex-shrink-0 flex items-center gap-x-1 gap-y-2 text-xs flex-wrap">
+                              <div
+                                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"}
+                              </div>
+
+                              <div 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)}
+                              </div>
+                              <div
+                                className={`group relative flex-shrink-0 group flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300 ${
+                                  issue.target_date === null
+                                    ? ""
+                                    : issue.target_date < new Date().toISOString()
+                                    ? "text-red-600"
+                                    : findHowManyDaysLeft(issue.target_date) <= 3 &&
+                                      "text-orange-400"
+                                }`}
+                              >
+                                <CalendarDaysIcon className="h-4 w-4" />
+                                {issue.target_date
+                                  ? renderShortNumericDateFormat(issue.target_date)
+                                  : "N/A"}
+                                <div className="absolute bottom-full right-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
+                                  <h5 className="font-medium mb-1 text-gray-900">Target date</h5>
+                                  <div>{renderShortNumericDateFormat(issue.target_date ?? "")}</div>
+                                  <div>
+                                    {issue.target_date &&
+                                      (issue.target_date < new Date().toISOString()
+                                        ? `Target date has passed by ${findHowManyDaysLeft(
+                                            issue.target_date
+                                          )} days`
+                                        : findHowManyDaysLeft(issue.target_date) <= 3
+                                        ? `Target date is in ${findHowManyDaysLeft(
+                                            issue.target_date
+                                          )} days`
+                                        : "Target date")}
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
                 ) : (
                   <div className="m-10">
                     <p className="text-gray-500 text-center">No Issues Found</p>

From b189cae449772c81fd64e86ca7fe704b28f0b4a7 Mon Sep 17 00:00:00 2001
From: pablohashescobar <nikhilschacko@gmail.com>
Date: Fri, 16 Dec 2022 11:45:38 +0530
Subject: [PATCH 02/10] build: create procfile for deployments to heroku

---
 Procfile | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 Procfile

diff --git a/Procfile b/Procfile
new file mode 100644
index 000000000..8b63cf98c
--- /dev/null
+++ b/Procfile
@@ -0,0 +1,3 @@
+web: node apps/app/server.js
+backend_web: cd apiserver && gunicorn plane.wsgi -k gthread --workers 8 --bind 0.0.0.0:$PORT --config gunicorn.config.py --max-requests 10000 --max-requests-jitter 1000 --access-logfile -
+worker: cd apiserver && python manage.py rqworker
\ No newline at end of file

From 2bacbedeb7a697ce28d6db25a3e0ed971490c88a Mon Sep 17 00:00:00 2001
From: pablohashescobar <nikhilschacko@gmail.com>
Date: Fri, 16 Dec 2022 21:30:04 +0530
Subject: [PATCH 03/10] feat: create a dedicated endpoint to view logged in
 users project attributes

---
 apiserver/plane/api/urls.py           |  7 +++++++
 apiserver/plane/api/views/__init__.py |  1 +
 apiserver/plane/api/views/project.py  | 24 ++++++++++++++++++++++++
 3 files changed, 32 insertions(+)

diff --git a/apiserver/plane/api/urls.py b/apiserver/plane/api/urls.py
index ef53b4519..2b1dabbf2 100644
--- a/apiserver/plane/api/urls.py
+++ b/apiserver/plane/api/urls.py
@@ -58,6 +58,7 @@ from plane.api.views import (
     ModuleIssueViewSet,
     UserLastProjectWithWorkspaceEndpoint,
     UserWorkSpaceIssues,
+    ProjectMemberUserEndpoint,
 )
 
 from plane.api.views.project import AddTeamToProjectEndpoint
@@ -320,6 +321,12 @@ urlpatterns = [
         ProjectUserViewsEndpoint.as_view(),
         name="project-view",
     ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/project-member/me/",
+        ProjectMemberUserEndpoint.as_view(),
+        name="project-view",
+    ),
+    # End Projects
     #  States
     path(
         "workspaces/<str:slug>/projects/<uuid:project_id>/states/",
diff --git a/apiserver/plane/api/views/__init__.py b/apiserver/plane/api/views/__init__.py
index b55342f87..5706b1994 100644
--- a/apiserver/plane/api/views/__init__.py
+++ b/apiserver/plane/api/views/__init__.py
@@ -10,6 +10,7 @@ from .project import (
     AddMemberToProjectEndpoint,
     ProjectJoinEndpoint,
     ProjectUserViewsEndpoint,
+    ProjectMemberUserEndpoint,
 )
 from .people import (
     PeopleEndpoint,
diff --git a/apiserver/plane/api/views/project.py b/apiserver/plane/api/views/project.py
index dafc62743..3a18ef85d 100644
--- a/apiserver/plane/api/views/project.py
+++ b/apiserver/plane/api/views/project.py
@@ -625,3 +625,27 @@ class ProjectUserViewsEndpoint(BaseAPIView):
                 {"error": "Something went wrong please try again later"},
                 status=status.HTTP_500_INTERNAL_SERVER_ERROR,
             )
+
+
+class ProjectMemberUserEndpoint(BaseAPIView):
+    def get(self, request, slug, project_id):
+        try:
+
+            project_member = ProjectMember.objects.get(
+                project=project_id, workpsace__slug=slug, member=request.user
+            )
+            serializer = ProjectMemberSerializer(project_member)
+
+            return Response(serializer.data, status=status.HTTP_200_OK)
+
+        except ProjectMember.DoesNotExist:
+            return Response(
+                {"error": "User not a member of the project"},
+                status=status.HTTP_404_NOT_FOUND,
+            )
+        except Exception as e:
+            capture_exception(e)
+            return Response(
+                {"error": "Something went wrong please try again later"},
+                status=status.HTTP_500_INTERNAL_SERVER_ERROR,
+            )

From 8aecc143c7f2626d60769b3707d1047076fe2972 Mon Sep 17 00:00:00 2001
From: pablohashescobar <nikhilschacko@gmail.com>
Date: Fri, 16 Dec 2022 21:33:34 +0530
Subject: [PATCH 04/10] feat: update url

---
 apiserver/plane/api/urls.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apiserver/plane/api/urls.py b/apiserver/plane/api/urls.py
index 2b1dabbf2..d4a9faa6f 100644
--- a/apiserver/plane/api/urls.py
+++ b/apiserver/plane/api/urls.py
@@ -322,7 +322,7 @@ urlpatterns = [
         name="project-view",
     ),
     path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/project-member/me/",
+        "workspaces/<str:slug>/projects/<uuid:project_id>/project-members/me/",
         ProjectMemberUserEndpoint.as_view(),
         name="project-view",
     ),

From 278fd6cdd021024eb26d41394938e8f71aaf4097 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Fri, 16 Dec 2022 21:50:09 +0530
Subject: [PATCH 05/10] feat: modules, style: cycles, all menus

---
 apps/app/components/command-palette/index.tsx |  24 +-
 .../components/command-palette/shortcuts.tsx  |   1 +
 .../project/cycles/board-view/index.tsx       |   4 +-
 .../cycles/board-view/single-board.tsx        |  20 +-
 ...eletion.tsx => confirm-cycle-deletion.tsx} |   0
 ...odal.tsx => create-update-cycle-modal.tsx} |   0
 ...tModal.tsx => cycle-issues-list-modal.tsx} |  62 +-
 .../project/cycles/list-view/index.tsx        |  60 +-
 .../project/cycles/stats-view/index.tsx       |  49 +-
 .../project/cycles/stats-view/single-stat.tsx | 169 +++--
 .../project/issues/BoardView/single-board.tsx |   6 -
 .../CreateUpdateIssueModal/SelectCycles.tsx   |   2 +-
 .../SelectParentIssue.tsx                     |   2 +-
 .../issues/CreateUpdateIssueModal/index.tsx   |   2 +-
 .../project/issues/IssuesListModal.tsx        | 180 -----
 .../issues/issue-detail/add-as-sub-issue.tsx} |   0
 .../issue-detail-sidebar/index.tsx            | 151 +----
 .../issue-detail-sidebar/select-assignee.tsx  |   6 +-
 .../issue-detail-sidebar/select-blocked.tsx   | 238 +++++++
 .../issue-detail-sidebar/select-blocker.tsx   | 238 +++++++
 .../issue-detail-sidebar/select-cycle.tsx     |  89 +--
 .../issue-detail-sidebar/select-parent.tsx    |  12 +-
 .../issue-detail-sidebar/select-priority.tsx  |  58 +-
 .../issue-detail-sidebar/select-state.tsx     | 109 ++-
 .../project/issues/issues-list-modal.tsx      | 249 +++++++
 .../modules/create-update-module-modal.tsx    | 245 +++++++
 .../components/sidebar/workspace-options.tsx  |   4 +-
 apps/app/constants/api-routes.ts              |  15 +
 apps/app/constants/fetch-keys.ts              |   6 +-
 apps/app/layouts/DefaultLayout.tsx            |   4 +-
 apps/app/layouts/Navbar/Sidebar.tsx           | 629 ------------------
 apps/app/layouts/Navbar/main-sidebar.tsx      |   8 +-
 apps/app/layouts/app-layout.tsx               |   6 +-
 apps/app/layouts/settings-layout.tsx          |   8 +-
 apps/app/lib/services/modules.service.ts      | 119 ++++
 .../projects/[projectId]/cycles/[cycleId].tsx |  90 ++-
 .../projects/[projectId]/cycles/index.tsx     | 183 +----
 .../projects/[projectId]/issues/[issueId].tsx |   4 +-
 .../projects/[projectId]/issues/index.tsx     |   3 +
 .../projects/[projectId]/modules/index.tsx    | 104 +++
 apps/app/pages/projects/index.tsx             |  32 +-
 apps/app/types/{sprints.d.ts => cycles.d.ts}  |   2 +-
 apps/app/types/index.d.ts                     |   3 +-
 apps/app/types/issues.d.ts                    |  15 +-
 apps/app/types/modules.d.ts                   |  28 +
 apps/app/ui/Button/index.tsx                  |   6 +-
 apps/app/ui/CustomMenu/index.tsx              |  65 +-
 apps/app/ui/CustomMenu/types.d.ts             |   5 +-
 apps/app/ui/custom-select/index.tsx           |  78 +++
 49 files changed, 1863 insertions(+), 1530 deletions(-)
 rename apps/app/components/project/cycles/{ConfirmCycleDeletion.tsx => confirm-cycle-deletion.tsx} (100%)
 rename apps/app/components/project/cycles/{CreateUpdateCyclesModal.tsx => create-update-cycle-modal.tsx} (100%)
 rename apps/app/components/project/cycles/{CycleIssuesListModal.tsx => cycle-issues-list-modal.tsx} (77%)
 delete mode 100644 apps/app/components/project/issues/IssuesListModal.tsx
 rename apps/app/components/{command-palette/addAsSubIssue.tsx => project/issues/issue-detail/add-as-sub-issue.tsx} (100%)
 create mode 100644 apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocked.tsx
 create mode 100644 apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocker.tsx
 create mode 100644 apps/app/components/project/issues/issues-list-modal.tsx
 create mode 100644 apps/app/components/project/modules/create-update-module-modal.tsx
 delete mode 100644 apps/app/layouts/Navbar/Sidebar.tsx
 create mode 100644 apps/app/lib/services/modules.service.ts
 create mode 100644 apps/app/pages/projects/[projectId]/modules/index.tsx
 rename apps/app/types/{sprints.d.ts => cycles.d.ts} (94%)
 create mode 100644 apps/app/types/modules.d.ts
 create mode 100644 apps/app/ui/custom-select/index.tsx

diff --git a/apps/app/components/command-palette/index.tsx b/apps/app/components/command-palette/index.tsx
index 32f71a3db..8aafbf6da 100644
--- a/apps/app/components/command-palette/index.tsx
+++ b/apps/app/components/command-palette/index.tsx
@@ -24,7 +24,7 @@ import {
 import ShortcutsModal from "components/command-palette/shortcuts";
 import CreateProjectModal from "components/project/create-project-modal";
 import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal";
-import CreateUpdateCycleModal from "components/project/cycles/CreateUpdateCyclesModal";
+import CreateUpdateCycleModal from "components/project/cycles/create-update-cycle-modal";
 // ui
 import { Button } from "ui";
 // types
@@ -33,6 +33,7 @@ import { IIssue, IssueResponse } from "types";
 import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
 // constants
 import { classNames, copyTextToClipboard } from "constants/common";
+import CreateUpdateModuleModal from "components/project/modules/create-update-module-modal";
 
 type FormInput = {
   issue_ids: string[];
@@ -47,6 +48,7 @@ const CommandPalette: React.FC = () => {
   const [isProjectModalOpen, setIsProjectModalOpen] = useState(false);
   const [isShortcutsModalOpen, setIsShortcutsModalOpen] = useState(false);
   const [isCreateCycleModalOpen, setIsCreateCycleModalOpen] = useState(false);
+  const [isCreateModuleModalOpen, setisCreateModuleModalOpen] = useState(false);
 
   const { activeWorkspace, activeProject, issues } = useUser();
 
@@ -109,6 +111,9 @@ const CommandPalette: React.FC = () => {
       } else if ((e.ctrlKey || e.metaKey) && e.key === "q") {
         e.preventDefault();
         setIsCreateCycleModalOpen(true);
+      } else if ((e.ctrlKey || e.metaKey) && e.key === "m") {
+        e.preventDefault();
+        setisCreateModuleModalOpen(true);
       } else if ((e.ctrlKey || e.metaKey) && e.altKey && e.key === "c") {
         e.preventDefault();
 
@@ -184,11 +189,18 @@ const CommandPalette: React.FC = () => {
       <ShortcutsModal isOpen={isShortcutsModalOpen} setIsOpen={setIsShortcutsModalOpen} />
       <CreateProjectModal isOpen={isProjectModalOpen} setIsOpen={setIsProjectModalOpen} />
       {activeProject && (
-        <CreateUpdateCycleModal
-          isOpen={isCreateCycleModalOpen}
-          setIsOpen={setIsCreateCycleModalOpen}
-          projectId={activeProject.id}
-        />
+        <>
+          <CreateUpdateCycleModal
+            isOpen={isCreateCycleModalOpen}
+            setIsOpen={setIsCreateCycleModalOpen}
+            projectId={activeProject.id}
+          />
+          <CreateUpdateModuleModal
+            isOpen={isCreateModuleModalOpen}
+            setIsOpen={setisCreateModuleModalOpen}
+            projectId={activeProject.id}
+          />
+        </>
       )}
       <CreateUpdateIssuesModal
         isOpen={isIssueModalOpen}
diff --git a/apps/app/components/command-palette/shortcuts.tsx b/apps/app/components/command-palette/shortcuts.tsx
index 91a8baab3..dcba28c82 100644
--- a/apps/app/components/command-palette/shortcuts.tsx
+++ b/apps/app/components/command-palette/shortcuts.tsx
@@ -74,6 +74,7 @@ const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                               { 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",
diff --git a/apps/app/components/project/cycles/board-view/index.tsx b/apps/app/components/project/cycles/board-view/index.tsx
index 07d68f20d..97ecd8290 100644
--- a/apps/app/components/project/cycles/board-view/index.tsx
+++ b/apps/app/components/project/cycles/board-view/index.tsx
@@ -14,8 +14,8 @@ type Props = {
   selectedGroup: NestedKeyOf<IIssue> | null;
   members: IProjectMember[] | undefined;
   openCreateIssueModal: (issue?: IIssue, actionType?: "create" | "edit" | "delete") => void;
-  openIssuesListModal: (cycleId: string) => void;
-  removeIssueFromCycle: (cycleId: string, bridgeId: string) => void;
+  openIssuesListModal: () => void;
+  removeIssueFromCycle: (bridgeId: string) => void;
 };
 
 const CyclesBoardView: React.FC<Props> = ({
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 c437824e4..16b9cd0b4 100644
--- a/apps/app/components/project/cycles/board-view/single-board.tsx
+++ b/apps/app/components/project/cycles/board-view/single-board.tsx
@@ -50,8 +50,8 @@ type Props = {
   createdBy: string | null;
   bgColor?: string;
   openCreateIssueModal: (issue?: IIssue, actionType?: "create" | "edit" | "delete") => void;
-  openIssuesListModal: (cycleId: string) => void;
-  removeIssueFromCycle: (cycleId: string, bridgeId: string) => void;
+  openIssuesListModal: () => void;
+  removeIssueFromCycle: (bridgeId: string) => void;
 };
 
 const SingleCycleBoard: React.FC<Props> = ({
@@ -106,12 +106,6 @@ const SingleCycleBoard: React.FC<Props> = ({
                 backgroundColor: `${bgColor}20`,
               }}
             >
-              <span
-                className={`w-3 h-3 block rounded-full ${!show ? "" : "mr-1"}`}
-                style={{
-                  backgroundColor: Boolean(bgColor) ? bgColor : undefined,
-                }}
-              />
               <h2
                 className={`text-[0.9rem] font-medium capitalize`}
                 style={{
@@ -143,13 +137,13 @@ const SingleCycleBoard: React.FC<Props> = ({
                 leaveFrom="transform opacity-100 scale-100"
                 leaveTo="transform opacity-0 scale-95"
               >
-                <Menu.Items className="absolute right-0 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
-                  <div className="p-1">
+                <Menu.Items className="absolute right-0 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10 text-xs">
+                  <div className="py-1">
                     <Menu.Item as="div">
                       {(active) => (
                         <button
                           type="button"
-                          className="text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full"
+                          className="w-full text-left p-2 text-gray-900 hover:bg-indigo-50 whitespace-nowrap"
                           onClick={() => openCreateIssueModal()}
                         >
                           Create new
@@ -160,8 +154,8 @@ const SingleCycleBoard: React.FC<Props> = ({
                       {(active) => (
                         <button
                           type="button"
-                          className="p-2 text-left text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap"
-                          // onClick={() => openIssuesListModal()}
+                          className="w-full text-left p-2 text-gray-900 hover:bg-indigo-50 whitespace-nowrap"
+                          onClick={() => openIssuesListModal()}
                         >
                           Add an existing issue
                         </button>
diff --git a/apps/app/components/project/cycles/ConfirmCycleDeletion.tsx b/apps/app/components/project/cycles/confirm-cycle-deletion.tsx
similarity index 100%
rename from apps/app/components/project/cycles/ConfirmCycleDeletion.tsx
rename to apps/app/components/project/cycles/confirm-cycle-deletion.tsx
diff --git a/apps/app/components/project/cycles/CreateUpdateCyclesModal.tsx b/apps/app/components/project/cycles/create-update-cycle-modal.tsx
similarity index 100%
rename from apps/app/components/project/cycles/CreateUpdateCyclesModal.tsx
rename to apps/app/components/project/cycles/create-update-cycle-modal.tsx
diff --git a/apps/app/components/project/cycles/CycleIssuesListModal.tsx b/apps/app/components/project/cycles/cycle-issues-list-modal.tsx
similarity index 77%
rename from apps/app/components/project/cycles/CycleIssuesListModal.tsx
rename to apps/app/components/project/cycles/cycle-issues-list-modal.tsx
index d9f3226c0..8132ca19f 100644
--- a/apps/app/components/project/cycles/CycleIssuesListModal.tsx
+++ b/apps/app/components/project/cycles/cycle-issues-list-modal.tsx
@@ -145,37 +145,37 @@ const CycleIssuesListModal: React.FC<Props> = ({
                               )}
                               <ul className="text-sm text-gray-700">
                                 {filteredIssues.map((issue) => {
-                                  // if (issue.cycle !== cycleId)
-                                  return (
-                                    <Combobox.Option
-                                      key={issue.id}
-                                      as="label"
-                                      htmlFor={`issue-${issue.id}`}
-                                      value={issue.id}
-                                      className={({ active }) =>
-                                        classNames(
-                                          "flex items-center gap-2 cursor-pointer select-none w-full rounded-md px-3 py-2",
-                                          active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
-                                        )
-                                      }
-                                    >
-                                      {({ selected }) => (
-                                        <>
-                                          <input type="checkbox" checked={selected} readOnly />
-                                          <span
-                                            className="flex-shrink-0 h-1.5 w-1.5 block rounded-full"
-                                            style={{
-                                              backgroundColor: issue.state_detail.color,
-                                            }}
-                                          />
-                                          <span className="flex-shrink-0 text-xs text-gray-500">
-                                            {activeProject?.identifier}-{issue.sequence_id}
-                                          </span>
-                                          {issue.name}
-                                        </>
-                                      )}
-                                    </Combobox.Option>
-                                  );
+                                  if (!issue.issue_cycle)
+                                    return (
+                                      <Combobox.Option
+                                        key={issue.id}
+                                        as="label"
+                                        htmlFor={`issue-${issue.id}`}
+                                        value={issue.id}
+                                        className={({ active }) =>
+                                          classNames(
+                                            "flex items-center gap-2 cursor-pointer select-none w-full rounded-md px-3 py-2",
+                                            active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
+                                          )
+                                        }
+                                      >
+                                        {({ selected }) => (
+                                          <>
+                                            <input type="checkbox" checked={selected} readOnly />
+                                            <span
+                                              className="flex-shrink-0 h-1.5 w-1.5 block rounded-full"
+                                              style={{
+                                                backgroundColor: issue.state_detail.color,
+                                              }}
+                                            />
+                                            <span className="flex-shrink-0 text-xs text-gray-500">
+                                              {activeProject?.identifier}-{issue.sequence_id}
+                                            </span>
+                                            {issue.name}
+                                          </>
+                                        )}
+                                      </Combobox.Option>
+                                    );
                                 })}
                               </ul>
                             </li>
diff --git a/apps/app/components/project/cycles/list-view/index.tsx b/apps/app/components/project/cycles/list-view/index.tsx
index 2ec0c6731..aa658f2a6 100644
--- a/apps/app/components/project/cycles/list-view/index.tsx
+++ b/apps/app/components/project/cycles/list-view/index.tsx
@@ -11,7 +11,7 @@ import cycleServices from "lib/services/cycles.service";
 // hooks
 import useUser from "lib/hooks/useUser";
 // ui
-import { Spinner } from "ui";
+import { CustomMenu, Spinner } from "ui";
 // icons
 import { PlusIcon, EllipsisHorizontalIcon, ChevronDownIcon } from "@heroicons/react/20/solid";
 import { CalendarDaysIcon } from "@heroicons/react/24/outline";
@@ -35,7 +35,7 @@ type Props = {
   selectedGroup: NestedKeyOf<IIssue> | null;
   openCreateIssueModal: (issue?: IIssue, actionType?: "create" | "edit" | "delete") => void;
   openIssuesListModal: (cycleId: string) => void;
-  removeIssueFromCycle: (cycleId: string, bridgeId: string) => void;
+  removeIssueFromCycle: (bridgeId: string) => void;
 };
 
 const CyclesListView: React.FC<Props> = ({
@@ -241,51 +241,19 @@ const CyclesListView: React.FC<Props> = ({
                                     </div>
                                   </div>
                                 )}
-                                <Menu as="div" className="relative">
-                                  <Menu.Button
-                                    as="button"
-                                    className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-100 duration-300 outline-none`}
+                                <CustomMenu width="auto" ellipsis>
+                                  <CustomMenu.MenuItem
+                                    onClick={() => openCreateIssueModal(issue, "edit")}
                                   >
-                                    <EllipsisHorizontalIcon className="h-4 w-4" />
-                                  </Menu.Button>
-                                  <Menu.Items className="absolute origin-top-right right-0.5 mt-1 p-1 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
-                                    <Menu.Item>
-                                      <button
-                                        className="text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full"
-                                        type="button"
-                                        onClick={() => openCreateIssueModal(issue, "edit")}
-                                      >
-                                        Edit
-                                      </button>
-                                    </Menu.Item>
-                                    <Menu.Item>
-                                      <div className="hover:bg-gray-100 border-b last:border-0">
-                                        <button
-                                          className="text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full"
-                                          type="button"
-                                          // onClick={() =>
-                                          //   removeIssueFromCycle(issue.cycle, issue.id)
-                                          // }
-                                        >
-                                          Remove from cycle
-                                        </button>
-                                      </div>
-                                    </Menu.Item>
-                                    <Menu.Item>
-                                      <div className="hover:bg-gray-100 border-b last:border-0">
-                                        <button
-                                          className="text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full"
-                                          type="button"
-                                          // onClick={() =>
-                                          //   openCreateIssueModal(cycle.id, issue, "delete")
-                                          // }
-                                        >
-                                          Delete permanently
-                                        </button>
-                                      </div>
-                                    </Menu.Item>
-                                  </Menu.Items>
-                                </Menu>
+                                    Edit
+                                  </CustomMenu.MenuItem>
+                                  <CustomMenu.MenuItem
+                                    onClick={() => removeIssueFromCycle(issue.bridge ?? "")}
+                                  >
+                                    Remove from cycle
+                                  </CustomMenu.MenuItem>
+                                  <CustomMenu.MenuItem>Delete permanently</CustomMenu.MenuItem>
+                                </CustomMenu>
                               </div>
                             </div>
                           );
diff --git a/apps/app/components/project/cycles/stats-view/index.tsx b/apps/app/components/project/cycles/stats-view/index.tsx
index 4eb14608b..a72d57b13 100644
--- a/apps/app/components/project/cycles/stats-view/index.tsx
+++ b/apps/app/components/project/cycles/stats-view/index.tsx
@@ -1,20 +1,53 @@
-// next
-import Link from "next/link";
-// hooks
-import useUser from "lib/hooks/useUser";
+// react
+import { useState } from "react";
+// components
+import SingleStat from "components/project/cycles/stats-view/single-stat";
+import ConfirmCycleDeletion from "components/project/cycles/confirm-cycle-deletion";
 // types
-import { ICycle } from "types";
-import SingleStat from "./single-stat";
+import { ICycle, SelectSprintType } from "types";
 
 type Props = {
   cycles: ICycle[];
+  setCreateUpdateCycleModal: React.Dispatch<React.SetStateAction<boolean>>;
+  setSelectedCycle: React.Dispatch<React.SetStateAction<SelectSprintType>>;
 };
 
-const CycleStatsView: React.FC<Props> = ({ cycles }) => {
+const CycleStatsView: React.FC<Props> = ({
+  cycles,
+  setCreateUpdateCycleModal,
+  setSelectedCycle,
+}) => {
+  const [selectedCycleForDelete, setSelectedCycleForDelete] = useState<SelectSprintType>();
+  const [cycleDeleteModal, setCycleDeleteModal] = useState(false);
+
+  const handleDeleteCycle = (cycle: ICycle) => {
+    setSelectedCycleForDelete({ ...cycle, actionType: "delete" });
+    setCycleDeleteModal(true);
+  };
+
+  const handleEditCycle = (cycle: ICycle) => {
+    setSelectedCycle({ ...cycle, actionType: "edit" });
+    setCreateUpdateCycleModal(true);
+  };
+
   return (
     <>
+      <ConfirmCycleDeletion
+        isOpen={
+          cycleDeleteModal &&
+          !!selectedCycleForDelete &&
+          selectedCycleForDelete.actionType === "delete"
+        }
+        setIsOpen={setCycleDeleteModal}
+        data={selectedCycleForDelete}
+      />
       {cycles.map((cycle) => (
-        <SingleStat key={cycle.id} cycle={cycle} />
+        <SingleStat
+          key={cycle.id}
+          cycle={cycle}
+          handleDeleteCycle={() => handleDeleteCycle(cycle)}
+          handleEditCycle={() => handleEditCycle(cycle)}
+        />
       ))}
     </>
   );
diff --git a/apps/app/components/project/cycles/stats-view/single-stat.tsx b/apps/app/components/project/cycles/stats-view/single-stat.tsx
index ae5301fe9..f2382e279 100644
--- a/apps/app/components/project/cycles/stats-view/single-stat.tsx
+++ b/apps/app/components/project/cycles/stats-view/single-stat.tsx
@@ -1,37 +1,46 @@
+// react
+import React, { useState } from "react";
 // next
 import Link from "next/link";
+import Image from "next/image";
 // swr
 import useSWR from "swr";
 // services
 import cyclesService from "lib/services/cycles.service";
 // hooks
 import useUser from "lib/hooks/useUser";
+// ui
+import { Button, CustomMenu } from "ui";
 // types
 import { CycleIssueResponse, ICycle } from "types";
 // fetch-keys
 import { CYCLE_ISSUES } from "constants/fetch-keys";
 import { groupBy, renderShortNumericDateFormat } from "constants/common";
-import {
-  CheckIcon,
-  ExclamationCircleIcon,
-  ExclamationTriangleIcon,
-} from "@heroicons/react/24/outline";
+import { ArrowPathIcon, CheckIcon, UserIcon } from "@heroicons/react/24/outline";
+import { CalendarDaysIcon } from "@heroicons/react/20/solid";
+import { useRouter } from "next/router";
 
-type Props = { cycle: ICycle };
-
-const stateGroupIcons: {
-  [key: string]: JSX.Element;
-} = {
-  backlog: <ExclamationTriangleIcon className="h-4 w-4" />,
-  unstarted: <CheckIcon className="h-4 w-4" />,
-  started: <CheckIcon className="h-4 w-4" />,
-  cancelled: <ExclamationCircleIcon className="h-4 w-4" />,
-  completed: <CheckIcon className="h-4 w-4" />,
+type Props = {
+  cycle: ICycle;
+  handleEditCycle: () => void;
+  handleDeleteCycle: () => void;
 };
 
-const SingleStat: React.FC<Props> = ({ cycle }) => {
+const stateGroupColours: {
+  [key: string]: string;
+} = {
+  backlog: "#3f76ff",
+  unstarted: "#ff9e9e",
+  started: "#d687ff",
+  cancelled: "#ff5353",
+  completed: "#096e8d",
+};
+
+const SingleStat: React.FC<Props> = ({ cycle, handleEditCycle, handleDeleteCycle }) => {
   const { activeWorkspace, activeProject } = useUser();
 
+  const router = useRouter();
+
   const { data: cycleIssues } = useSWR<CycleIssueResponse[]>(
     activeWorkspace && activeProject && cycle.id ? CYCLE_ISSUES(cycle.id as string) : null,
     activeWorkspace && activeProject && cycle.id
@@ -48,7 +57,6 @@ const SingleStat: React.FC<Props> = ({ cycle }) => {
     ...groupBy(cycleIssues ?? [], "issue_details.state_detail.group"),
   };
 
-  // status calculator
   const startDate = new Date(cycle.start_date ?? "");
   const endDate = new Date(cycle.end_date ?? "");
   const today = new Date();
@@ -56,43 +64,110 @@ const SingleStat: React.FC<Props> = ({ cycle }) => {
   return (
     <>
       <div className="bg-white p-3">
-        <div className="flex justify-between items-center gap-2">
-          <div className="flex items-center gap-2">
+        <div className="grid grid-cols-8 gap-2 divide-x">
+          <div className="col-span-3 space-y-3">
             <Link href={`/projects/${activeProject?.id}/cycles/${cycle.id}`}>
-              <a className="block rounded-md">{cycle.name}</a>
+              <a className="flex justify-between items-center">
+                <h2 className="font-medium">{cycle.name}</h2>
+                <div className="flex items-center gap-2">
+                  <span className="text-xs bg-gray-100 px-2 py-1 rounded-xl">
+                    {today.getDate() < startDate.getDate()
+                      ? "Not started"
+                      : today.getDate() > endDate.getDate()
+                      ? "Over"
+                      : "Active"}
+                  </span>
+                  <CustomMenu width="auto" ellipsis>
+                    <CustomMenu.MenuItem onClick={handleEditCycle}>Edit cycle</CustomMenu.MenuItem>
+                    <CustomMenu.MenuItem onClick={handleDeleteCycle}>
+                      Delete cycle permanently
+                    </CustomMenu.MenuItem>
+                  </CustomMenu>
+                </div>
+              </a>
             </Link>
-            <div className="text-xs text-gray-500">
-              <span>{renderShortNumericDateFormat(startDate)}</span>
-              {" - "}
-              <span>{renderShortNumericDateFormat(endDate)}</span>
+
+            <div className="grid grid-cols-2 gap-x-2 gap-y-3 text-xs">
+              <div className="flex items-center gap-2 text-gray-500">
+                <CalendarDaysIcon className="h-4 w-4" />
+                Cycle dates
+              </div>
+              <div>
+                {renderShortNumericDateFormat(startDate)} - {renderShortNumericDateFormat(endDate)}
+              </div>
+              <div className="flex items-center gap-2 text-gray-500">
+                <UserIcon className="h-4 w-4" />
+                Created by
+              </div>
+              <div className="flex items-center gap-2">
+                {cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? (
+                  <Image
+                    src={cycle.owned_by.avatar}
+                    height={16}
+                    width={16}
+                    className="rounded-full"
+                    alt={cycle.owned_by.first_name}
+                  />
+                ) : (
+                  <span className="h-5 w-5 capitalize bg-gray-700 text-white grid place-items-center rounded-full">
+                    {cycle.owned_by.first_name.charAt(0)}
+                  </span>
+                )}
+                {cycle.owned_by.first_name}
+              </div>
+              <div className="flex items-center gap-2 text-gray-500">
+                <CalendarDaysIcon className="h-4 w-4" />
+                Active members
+              </div>
+              <div></div>
+            </div>
+            <div className="flex items-center gap-2">
+              <Button theme="secondary" className="flex items-center gap-2" disabled>
+                <CheckIcon className="h-3 w-3" />
+                Participating
+              </Button>
+              <Button
+                theme="secondary"
+                className="flex items-center gap-2"
+                onClick={() => router.push(`/projects/${activeProject?.id}/cycles/${cycle.id}`)}
+              >
+                <ArrowPathIcon className="h-3 w-3" />
+                Open Cycle
+              </Button>
             </div>
           </div>
-          <div className="text-xs bg-gray-100 px-2 py-1 rounded">
-            {today.getDate() < startDate.getDate()
-              ? "Not started"
-              : today.getDate() > endDate.getDate()
-              ? "Over"
-              : "Active"}
-          </div>
-        </div>
-        <div className="text-sm mt-6 mb-4 space-y-2">
-          <div className="grid grid-cols-5 gap-4">
-            {Object.keys(groupedIssues).map((group) => {
-              return (
-                <div key={group} className="bg-gray-100 rounded-md p-3 flex items-center gap-3">
-                  <div>
-                    <div className="h-8 w-8 rounded-full grid place-items-center bg-green-500 text-white">
-                      {stateGroupIcons[group]}
+          <div className="col-span-2 px-5 space-y-3">
+            <h4 className="text-sm tracking-widest">PROGRESS</h4>
+            <div className="text-xs space-y-3">
+              {Object.keys(groupedIssues).map((group) => {
+                return (
+                  <div key={group} className="flex items-center gap-2">
+                    <div className="flex items-center gap-2 basis-2/3">
+                      <span
+                        className="h-2 w-2 block rounded-full"
+                        style={{
+                          backgroundColor: stateGroupColours[group],
+                        }}
+                      ></span>
+                      <h6 className="capitalize text-xs">{group}</h6>
+                    </div>
+                    <div>
+                      <span>
+                        {groupedIssues[group].length}{" "}
+                        <span className="text-gray-500">
+                          -{" "}
+                          {cycleIssues && cycleIssues.length > 0
+                            ? `${(groupedIssues[group].length / cycleIssues.length) * 100}%`
+                            : "0%"}
+                        </span>
+                      </span>
                     </div>
                   </div>
-                  <div>
-                    <h5 className="capitalize">{group}</h5>
-                    <span>{groupedIssues[group].length}</span>
-                  </div>
-                </div>
-              );
-            })}
+                );
+              })}
+            </div>
           </div>
+          <div className="col-span-3"></div>
         </div>
       </div>
     </>
diff --git a/apps/app/components/project/issues/BoardView/single-board.tsx b/apps/app/components/project/issues/BoardView/single-board.tsx
index 7e843a8ca..18c16304b 100644
--- a/apps/app/components/project/issues/BoardView/single-board.tsx
+++ b/apps/app/components/project/issues/BoardView/single-board.tsx
@@ -130,12 +130,6 @@ const SingleBoard: React.FC<Props> = ({
                     backgroundColor: `${bgColor}20`,
                   }}
                 >
-                  <span
-                    className={`w-3 h-3 block rounded-full ${!show ? "" : "mr-1"}`}
-                    style={{
-                      backgroundColor: Boolean(bgColor) ? bgColor : undefined,
-                    }}
-                  />
                   <h2
                     className={`text-[0.9rem] font-medium capitalize`}
                     style={{
diff --git a/apps/app/components/project/issues/CreateUpdateIssueModal/SelectCycles.tsx b/apps/app/components/project/issues/CreateUpdateIssueModal/SelectCycles.tsx
index 6553c205a..cd4dd60c3 100644
--- a/apps/app/components/project/issues/CreateUpdateIssueModal/SelectCycles.tsx
+++ b/apps/app/components/project/issues/CreateUpdateIssueModal/SelectCycles.tsx
@@ -6,7 +6,7 @@ import { Listbox, Transition } from "@headlessui/react";
 // hooks
 import useUser from "lib/hooks/useUser";
 // components
-import CreateUpdateSprintsModal from "components/project/cycles/CreateUpdateCyclesModal";
+import CreateUpdateSprintsModal from "components/project/cycles/create-update-cycle-modal";
 // icons
 import { CheckIcon, ChevronDownIcon, PlusIcon } from "@heroicons/react/20/solid";
 // types
diff --git a/apps/app/components/project/issues/CreateUpdateIssueModal/SelectParentIssue.tsx b/apps/app/components/project/issues/CreateUpdateIssueModal/SelectParentIssue.tsx
index d6b463ffb..8531344eb 100644
--- a/apps/app/components/project/issues/CreateUpdateIssueModal/SelectParentIssue.tsx
+++ b/apps/app/components/project/issues/CreateUpdateIssueModal/SelectParentIssue.tsx
@@ -8,7 +8,7 @@ import type { IIssue, IssueResponse } from "types";
 // icons
 import { UserIcon } from "@heroicons/react/24/outline";
 // components
-import IssuesListModal from "components/project/issues/IssuesListModal";
+import IssuesListModal from "components/project/issues/issues-list-modal";
 
 type Props = {
   control: Control<IIssue, any>;
diff --git a/apps/app/components/project/issues/CreateUpdateIssueModal/index.tsx b/apps/app/components/project/issues/CreateUpdateIssueModal/index.tsx
index c7bcd1ad5..e872d4753 100644
--- a/apps/app/components/project/issues/CreateUpdateIssueModal/index.tsx
+++ b/apps/app/components/project/issues/CreateUpdateIssueModal/index.tsx
@@ -33,7 +33,7 @@ import SelectPriority from "./SelectPriority";
 import SelectAssignee from "./SelectAssignee";
 import SelectParent from "./SelectParentIssue";
 import CreateUpdateStateModal from "components/project/issues/BoardView/state/CreateUpdateStateModal";
-import CreateUpdateCycleModal from "components/project/cycles/CreateUpdateCyclesModal";
+import CreateUpdateCycleModal from "components/project/cycles/create-update-cycle-modal";
 // types
 import type { IIssue, IssueResponse, CycleIssueResponse } from "types";
 import { EllipsisHorizontalIcon } from "@heroicons/react/24/outline";
diff --git a/apps/app/components/project/issues/IssuesListModal.tsx b/apps/app/components/project/issues/IssuesListModal.tsx
deleted file mode 100644
index b635a16b6..000000000
--- a/apps/app/components/project/issues/IssuesListModal.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-// react
-import React, { useState } from "react";
-// headless ui
-import { Combobox, Dialog, Transition } from "@headlessui/react";
-// ui
-import { Button } from "ui";
-// icons
-import { MagnifyingGlassIcon, RectangleStackIcon } from "@heroicons/react/24/outline";
-// types
-import { IIssue } from "types";
-import { classNames } from "constants/common";
-import useUser from "lib/hooks/useUser";
-
-type Props = {
-  isOpen: boolean;
-  handleClose: () => void;
-  value?: any;
-  onChange: (...event: any[]) => void;
-  issues: IIssue[];
-  title?: string;
-  multiple?: boolean;
-  customDisplay?: JSX.Element;
-};
-
-const IssuesListModal: React.FC<Props> = ({
-  isOpen,
-  handleClose: onClose,
-  value,
-  onChange,
-  issues,
-  title = "Issues",
-  multiple = false,
-  customDisplay,
-}) => {
-  const [query, setQuery] = useState("");
-  const [values, setValues] = useState<string[]>([]);
-
-  const { activeProject } = useUser();
-
-  const handleClose = () => {
-    onClose();
-    setQuery("");
-    setValues([]);
-  };
-
-  const filteredIssues: IIssue[] =
-    query === ""
-      ? issues ?? []
-      : issues?.filter((issue) => issue.name.toLowerCase().includes(query.toLowerCase())) ?? [];
-
-  return (
-    <>
-      <Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setQuery("")} appear>
-        <Dialog as="div" className="relative z-10" onClose={handleClose}>
-          <Transition.Child
-            as={React.Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <div className="fixed inset-0 bg-gray-500 bg-opacity-25 transition-opacity" />
-          </Transition.Child>
-
-          <div className="fixed inset-0 z-10 overflow-y-auto p-4 sm:p-6 md:p-20">
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 scale-95"
-              enterTo="opacity-100 scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 scale-100"
-              leaveTo="opacity-0 scale-95"
-            >
-              <Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-white bg-opacity-80 shadow-2xl ring-1 ring-black ring-opacity-5 backdrop-blur backdrop-filter transition-all">
-                <Combobox
-                  value={value}
-                  onChange={(val) => {
-                    if (multiple) setValues(val);
-                    else onChange(val);
-                  }}
-                  // multiple={multiple}
-                >
-                  <div className="relative m-1">
-                    <MagnifyingGlassIcon
-                      className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40"
-                      aria-hidden="true"
-                    />
-                    <Combobox.Input
-                      className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 placeholder-gray-500 focus:ring-0 sm:text-sm outline-none"
-                      placeholder="Search..."
-                      onChange={(e) => setQuery(e.target.value)}
-                      displayValue={() => ""}
-                    />
-                  </div>
-                  <div className="p-3">{customDisplay}</div>
-                  <Combobox.Options
-                    static
-                    className="max-h-80 scroll-py-2 divide-y divide-gray-500 divide-opacity-10 overflow-y-auto"
-                  >
-                    {filteredIssues.length > 0 && (
-                      <li className="p-2">
-                        {query === "" && (
-                          <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-gray-900">
-                            {title}
-                          </h2>
-                        )}
-                        <ul className="text-sm text-gray-700">
-                          {filteredIssues.map((issue) => (
-                            <Combobox.Option
-                              key={issue.id}
-                              value={issue.id}
-                              className={({ active }) =>
-                                classNames(
-                                  "flex items-center gap-2 cursor-pointer select-none rounded-md px-3 py-2",
-                                  active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
-                                )
-                              }
-                              onClick={() => {
-                                if (!multiple) handleClose();
-                              }}
-                            >
-                              {({ selected }) => (
-                                <>
-                                  {multiple ? (
-                                    <input type="checkbox" checked={selected} readOnly />
-                                  ) : null}
-                                  <span
-                                    className="flex-shrink-0 h-1.5 w-1.5 block rounded-full"
-                                    style={{
-                                      backgroundColor: issue.state_detail.color,
-                                    }}
-                                  />
-                                  <span className="flex-shrink-0 text-xs text-gray-500">
-                                    {activeProject?.identifier}-{issue.sequence_id}
-                                  </span>{" "}
-                                  {issue.name}
-                                </>
-                              )}
-                            </Combobox.Option>
-                          ))}
-                        </ul>
-                      </li>
-                    )}
-                  </Combobox.Options>
-
-                  {query !== "" && filteredIssues.length === 0 && (
-                    <div className="py-14 px-6 text-center sm:px-14">
-                      <RectangleStackIcon
-                        className="mx-auto h-6 w-6 text-gray-900 text-opacity-40"
-                        aria-hidden="true"
-                      />
-                      <p className="mt-4 text-sm text-gray-900">
-                        We couldn{"'"}t find any issue with that term. Please try again.
-                      </p>
-                    </div>
-                  )}
-                </Combobox>
-                {multiple ? (
-                  <div className="flex justify-end items-center gap-2 p-3">
-                    <Button type="button" theme="danger" size="sm" onClick={handleClose}>
-                      Cancel
-                    </Button>
-                    <Button type="button" size="sm" onClick={() => onChange(values)}>
-                      Add to Cycle
-                    </Button>
-                  </div>
-                ) : null}
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </Dialog>
-      </Transition.Root>
-    </>
-  );
-};
-
-export default IssuesListModal;
diff --git a/apps/app/components/command-palette/addAsSubIssue.tsx b/apps/app/components/project/issues/issue-detail/add-as-sub-issue.tsx
similarity index 100%
rename from apps/app/components/command-palette/addAsSubIssue.tsx
rename to apps/app/components/project/issues/issue-detail/add-as-sub-issue.tsx
diff --git a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/index.tsx b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/index.tsx
index 0e839ca94..b1b6bc15e 100644
--- a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/index.tsx
+++ b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/index.tsx
@@ -6,33 +6,23 @@ import { Listbox, Transition } from "@headlessui/react";
 // react hook form
 import { useForm, Controller, UseFormWatch } from "react-hook-form";
 // services
-import stateServices from "lib/services/state.service";
 import issuesServices from "lib/services/issues.service";
-import workspaceService from "lib/services/workspace.service";
 // hooks
 import useUser from "lib/hooks/useUser";
 import useToast from "lib/hooks/useToast";
-// components
-import IssuesListModal from "components/project/issues/IssuesListModal";
 // fetching keys
-import { STATE_LIST, WORKSPACE_MEMBERS, PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
+import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
 // commons
-import { classNames, copyTextToClipboard } from "constants/common";
-import { PRIORITIES } from "constants/";
+import { copyTextToClipboard } from "constants/common";
 // ui
 import { Input, Button, Spinner } from "ui";
 import { Popover } from "@headlessui/react";
 // icons
 import {
-  UserIcon,
   TagIcon,
-  UserGroupIcon,
   ChevronDownIcon,
-  Squares2X2Icon,
-  ChartBarIcon,
   ClipboardDocumentIcon,
   LinkIcon,
-  ArrowPathIcon,
   CalendarDaysIcon,
   TrashIcon,
   PlusIcon,
@@ -40,7 +30,7 @@ import {
 } from "@heroicons/react/24/outline";
 // types
 import type { Control } from "react-hook-form";
-import type { IIssue, IIssueLabels, IssueResponse, IState, NestedKeyOf } from "types";
+import type { IIssue, IIssueLabels, NestedKeyOf } from "types";
 import { TwitterPicker } from "react-color";
 import { positionEditorElement } from "components/lexical/helpers/editor";
 import SelectState from "./select-state";
@@ -48,6 +38,8 @@ import SelectPriority from "./select-priority";
 import SelectParent from "./select-parent";
 import SelectCycle from "./select-cycle";
 import SelectAssignee from "./select-assignee";
+import SelectBlocker from "./select-blocker";
+import SelectBlocked from "./select-blocked";
 
 type Props = {
   control: Control<IIssue, any>;
@@ -69,11 +61,9 @@ const IssueDetailSidebar: React.FC<Props> = ({
   watch: watchIssue,
   setDeleteIssueModal,
 }) => {
-  const [isBlockerModalOpen, setIsBlockerModalOpen] = useState(false);
-  const [isBlockedModalOpen, setIsBlockedModalOpen] = useState(false);
   const [createLabelForm, setCreateLabelForm] = useState(false);
 
-  const { activeWorkspace, activeProject, cycles, issues } = useUser();
+  const { activeWorkspace, activeProject, issues } = useUser();
 
   const { setToastAlert } = useToast();
 
@@ -106,43 +96,6 @@ const IssueDetailSidebar: React.FC<Props> = ({
       });
   };
 
-  const sidebarSections: Array<
-    Array<{
-      label: string;
-      name: NestedKeyOf<IIssue>;
-      canSelectMultipleOptions: boolean;
-      icon: (props: any) => JSX.Element;
-      options?: Array<{ label: string; value: any; color?: string }>;
-      modal: boolean;
-      issuesList?: Array<IIssue>;
-      isOpen?: boolean;
-      setIsOpen?: (arg: boolean) => void;
-    }>
-  > = [
-    [
-      // {
-      //   label: "Blocker",
-      //   name: "blockers_list",
-      //   canSelectMultipleOptions: true,
-      //   icon: UserIcon,
-      //   issuesList: issues?.results.filter((i) => i.id !== issueDetail?.id) ?? [],
-      //   modal: true,
-      //   isOpen: isBlockerModalOpen,
-      //   setIsOpen: setIsBlockerModalOpen,
-      // },
-      // {
-      //   label: "Blocked",
-      //   name: "blocked_list",
-      //   canSelectMultipleOptions: true,
-      //   icon: UserIcon,
-      //   issuesList: issues?.results.filter((i) => i.id !== issueDetail?.id) ?? [],
-      //   modal: true,
-      //   isOpen: isBlockedModalOpen,
-      //   setIsOpen: setIsBlockedModalOpen,
-      // },
-    ],
-  ];
-
   const handleCycleChange = (cycleId: string) => {
     if (activeWorkspace && activeProject && issueDetail)
       issuesServices.addIssueToCycle(activeWorkspace.slug, activeProject.id, cycleId, {
@@ -150,6 +103,8 @@ const IssueDetailSidebar: React.FC<Props> = ({
       });
   };
 
+  console.log(issueDetail);
+
   return (
     <>
       <div className="h-full w-full divide-y-2 divide-gray-100">
@@ -215,7 +170,7 @@ const IssueDetailSidebar: React.FC<Props> = ({
           <div className="py-1">
             <SelectState control={control} submitChanges={submitChanges} />
             <SelectAssignee control={control} submitChanges={submitChanges} />
-            <SelectPriority control={control} submitChanges={submitChanges} />
+            <SelectPriority control={control} submitChanges={submitChanges} watch={watchIssue} />
           </div>
           <div className="py-1">
             <SelectParent
@@ -245,7 +200,17 @@ const IssueDetailSidebar: React.FC<Props> = ({
                   </div>
                 )
               }
-              watchIssue={watchIssue}
+              watch={watchIssue}
+            />
+            <SelectBlocker
+              submitChanges={submitChanges}
+              issuesList={issues?.results.filter((i) => i.id !== issueDetail?.id) ?? []}
+              watch={watchIssue}
+            />
+            <SelectBlocked
+              submitChanges={submitChanges}
+              issuesList={issues?.results.filter((i) => i.id !== issueDetail?.id) ?? []}
+              watch={watchIssue}
             />
             <div className="flex items-center py-2 flex-wrap">
               <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
@@ -274,72 +239,6 @@ const IssueDetailSidebar: React.FC<Props> = ({
           <div className="py-1">
             <SelectCycle control={control} handleCycleChange={handleCycleChange} />
           </div>
-          {/* {sidebarSections.map((section, index) => (
-            <div key={index} className="py-1">
-              {section.map((item) => (
-                <div key={item.label} className="flex items-center py-2 flex-wrap">
-                  <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
-                    <item.icon className="flex-shrink-0 h-4 w-4" />
-                    <p>{item.label}</p>
-                  </div>
-                  <div className="sm:basis-1/2">
-                    <Controller
-                      control={control}
-                      name={item.name as keyof IIssue}
-                      render={({ field: { value, onChange } }) => (
-                        <>
-                          <IssuesListModal
-                            isOpen={Boolean(item?.isOpen)}
-                            handleClose={() => item.setIsOpen && item.setIsOpen(false)}
-                            onChange={(val) => {
-                              console.log(val);
-                              submitChanges({ [item.name]: val });
-                              onChange(val);
-                            }}
-                            issues={item?.issuesList ?? []}
-                            title={`Select ${item.label}`}
-                            multiple={item.canSelectMultipleOptions}
-                            value={value}
-                            customDisplay={
-                              issueDetail?.parent_detail ? (
-                                <button
-                                  type="button"
-                                  className="flex items-center gap-2 bg-gray-100 px-3 py-2 text-xs rounded"
-                                  onClick={() => submitChanges({ parent: null })}
-                                >
-                                  {issueDetail.parent_detail?.name}
-                                  <XMarkIcon className="h-3 w-3" />
-                                </button>
-                              ) : (
-                                <div className="inline-block bg-gray-100 px-3 py-2 text-xs rounded">
-                                  No parent selected
-                                </div>
-                              )
-                            }
-                          />
-                          <button
-                            type="button"
-                            className="flex justify-between items-center gap-1 hover:bg-gray-100 border rounded-md 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 w-full"
-                            onClick={() => item.setIsOpen && item.setIsOpen(true)}
-                          >
-                            {watchIssue(`${item.name as keyof IIssue}`) &&
-                            watchIssue(`${item.name as keyof IIssue}`) !== ""
-                              ? `${activeProject?.identifier}-
-                                ${
-                                  issues?.results.find(
-                                    (i) => i.id === watchIssue(`${item.name as keyof IIssue}`)
-                                  )?.sequence_id
-                                }`
-                              : `Select ${item.label}`}
-                          </button>
-                        </>
-                      )}
-                    />
-                  </div>
-                </div>
-              ))}
-            </div>
-          ))} */}
         </div>
         <div className="pt-3 space-y-3">
           <div className="flex justify-between items-start">
@@ -376,7 +275,7 @@ const IssueDetailSidebar: React.FC<Props> = ({
                       as="div"
                       value={value}
                       multiple
-                      onChange={(val) => submitChanges({ labels_list: val })}
+                      onChange={(val: any) => submitChanges({ labels_list: val })}
                       className="flex-shrink-0"
                     >
                       {({ open }) => (
@@ -395,7 +294,7 @@ const IssueDetailSidebar: React.FC<Props> = ({
                               leaveTo="opacity-0"
                             >
                               <Listbox.Options className="absolute z-10 right-0 mt-1 w-40 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
-                                <div className="p-1">
+                                <div className="py-1">
                                   {issueLabels ? (
                                     issueLabels.length > 0 ? (
                                       issueLabels.map((label: IIssueLabels) => (
@@ -403,10 +302,8 @@ const IssueDetailSidebar: React.FC<Props> = ({
                                           key={label.id}
                                           className={({ active, selected }) =>
                                             `${
-                                              active || selected
-                                                ? "text-white bg-theme"
-                                                : "text-gray-900"
-                                            } flex items-center gap-2 cursor-pointer select-none relative p-2 rounded-md truncate`
+                                              active || selected ? "bg-indigo-50" : ""
+                                            } flex items-center gap-2 text-gray-900 cursor-pointer select-none relative p-2 truncate`
                                           }
                                           value={label.id}
                                         >
diff --git a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-assignee.tsx b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-assignee.tsx
index 0fff8006b..c5451c548 100644
--- a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-assignee.tsx
+++ b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-assignee.tsx
@@ -126,7 +126,7 @@ const SelectAssignee: React.FC<Props> = ({ control, submitChanges }) => {
                     leaveTo="opacity-0"
                   >
                     <Listbox.Options className="absolute z-10 right-0 mt-1 w-40 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
-                      <div className="p-1">
+                      <div className="py-1">
                         {people ? (
                           people.length > 0 ? (
                             people.map((option) => (
@@ -134,8 +134,8 @@ const SelectAssignee: React.FC<Props> = ({ control, submitChanges }) => {
                                 key={option.member.id}
                                 className={({ active, selected }) =>
                                   `${
-                                    active || selected ? "text-white bg-theme" : "text-gray-900"
-                                  } flex items-center gap-2 cursor-pointer select-none relative p-2 rounded-md truncate`
+                                    active || selected ? "bg-indigo-50" : ""
+                                  } flex items-center gap-2 text-gray-900 cursor-pointer select-none relative p-2 rounded-md truncate`
                                 }
                                 value={option.member.id}
                               >
diff --git a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocked.tsx b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocked.tsx
new file mode 100644
index 000000000..9c3b10093
--- /dev/null
+++ b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocked.tsx
@@ -0,0 +1,238 @@
+// react
+import React, { useState } from "react";
+// react-hook-form
+import { SubmitHandler, useForm, UseFormWatch } from "react-hook-form";
+// hooks
+import useUser from "lib/hooks/useUser";
+import useToast from "lib/hooks/useToast";
+// headless ui
+import { Combobox, Dialog, Transition } from "@headlessui/react";
+// ui
+import { Button } from "ui";
+// icons
+import {
+  FolderIcon,
+  MagnifyingGlassIcon,
+  UserGroupIcon,
+  XMarkIcon,
+} from "@heroicons/react/24/outline";
+// types
+import { IIssue } from "types";
+// constants
+import { classNames } from "constants/common";
+
+type FormInput = {
+  issue_ids: string[];
+};
+
+type Props = {
+  submitChanges: (formData: Partial<IIssue>) => void;
+  issuesList: IIssue[];
+  watch: UseFormWatch<IIssue>;
+};
+
+const SelectBlocked: React.FC<Props> = ({ submitChanges, issuesList, watch }) => {
+  const [query, setQuery] = useState("");
+  const [isBlockedModalOpen, setIsBlockedModalOpen] = useState(false);
+
+  const { activeProject, issues } = useUser();
+  const { setToastAlert } = useToast();
+
+  const { register, handleSubmit, reset, watch: watchIssues } = useForm<FormInput>();
+
+  const handleClose = () => {
+    setIsBlockedModalOpen(false);
+    reset();
+  };
+
+  const onSubmit: SubmitHandler<FormInput> = (data) => {
+    if (!data.issue_ids || data.issue_ids.length === 0) {
+      setToastAlert({
+        title: "Error",
+        type: "error",
+        message: "Please select atleast one issue",
+      });
+      return;
+    }
+    const newBlocked = [...watch("blocked_list"), ...data.issue_ids];
+    submitChanges({ blocked_list: newBlocked });
+    handleClose();
+  };
+
+  return (
+    <div className="flex items-start py-2 flex-wrap">
+      <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
+        <UserGroupIcon className="flex-shrink-0 h-4 w-4" />
+        <p>Blocked issues</p>
+      </div>
+      <div className="sm:basis-1/2 space-y-1">
+        <div className="flex gap-1 flex-wrap">
+          {watch("blocked_list") && watch("blocked_list").length > 0
+            ? watch("blocked_list").map((issue) => (
+                <span
+                  key={issue}
+                  className="group flex items-center gap-1 border rounded-2xl text-xs px-1 py-0.5 hover:bg-red-50 hover:border-red-500 cursor-pointer"
+                  onClick={() => {
+                    const updatedBlockers = watch("blocked_list").filter((i) => i !== issue);
+                    submitChanges({
+                      blocked_list: updatedBlockers,
+                    });
+                  }}
+                >
+                  {`${activeProject?.identifier}-${
+                    issues?.results.find((i) => i.id === issue)?.sequence_id
+                  }`}
+                  <XMarkIcon className="h-2 w-2 group-hover:text-red-500" />
+                </span>
+              ))
+            : null}
+        </div>
+        <Transition.Root
+          show={isBlockedModalOpen}
+          as={React.Fragment}
+          afterLeave={() => setQuery("")}
+          appear
+        >
+          <Dialog as="div" className="relative z-10" onClose={handleClose}>
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0"
+              enterTo="opacity-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0"
+            >
+              <div className="fixed inset-0 bg-gray-500 bg-opacity-25 transition-opacity" />
+            </Transition.Child>
+
+            <div className="fixed inset-0 z-10 overflow-y-auto p-4 sm:p-6 md:p-20">
+              <Transition.Child
+                as={React.Fragment}
+                enter="ease-out duration-300"
+                enterFrom="opacity-0 scale-95"
+                enterTo="opacity-100 scale-100"
+                leave="ease-in duration-200"
+                leaveFrom="opacity-100 scale-100"
+                leaveTo="opacity-0 scale-95"
+              >
+                <Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-white bg-opacity-80 shadow-2xl ring-1 ring-black ring-opacity-5 backdrop-blur backdrop-filter transition-all">
+                  <form>
+                    <Combobox>
+                      <div className="relative m-1">
+                        <MagnifyingGlassIcon
+                          className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40"
+                          aria-hidden="true"
+                        />
+                        <Combobox.Input
+                          className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 placeholder-gray-500 focus:ring-0 sm:text-sm outline-none"
+                          placeholder="Search..."
+                          onChange={(event) => setQuery(event.target.value)}
+                        />
+                      </div>
+
+                      <Combobox.Options
+                        static
+                        className="max-h-80 scroll-py-2 divide-y divide-gray-500 divide-opacity-10 overflow-y-auto"
+                      >
+                        {issuesList.length > 0 && (
+                          <>
+                            <li className="p-2">
+                              {query === "" && (
+                                <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-gray-900">
+                                  Select blocked issues
+                                </h2>
+                              )}
+                              <ul className="text-sm text-gray-700">
+                                {issuesList.map((issue) => {
+                                  if (!watch("blocked_list").includes(issue.id)) {
+                                    return (
+                                      <Combobox.Option
+                                        key={issue.id}
+                                        as="label"
+                                        htmlFor={`issue-${issue.id}`}
+                                        value={{
+                                          name: issue.name,
+                                          url: `/projects/${issue.project}/issues/${issue.id}`,
+                                        }}
+                                        className={({ active }) =>
+                                          classNames(
+                                            "flex items-center justify-between cursor-pointer select-none rounded-md px-3 py-2",
+                                            active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
+                                          )
+                                        }
+                                      >
+                                        {({ active }) => (
+                                          <>
+                                            <div className="flex items-center gap-2">
+                                              <input
+                                                type="checkbox"
+                                                {...register("issue_ids")}
+                                                id={`issue-${issue.id}`}
+                                                value={issue.id}
+                                              />
+                                              <span
+                                                className="flex-shrink-0 h-1.5 w-1.5 block rounded-full"
+                                                style={{
+                                                  backgroundColor: issue.state_detail.color,
+                                                }}
+                                              />
+                                              <span className="flex-shrink-0 text-xs text-gray-500">
+                                                {activeProject?.identifier}-{issue.sequence_id}
+                                              </span>
+                                              <span>{issue.name}</span>
+                                            </div>
+                                          </>
+                                        )}
+                                      </Combobox.Option>
+                                    );
+                                  }
+                                })}
+                              </ul>
+                            </li>
+                          </>
+                        )}
+                      </Combobox.Options>
+
+                      {query !== "" && issuesList.length === 0 && (
+                        <div className="py-14 px-6 text-center sm:px-14">
+                          <FolderIcon
+                            className="mx-auto h-6 w-6 text-gray-900 text-opacity-40"
+                            aria-hidden="true"
+                          />
+                          <p className="mt-4 text-sm text-gray-900">
+                            We couldn{"'"}t find any issue with that term. Please try again.
+                          </p>
+                        </div>
+                      )}
+                    </Combobox>
+
+                    <div className="flex justify-end items-center gap-2 p-3">
+                      <Button onClick={handleSubmit(onSubmit)} size="sm">
+                        Add selected issues
+                      </Button>
+                      <div>
+                        <Button type="button" theme="danger" size="sm" onClick={handleClose}>
+                          Close
+                        </Button>
+                      </div>
+                    </div>
+                  </form>
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
+          </Dialog>
+        </Transition.Root>
+        <button
+          type="button"
+          className="flex justify-between items-center gap-1 hover:bg-gray-100 border rounded-md 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 w-full"
+          onClick={() => setIsBlockedModalOpen(true)}
+        >
+          Select issues
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default SelectBlocked;
diff --git a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocker.tsx b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocker.tsx
new file mode 100644
index 000000000..ee2352620
--- /dev/null
+++ b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocker.tsx
@@ -0,0 +1,238 @@
+// react
+import React, { useState } from "react";
+// react-hook-form
+import { SubmitHandler, useForm, UseFormWatch } from "react-hook-form";
+// hooks
+import useUser from "lib/hooks/useUser";
+import useToast from "lib/hooks/useToast";
+// headless ui
+import { Combobox, Dialog, Transition } from "@headlessui/react";
+// ui
+import { Button } from "ui";
+// icons
+import {
+  FolderIcon,
+  MagnifyingGlassIcon,
+  UserGroupIcon,
+  XMarkIcon,
+} from "@heroicons/react/24/outline";
+// types
+import { IIssue } from "types";
+// constants
+import { classNames } from "constants/common";
+
+type FormInput = {
+  issue_ids: string[];
+};
+
+type Props = {
+  submitChanges: (formData: Partial<IIssue>) => void;
+  issuesList: IIssue[];
+  watch: UseFormWatch<IIssue>;
+};
+
+const SelectBlocker: React.FC<Props> = ({ submitChanges, issuesList, watch }) => {
+  const [query, setQuery] = useState("");
+  const [isBlockerModalOpen, setIsBlockerModalOpen] = useState(false);
+
+  const { activeProject, issues } = useUser();
+  const { setToastAlert } = useToast();
+
+  const { register, handleSubmit, reset } = useForm<FormInput>();
+
+  const handleClose = () => {
+    setIsBlockerModalOpen(false);
+    reset();
+  };
+
+  const onSubmit: SubmitHandler<FormInput> = (data) => {
+    if (!data.issue_ids || data.issue_ids.length === 0) {
+      setToastAlert({
+        title: "Error",
+        type: "error",
+        message: "Please select atleast one issue",
+      });
+      return;
+    }
+    const newBlockers = [...watch("blockers_list"), ...data.issue_ids];
+    submitChanges({ blockers_list: newBlockers });
+    handleClose();
+  };
+
+  return (
+    <div className="flex items-start py-2 flex-wrap">
+      <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
+        <UserGroupIcon className="flex-shrink-0 h-4 w-4" />
+        <p>Blocker issues</p>
+      </div>
+      <div className="sm:basis-1/2 space-y-1">
+        <div className="flex gap-1 flex-wrap">
+          {watch("blockers_list") && watch("blockers_list").length > 0
+            ? watch("blockers_list").map((issue) => (
+                <span
+                  key={issue}
+                  className="group flex items-center gap-1 border rounded-2xl text-xs px-1 py-0.5 hover:bg-red-50 hover:border-red-500 cursor-pointer"
+                  onClick={() => {
+                    const updatedBlockers = watch("blockers_list").filter((i) => i !== issue);
+                    submitChanges({
+                      blockers_list: updatedBlockers,
+                    });
+                  }}
+                >
+                  {`${activeProject?.identifier}-${
+                    issues?.results.find((i) => i.id === issue)?.sequence_id
+                  }`}
+                  <XMarkIcon className="h-2 w-2 group-hover:text-red-500" />
+                </span>
+              ))
+            : null}
+        </div>
+        <Transition.Root
+          show={isBlockerModalOpen}
+          as={React.Fragment}
+          afterLeave={() => setQuery("")}
+          appear
+        >
+          <Dialog as="div" className="relative z-10" onClose={handleClose}>
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0"
+              enterTo="opacity-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0"
+            >
+              <div className="fixed inset-0 bg-gray-500 bg-opacity-25 transition-opacity" />
+            </Transition.Child>
+
+            <div className="fixed inset-0 z-10 overflow-y-auto p-4 sm:p-6 md:p-20">
+              <Transition.Child
+                as={React.Fragment}
+                enter="ease-out duration-300"
+                enterFrom="opacity-0 scale-95"
+                enterTo="opacity-100 scale-100"
+                leave="ease-in duration-200"
+                leaveFrom="opacity-100 scale-100"
+                leaveTo="opacity-0 scale-95"
+              >
+                <Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-white bg-opacity-80 shadow-2xl ring-1 ring-black ring-opacity-5 backdrop-blur backdrop-filter transition-all">
+                  <form>
+                    <Combobox>
+                      <div className="relative m-1">
+                        <MagnifyingGlassIcon
+                          className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40"
+                          aria-hidden="true"
+                        />
+                        <Combobox.Input
+                          className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 placeholder-gray-500 focus:ring-0 sm:text-sm outline-none"
+                          placeholder="Search..."
+                          onChange={(event) => setQuery(event.target.value)}
+                        />
+                      </div>
+
+                      <Combobox.Options
+                        static
+                        className="max-h-80 scroll-py-2 divide-y divide-gray-500 divide-opacity-10 overflow-y-auto"
+                      >
+                        {issuesList.length > 0 && (
+                          <>
+                            <li className="p-2">
+                              {query === "" && (
+                                <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-gray-900">
+                                  Select blocker issues
+                                </h2>
+                              )}
+                              <ul className="text-sm text-gray-700">
+                                {issuesList.map((issue) => {
+                                  if (!watch("blockers_list").includes(issue.id)) {
+                                    return (
+                                      <Combobox.Option
+                                        key={issue.id}
+                                        as="label"
+                                        htmlFor={`issue-${issue.id}`}
+                                        value={{
+                                          name: issue.name,
+                                          url: `/projects/${issue.project}/issues/${issue.id}`,
+                                        }}
+                                        className={({ active }) =>
+                                          classNames(
+                                            "flex items-center justify-between cursor-pointer select-none rounded-md px-3 py-2",
+                                            active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
+                                          )
+                                        }
+                                      >
+                                        {({ active }) => (
+                                          <>
+                                            <div className="flex items-center gap-2">
+                                              <input
+                                                type="checkbox"
+                                                {...register("issue_ids")}
+                                                id={`issue-${issue.id}`}
+                                                value={issue.id}
+                                              />
+                                              <span
+                                                className="flex-shrink-0 h-1.5 w-1.5 block rounded-full"
+                                                style={{
+                                                  backgroundColor: issue.state_detail.color,
+                                                }}
+                                              />
+                                              <span className="flex-shrink-0 text-xs text-gray-500">
+                                                {activeProject?.identifier}-{issue.sequence_id}
+                                              </span>
+                                              <span>{issue.name}</span>
+                                            </div>
+                                          </>
+                                        )}
+                                      </Combobox.Option>
+                                    );
+                                  }
+                                })}
+                              </ul>
+                            </li>
+                          </>
+                        )}
+                      </Combobox.Options>
+
+                      {query !== "" && issuesList.length === 0 && (
+                        <div className="py-14 px-6 text-center sm:px-14">
+                          <FolderIcon
+                            className="mx-auto h-6 w-6 text-gray-900 text-opacity-40"
+                            aria-hidden="true"
+                          />
+                          <p className="mt-4 text-sm text-gray-900">
+                            We couldn{"'"}t find any issue with that term. Please try again.
+                          </p>
+                        </div>
+                      )}
+                    </Combobox>
+
+                    <div className="flex justify-end items-center gap-2 p-3">
+                      <Button onClick={handleSubmit(onSubmit)} size="sm">
+                        Add selected issues
+                      </Button>
+                      <div>
+                        <Button type="button" theme="danger" size="sm" onClick={handleClose}>
+                          Close
+                        </Button>
+                      </div>
+                    </div>
+                  </form>
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
+          </Dialog>
+        </Transition.Root>
+        <button
+          type="button"
+          className="flex justify-between items-center gap-1 hover:bg-gray-100 border rounded-md 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 w-full"
+          onClick={() => setIsBlockerModalOpen(true)}
+        >
+          Select issues
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default SelectBlocker;
diff --git a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-cycle.tsx b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-cycle.tsx
index 0e36c54af..80dd4a899 100644
--- a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-cycle.tsx
+++ b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-cycle.tsx
@@ -10,6 +10,7 @@ import { classNames } from "constants/common";
 import { Spinner } from "ui";
 import React from "react";
 import { ArrowPathIcon, ChevronDownIcon } from "@heroicons/react/24/outline";
+import CustomSelect from "ui/custom-select";
 
 type Props = {
   control: Control<IIssue, any>;
@@ -30,64 +31,38 @@ const SelectCycle: React.FC<Props> = ({ control, handleCycleChange }) => {
           control={control}
           name="cycle"
           render={({ field: { value } }) => (
-            <Listbox
-              as="div"
-              value={value}
-              onChange={(value: any) => {
-                handleCycleChange(value);
-              }}
-              className="flex-shrink-0"
-            >
-              {({ open }) => (
-                <div className="relative">
-                  <Listbox.Button className="flex justify-between items-center gap-1 hover:bg-gray-100 border rounded-md shadow-sm px-2 w-full py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300">
-                    <span
-                      className={classNames(
-                        value ? "" : "text-gray-900",
-                        "hidden truncate sm:block text-left"
-                      )}
-                    >
-                      {value ? cycles?.find((c) => c.id === value)?.name : "None"}
-                    </span>
-                    <ChevronDownIcon className="h-3 w-3" />
-                  </Listbox.Button>
-
-                  <Transition
-                    show={open}
-                    as={React.Fragment}
-                    leave="transition ease-in duration-100"
-                    leaveFrom="opacity-100"
-                    leaveTo="opacity-0"
+            <>
+              <CustomSelect
+                label={
+                  <span
+                    className={classNames(
+                      value ? "" : "text-gray-900",
+                      "hidden truncate sm:block text-left"
+                    )}
                   >
-                    <Listbox.Options className="absolute z-10 right-0 mt-1 w-40 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
-                      <div className="p-1">
-                        {cycles ? (
-                          cycles.length > 0 ? (
-                            cycles.map((option) => (
-                              <Listbox.Option
-                                key={option.id}
-                                className={({ active, selected }) =>
-                                  `${
-                                    active || selected ? "text-white bg-theme" : "text-gray-900"
-                                  } flex items-center gap-2 cursor-pointer select-none relative p-2 rounded-md truncate`
-                                }
-                                value={option.id}
-                              >
-                                {option.name}
-                              </Listbox.Option>
-                            ))
-                          ) : (
-                            <div className="text-center">No cycles found</div>
-                          )
-                        ) : (
-                          <Spinner />
-                        )}
-                      </div>
-                    </Listbox.Options>
-                  </Transition>
-                </div>
-              )}
-            </Listbox>
+                    {value ? cycles?.find((c) => c.id === value)?.name : "None"}
+                  </span>
+                }
+                value={value}
+                onChange={(value: any) => {
+                  handleCycleChange(value);
+                }}
+              >
+                {cycles ? (
+                  cycles.length > 0 ? (
+                    cycles.map((option) => (
+                      <CustomSelect.Option key={option.id} value={option.id}>
+                        {option.name}
+                      </CustomSelect.Option>
+                    ))
+                  ) : (
+                    <div className="text-center">No cycles found</div>
+                  )
+                ) : (
+                  <Spinner />
+                )}
+              </CustomSelect>
+            </>
           )}
         />
       </div>
diff --git a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-parent.tsx b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-parent.tsx
index 03cf0be4e..3ec5922fe 100644
--- a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-parent.tsx
+++ b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-parent.tsx
@@ -5,7 +5,7 @@ import { Control, Controller, UseFormWatch } from "react-hook-form";
 // hooks
 import useUser from "lib/hooks/useUser";
 // components
-import IssuesListModal from "components/project/issues/IssuesListModal";
+import IssuesListModal from "components/project/issues/issues-list-modal";
 // icons
 import { UserIcon } from "@heroicons/react/24/outline";
 // types
@@ -16,7 +16,7 @@ type Props = {
   submitChanges: (formData: Partial<IIssue>) => void;
   issuesList: IIssue[];
   customDisplay: JSX.Element;
-  watchIssue: UseFormWatch<IIssue>;
+  watch: UseFormWatch<IIssue>;
 };
 
 const SelectParent: React.FC<Props> = ({
@@ -24,7 +24,7 @@ const SelectParent: React.FC<Props> = ({
   submitChanges,
   issuesList,
   customDisplay,
-  watchIssue,
+  watch,
 }) => {
   const [isParentModalOpen, setIsParentModalOpen] = useState(false);
 
@@ -60,11 +60,11 @@ const SelectParent: React.FC<Props> = ({
           className="flex justify-between items-center gap-1 hover:bg-gray-100 border rounded-md 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 w-full"
           onClick={() => setIsParentModalOpen(true)}
         >
-          {watchIssue("parent") && watchIssue("parent") !== ""
+          {watch("parent") && watch("parent") !== ""
             ? `${activeProject?.identifier}-${
-                issues?.results.find((i) => i.id === watchIssue("parent"))?.sequence_id
+                issues?.results.find((i) => i.id === watch("parent"))?.sequence_id
               }`
-            : "Select Parent"}
+            : "Select issue"}
         </button>
       </div>
     </div>
diff --git a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-priority.tsx b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-priority.tsx
index e76beeb25..7c098f957 100644
--- a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-priority.tsx
+++ b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-priority.tsx
@@ -1,7 +1,7 @@
 // react
 import React from "react";
 // react-hook-form
-import { Control, Controller } from "react-hook-form";
+import { Control, Controller, UseFormWatch } from "react-hook-form";
 // headless ui
 import { Listbox, Transition } from "@headlessui/react";
 // icons
@@ -11,13 +11,15 @@ import { IIssue } from "types";
 // constants
 import { classNames } from "constants/common";
 import { PRIORITIES } from "constants/";
+import CustomSelect from "ui/custom-select";
 
 type Props = {
   control: Control<IIssue, any>;
   submitChanges: (formData: Partial<IIssue>) => void;
+  watch: UseFormWatch<IIssue>;
 };
 
-const SelectPriority: React.FC<Props> = ({ control, submitChanges }) => {
+const SelectPriority: React.FC<Props> = ({ control, submitChanges, watch }) => {
   return (
     <div className="flex items-center py-2 flex-wrap">
       <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
@@ -29,51 +31,23 @@ const SelectPriority: React.FC<Props> = ({ control, submitChanges }) => {
           control={control}
           name="state"
           render={({ field: { value } }) => (
-            <Listbox
-              as="div"
+            <CustomSelect
+              label={
+                <span className={classNames(value ? "" : "text-gray-900", "text-left capitalize")}>
+                  {watch("priority") && watch("priority") !== "" ? watch("priority") : "None"}
+                </span>
+              }
               value={value}
               onChange={(value: any) => {
                 submitChanges({ priority: value });
               }}
-              className="flex-shrink-0"
             >
-              {({ open }) => (
-                <div className="relative">
-                  <Listbox.Button className="flex justify-between items-center gap-1 hover:bg-gray-100 border rounded-md shadow-sm px-2 w-full py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300">
-                    <span className={classNames(value ? "" : "text-gray-900", "text-left")}>
-                      {value}
-                    </span>
-                    <ChevronDownIcon className="h-3 w-3" />
-                  </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 right-0 mt-1 w-40 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
-                      <div className="p-1">
-                        {PRIORITIES.map((option) => (
-                          <Listbox.Option
-                            key={option}
-                            className={({ active, selected }) =>
-                              `${
-                                active || selected ? "text-white bg-theme" : "text-gray-900"
-                              } flex items-center gap-2 cursor-pointer select-none relative p-2 rounded-md truncate capitalize`
-                            }
-                            value={option}
-                          >
-                            {option}
-                          </Listbox.Option>
-                        ))}
-                      </div>
-                    </Listbox.Options>
-                  </Transition>
-                </div>
-              )}
-            </Listbox>
+              {PRIORITIES.map((option) => (
+                <CustomSelect.Option key={option} value={option} className="capitalize">
+                  {option}
+                </CustomSelect.Option>
+              ))}
+            </CustomSelect>
           )}
         />
       </div>
diff --git a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-state.tsx b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-state.tsx
index cc129c536..e55bd9b14 100644
--- a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-state.tsx
+++ b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-state.tsx
@@ -7,9 +7,10 @@ import { Listbox, Transition } from "@headlessui/react";
 // types
 import { IIssue } from "types";
 import { classNames } from "constants/common";
-import { Spinner } from "ui";
+import { CustomMenu, Spinner } from "ui";
 import React from "react";
 import { ChevronDownIcon, Squares2X2Icon } from "@heroicons/react/24/outline";
+import CustomSelect from "ui/custom-select";
 
 type Props = {
   control: Control<IIssue, any>;
@@ -30,82 +31,56 @@ const SelectState: React.FC<Props> = ({ control, submitChanges }) => {
           control={control}
           name="state"
           render={({ field: { value } }) => (
-            <Listbox
-              as="div"
+            <CustomSelect
+              label={
+                <span
+                  className={classNames(
+                    value ? "" : "text-gray-900",
+                    "flex items-center gap-2 text-left"
+                  )}
+                >
+                  {value ? (
+                    <>
+                      <span
+                        className="h-2 w-2 rounded-full flex-shrink-0"
+                        style={{
+                          backgroundColor: states?.find((option) => option.id === value)?.color,
+                        }}
+                      ></span>
+                      {states?.find((option) => option.id === value)?.name}
+                    </>
+                  ) : (
+                    "None"
+                  )}
+                </span>
+              }
               value={value}
               onChange={(value: any) => {
                 submitChanges({ state: value });
               }}
-              className="flex-shrink-0"
             >
-              {({ open }) => (
-                <div className="relative">
-                  <Listbox.Button className="flex justify-between items-center gap-1 hover:bg-gray-100 border rounded-md shadow-sm px-2 w-full py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300">
-                    <span
-                      className={classNames(
-                        value ? "" : "text-gray-900",
-                        "flex items-center gap-2 text-left"
-                      )}
-                    >
-                      {value ? (
-                        <>
+              {states ? (
+                states.length > 0 ? (
+                  states.map((option) => (
+                    <CustomSelect.Option key={option.id} value={option.id}>
+                      <>
+                        {option.color && (
                           <span
                             className="h-2 w-2 rounded-full flex-shrink-0"
-                            style={{
-                              backgroundColor: states?.find((option) => option.id === value)?.color,
-                            }}
+                            style={{ backgroundColor: option.color }}
                           ></span>
-                          {states?.find((option) => option.id === value)?.name}
-                        </>
-                      ) : (
-                        "None"
-                      )}
-                    </span>
-                    <ChevronDownIcon className="h-3 w-3" />
-                  </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 right-0 mt-1 w-40 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
-                      <div className="p-1">
-                        {states ? (
-                          states.length > 0 ? (
-                            states.map((option) => (
-                              <Listbox.Option
-                                key={option.id}
-                                className={({ active, selected }) =>
-                                  `${
-                                    active || selected ? "text-white bg-theme" : "text-gray-900"
-                                  } flex items-center gap-2 cursor-pointer select-none relative p-2 rounded-md truncate`
-                                }
-                                value={option.id}
-                              >
-                                {option.color && (
-                                  <span
-                                    className="h-2 w-2 rounded-full flex-shrink-0"
-                                    style={{ backgroundColor: option.color }}
-                                  ></span>
-                                )}
-                                {option.name}
-                              </Listbox.Option>
-                            ))
-                          ) : (
-                            <div className="text-center">No states found</div>
-                          )
-                        ) : (
-                          <Spinner />
                         )}
-                      </div>
-                    </Listbox.Options>
-                  </Transition>
-                </div>
+                        {option.name}
+                      </>
+                    </CustomSelect.Option>
+                  ))
+                ) : (
+                  <div className="text-center">No states found</div>
+                )
+              ) : (
+                <Spinner />
               )}
-            </Listbox>
+            </CustomSelect>
           )}
         />
       </div>
diff --git a/apps/app/components/project/issues/issues-list-modal.tsx b/apps/app/components/project/issues/issues-list-modal.tsx
new file mode 100644
index 000000000..b158aab3b
--- /dev/null
+++ b/apps/app/components/project/issues/issues-list-modal.tsx
@@ -0,0 +1,249 @@
+// react
+import React, { useState } from "react";
+// headless ui
+import { Combobox, Dialog, Transition } from "@headlessui/react";
+// ui
+import { Button } from "ui";
+// icons
+import { MagnifyingGlassIcon, RectangleStackIcon } from "@heroicons/react/24/outline";
+// types
+import { IIssue } from "types";
+import { classNames } from "constants/common";
+import useUser from "lib/hooks/useUser";
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+  value?: any;
+  onChange: (...event: any[]) => void;
+  issues: IIssue[];
+  title?: string;
+  multiple?: boolean;
+  customDisplay?: JSX.Element;
+};
+
+const IssuesListModal: React.FC<Props> = ({
+  isOpen,
+  handleClose: onClose,
+  value,
+  onChange,
+  issues,
+  title = "Issues",
+  multiple = false,
+  customDisplay,
+}) => {
+  const [query, setQuery] = useState("");
+  const [values, setValues] = useState<string[]>([]);
+
+  const { activeProject } = useUser();
+
+  const handleClose = () => {
+    onClose();
+    setQuery("");
+    setValues([]);
+  };
+
+  const filteredIssues: IIssue[] =
+    query === ""
+      ? issues ?? []
+      : issues?.filter((issue) => issue.name.toLowerCase().includes(query.toLowerCase())) ?? [];
+
+  return (
+    <>
+      <Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setQuery("")} appear>
+        <Dialog as="div" className="relative z-10" onClose={handleClose}>
+          <Transition.Child
+            as={React.Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <div className="fixed inset-0 bg-gray-500 bg-opacity-25 transition-opacity" />
+          </Transition.Child>
+
+          <div className="fixed inset-0 z-10 overflow-y-auto p-4 sm:p-6 md:p-20">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 scale-95"
+              enterTo="opacity-100 scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 scale-100"
+              leaveTo="opacity-0 scale-95"
+            >
+              <Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-white bg-opacity-80 shadow-2xl ring-1 ring-black ring-opacity-5 backdrop-blur backdrop-filter transition-all">
+                {multiple ? (
+                  <>
+                    <Combobox
+                      value={value}
+                      onChange={(val) => {
+                        // setValues(val);
+                        console.log(val);
+                      }}
+                      multiple
+                    >
+                      <div className="relative m-1">
+                        <MagnifyingGlassIcon
+                          className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40"
+                          aria-hidden="true"
+                        />
+                        <Combobox.Input
+                          className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 placeholder-gray-500 focus:ring-0 sm:text-sm outline-none"
+                          placeholder="Search..."
+                          onChange={(e) => setQuery(e.target.value)}
+                          displayValue={() => ""}
+                        />
+                      </div>
+                      <div className="p-3">{customDisplay}</div>
+                      <Combobox.Options
+                        static
+                        className="max-h-80 scroll-py-2 divide-y divide-gray-500 divide-opacity-10 overflow-y-auto"
+                      >
+                        {filteredIssues.length > 0 && (
+                          <li className="p-2">
+                            {query === "" && (
+                              <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-gray-900">
+                                {title}
+                              </h2>
+                            )}
+                            <ul className="text-sm text-gray-700">
+                              {filteredIssues.map((issue) => (
+                                <Combobox.Option
+                                  key={issue.id}
+                                  value={issue.id}
+                                  className={({ active }) =>
+                                    classNames(
+                                      "flex items-center gap-2 cursor-pointer select-none rounded-md px-3 py-2",
+                                      active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
+                                    )
+                                  }
+                                >
+                                  {({ selected }) => (
+                                    <>
+                                      <input type="checkbox" checked={selected} readOnly />
+                                      <span
+                                        className="flex-shrink-0 h-1.5 w-1.5 block rounded-full"
+                                        style={{
+                                          backgroundColor: issue.state_detail.color,
+                                        }}
+                                      />
+                                      <span className="flex-shrink-0 text-xs text-gray-500">
+                                        {activeProject?.identifier}-{issue.sequence_id}
+                                      </span>{" "}
+                                      {issue.id}
+                                    </>
+                                  )}
+                                </Combobox.Option>
+                              ))}
+                            </ul>
+                          </li>
+                        )}
+                      </Combobox.Options>
+
+                      {query !== "" && filteredIssues.length === 0 && (
+                        <div className="py-14 px-6 text-center sm:px-14">
+                          <RectangleStackIcon
+                            className="mx-auto h-6 w-6 text-gray-900 text-opacity-40"
+                            aria-hidden="true"
+                          />
+                          <p className="mt-4 text-sm text-gray-900">
+                            We couldn{"'"}t find any issue with that term. Please try again.
+                          </p>
+                        </div>
+                      )}
+                    </Combobox>
+                    <div className="flex justify-end items-center gap-2 p-3">
+                      <Button type="button" theme="danger" size="sm" onClick={handleClose}>
+                        Cancel
+                      </Button>
+                      <Button type="button" size="sm" onClick={() => onChange(values)}>
+                        Add issues
+                      </Button>
+                    </div>
+                  </>
+                ) : (
+                  <Combobox value={value} onChange={onChange}>
+                    <div className="relative m-1">
+                      <MagnifyingGlassIcon
+                        className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40"
+                        aria-hidden="true"
+                      />
+                      <Combobox.Input
+                        className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 placeholder-gray-500 focus:ring-0 sm:text-sm outline-none"
+                        placeholder="Search..."
+                        onChange={(e) => setQuery(e.target.value)}
+                        displayValue={() => ""}
+                      />
+                    </div>
+                    <div className="p-3">{customDisplay}</div>
+                    <Combobox.Options
+                      static
+                      className="max-h-80 scroll-py-2 divide-y divide-gray-500 divide-opacity-10 overflow-y-auto"
+                    >
+                      {filteredIssues.length > 0 && (
+                        <li className="p-2">
+                          {query === "" && (
+                            <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-gray-900">
+                              {title}
+                            </h2>
+                          )}
+                          <ul className="text-sm text-gray-700">
+                            {filteredIssues.map((issue) => (
+                              <Combobox.Option
+                                key={issue.id}
+                                value={issue.id}
+                                className={({ active }) =>
+                                  classNames(
+                                    "flex items-center gap-2 cursor-pointer select-none rounded-md px-3 py-2",
+                                    active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
+                                  )
+                                }
+                                onClick={() => handleClose()}
+                              >
+                                {({ selected }) => (
+                                  <>
+                                    <span
+                                      className="flex-shrink-0 h-1.5 w-1.5 block rounded-full"
+                                      style={{
+                                        backgroundColor: issue.state_detail.color,
+                                      }}
+                                    />
+                                    <span className="flex-shrink-0 text-xs text-gray-500">
+                                      {activeProject?.identifier}-{issue.sequence_id}
+                                    </span>{" "}
+                                    {issue.name}
+                                  </>
+                                )}
+                              </Combobox.Option>
+                            ))}
+                          </ul>
+                        </li>
+                      )}
+                    </Combobox.Options>
+
+                    {query !== "" && filteredIssues.length === 0 && (
+                      <div className="py-14 px-6 text-center sm:px-14">
+                        <RectangleStackIcon
+                          className="mx-auto h-6 w-6 text-gray-900 text-opacity-40"
+                          aria-hidden="true"
+                        />
+                        <p className="mt-4 text-sm text-gray-900">
+                          We couldn{"'"}t find any issue with that term. Please try again.
+                        </p>
+                      </div>
+                    )}
+                  </Combobox>
+                )}
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </Dialog>
+      </Transition.Root>
+    </>
+  );
+};
+
+export default IssuesListModal;
diff --git a/apps/app/components/project/modules/create-update-module-modal.tsx b/apps/app/components/project/modules/create-update-module-modal.tsx
new file mode 100644
index 000000000..d7059d345
--- /dev/null
+++ b/apps/app/components/project/modules/create-update-module-modal.tsx
@@ -0,0 +1,245 @@
+import React, { useEffect } from "react";
+// swr
+import { mutate } from "swr";
+// react hook form
+import { useForm } from "react-hook-form";
+// headless
+import { Dialog, Transition } from "@headlessui/react";
+// ui
+import { Button, Input, TextArea, Select } from "ui";
+// services
+import modulesService from "lib/services/modules.service";
+// hooks
+import useUser from "lib/hooks/useUser";
+// types
+import type { IModule } from "types";
+// common
+import { renderDateFormat } from "constants/common";
+// fetch keys
+import { MODULE_LIST } from "constants/fetch-keys";
+
+type Props = {
+  isOpen: boolean;
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  projectId: string;
+  data?: IModule;
+};
+
+const defaultValues: Partial<IModule> = {
+  name: "",
+  description: "",
+};
+
+const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, projectId }) => {
+  const handleClose = () => {
+    setIsOpen(false);
+    const timeout = setTimeout(() => {
+      reset(defaultValues);
+      clearTimeout(timeout);
+    }, 500);
+  };
+
+  const { activeWorkspace } = useUser();
+
+  const {
+    register,
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    reset,
+    setError,
+  } = useForm<IModule>({
+    defaultValues,
+  });
+
+  const onSubmit = async (formData: IModule) => {
+    if (!activeWorkspace) return;
+    const payload = {
+      ...formData,
+      start_date: formData.start_date ? renderDateFormat(formData.start_date) : null,
+      target_date: formData.target_date ? renderDateFormat(formData.target_date) : null,
+    };
+    if (!data) {
+      await modulesService
+        .createModule(activeWorkspace.slug, projectId, payload)
+        .then((res) => {
+          mutate<IModule[]>(
+            MODULE_LIST(projectId),
+            (prevData) => [res, ...(prevData ?? [])],
+            false
+          );
+          handleClose();
+        })
+        .catch((err) => {
+          Object.keys(err).map((key) => {
+            setError(key as keyof typeof defaultValues, {
+              message: err[key].join(", "),
+            });
+          });
+        });
+    } else {
+      await modulesService
+        .updateModule(activeWorkspace.slug, projectId, data.id, payload)
+        .then((res) => {
+          mutate<IModule[]>(
+            MODULE_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 typeof defaultValues, {
+              message: err[key].join(", "),
+            });
+          });
+        });
+    }
+  };
+
+  useEffect(() => {
+    if (data) {
+      setIsOpen(true);
+      reset(data);
+    } else {
+      reset(defaultValues);
+    }
+  }, [data, setIsOpen, reset]);
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-10" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+                <form onSubmit={handleSubmit(onSubmit)}>
+                  <div className="space-y-5">
+                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
+                      {data ? "Update" : "Create"} Module
+                    </Dialog.Title>
+                    <div className="space-y-3">
+                      <div>
+                        <Input
+                          id="name"
+                          label="Name"
+                          name="name"
+                          type="name"
+                          placeholder="Enter name"
+                          autoComplete="off"
+                          error={errors.name}
+                          register={register}
+                          validations={{
+                            required: "Name is required",
+                          }}
+                        />
+                      </div>
+                      <div>
+                        <TextArea
+                          id="description"
+                          name="description"
+                          label="Description"
+                          placeholder="Enter description"
+                          error={errors.description}
+                          register={register}
+                        />
+                      </div>
+                      <div>
+                        <Select
+                          id="status"
+                          name="status"
+                          label="Status"
+                          error={errors.status}
+                          register={register}
+                          validations={{
+                            required: "Status is required",
+                          }}
+                          options={[
+                            { label: "Backlog", value: "backlog" },
+                            { label: "Planned", value: "planned" },
+                            { label: "In Progress", value: "in-progress" },
+                            { label: "Paused", value: "paused" },
+                            { label: "Completed", value: "completed" },
+                            { label: "Cancelled", value: "cancelled" },
+                          ]}
+                        />
+                      </div>
+                      <div className="flex gap-x-2">
+                        <div className="w-full">
+                          <Input
+                            id="start_date"
+                            label="Start Date"
+                            name="start_date"
+                            type="date"
+                            placeholder="Enter start date"
+                            error={errors.start_date}
+                            register={register}
+                          />
+                        </div>
+                        <div className="w-full">
+                          <Input
+                            id="target_date"
+                            label="Target Date"
+                            name="target_date"
+                            type="date"
+                            placeholder="Enter target date"
+                            error={errors.target_date}
+                            register={register}
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
+                    <Button theme="secondary" onClick={handleClose}>
+                      Cancel
+                    </Button>
+                    <Button type="submit" disabled={isSubmitting}>
+                      {data
+                        ? isSubmitting
+                          ? "Updating Module..."
+                          : "Update Module"
+                        : isSubmitting
+                        ? "Creating Module..."
+                        : "Create Module"}
+                    </Button>
+                  </div>
+                </form>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
+
+export default CreateUpdateModuleModal;
diff --git a/apps/app/components/sidebar/workspace-options.tsx b/apps/app/components/sidebar/workspace-options.tsx
index 749eba17d..d20080c66 100644
--- a/apps/app/components/sidebar/workspace-options.tsx
+++ b/apps/app/components/sidebar/workspace-options.tsx
@@ -86,7 +86,7 @@ const WorkspaceOptions: React.FC<Props> = ({ sidebarCollapse }) => {
         <Menu as="div" className="col-span-4 inline-block text-left w-full">
           <div className="w-full">
             <Menu.Button
-              className={`inline-flex justify-between items-center w-full rounded-md px-2 py-2 text-sm font-semibold text-gray-700 focus:outline-none ${
+              className={`inline-flex justify-between items-center w-full rounded-md px-1 py-2 text-sm font-semibold text-gray-700 focus:outline-none ${
                 !sidebarCollapse
                   ? "hover:bg-gray-50 focus:bg-gray-50 border border-gray-300 shadow-sm"
                   : ""
@@ -118,7 +118,7 @@ const WorkspaceOptions: React.FC<Props> = ({ sidebarCollapse }) => {
               </div>
               {!sidebarCollapse && (
                 <div className="flex-grow flex justify-end">
-                  <ChevronDownIcon className="-mr-1 ml-2 h-5 w-5" aria-hidden="true" />
+                  <ChevronDownIcon className="ml-2 h-3 w-3" aria-hidden="true" />
                 </div>
               )}
             </Menu.Button>
diff --git a/apps/app/constants/api-routes.ts b/apps/app/constants/api-routes.ts
index aa2fd82d6..9e282562a 100644
--- a/apps/app/constants/api-routes.ts
+++ b/apps/app/constants/api-routes.ts
@@ -132,3 +132,18 @@ export const REMOVE_ISSUE_FROM_CYCLE = (
   bridgeId: string
 ) =>
   `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/cycle-issues/${bridgeId}/`;
+
+// modules
+export const MODULES_ENDPOINT = (workspaceSlug: string, projectId: string) =>
+  `/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/`;
+export const MODULE_DETAIL = (workspaceSlug: string, projectId: string, moduleId: string) =>
+  `/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/`;
+export const MODULE_ISSUES = (workspaceSlug: string, projectId: string, moduleId: string) =>
+  `/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/module-issues/`;
+export const MODULE_ISSUE_DETAIL = (
+  workspaceSlug: string,
+  projectId: string,
+  moduleId: string,
+  issueId: string
+) =>
+  `/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/module-issues/${issueId}/`;
diff --git a/apps/app/constants/fetch-keys.ts b/apps/app/constants/fetch-keys.ts
index 76a3807ae..355a41b24 100644
--- a/apps/app/constants/fetch-keys.ts
+++ b/apps/app/constants/fetch-keys.ts
@@ -23,10 +23,14 @@ export const PROJECT_ISSUE_BY_STATE = (projectId: string) => `PROJECT_ISSUE_BY_S
 export const PROJECT_ISSUE_LABELS = (projectId: string) => `PROJECT_ISSUE_LABELS_${projectId}`;
 
 export const CYCLE_LIST = (projectId: string) => `CYCLE_LIST_${projectId}`;
-export const CYCLE_ISSUES = (sprintId: string) => `CYCLE_ISSUES_${sprintId}`;
+export const CYCLE_ISSUES = (cycleId: string) => `CYCLE_ISSUES_${cycleId}`;
 export const CYCLE_DETAIL = "CYCLE_DETAIL";
 
 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 MODULE_LIST = (projectId: string) => `MODULE_LIST_${projectId}`;
+export const MODULE_ISSUES = (moduleId: string) => `MODULE_ISSUES_${moduleId}`;
+export const MODULE_DETAIL = "MODULE_DETAIL";
diff --git a/apps/app/layouts/DefaultLayout.tsx b/apps/app/layouts/DefaultLayout.tsx
index 3d404ec09..082b00022 100644
--- a/apps/app/layouts/DefaultLayout.tsx
+++ b/apps/app/layouts/DefaultLayout.tsx
@@ -1,8 +1,8 @@
 import React from "react";
 
 // layouts
-import Container from "layouts/Container";
-import DefaultTopBar from "layouts/Navbar/DefaultTopBar";
+import Container from "layouts/container";
+import DefaultTopBar from "layouts/navbar/DefaultTopBar";
 
 // types
 import type { Props } from "./types";
diff --git a/apps/app/layouts/Navbar/Sidebar.tsx b/apps/app/layouts/Navbar/Sidebar.tsx
deleted file mode 100644
index 9f61f9ac8..000000000
--- a/apps/app/layouts/Navbar/Sidebar.tsx
+++ /dev/null
@@ -1,629 +0,0 @@
-import React, { useState } from "react";
-// next
-import Link from "next/link";
-import { useRouter } from "next/router";
-import Image from "next/image";
-// services
-import userService from "lib/services/user.service";
-import authenticationService from "lib/services/authentication.service";
-// hooks
-import useUser from "lib/hooks/useUser";
-import useTheme from "lib/hooks/useTheme";
-import useToast from "lib/hooks/useToast";
-// headless ui
-import { Dialog, Disclosure, Menu, Transition } from "@headlessui/react";
-// icons
-import {
-  ArrowPathIcon,
-  Bars3Icon,
-  ChevronDownIcon,
-  Cog6ToothIcon,
-  HomeIcon,
-  ClipboardDocumentListIcon,
-  PlusIcon,
-  RectangleStackIcon,
-  UserGroupIcon,
-  UserIcon,
-  XMarkIcon,
-  ArrowLongLeftIcon,
-  QuestionMarkCircleIcon,
-  EllipsisHorizontalIcon,
-  ClipboardDocumentIcon,
-} from "@heroicons/react/24/outline";
-// constants
-import { classNames, copyTextToClipboard } from "constants/common";
-// ui
-import { CustomListbox, Spinner, Tooltip } from "ui";
-// types
-import type { IUser } from "types";
-
-const navigation = (projectId: string) => [
-  {
-    name: "Issues",
-    href: `/projects/${projectId}/issues`,
-    icon: RectangleStackIcon,
-  },
-  {
-    name: "Cycles",
-    href: `/projects/${projectId}/cycles`,
-    icon: ArrowPathIcon,
-  },
-  {
-    name: "Members",
-    href: `/projects/${projectId}/members`,
-    icon: UserGroupIcon,
-  },
-  {
-    name: "Settings",
-    href: `/projects/${projectId}/settings`,
-    icon: Cog6ToothIcon,
-  },
-];
-
-const workspaceLinks = [
-  {
-    icon: HomeIcon,
-    name: "Home",
-    href: `/workspace`,
-  },
-  {
-    icon: ClipboardDocumentListIcon,
-    name: "Projects",
-    href: "/projects",
-  },
-  {
-    icon: RectangleStackIcon,
-    name: "My Issues",
-    href: "/me/my-issues",
-  },
-  {
-    icon: UserGroupIcon,
-    name: "Members",
-    href: "/workspace/members",
-  },
-  // {
-  //   icon: InboxIcon,
-  //   name: "Inbox",
-  //   href: "#",
-  // },
-  {
-    icon: Cog6ToothIcon,
-    name: "Settings",
-    href: "/workspace/settings",
-  },
-];
-
-const userLinks = [
-  {
-    name: "My Profile",
-    href: "/me/profile",
-  },
-  {
-    name: "Workspace Invites",
-    href: "/invitations",
-  },
-];
-
-const Sidebar: React.FC = () => {
-  const [sidebarOpen, setSidebarOpen] = useState(false);
-
-  const router = useRouter();
-
-  const { projects, user } = useUser();
-
-  const { projectId } = router.query;
-
-  const { workspaces, activeWorkspace, mutateUser } = useUser();
-
-  const { collapsed: sidebarCollapse, toggleCollapsed } = useTheme();
-
-  const { setToastAlert } = useToast();
-
-  return (
-    <nav className="h-full">
-      <Transition.Root show={sidebarOpen} as={React.Fragment}>
-        <Dialog as="div" className="relative z-40 md:hidden" onClose={setSidebarOpen}>
-          <Transition.Child
-            as={React.Fragment}
-            enter="transition-opacity ease-linear duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="transition-opacity ease-linear duration-300"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <div className="fixed inset-0 bg-gray-600 bg-opacity-75" />
-          </Transition.Child>
-
-          <div className="fixed inset-0 z-40 flex">
-            <Transition.Child
-              as={React.Fragment}
-              enter="transition ease-in-out duration-300 transform"
-              enterFrom="-translate-x-full"
-              enterTo="translate-x-0"
-              leave="transition ease-in-out duration-300 transform"
-              leaveFrom="translate-x-0"
-              leaveTo="-translate-x-full"
-            >
-              <Dialog.Panel className="relative flex w-full max-w-xs flex-1 flex-col bg-white">
-                <Transition.Child
-                  as={React.Fragment}
-                  enter="ease-in-out duration-300"
-                  enterFrom="opacity-0"
-                  enterTo="opacity-100"
-                  leave="ease-in-out duration-300"
-                  leaveFrom="opacity-100"
-                  leaveTo="opacity-0"
-                >
-                  <div className="absolute top-0 right-0 -mr-12 pt-2">
-                    <button
-                      type="button"
-                      className="ml-1 flex h-10 w-10 items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
-                      onClick={() => setSidebarOpen(false)}
-                    >
-                      <span className="sr-only">Close sidebar</span>
-                      <XMarkIcon className="h-6 w-6 text-white" aria-hidden="true" />
-                    </button>
-                  </div>
-                </Transition.Child>
-                <div className="h-0 flex-1 overflow-y-auto pt-5 pb-4">
-                  <nav className="mt-5 space-y-1 px-2">
-                    {projectId &&
-                      navigation(projectId as string).map((item) => (
-                        <Link href={item.href} key={item.name}>
-                          <a
-                            className={classNames(
-                              item.href === router.asPath
-                                ? "bg-gray-100 text-gray-900"
-                                : "text-gray-600 hover:bg-gray-50 hover:text-gray-900",
-                              "group flex items-center px-2 py-2 text-base font-medium rounded-md"
-                            )}
-                          >
-                            <item.icon
-                              className={classNames(
-                                item.href === router.asPath
-                                  ? "text-gray-500"
-                                  : "text-gray-400 group-hover:text-gray-500",
-                                "mr-4 flex-shrink-0 h-6 w-6"
-                              )}
-                              aria-hidden="true"
-                            />
-                            {item.name}
-                          </a>
-                        </Link>
-                      ))}
-                  </nav>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-            <div className="w-14 flex-shrink-0" />
-          </div>
-        </Dialog>
-      </Transition.Root>
-      <div
-        className={`${
-          sidebarCollapse ? "" : "w-auto md:w-64"
-        } hidden md:inset-y-0 md:flex md:flex-col h-full`}
-      >
-        <div className="flex flex-1 flex-col border-r border-gray-200">
-          <div className="h-full flex flex-1 flex-col pt-5">
-            <div className="px-2">
-              <div
-                className={`relative ${
-                  sidebarCollapse ? "flex" : "grid grid-cols-5 gap-2 items-center"
-                }`}
-              >
-                <Menu as="div" className="col-span-4 inline-block text-left w-full">
-                  <div className="w-full">
-                    <Menu.Button
-                      className={`inline-flex justify-between items-center w-full rounded-md px-2 py-2 text-sm font-semibold text-gray-700 focus:outline-none ${
-                        !sidebarCollapse
-                          ? "hover:bg-gray-50 focus:bg-gray-50 border border-gray-300 shadow-sm"
-                          : ""
-                      }`}
-                    >
-                      <div className="flex gap-x-1 items-center">
-                        <div className="h-5 w-5 p-4 flex items-center justify-center bg-gray-700 text-white rounded uppercase relative">
-                          {activeWorkspace?.logo && activeWorkspace.logo !== "" ? (
-                            <Image
-                              src={activeWorkspace.logo}
-                              alt="Workspace Logo"
-                              layout="fill"
-                              objectFit="cover"
-                            />
-                          ) : (
-                            activeWorkspace?.name?.charAt(0) ?? "N"
-                          )}
-                        </div>
-                        {!sidebarCollapse && (
-                          <p className="truncate w-20 text-left ml-1">
-                            {activeWorkspace?.name ?? "Loading..."}
-                          </p>
-                        )}
-                      </div>
-                      {!sidebarCollapse && (
-                        <div className="flex-grow flex justify-end">
-                          <ChevronDownIcon className="-mr-1 ml-2 h-5 w-5" aria-hidden="true" />
-                        </div>
-                      )}
-                    </Menu.Button>
-                  </div>
-
-                  <Transition
-                    as={React.Fragment}
-                    enter="transition ease-out duration-100"
-                    enterFrom="transform opacity-0 scale-95"
-                    enterTo="transform opacity-100 scale-100"
-                    leave="transition ease-in duration-75"
-                    leaveFrom="transform opacity-100 scale-100"
-                    leaveTo="transform opacity-0 scale-95"
-                  >
-                    <Menu.Items className="origin-top-left fixed max-w-[15rem] ml-2 left-0 mt-2 w-full rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-20">
-                      <div className="p-1">
-                        {workspaces ? (
-                          <>
-                            {workspaces.length > 0 ? (
-                              workspaces.map((workspace: any) => (
-                                <Menu.Item key={workspace.id}>
-                                  {({ active }) => (
-                                    <button
-                                      type="button"
-                                      onClick={() => {
-                                        mutateUser(
-                                          (prevData) => ({
-                                            ...(prevData as IUser),
-                                            last_workspace_id: workspace.id,
-                                          }),
-                                          false
-                                        );
-                                        userService
-                                          .updateUser({
-                                            last_workspace_id: workspace?.id,
-                                          })
-                                          .then((res) => {
-                                            const isInProject =
-                                              router.pathname.includes("/[projectId]/");
-                                            if (isInProject) router.push("/workspace");
-                                          })
-                                          .catch((err) => console.error(err));
-                                      }}
-                                      className={`${
-                                        active ? "bg-theme text-white" : "text-gray-900"
-                                      } group flex w-full items-center rounded-md p-2 text-sm`}
-                                    >
-                                      {workspace.name}
-                                    </button>
-                                  )}
-                                </Menu.Item>
-                              ))
-                            ) : (
-                              <p>No workspace found!</p>
-                            )}
-                            <Menu.Item
-                              as="button"
-                              onClick={() => {
-                                router.push("/create-workspace");
-                              }}
-                              className="w-full"
-                            >
-                              {({ active }) => (
-                                <a
-                                  className={`flex items-center gap-x-1 p-2 w-full text-left text-gray-900 hover:bg-theme hover:text-white rounded-md text-sm ${
-                                    active ? "bg-theme text-white" : "text-gray-900"
-                                  }`}
-                                >
-                                  <PlusIcon className="w-5 h-5" />
-                                  <span>Create Workspace</span>
-                                </a>
-                              )}
-                            </Menu.Item>
-                          </>
-                        ) : (
-                          <div className="w-full flex justify-center">
-                            <Spinner />
-                          </div>
-                        )}
-                      </div>
-                    </Menu.Items>
-                  </Transition>
-                </Menu>
-                {!sidebarCollapse && (
-                  <Menu as="div" className="inline-block text-left flex-shrink-0 w-full">
-                    <div className="h-10 w-10">
-                      <Menu.Button className="grid relative place-items-center h-full w-full rounded-md shadow-sm bg-white text-gray-700 hover:bg-gray-50 focus:outline-none">
-                        {user?.avatar && user.avatar !== "" ? (
-                          <Image
-                            src={user.avatar}
-                            alt="User Avatar"
-                            layout="fill"
-                            className="rounded-md"
-                          />
-                        ) : (
-                          <UserIcon className="h-5 w-5" />
-                        )}
-                      </Menu.Button>
-                    </div>
-
-                    <Transition
-                      as={React.Fragment}
-                      enter="transition ease-out duration-100"
-                      enterFrom="transform opacity-0 scale-95"
-                      enterTo="transform opacity-100 scale-100"
-                      leave="transition ease-in duration-75"
-                      leaveFrom="transform opacity-100 scale-100"
-                      leaveTo="transform opacity-0 scale-95"
-                    >
-                      <Menu.Items className="origin-top-right absolute left-0 mt-2 w-full rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-20">
-                        <div className="p-1">
-                          {userLinks.map((item) => (
-                            <Menu.Item key={item.name} as="div">
-                              {(active) => (
-                                <Link href={item.href}>
-                                  <a className="flex items-center gap-x-1 p-2 w-full text-left text-gray-900 hover:bg-theme hover:text-white rounded-md text-sm">
-                                    {item.name}
-                                  </a>
-                                </Link>
-                              )}
-                            </Menu.Item>
-                          ))}
-
-                          <Menu.Item as="div">
-                            <button
-                              type="button"
-                              className="flex items-center gap-x-1 p-2 w-full text-left text-gray-900 hover:bg-theme hover:text-white rounded-md text-sm"
-                              onClick={async () => {
-                                await authenticationService
-                                  .signOut({
-                                    refresh_token: authenticationService.getRefreshToken(),
-                                  })
-                                  .then((response) => {
-                                    console.log("user signed out", response);
-                                  })
-                                  .catch((error) => {
-                                    console.log("Failed to sign out", error);
-                                  })
-                                  .finally(() => {
-                                    mutateUser();
-                                    router.push("/signin");
-                                  });
-                              }}
-                            >
-                              Sign Out
-                            </button>
-                          </Menu.Item>
-                        </div>
-                      </Menu.Items>
-                    </Transition>
-                  </Menu>
-                )}
-              </div>
-              <div className="mt-3 flex-1 space-y-1 bg-white">
-                {workspaceLinks.map((link, index) => (
-                  <Link key={index} href={link.href}>
-                    <a
-                      className={`${
-                        link.href === router.asPath
-                          ? "bg-theme text-white"
-                          : "hover:bg-indigo-100 focus:bg-indigo-100"
-                      } flex items-center gap-3 p-2 text-xs font-medium rounded-md outline-none ${
-                        sidebarCollapse ? "justify-center" : ""
-                      }`}
-                    >
-                      <link.icon
-                        className={`${
-                          link.href === router.asPath ? "text-white" : ""
-                        } flex-shrink-0 h-4 w-4`}
-                        aria-hidden="true"
-                      />
-                      {!sidebarCollapse && link.name}
-                    </a>
-                  </Link>
-                ))}
-              </div>
-            </div>
-            <div
-              className={`flex flex-col px-2 pt-5 pb-3 mt-3 space-y-2 bg-gray-50 h-full overflow-y-auto ${
-                sidebarCollapse ? "rounded-xl" : "rounded-t-3xl"
-              }`}
-            >
-              {projects ? (
-                <>
-                  {projects.length > 0 ? (
-                    projects.map((project) => (
-                      <Disclosure key={project?.id} defaultOpen={projectId === project?.id}>
-                        {({ open }) => (
-                          <>
-                            <div className="flex items-center">
-                              <Disclosure.Button
-                                className={`w-full flex items-center gap-2 font-medium rounded-md p-2 text-sm ${
-                                  sidebarCollapse ? "justify-center" : ""
-                                }`}
-                              >
-                                <span className="bg-gray-700 text-white rounded h-7 w-7 grid place-items-center uppercase flex-shrink-0">
-                                  {project?.name.charAt(0)}
-                                </span>
-                                {!sidebarCollapse && (
-                                  <span className="flex items-center justify-between w-full">
-                                    {project?.name}
-                                    <span>
-                                      <ChevronDownIcon
-                                        className={`h-4 w-4 duration-300 ${
-                                          open ? "rotate-180" : ""
-                                        }`}
-                                      />
-                                    </span>
-                                  </span>
-                                )}
-                              </Disclosure.Button>
-                              {!sidebarCollapse && (
-                                <Menu as="div" className="relative inline-block">
-                                  <Menu.Button className="grid relative place-items-center focus:outline-none">
-                                    <EllipsisHorizontalIcon className="h-4 w-4" />
-                                  </Menu.Button>
-
-                                  <Transition
-                                    as={React.Fragment}
-                                    enter="transition ease-out duration-100"
-                                    enterFrom="transform opacity-0 scale-95"
-                                    enterTo="transform opacity-100 scale-100"
-                                    leave="transition ease-in duration-75"
-                                    leaveFrom="transform opacity-100 scale-100"
-                                    leaveTo="transform opacity-0 scale-95"
-                                  >
-                                    <Menu.Items className="origin-top-right absolute right-0 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-20">
-                                      <div className="p-1">
-                                        <Menu.Item as="div">
-                                          {(active) => (
-                                            <button
-                                              className="flex items-center gap-2 p-2 text-left text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap"
-                                              onClick={() =>
-                                                copyTextToClipboard(
-                                                  `https://app.plane.so/projects/${project?.id}/issues/`
-                                                ).then(() => {
-                                                  setToastAlert({
-                                                    title: "Link Copied",
-                                                    message: "Link copied to clipboard",
-                                                    type: "success",
-                                                  });
-                                                })
-                                              }
-                                            >
-                                              <ClipboardDocumentIcon className="h-3 w-3" />
-                                              Copy Link
-                                            </button>
-                                          )}
-                                        </Menu.Item>
-                                      </div>
-                                    </Menu.Items>
-                                  </Transition>
-                                </Menu>
-                              )}
-                            </div>
-                            <Transition
-                              enter="transition duration-100 ease-out"
-                              enterFrom="transform scale-95 opacity-0"
-                              enterTo="transform scale-100 opacity-100"
-                              leave="transition duration-75 ease-out"
-                              leaveFrom="transform scale-100 opacity-100"
-                              leaveTo="transform scale-95 opacity-0"
-                            >
-                              <Disclosure.Panel
-                                className={`${
-                                  sidebarCollapse ? "" : "ml-[2.25rem]"
-                                } flex flex-col gap-y-1`}
-                              >
-                                {navigation(project?.id).map((item) => (
-                                  <Link key={item.name} href={item.href}>
-                                    <a
-                                      className={classNames(
-                                        item.href === router.asPath
-                                          ? "bg-gray-200 text-gray-900"
-                                          : "text-gray-500 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900",
-                                        "group flex items-center px-2 py-2 text-xs font-medium rounded-md outline-none",
-                                        sidebarCollapse ? "justify-center" : ""
-                                      )}
-                                    >
-                                      <item.icon
-                                        className={classNames(
-                                          item.href === router.asPath
-                                            ? "text-gray-900"
-                                            : "text-gray-500 group-hover:text-gray-900",
-                                          "flex-shrink-0 h-4 w-4",
-                                          !sidebarCollapse ? "mr-3" : ""
-                                        )}
-                                        aria-hidden="true"
-                                      />
-                                      {!sidebarCollapse && item.name}
-                                    </a>
-                                  </Link>
-                                ))}
-                              </Disclosure.Panel>
-                            </Transition>
-                          </>
-                        )}
-                      </Disclosure>
-                    ))
-                  ) : (
-                    <div className="text-center space-y-3">
-                      {!sidebarCollapse && (
-                        <h4 className="text-gray-700 text-sm">
-                          You don{"'"}t have any project yet
-                        </h4>
-                      )}
-                      <button
-                        type="button"
-                        className="group flex justify-center items-center gap-2 w-full rounded-md p-2 text-sm bg-theme text-white"
-                        onClick={() => {
-                          const e = new KeyboardEvent("keydown", {
-                            ctrlKey: true,
-                            key: "p",
-                          });
-                          document.dispatchEvent(e);
-                        }}
-                      >
-                        <PlusIcon className="h-5 w-5" />
-                        {!sidebarCollapse && "Create Project"}
-                      </button>
-                    </div>
-                  )}
-                </>
-              ) : (
-                <div className="w-full flex justify-center">
-                  <Spinner />
-                </div>
-              )}
-            </div>
-            <div
-              className={`px-2 py-2 bg-gray-50 w-full self-baseline flex items-center ${
-                sidebarCollapse ? "flex-col-reverse" : ""
-              }`}
-            >
-              <button
-                type="button"
-                className={`flex items-center gap-3 px-2 py-2 text-xs font-medium rounded-md text-gray-500 hover:bg-gray-100 hover:text-gray-900 outline-none ${
-                  sidebarCollapse ? "justify-center w-full" : ""
-                }`}
-                onClick={() => toggleCollapsed()}
-              >
-                <ArrowLongLeftIcon
-                  className={`h-4 w-4 text-gray-500 group-hover:text-gray-900 flex-shrink-0 duration-300 ${
-                    sidebarCollapse ? "rotate-180" : ""
-                  }`}
-                />
-              </button>
-              <button
-                type="button"
-                className={`flex items-center gap-3 px-2 py-2 text-xs font-medium rounded-md text-gray-500 hover:bg-gray-100 hover:text-gray-900 outline-none ${
-                  sidebarCollapse ? "justify-center w-full" : ""
-                }`}
-                onClick={() => {
-                  const e = new KeyboardEvent("keydown", {
-                    ctrlKey: true,
-                    key: "h",
-                  });
-                  document.dispatchEvent(e);
-                }}
-                title="Help"
-              >
-                <QuestionMarkCircleIcon className="h-4 w-4 text-gray-500" />
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div className="sticky top-0 z-10 bg-white pl-1 pt-1 sm:pl-3 sm:pt-3 md:hidden">
-        <button
-          type="button"
-          className="-ml-0.5 -mt-0.5 inline-flex h-12 w-12 items-center justify-center rounded-md text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
-          onClick={() => setSidebarOpen(true)}
-        >
-          <span className="sr-only">Open sidebar</span>
-          <Bars3Icon className="h-6 w-6" aria-hidden="true" />
-        </button>
-      </div>
-    </nav>
-  );
-};
-
-export default Sidebar;
diff --git a/apps/app/layouts/Navbar/main-sidebar.tsx b/apps/app/layouts/Navbar/main-sidebar.tsx
index 19269509d..9d9c13bcd 100644
--- a/apps/app/layouts/Navbar/main-sidebar.tsx
+++ b/apps/app/layouts/Navbar/main-sidebar.tsx
@@ -19,6 +19,7 @@ import {
   XMarkIcon,
   ArrowLongLeftIcon,
   QuestionMarkCircleIcon,
+  RectangleGroupIcon,
 } from "@heroicons/react/24/outline";
 // constants
 import { classNames } from "constants/common";
@@ -34,6 +35,11 @@ const navigation = (projectId: string) => [
     href: `/projects/${projectId}/cycles`,
     icon: ArrowPathIcon,
   },
+  {
+    name: "Modules",
+    href: `/projects/${projectId}/modules`,
+    icon: RectangleGroupIcon,
+  },
   {
     name: "Members",
     href: `/projects/${projectId}/members`,
@@ -138,7 +144,7 @@ const Sidebar: React.FC = () => {
       </Transition.Root>
       <div
         className={`${
-          sidebarCollapse ? "" : "w-auto md:w-64"
+          sidebarCollapse ? "" : "w-auto md:w-60"
         } h-full hidden md:inset-y-0 md:flex md:flex-col`}
       >
         <div className="h-full flex flex-1 flex-col border-r border-gray-200">
diff --git a/apps/app/layouts/app-layout.tsx b/apps/app/layouts/app-layout.tsx
index 9f1500a6d..ff28154bb 100644
--- a/apps/app/layouts/app-layout.tsx
+++ b/apps/app/layouts/app-layout.tsx
@@ -5,9 +5,9 @@ import { useRouter } from "next/router";
 // hooks
 import useUser from "lib/hooks/useUser";
 // layouts
-import Container from "layouts/Container";
-import Sidebar from "layouts/Navbar/main-sidebar";
-import Header from "layouts/Navbar/Header";
+import Container from "layouts/container";
+import Sidebar from "layouts/navbar/main-sidebar";
+import Header from "layouts/navbar/Header";
 // components
 import CreateProjectModal from "components/project/create-project-modal";
 // types
diff --git a/apps/app/layouts/settings-layout.tsx b/apps/app/layouts/settings-layout.tsx
index 0ff04b9c0..38e360c00 100644
--- a/apps/app/layouts/settings-layout.tsx
+++ b/apps/app/layouts/settings-layout.tsx
@@ -5,10 +5,10 @@ import { useRouter } from "next/router";
 // hooks
 import useUser from "lib/hooks/useUser";
 // layouts
-import Container from "layouts/Container";
-import Sidebar from "layouts/Navbar/main-sidebar";
-import SettingsSidebar from "layouts/Navbar/settings-sidebar";
-import Header from "layouts/Navbar/Header";
+import Container from "layouts/container";
+import Sidebar from "layouts/navbar/main-sidebar";
+import SettingsSidebar from "layouts/navbar/settings-sidebar";
+import Header from "layouts/navbar/Header";
 // components
 import CreateProjectModal from "components/project/create-project-modal";
 // types
diff --git a/apps/app/lib/services/modules.service.ts b/apps/app/lib/services/modules.service.ts
new file mode 100644
index 000000000..3e1a3e9c5
--- /dev/null
+++ b/apps/app/lib/services/modules.service.ts
@@ -0,0 +1,119 @@
+// api routes
+import {
+  MODULES_ENDPOINT,
+  MODULE_DETAIL,
+  MODULE_ISSUES,
+  MODULE_ISSUE_DETAIL,
+} from "constants/api-routes";
+// services
+import APIService from "lib/services/api.service";
+
+const { NEXT_PUBLIC_API_BASE_URL } = process.env;
+
+class ProjectIssuesServices extends APIService {
+  constructor() {
+    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
+  }
+
+  async getModules(workspaceSlug: string, projectId: string): Promise<any> {
+    return this.get(MODULES_ENDPOINT(workspaceSlug, projectId))
+      .then((response) => {
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async createModule(workspaceSlug: string, projectId: string, data: any): Promise<any> {
+    return this.post(MODULES_ENDPOINT(workspaceSlug, projectId), data)
+      .then((response) => {
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateModule(
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    data: any
+  ): Promise<any> {
+    return this.put(MODULE_DETAIL(workspaceSlug, projectId, moduleId), data)
+      .then((response) => {
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async patchModule(
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    data: any
+  ): Promise<any> {
+    return this.patch(MODULE_DETAIL(workspaceSlug, projectId, moduleId), data)
+      .then((response) => {
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteModule(workspaceSlug: string, projectId: string, moduleId: string): Promise<any> {
+    return this.delete(MODULE_DETAIL(workspaceSlug, projectId, moduleId))
+      .then((response) => {
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getModuleIssues(workspaceSlug: string, projectId: string, moduleId: string): Promise<any> {
+    return this.get(MODULE_ISSUES(workspaceSlug, projectId, moduleId))
+      .then((response) => {
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async addIssueToModule(
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    data: any
+  ): Promise<any> {
+    return this.post(MODULE_ISSUES(workspaceSlug, projectId, moduleId), data)
+      .then((response) => {
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async removeIssueFromModule(
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    issueId: string
+  ): Promise<any> {
+    return this.delete(MODULE_ISSUE_DETAIL(workspaceSlug, projectId, moduleId, issueId))
+      .then((response) => {
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
+
+export default new ProjectIssuesServices();
diff --git a/apps/app/pages/projects/[projectId]/cycles/[cycleId].tsx b/apps/app/pages/projects/[projectId]/cycles/[cycleId].tsx
index 1f339bec1..0d91a58c6 100644
--- a/apps/app/pages/projects/[projectId]/cycles/[cycleId].tsx
+++ b/apps/app/pages/projects/[projectId]/cycles/[cycleId].tsx
@@ -21,7 +21,7 @@ import useUser from "lib/hooks/useUser";
 import useIssuesFilter from "lib/hooks/useIssuesFilter";
 import useIssuesProperties from "lib/hooks/useIssuesProperties";
 // headless ui
-import { Menu, Popover, Transition } from "@headlessui/react";
+import { Popover, Transition } from "@headlessui/react";
 // ui
 import { BreadcrumbItem, Breadcrumbs, CustomMenu } from "ui";
 // icons
@@ -41,6 +41,8 @@ import { CYCLE_ISSUES, PROJECT_MEMBERS } from "constants/fetch-keys";
 // constants
 import { classNames, replaceUnderscoreIfSnakeCase } from "constants/common";
 import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal";
+import CycleIssuesListModal from "components/project/cycles/cycle-issues-list-modal";
+import ConfirmCycleDeletion from "components/project/cycles/confirm-cycle-deletion";
 
 const groupByOptions: Array<{ name: string; key: NestedKeyOf<IIssue> | null }> = [
   { name: "State", key: "state_detail.name" },
@@ -79,8 +81,9 @@ const SingleCycle: React.FC<Props> = () => {
   const [isIssueModalOpen, setIsIssueModalOpen] = useState(false);
   const [selectedCycle, setSelectedCycle] = useState<SelectSprintType>();
   const [selectedIssues, setSelectedIssues] = useState<SelectIssue>();
+  const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false);
 
-  const { activeWorkspace, activeProject, cycles } = useUser();
+  const { activeWorkspace, activeProject, cycles, issues } = useUser();
 
   const router = useRouter();
 
@@ -98,9 +101,8 @@ const SingleCycle: React.FC<Props> = () => {
           cycleServices.getCycleIssues(activeWorkspace?.slug, activeProject?.id, cycleId as string)
       : null
   );
-
   const cycleIssuesArray = cycleIssues?.map((issue) => {
-    return issue.issue_details;
+    return { bridge: issue.id, ...issue.issue_details };
   });
 
   const { data: members } = useSWR(
@@ -143,6 +145,10 @@ const SingleCycle: React.FC<Props> = () => {
     }
   };
 
+  const openIssuesListModal = () => {
+    setCycleIssuesListModal(true);
+  };
+
   const addIssueToCycle = (cycleId: string, issueId: string) => {
     if (!activeWorkspace || !activeProject?.id) return;
 
@@ -202,16 +208,16 @@ const SingleCycle: React.FC<Props> = () => {
     // console.log(result);
   };
 
-  const removeIssueFromCycle = (cycleId: string, bridgeId: string) => {
+  const removeIssueFromCycle = (bridgeId: string) => {
     if (activeWorkspace && activeProject) {
       mutate<CycleIssueResponse[]>(
-        CYCLE_ISSUES(cycleId),
+        CYCLE_ISSUES(cycleId as string),
         (prevData) => prevData?.filter((p) => p.id !== bridgeId),
         false
       );
 
       issuesServices
-        .removeIssueFromCycle(activeWorkspace.slug, activeProject.id, cycleId, bridgeId)
+        .removeIssueFromCycle(activeWorkspace.slug, activeProject.id, cycleId as string, bridgeId)
         .then((res) => {
           console.log(res);
         })
@@ -234,6 +240,12 @@ const SingleCycle: React.FC<Props> = () => {
         setIsOpen={setIsIssueModalOpen}
         projectId={activeProject?.id}
       />
+      <CycleIssuesListModal
+        isOpen={cycleIssuesListModal}
+        handleClose={() => setCycleIssuesListModal(false)}
+        issues={issues}
+        cycleId={cycleId as string}
+      />
       <AppLayout
         breadcrumbs={
           <Breadcrumbs>
@@ -244,38 +256,25 @@ const SingleCycle: React.FC<Props> = () => {
           </Breadcrumbs>
         }
         left={
-          <Menu as="div" className="relative inline-block">
-            <Menu.Button className="flex items-center gap-1 border ml-2 px-2 py-1 rounded hover:bg-gray-100 text-xs font-medium">
-              <ArrowPathIcon className="h-3 w-3" />
-              {cycles?.find((c) => c.id === cycleId)?.name}
-            </Menu.Button>
-
-            <Transition
-              as={React.Fragment}
-              enter="transition ease-out duration-100"
-              enterFrom="transform opacity-0 scale-95"
-              enterTo="transform opacity-100 scale-100"
-              leave="transition ease-in duration-75"
-              leaveFrom="transform opacity-100 scale-100"
-              leaveTo="transform opacity-0 scale-95"
-            >
-              <Menu.Items className="absolute left-3 mt-2 p-1 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
-                {cycles?.map((cycle) => (
-                  <Menu.Item key={cycle.id}>
-                    <Link href={`/projects/${activeProject?.id}/cycles/${cycle.id}`}>
-                      <a
-                        className={`block text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full ${
-                          cycle.id === cycleId ? "bg-theme text-white" : ""
-                        }`}
-                      >
-                        {cycle.name}
-                      </a>
-                    </Link>
-                  </Menu.Item>
-                ))}
-              </Menu.Items>
-            </Transition>
-          </Menu>
+          <CustomMenu
+            label={
+              <>
+                <ArrowPathIcon className="h-3 w-3" />
+                {cycles?.find((c) => c.id === cycleId)?.name}
+              </>
+            }
+            className="ml-1.5"
+          >
+            {cycles?.map((cycle) => (
+              <CustomMenu.MenuItem
+                key={cycle.id}
+                renderAs="a"
+                href={`/projects/${activeProject?.id}/cycles/${cycle.id}`}
+              >
+                {cycle.name}
+              </CustomMenu.MenuItem>
+            ))}
+          </CustomMenu>
         }
         right={
           <div className="flex items-center gap-2">
@@ -327,7 +326,7 @@ const SingleCycle: React.FC<Props> = () => {
                     leaveFrom="opacity-100 translate-y-0"
                     leaveTo="opacity-0 translate-y-1"
                   >
-                    <Popover.Panel className="absolute mr-5 right-1/2 z-10 mt-1 w-screen max-w-xs translate-x-1/2 transform p-3 bg-white rounded-lg shadow-lg overflow-hidden">
+                    <Popover.Panel className="absolute right-0 z-10 mt-1 w-screen max-w-xs transform p-3 bg-white rounded-lg shadow-lg overflow-hidden">
                       <div className="relative flex flex-col gap-1 gap-y-4">
                         <div className="flex justify-between items-center">
                           <h4 className="text-sm text-gray-600">Group by</h4>
@@ -336,6 +335,7 @@ const SingleCycle: React.FC<Props> = () => {
                               groupByOptions.find((option) => option.key === groupByProperty)
                                 ?.name ?? "Select"
                             }
+                            width="auto"
                           >
                             {groupByOptions.map((option) => (
                               <CustomMenu.MenuItem
@@ -354,6 +354,7 @@ const SingleCycle: React.FC<Props> = () => {
                               orderByOptions.find((option) => option.key === orderBy)?.name ??
                               "Select"
                             }
+                            width="auto"
                           >
                             {orderByOptions.map((option) =>
                               groupByProperty === "priority" && option.key === "priority" ? null : (
@@ -374,6 +375,7 @@ const SingleCycle: React.FC<Props> = () => {
                               filterIssueOptions.find((option) => option.key === filterIssue)
                                 ?.name ?? "Select"
                             }
+                            width="auto"
                           >
                             {filterIssueOptions.map((option) => (
                               <CustomMenu.MenuItem
@@ -420,9 +422,7 @@ const SingleCycle: React.FC<Props> = () => {
             selectedGroup={groupByProperty}
             properties={properties}
             openCreateIssueModal={openCreateIssueModal}
-            openIssuesListModal={() => {
-              return;
-            }}
+            openIssuesListModal={openIssuesListModal}
             removeIssueFromCycle={removeIssueFromCycle}
           />
         ) : (
@@ -434,9 +434,7 @@ const SingleCycle: React.FC<Props> = () => {
               selectedGroup={groupByProperty}
               members={members}
               openCreateIssueModal={openCreateIssueModal}
-              openIssuesListModal={() => {
-                return;
-              }}
+              openIssuesListModal={openIssuesListModal}
             />
           </div>
         )}
diff --git a/apps/app/pages/projects/[projectId]/cycles/index.tsx b/apps/app/pages/projects/[projectId]/cycles/index.tsx
index 16d3d2227..1106d5134 100644
--- a/apps/app/pages/projects/[projectId]/cycles/index.tsx
+++ b/apps/app/pages/projects/[projectId]/cycles/index.tsx
@@ -5,46 +5,31 @@ import { useRouter } from "next/router";
 import type { NextPage } from "next";
 // swr
 import useSWR from "swr";
+// hoc
+import withAuth from "lib/hoc/withAuthWrapper";
 // services
 import sprintService from "lib/services/cycles.service";
 // hooks
 import useUser from "lib/hooks/useUser";
-import useIssuesProperties from "lib/hooks/useIssuesProperties";
-// fetching keys
-import { CYCLE_LIST } from "constants/fetch-keys";
-// hoc
-import withAuth from "lib/hoc/withAuthWrapper";
 // layouts
 import AppLayout from "layouts/app-layout";
 // components
-import CycleIssuesListModal from "components/project/cycles/CycleIssuesListModal";
-import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
-import ConfirmSprintDeletion from "components/project/cycles/ConfirmCycleDeletion";
-import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal";
-import CreateUpdateSprintsModal from "components/project/cycles/CreateUpdateCyclesModal";
+import CreateUpdateCycleModal from "components/project/cycles/create-update-cycle-modal";
 import CycleStatsView from "components/project/cycles/stats-view";
-// headless ui
-import { Popover, Transition } from "@headlessui/react";
 // ui
 import { BreadcrumbItem, Breadcrumbs, HeaderButton, Spinner, EmptySpace, EmptySpaceItem } from "ui";
 // icons
-import { ArrowPathIcon, ChevronDownIcon, PlusIcon } from "@heroicons/react/24/outline";
+import { ArrowPathIcon, PlusIcon } from "@heroicons/react/24/outline";
 // types
-import { IIssue, ICycle, SelectSprintType, SelectIssue, Properties } from "types";
-// constants
-import { classNames, replaceUnderscoreIfSnakeCase } from "constants/common";
+import { ICycle, SelectSprintType } from "types";
+// fetching keys
+import { CYCLE_LIST } from "constants/fetch-keys";
 
 const ProjectSprints: NextPage = () => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [selectedSprint, setSelectedSprint] = useState<SelectSprintType>();
+  const [selectedCycle, setSelectedCycle] = useState<SelectSprintType>();
+  const [createUpdateCycleModal, setCreateUpdateCycleModal] = useState(false);
 
-  const [isIssueModalOpen, setIsIssueModalOpen] = useState(false);
-  const [selectedIssues, setSelectedIssues] = useState<SelectIssue>();
-  const [deleteIssue, setDeleteIssue] = useState<string | undefined>();
-  const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false);
-  const [cycleId, setCycleId] = useState("");
-
-  const { activeWorkspace, activeProject, issues } = useUser();
+  const { activeWorkspace, activeProject } = useUser();
 
   const router = useRouter();
 
@@ -57,45 +42,13 @@ const ProjectSprints: NextPage = () => {
       : null
   );
 
-  const [properties, setProperties] = useIssuesProperties(
-    activeWorkspace?.slug,
-    projectId as string
-  );
-
-  const openCreateIssueModal = (
-    cycleId: string,
-    issue?: IIssue,
-    actionType: "create" | "edit" | "delete" = "create"
-  ) => {
-    const cycle = cycles?.find((cycle) => cycle.id === cycleId);
-    if (cycle) {
-      setSelectedSprint({
-        ...cycle,
-        actionType: "create-issue",
-      });
-      if (issue) setSelectedIssues({ ...issue, actionType });
-      setIsIssueModalOpen(true);
-    }
-  };
-
-  const openIssuesListModal = (cycleId: string) => {
-    setCycleId(cycleId);
-    setCycleIssuesListModal(true);
-  };
-
   useEffect(() => {
-    if (isOpen) return;
+    if (createUpdateCycleModal) return;
     const timer = setTimeout(() => {
-      setSelectedSprint(undefined);
+      setSelectedCycle(undefined);
       clearTimeout(timer);
     }, 500);
-  }, [isOpen]);
-
-  useEffect(() => {
-    if (selectedIssues?.actionType === "delete") {
-      setDeleteIssue(selectedIssues.id);
-    }
-  }, [selectedIssues]);
+  }, [createUpdateCycleModal]);
 
   return (
     <AppLayout
@@ -109,101 +62,33 @@ const ProjectSprints: NextPage = () => {
         </Breadcrumbs>
       }
       right={
-        <div className="flex items-center gap-2">
-          <Popover className="relative">
-            {({ open }) => (
-              <>
-                <Popover.Button
-                  className={classNames(
-                    open ? "bg-gray-100 text-gray-900" : "text-gray-500",
-                    "group flex gap-2 items-center rounded-md bg-transparent text-xs font-medium hover:bg-gray-100 hover:text-gray-900 focus:outline-none border p-2"
-                  )}
-                >
-                  <span>View</span>
-                  <ChevronDownIcon className="h-4 w-4" aria-hidden="true" />
-                </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 mr-5 right-1/2 z-10 mt-1 w-screen max-w-xs translate-x-1/2 transform p-4 bg-white rounded-lg shadow-lg overflow-hidden">
-                    <div className="relative flex flex-col gap-1 gap-y-4">
-                      <div className="relative flex flex-col gap-1">
-                        <h4 className="text-base text-gray-600">Properties</h4>
-                        <div>
-                          {Object.keys(properties).map((key) => (
-                            <button
-                              key={key}
-                              type="button"
-                              className={`px-2 py-1 inline capitalize rounded border border-theme text-sm m-1 ${
-                                properties[key as keyof Properties]
-                                  ? "border-theme bg-theme text-white"
-                                  : ""
-                              }`}
-                              onClick={() => setProperties(key as keyof Properties)}
-                            >
-                              {replaceUnderscoreIfSnakeCase(key)}
-                            </button>
-                          ))}
-                        </div>
-                      </div>
-                    </div>
-                  </Popover.Panel>
-                </Transition>
-              </>
-            )}
-          </Popover>
-          <HeaderButton Icon={PlusIcon} label="Add Cycle" onClick={() => setIsOpen(true)} />
-        </div>
+        <HeaderButton
+          Icon={PlusIcon}
+          label="Add Cycle"
+          onClick={() => {
+            const e = new KeyboardEvent("keydown", {
+              ctrlKey: true,
+              key: "q",
+            });
+            document.dispatchEvent(e);
+          }}
+        />
       }
     >
-      <CreateUpdateSprintsModal
-        isOpen={
-          isOpen &&
-          selectedSprint?.actionType !== "delete" &&
-          selectedSprint?.actionType !== "create-issue"
-        }
-        setIsOpen={setIsOpen}
-        data={selectedSprint}
+      <CreateUpdateCycleModal
+        isOpen={createUpdateCycleModal}
+        setIsOpen={setCreateUpdateCycleModal}
         projectId={projectId as string}
-      />
-      <ConfirmSprintDeletion
-        isOpen={isOpen && !!selectedSprint && selectedSprint.actionType === "delete"}
-        setIsOpen={setIsOpen}
-        data={selectedSprint}
-      />
-      <ConfirmIssueDeletion
-        handleClose={() => setDeleteIssue(undefined)}
-        isOpen={!!deleteIssue}
-        data={selectedIssues}
-      />
-      <CreateUpdateIssuesModal
-        isOpen={
-          isIssueModalOpen &&
-          selectedSprint?.actionType === "create-issue" &&
-          selectedIssues?.actionType !== "delete"
-        }
-        data={selectedIssues}
-        prePopulateData={{ sprints: selectedSprint?.id }}
-        setIsOpen={setIsOpen}
-        projectId={projectId as string}
-      />
-      <CycleIssuesListModal
-        isOpen={cycleIssuesListModal}
-        handleClose={() => setCycleIssuesListModal(false)}
-        issues={issues}
-        cycleId={cycleId}
+        data={selectedCycle}
       />
       {cycles ? (
         cycles.length > 0 ? (
           <div className="space-y-5">
-            <CycleStatsView cycles={cycles} />
+            <CycleStatsView
+              cycles={cycles}
+              setCreateUpdateCycleModal={setCreateUpdateCycleModal}
+              setSelectedCycle={setSelectedCycle}
+            />
           </div>
         ) : (
           <div className="w-full h-full flex flex-col justify-center items-center px-4">
@@ -221,7 +106,7 @@ const ProjectSprints: NextPage = () => {
                   </span>
                 }
                 Icon={PlusIcon}
-                action={() => setIsOpen(true)}
+                action={() => setCreateUpdateCycleModal(true)}
               />
             </EmptySpace>
           </div>
diff --git a/apps/app/pages/projects/[projectId]/issues/[issueId].tsx b/apps/app/pages/projects/[projectId]/issues/[issueId].tsx
index 3940e3a1e..83d47f4ac 100644
--- a/apps/app/pages/projects/[projectId]/issues/[issueId].tsx
+++ b/apps/app/pages/projects/[projectId]/issues/[issueId].tsx
@@ -8,7 +8,7 @@ import React, { useCallback, useEffect, useState } from "react";
 // swr
 import useSWR, { mutate } from "swr";
 // react hook form
-import { useForm, Controller } from "react-hook-form";
+import { useForm } from "react-hook-form";
 // headless ui
 import { Disclosure, Menu, Tab, Transition } from "@headlessui/react";
 // services
@@ -28,7 +28,7 @@ import AppLayout from "layouts/app-layout";
 // components
 import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal";
 import IssueCommentSection from "components/project/issues/issue-detail/comment/IssueCommentSection";
-import AddAsSubIssue from "components/command-palette/addAsSubIssue";
+import AddAsSubIssue from "components/project/issues/issue-detail/add-as-sub-issue";
 import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
 // common
 import { debounce } from "constants/common";
diff --git a/apps/app/pages/projects/[projectId]/issues/index.tsx b/apps/app/pages/projects/[projectId]/issues/index.tsx
index da5df3104..12657cf60 100644
--- a/apps/app/pages/projects/[projectId]/issues/index.tsx
+++ b/apps/app/pages/projects/[projectId]/issues/index.tsx
@@ -219,6 +219,7 @@ const ProjectIssues: NextPage = () => {
                             groupByOptions.find((option) => option.key === groupByProperty)?.name ??
                             "Select"
                           }
+                          width="auto"
                         >
                           {groupByOptions.map((option) => (
                             <CustomMenu.MenuItem
@@ -237,6 +238,7 @@ const ProjectIssues: NextPage = () => {
                             orderByOptions.find((option) => option.key === orderBy)?.name ??
                             "Select"
                           }
+                          width="auto"
                         >
                           {orderByOptions.map((option) =>
                             groupByProperty === "priority" && option.key === "priority" ? null : (
@@ -257,6 +259,7 @@ const ProjectIssues: NextPage = () => {
                             filterIssueOptions.find((option) => option.key === filterIssue)?.name ??
                             "Select"
                           }
+                          width="auto"
                         >
                           {filterIssueOptions.map((option) => (
                             <CustomMenu.MenuItem
diff --git a/apps/app/pages/projects/[projectId]/modules/index.tsx b/apps/app/pages/projects/[projectId]/modules/index.tsx
new file mode 100644
index 000000000..d5055dd44
--- /dev/null
+++ b/apps/app/pages/projects/[projectId]/modules/index.tsx
@@ -0,0 +1,104 @@
+// next
+import type { NextPage } from "next";
+import useSWR from "swr";
+import { useRouter } from "next/router";
+// layouts
+import AppLayout from "layouts/app-layout";
+// hoc
+import withAuth from "lib/hoc/withAuthWrapper";
+// services
+import modulesService from "lib/services/modules.service";
+// hooks
+import useUser from "lib/hooks/useUser";
+// ui
+import { BreadcrumbItem, Breadcrumbs, EmptySpace, EmptySpaceItem, HeaderButton, Spinner } from "ui";
+// icons
+import { PlusIcon, RectangleGroupIcon } from "@heroicons/react/24/outline";
+// types
+import { IModule } from "types/modules";
+// fetch-keys
+import { MODULE_LIST } from "constants/fetch-keys";
+
+const ProjectModules: NextPage = () => {
+  const { activeWorkspace, activeProject } = useUser();
+
+  const router = useRouter();
+  const { projectId } = router.query;
+
+  const { data: modules } = useSWR<IModule[]>(
+    activeWorkspace && projectId ? MODULE_LIST(projectId as string) : null,
+    activeWorkspace && projectId
+      ? () => modulesService.getModules(activeWorkspace.slug, projectId as string)
+      : null
+  );
+
+  console.log(modules);
+
+  return (
+    <AppLayout
+      meta={{
+        title: "Plane - Modules",
+      }}
+      breadcrumbs={
+        <Breadcrumbs>
+          <BreadcrumbItem title="Projects" link="/projects" />
+          <BreadcrumbItem title={`${activeProject?.name ?? "Project"} Modules`} />
+        </Breadcrumbs>
+      }
+      right={
+        <HeaderButton
+          Icon={PlusIcon}
+          label="Add Module"
+          onClick={() => {
+            const e = new KeyboardEvent("keydown", {
+              ctrlKey: true,
+              key: "m",
+            });
+            document.dispatchEvent(e);
+          }}
+        />
+      }
+    >
+      {modules ? (
+        modules.length > 0 ? (
+          <div className="space-y-5">
+            {modules.map((module) => (
+              <div key={module.id} className="bg-white p-3 rounded-md">
+                <h3>{module.name}</h3>
+                <p className="text-gray-500 text-sm mt-2">{module.description}</p>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="w-full h-full flex flex-col justify-center items-center px-4">
+            <EmptySpace
+              title="You don't have any module yet."
+              description="A cycle is a fixed time period where a team commits to a set number of issues from their backlog. Cycles are usually one, two, or four weeks long."
+              Icon={RectangleGroupIcon}
+            >
+              <EmptySpaceItem
+                title="Create a new module"
+                description={
+                  <span>
+                    Use <pre className="inline bg-gray-100 px-2 py-1 rounded">Ctrl/Command + Q</pre>{" "}
+                    shortcut to create a new cycle
+                  </span>
+                }
+                Icon={PlusIcon}
+                action={() => {
+                  return;
+                }}
+              />
+            </EmptySpace>
+          </div>
+        )
+      ) : (
+        <div className="w-full h-full flex justify-center items-center">
+          <Spinner />
+        </div>
+      )}
+    </AppLayout>
+  );
+};
+
+export default withAuth(ProjectModules);
diff --git a/apps/app/pages/projects/index.tsx b/apps/app/pages/projects/index.tsx
index f8cfd12b5..fdc75542d 100644
--- a/apps/app/pages/projects/index.tsx
+++ b/apps/app/pages/projects/index.tsx
@@ -57,7 +57,23 @@ const Projects: NextPage = () => {
   };
 
   return (
-    <AppLayout>
+    <AppLayout
+      breadcrumbs={
+        <Breadcrumbs>
+          <BreadcrumbItem title={`${activeWorkspace?.name ?? "Workspace"} Projects`} />
+        </Breadcrumbs>
+      }
+      right={
+        <HeaderButton
+          Icon={PlusIcon}
+          label="Add Project"
+          onClick={() => {
+            const e = new KeyboardEvent("keydown", { key: "p", ctrlKey: true });
+            document.dispatchEvent(e);
+          }}
+        />
+      }
+    >
       <ConfirmProjectDeletion
         isOpen={!!deleteProject}
         onClose={() => setDeleteProject(null)}
@@ -91,20 +107,6 @@ const Projects: NextPage = () => {
             </div>
           ) : (
             <div className="h-full w-full space-y-5">
-              <Breadcrumbs>
-                <BreadcrumbItem title={`${activeWorkspace?.name ?? "Workspace"} Projects`} />
-              </Breadcrumbs>
-              <div className="flex items-center justify-between cursor-pointer w-full">
-                <h2 className="text-2xl font-medium">Projects</h2>
-                <HeaderButton
-                  Icon={PlusIcon}
-                  label="Add Project"
-                  onClick={() => {
-                    const e = new KeyboardEvent("keydown", { key: "p", ctrlKey: true });
-                    document.dispatchEvent(e);
-                  }}
-                />
-              </div>
               <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                 {projects.map((item) => (
                   <ProjectMemberInvitations
diff --git a/apps/app/types/sprints.d.ts b/apps/app/types/cycles.d.ts
similarity index 94%
rename from apps/app/types/sprints.d.ts
rename to apps/app/types/cycles.d.ts
index 4603552fa..d696cfbb7 100644
--- a/apps/app/types/sprints.d.ts
+++ b/apps/app/types/cycles.d.ts
@@ -1,4 +1,4 @@
-import type { IUser, IIssue } from "./";
+import type { IUser, IIssue } from ".";
 
 export interface ICycle {
   id: string;
diff --git a/apps/app/types/index.d.ts b/apps/app/types/index.d.ts
index 86b48116c..018861fce 100644
--- a/apps/app/types/index.d.ts
+++ b/apps/app/types/index.d.ts
@@ -1,10 +1,11 @@
 export * from "./users";
 export * from "./workspace";
-export * from "./sprints";
+export * from "./cycles";
 export * from "./projects";
 export * from "./state";
 export * from "./invitation";
 export * from "./issues";
+export * from "./modules";
 
 export type NestedKeyOf<ObjectType extends object> = {
   [Key in keyof ObjectType & (string | number)]: ObjectType[Key] extends object
diff --git a/apps/app/types/issues.d.ts b/apps/app/types/issues.d.ts
index 484b54eb9..1a2fb9b38 100644
--- a/apps/app/types/issues.d.ts
+++ b/apps/app/types/issues.d.ts
@@ -1,4 +1,4 @@
-import type { IState, IUser, IProject } from "./";
+import type { IState, IUser, IProject, ICycle } from "./";
 
 export interface IssueResponse {
   next_cursor: string;
@@ -17,6 +17,7 @@ export interface IIssue {
   label_details: any[];
   assignee_details: IUser[];
   assignees_list: string[];
+  bridge?: string;
   blocked_by_issue_details: any[];
   blocked_issues: BlockeIssue[];
   blocker_issues: BlockeIssue[];
@@ -26,6 +27,18 @@ export interface IIssue {
   updated_at: Date;
   name: string;
   // TODO change type of description
+  issue_cycle: {
+    created_at: Date;
+    created_by: string;
+    cycle: string;
+    cycle_detail: ICycle;
+    id: string;
+    issue: string;
+    project: string;
+    updated_at: Date;
+    updated_by: string;
+    workspace: string;
+  };
   description: any;
   priority: string | null;
   start_date: string | null;
diff --git a/apps/app/types/modules.d.ts b/apps/app/types/modules.d.ts
new file mode 100644
index 000000000..f6d6d3acb
--- /dev/null
+++ b/apps/app/types/modules.d.ts
@@ -0,0 +1,28 @@
+import type { IUser, IIssue, IProject } from ".";
+
+export interface IModule {
+  created_at: Date;
+  created_by: string;
+  description: string;
+  description_text: any;
+  description_html: any;
+  id: string;
+  lead: string | null;
+  lead_detail: IUserLite;
+  members_list: string[];
+  name: string;
+  project: string;
+  project_detail: IProject;
+  start_date: Date | null;
+  status: "backlog" | "planned" | "in-progress" | "paused" | "completed" | "cancelled";
+  target_date: Date | null;
+  updated_at: Date;
+  updated_by: string;
+  workspace: string;
+}
+
+export type SelectModuleType =
+  | (IModule & { actionType: "edit" | "delete" | "create-issue" })
+  | undefined;
+
+export type SelectIssue = (IIssue & { actionType: "edit" | "delete" | "create" }) | undefined;
diff --git a/apps/app/ui/Button/index.tsx b/apps/app/ui/Button/index.tsx
index 878a6678d..3aea14920 100644
--- a/apps/app/ui/Button/index.tsx
+++ b/apps/app/ui/Button/index.tsx
@@ -20,7 +20,7 @@ const Button = React.forwardRef<HTMLButtonElement, Props>(
       onClick,
       type = "button",
       size = "sm",
-      className,
+      className = "",
       theme = "primary",
       disabled = false,
     },
@@ -39,7 +39,7 @@ const Button = React.forwardRef<HTMLButtonElement, Props>(
                 disabled ? "opacity-70" : ""
               } text-white shadow-sm bg-theme hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 border border-transparent`
             : theme === "secondary"
-            ? "border bg-white"
+            ? "border bg-white hover:bg-gray-100"
             : theme === "success"
             ? `${
                 disabled ? "opacity-70" : ""
@@ -54,7 +54,7 @@ const Button = React.forwardRef<HTMLButtonElement, Props>(
             : size === "lg"
             ? "px-4 py-2 text-base"
             : "px-2.5 py-2 text-sm",
-          className || ""
+          className
         )}
       >
         {children}
diff --git a/apps/app/ui/CustomMenu/index.tsx b/apps/app/ui/CustomMenu/index.tsx
index 9618e6da1..211c413c1 100644
--- a/apps/app/ui/CustomMenu/index.tsx
+++ b/apps/app/ui/CustomMenu/index.tsx
@@ -4,28 +4,41 @@ import Link from "next/link";
 // headless ui
 import { Menu, Transition } from "@headlessui/react";
 // icons
-import { ChevronDownIcon } from "@heroicons/react/20/solid";
-// commons
-import { classNames } from "constants/common";
+import { ChevronDownIcon, EllipsisHorizontalIcon } from "@heroicons/react/24/outline";
 // types
 import type { MenuItemProps, Props } from "./types";
+// constants
+import { classNames } from "constants/common";
 
-const CustomMenu = ({ children, label, textAlignment }: Props) => {
+const CustomMenu = ({
+  children,
+  label,
+  className = "",
+  ellipsis = false,
+  width,
+  textAlignment,
+}: Props) => {
   return (
-    <Menu as="div" className="relative inline-block text-left">
+    <Menu as="div" className={`relative text-left ${className}`}>
       <div>
-        <Menu.Button
-          className={`inline-flex w-32 justify-between gap-x-4 rounded-md border border-gray-300 bg-white px-4 py-1 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-100 ${
-            textAlignment === "right"
-              ? "text-right"
-              : textAlignment === "center"
-              ? "text-center"
-              : "text-left"
-          }`}
-        >
-          <span className="truncate w-20">{label}</span>
-          <ChevronDownIcon className="-mr-1 ml-2 h-5 w-5" aria-hidden="true" />
-        </Menu.Button>
+        {ellipsis ? (
+          <Menu.Button className="grid relative place-items-center hover:bg-gray-100 rounded p-1 focus:outline-none">
+            <EllipsisHorizontalIcon className="h-4 w-4" />
+          </Menu.Button>
+        ) : (
+          <Menu.Button
+            className={`flex justify-between items-center gap-1 hover:bg-gray-100 border rounded-md shadow-sm px-2 w-full py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300 ${
+              textAlignment === "right"
+                ? "text-right"
+                : textAlignment === "center"
+                ? "text-center"
+                : "text-left"
+            }`}
+          >
+            {label}
+            <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
+          </Menu.Button>
+        )}
       </div>
 
       <Transition
@@ -37,7 +50,11 @@ const CustomMenu = ({ children, label, textAlignment }: Props) => {
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Menu.Items className="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+        <Menu.Items
+          className={`absolute right-0 z-10 mt-2 origin-top-right rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
+            width === "auto" ? "min-w-full whitespace-nowrap" : "w-56"
+          }`}
+        >
           <div className="py-1">{children}</div>
         </Menu.Items>
       </Transition>
@@ -48,14 +65,12 @@ const CustomMenu = ({ children, label, textAlignment }: Props) => {
 const MenuItem: React.FC<MenuItemProps> = ({ children, renderAs, href, onClick }) => {
   return (
     <Menu.Item>
-      {({ active }) =>
+      {({ active, close }) =>
         renderAs === "a" ? (
           <Link href={href ?? ""}>
             <a
-              className={classNames(
-                active ? "bg-gray-100 text-gray-900" : "text-gray-700",
-                "block px-4 py-2 text-sm"
-              )}
+              className="block p-2 text-gray-700 hover:bg-indigo-50 hover:text-gray-900"
+              onClick={close}
             >
               {children}
             </a>
@@ -65,8 +80,8 @@ const MenuItem: React.FC<MenuItemProps> = ({ children, renderAs, href, onClick }
             type="button"
             onClick={onClick}
             className={classNames(
-              active ? "bg-gray-100 text-gray-900" : "text-gray-700",
-              "block w-full px-4 py-2 text-left text-sm"
+              active ? "bg-indigo-50 text-gray-900" : "text-gray-700",
+              "block w-full p-2 text-left"
             )}
           >
             {children}
diff --git a/apps/app/ui/CustomMenu/types.d.ts b/apps/app/ui/CustomMenu/types.d.ts
index ccf2b931a..b3f3c9552 100644
--- a/apps/app/ui/CustomMenu/types.d.ts
+++ b/apps/app/ui/CustomMenu/types.d.ts
@@ -1,6 +1,9 @@
 export type Props = {
   children: React.ReactNode;
-  label: string;
+  label?: string | JSX.Element;
+  className?: string;
+  ellipsis?: boolean;
+  width?: "auto";
   textAlignment?: "left" | "center" | "right";
 };
 
diff --git a/apps/app/ui/custom-select/index.tsx b/apps/app/ui/custom-select/index.tsx
new file mode 100644
index 000000000..5963a039c
--- /dev/null
+++ b/apps/app/ui/custom-select/index.tsx
@@ -0,0 +1,78 @@
+import React from "react";
+// headless ui
+import { Listbox, Transition } from "@headlessui/react";
+// icons
+import { ChevronDownIcon } from "@heroicons/react/20/solid";
+
+type CustomSelectProps = {
+  value: any;
+  onChange: (props: any) => void;
+  children: React.ReactNode;
+  label: string | JSX.Element;
+  textAlignment?: "left" | "center" | "right";
+};
+
+const CustomSelect = ({ children, label, textAlignment, value, onChange }: CustomSelectProps) => {
+  return (
+    <Listbox
+      as="div"
+      value={value}
+      onChange={onChange}
+      className="relative text-left flex-shrink-0"
+    >
+      <div>
+        <Listbox.Button
+          className={`flex justify-between items-center gap-1 hover:bg-gray-100 border rounded-md shadow-sm px-2 w-full py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300 ${
+            textAlignment === "right"
+              ? "text-right"
+              : textAlignment === "center"
+              ? "text-center"
+              : "text-left"
+          }`}
+        >
+          {label}
+          <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
+        </Listbox.Button>
+      </div>
+
+      <Transition
+        as={React.Fragment}
+        enter="transition ease-out duration-100"
+        enterFrom="transform opacity-0 scale-95"
+        enterTo="transform opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="transform opacity-100 scale-100"
+        leaveTo="transform opacity-0 scale-95"
+      >
+        <Listbox.Options className="absolute right-0 z-10 mt-1 w-56 origin-top-right rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+          <div className="py-1">{children}</div>
+        </Listbox.Options>
+      </Transition>
+    </Listbox>
+  );
+};
+
+type OptionProps = {
+  children: string | JSX.Element;
+  value: string;
+  className?: string;
+};
+
+const Option: React.FC<OptionProps> = ({ children, value, className }) => {
+  return (
+    <Listbox.Option
+      value={value}
+      className={({ active, selected }) =>
+        `${
+          active || selected ? "bg-indigo-50" : ""
+        } flex items-center gap-2 text-gray-900 cursor-pointer select-none relative p-2 truncate ${className}`
+      }
+    >
+      {children}
+    </Listbox.Option>
+  );
+};
+
+CustomSelect.Option = Option;
+
+export default CustomSelect;

From e8249ee0f32dd0aaa056ba0457c06019296f78c6 Mon Sep 17 00:00:00 2001
From: pablohashescobar <nikhilschacko@gmail.com>
Date: Fri, 16 Dec 2022 22:41:06 +0530
Subject: [PATCH 06/10] build: update app.json add buildpacks

---
 app.json | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/app.json b/app.json
index 34941e9ab..c108979b8 100644
--- a/app.json
+++ b/app.json
@@ -8,13 +8,21 @@
   "stack": "container",
   "keywords": ["plane", "project management", "django", "next"],
   "addons": ["heroku-postgresql:mini", "heroku-redis:mini"],
+  "buildpacks": [
+    {
+      "url": "https://github.com/heroku/heroku-buildpack-python.git"
+    },
+    {
+      "url": "https://github.com/heroku/heroku-buildpack-nodejs#v176"
+    }
+  ],
   "env": {
     "EMAIL_HOST": {
       "description": "Email host to send emails from",
       "value": ""
     },
     "EMAIL_HOST_USER": {
-      "description" : "Email host to send emails from",
+      "description": "Email host to send emails from",
       "value": ""
     },
     "EMAIL_HOST_PASSWORD": {
@@ -22,7 +30,7 @@
       "value": ""
     },
     "AWS_REGION": {
-      "description" : "AWS Region to use for S3",
+      "description": "AWS Region to use for S3",
       "value": "false"
     },
     "AWS_ACCESS_KEY_ID": {
@@ -66,4 +74,4 @@
       "value": ""
     }
   }
-}
\ No newline at end of file
+}

From 1367965088f9ff25245cef9bfd86120322d0a759 Mon Sep 17 00:00:00 2001
From: pablohashescobar <nikhilschacko@gmail.com>
Date: Fri, 16 Dec 2022 22:45:33 +0530
Subject: [PATCH 07/10] build:  update thestack in heroku app.json

---
 app.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app.json b/app.json
index c108979b8..017911920 100644
--- a/app.json
+++ b/app.json
@@ -5,7 +5,7 @@
   "logo": "https://avatars.githubusercontent.com/u/115727700?s=200&v=4",
   "website": "https://plane.so/",
   "success_url": "/",
-  "stack": "container",
+  "stack": "heroku-22",
   "keywords": ["plane", "project management", "django", "next"],
   "addons": ["heroku-postgresql:mini", "heroku-redis:mini"],
   "buildpacks": [

From 378199c663bb33e02704fe6c75e97bae9dd3ebbd Mon Sep 17 00:00:00 2001
From: vamsi <vamsi.kurama@gmail.com>
Date: Sat, 17 Dec 2022 01:10:10 +0530
Subject: [PATCH 08/10] dev: imports errors on casing issues

---
 apps/app/layouts/DefaultLayout.tsx   | 2 --
 apps/app/layouts/app-layout.tsx      | 4 ++--
 apps/app/layouts/settings-layout.tsx | 6 +++---
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/apps/app/layouts/DefaultLayout.tsx b/apps/app/layouts/DefaultLayout.tsx
index 082b00022..98a0efdb6 100644
--- a/apps/app/layouts/DefaultLayout.tsx
+++ b/apps/app/layouts/DefaultLayout.tsx
@@ -2,7 +2,6 @@ import React from "react";
 
 // layouts
 import Container from "layouts/container";
-import DefaultTopBar from "layouts/navbar/DefaultTopBar";
 
 // types
 import type { Props } from "./types";
@@ -11,7 +10,6 @@ const DefaultLayout: React.FC<Props> = ({ meta, children }) => {
   return (
     <Container meta={meta}>
       <div className="w-full h-screen overflow-auto bg-gray-50">
-        {/* <DefaultTopBar /> */}
         <>{children}</>
       </div>
     </Container>
diff --git a/apps/app/layouts/app-layout.tsx b/apps/app/layouts/app-layout.tsx
index ff28154bb..9bc8c2dbb 100644
--- a/apps/app/layouts/app-layout.tsx
+++ b/apps/app/layouts/app-layout.tsx
@@ -6,8 +6,8 @@ import { useRouter } from "next/router";
 import useUser from "lib/hooks/useUser";
 // layouts
 import Container from "layouts/container";
-import Sidebar from "layouts/navbar/main-sidebar";
-import Header from "layouts/navbar/Header";
+import Sidebar from "layouts/Navbar/main-sidebar";
+import Header from "layouts/Navbar/header";
 // components
 import CreateProjectModal from "components/project/create-project-modal";
 // types
diff --git a/apps/app/layouts/settings-layout.tsx b/apps/app/layouts/settings-layout.tsx
index 38e360c00..c9c3dd2bd 100644
--- a/apps/app/layouts/settings-layout.tsx
+++ b/apps/app/layouts/settings-layout.tsx
@@ -6,9 +6,9 @@ import { useRouter } from "next/router";
 import useUser from "lib/hooks/useUser";
 // layouts
 import Container from "layouts/container";
-import Sidebar from "layouts/navbar/main-sidebar";
-import SettingsSidebar from "layouts/navbar/settings-sidebar";
-import Header from "layouts/navbar/Header";
+import Sidebar from "layouts/Navbar/main-sidebar";
+import SettingsSidebar from "layouts/Navbar/settings-sidebar";
+import Header from "layouts/Navbar/header";
 // components
 import CreateProjectModal from "components/project/create-project-modal";
 // types

From 81c0d374c2289defdeb53f57634edb0da79e5aa6 Mon Sep 17 00:00:00 2001
From: vamsi <vamsi.kurama@gmail.com>
Date: Sat, 17 Dec 2022 01:18:26 +0530
Subject: [PATCH 09/10] dev: imports errors on git casing issues

---
 apps/app/layouts/app-layout.tsx                          | 4 ++--
 apps/app/layouts/{Navbar => navbar}/DefaultTopBar.tsx    | 0
 apps/app/layouts/{Navbar => navbar}/Header.tsx           | 0
 apps/app/layouts/{Navbar => navbar}/main-sidebar.tsx     | 0
 apps/app/layouts/{Navbar => navbar}/settings-sidebar.tsx | 0
 apps/app/layouts/settings-layout.tsx                     | 6 +++---
 6 files changed, 5 insertions(+), 5 deletions(-)
 rename apps/app/layouts/{Navbar => navbar}/DefaultTopBar.tsx (100%)
 rename apps/app/layouts/{Navbar => navbar}/Header.tsx (100%)
 rename apps/app/layouts/{Navbar => navbar}/main-sidebar.tsx (100%)
 rename apps/app/layouts/{Navbar => navbar}/settings-sidebar.tsx (100%)

diff --git a/apps/app/layouts/app-layout.tsx b/apps/app/layouts/app-layout.tsx
index 9bc8c2dbb..db9801300 100644
--- a/apps/app/layouts/app-layout.tsx
+++ b/apps/app/layouts/app-layout.tsx
@@ -6,8 +6,8 @@ import { useRouter } from "next/router";
 import useUser from "lib/hooks/useUser";
 // layouts
 import Container from "layouts/container";
-import Sidebar from "layouts/Navbar/main-sidebar";
-import Header from "layouts/Navbar/header";
+import Sidebar from "layouts/navbar/main-sidebar";
+import Header from "layouts/navbar/header";
 // components
 import CreateProjectModal from "components/project/create-project-modal";
 // types
diff --git a/apps/app/layouts/Navbar/DefaultTopBar.tsx b/apps/app/layouts/navbar/DefaultTopBar.tsx
similarity index 100%
rename from apps/app/layouts/Navbar/DefaultTopBar.tsx
rename to apps/app/layouts/navbar/DefaultTopBar.tsx
diff --git a/apps/app/layouts/Navbar/Header.tsx b/apps/app/layouts/navbar/Header.tsx
similarity index 100%
rename from apps/app/layouts/Navbar/Header.tsx
rename to apps/app/layouts/navbar/Header.tsx
diff --git a/apps/app/layouts/Navbar/main-sidebar.tsx b/apps/app/layouts/navbar/main-sidebar.tsx
similarity index 100%
rename from apps/app/layouts/Navbar/main-sidebar.tsx
rename to apps/app/layouts/navbar/main-sidebar.tsx
diff --git a/apps/app/layouts/Navbar/settings-sidebar.tsx b/apps/app/layouts/navbar/settings-sidebar.tsx
similarity index 100%
rename from apps/app/layouts/Navbar/settings-sidebar.tsx
rename to apps/app/layouts/navbar/settings-sidebar.tsx
diff --git a/apps/app/layouts/settings-layout.tsx b/apps/app/layouts/settings-layout.tsx
index c9c3dd2bd..80a1185b7 100644
--- a/apps/app/layouts/settings-layout.tsx
+++ b/apps/app/layouts/settings-layout.tsx
@@ -6,9 +6,9 @@ import { useRouter } from "next/router";
 import useUser from "lib/hooks/useUser";
 // layouts
 import Container from "layouts/container";
-import Sidebar from "layouts/Navbar/main-sidebar";
-import SettingsSidebar from "layouts/Navbar/settings-sidebar";
-import Header from "layouts/Navbar/header";
+import Sidebar from "layouts/navbar/main-sidebar";
+import SettingsSidebar from "layouts/navbar/settings-sidebar";
+import Header from "layouts/navbar/header";
 // components
 import CreateProjectModal from "components/project/create-project-modal";
 // types

From f12320874e716a3e8008b8d36b4621b05c3af0a8 Mon Sep 17 00:00:00 2001
From: vamsi <vamsi.kurama@gmail.com>
Date: Sat, 17 Dec 2022 01:35:19 +0530
Subject: [PATCH 10/10] dev: few more git casing issues

---
 apps/app/layouts/app-layout.tsx                                 | 2 +-
 apps/app/layouts/{Container.tsx => container.tsx}               | 0
 apps/app/layouts/navbar/{Header.tsx => header.tsx}              | 0
 apps/app/layouts/navbar/{main-sidebar.tsx => main-siderbar.tsx} | 0
 apps/app/layouts/settings-layout.tsx                            | 2 +-
 5 files changed, 2 insertions(+), 2 deletions(-)
 rename apps/app/layouts/{Container.tsx => container.tsx} (100%)
 rename apps/app/layouts/navbar/{Header.tsx => header.tsx} (100%)
 rename apps/app/layouts/navbar/{main-sidebar.tsx => main-siderbar.tsx} (100%)

diff --git a/apps/app/layouts/app-layout.tsx b/apps/app/layouts/app-layout.tsx
index db9801300..a50058b3b 100644
--- a/apps/app/layouts/app-layout.tsx
+++ b/apps/app/layouts/app-layout.tsx
@@ -6,7 +6,7 @@ import { useRouter } from "next/router";
 import useUser from "lib/hooks/useUser";
 // layouts
 import Container from "layouts/container";
-import Sidebar from "layouts/navbar/main-sidebar";
+import Sidebar from "layouts/navbar/main-siderbar";
 import Header from "layouts/navbar/header";
 // components
 import CreateProjectModal from "components/project/create-project-modal";
diff --git a/apps/app/layouts/Container.tsx b/apps/app/layouts/container.tsx
similarity index 100%
rename from apps/app/layouts/Container.tsx
rename to apps/app/layouts/container.tsx
diff --git a/apps/app/layouts/navbar/Header.tsx b/apps/app/layouts/navbar/header.tsx
similarity index 100%
rename from apps/app/layouts/navbar/Header.tsx
rename to apps/app/layouts/navbar/header.tsx
diff --git a/apps/app/layouts/navbar/main-sidebar.tsx b/apps/app/layouts/navbar/main-siderbar.tsx
similarity index 100%
rename from apps/app/layouts/navbar/main-sidebar.tsx
rename to apps/app/layouts/navbar/main-siderbar.tsx
diff --git a/apps/app/layouts/settings-layout.tsx b/apps/app/layouts/settings-layout.tsx
index 80a1185b7..1180ae9ce 100644
--- a/apps/app/layouts/settings-layout.tsx
+++ b/apps/app/layouts/settings-layout.tsx
@@ -6,7 +6,7 @@ import { useRouter } from "next/router";
 import useUser from "lib/hooks/useUser";
 // layouts
 import Container from "layouts/container";
-import Sidebar from "layouts/navbar/main-sidebar";
+import Sidebar from "layouts/navbar/main-siderbar";
 import SettingsSidebar from "layouts/navbar/settings-sidebar";
 import Header from "layouts/navbar/header";
 // components