diff --git a/apps/app/components/cycles/sidebar.tsx b/apps/app/components/cycles/sidebar.tsx
index c61102fb1..ce61afea6 100644
--- a/apps/app/components/cycles/sidebar.tsx
+++ b/apps/app/components/cycles/sidebar.tsx
@@ -6,7 +6,7 @@ import Image from "next/image";
 import { mutate } from "swr";
 
 // react-hook-form
-import { Controller, useForm } from "react-hook-form";
+import { useForm } from "react-hook-form";
 import { Popover, Transition } from "@headlessui/react";
 import DatePicker from "react-datepicker";
 // icons
@@ -19,7 +19,7 @@ import {
   UserIcon,
 } from "@heroicons/react/24/outline";
 // ui
-import { CustomSelect, Loader, ProgressBar } from "components/ui";
+import { Loader, ProgressBar } from "components/ui";
 // hooks
 import useToast from "hooks/use-toast";
 // services
@@ -36,17 +36,22 @@ import { renderDateFormat, renderShortNumericDateFormat } from "helpers/date-tim
 import { CycleIssueResponse, ICycle, IIssue } from "types";
 // fetch-keys
 import { CYCLE_DETAILS } from "constants/fetch-keys";
-// constants
-import { CYCLE_STATUS } from "constants/cycle";
 
 type Props = {
   issues: IIssue[];
   cycle: ICycle | undefined;
   isOpen: boolean;
   cycleIssues: CycleIssueResponse[];
+  cycleStatus: string;
 };
 
-export const CycleDetailsSidebar: React.FC<Props> = ({ issues, cycle, isOpen, cycleIssues }) => {
+export const CycleDetailsSidebar: React.FC<Props> = ({
+  issues,
+  cycle,
+  isOpen,
+  cycleIssues,
+  cycleStatus,
+}) => {
   const [cycleDeleteModal, setCycleDeleteModal] = useState(false);
 
   const router = useRouter();
@@ -60,7 +65,6 @@ export const CycleDetailsSidebar: React.FC<Props> = ({ issues, cycle, isOpen, cy
   const defaultValues: Partial<ICycle> = {
     start_date: new Date().toString(),
     end_date: new Date().toString(),
-    status: cycle?.status,
   };
 
   const groupedIssues = {
@@ -72,7 +76,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({ issues, cycle, isOpen, cy
     ...groupBy(cycleIssues ?? [], "issue_detail.state_detail.group"),
   };
 
-  const { reset, watch, control } = useForm({
+  const { reset } = useForm({
     defaultValues,
   });
 
@@ -118,32 +122,18 @@ export const CycleDetailsSidebar: React.FC<Props> = ({ issues, cycle, isOpen, cy
           <>
             <div className="flex gap-1 text-sm my-2">
               <div className="flex items-center ">
-                <Controller
-                  control={control}
-                  name="status"
-                  render={({ field: { value } }) => (
-                    <CustomSelect
-                      label={
-                        <span
-                          className={`flex items-center gap-1 text-left capitalize p-1 text-xs h-full w-full  text-gray-900`}
-                        >
-                          <Squares2X2Icon className="h-4 w-4 flex-shrink-0" />
-                          {watch("status")}
-                        </span>
-                      }
-                      value={value}
-                      onChange={(value: any) => {
-                        submitChanges({ status: value });
-                      }}
-                    >
-                      {CYCLE_STATUS.map((option) => (
-                        <CustomSelect.Option key={option.value} value={option.value}>
-                          <span className="text-xs">{option.label}</span>
-                        </CustomSelect.Option>
-                      ))}
-                    </CustomSelect>
-                  )}
-                />
+                <span
+                  className={`flex items-center gap-1 text-left capitalize p-1 text-xs h-full w-full  text-gray-900`}
+                >
+                  <Squares2X2Icon className="h-4 w-4 flex-shrink-0" />
+                  {cycleStatus === "current"
+                    ? "In Progress"
+                    : cycleStatus === "completed"
+                    ? "Completed"
+                    : cycleStatus === "upcoming"
+                    ? "Upcoming"
+                    : "Draft"}
+                </span>
               </div>
               <div className="flex justify-center items-center gap-2 rounded-md border bg-transparent h-full  p-2 px-4  text-xs font-medium text-gray-900 hover:bg-gray-100 hover:text-gray-900 focus:outline-none">
                 <Popover className="flex justify-center items-center relative  rounded-lg">
@@ -289,14 +279,16 @@ export const CycleDetailsSidebar: React.FC<Props> = ({ issues, cycle, isOpen, cy
                         </div>
                       ) : (
                         <div className="grid h-5 w-5 place-items-center rounded-full border-2 border-white bg-gray-700 capitalize text-white">
-                          {cycle.owned_by?.first_name && cycle.owned_by.first_name !== ""
-                            ? cycle.owned_by.first_name.charAt(0)
+                          {cycle.owned_by &&
+                          cycle.owned_by?.first_name &&
+                          cycle.owned_by?.first_name !== ""
+                            ? cycle.owned_by?.first_name.charAt(0)
                             : cycle.owned_by?.email.charAt(0)}
                         </div>
                       ))}
-                    {cycle.owned_by.first_name !== ""
-                      ? cycle.owned_by.first_name
-                      : cycle.owned_by.email}
+                    {cycle.owned_by?.first_name !== ""
+                      ? cycle.owned_by?.first_name
+                      : cycle.owned_by?.email}
                   </div>
                 </div>
                 <div className="flex flex-wrap items-center py-2">
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
index 771387877..e4c1a5e94 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
@@ -34,6 +34,8 @@ import {
   PROJECT_ISSUES_LIST,
   PROJECT_DETAILS,
   CYCLE_DETAILS,
+  CYCLE_COMPLETE_LIST,
+  CYCLE_CURRENT_AND_UPCOMING_LIST,
 } from "constants/fetch-keys";
 
 const SingleCycle: React.FC<UserAuth> = (props) => {
@@ -78,6 +80,40 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
       : null
   );
 
+  const { data: currentAndUpcomingCycles } = useSWR(
+    workspaceSlug && projectId ? CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () =>
+          cycleServices.getCurrentAndUpcomingCycles(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const { data: completedCycles } = useSWR(
+    workspaceSlug && projectId ? CYCLE_COMPLETE_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => cycleServices.getCompletedCycles(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const checkForInProgress = currentAndUpcomingCycles?.current_cycle?.filter(
+    (c) => c.id === cycleDetails?.id
+  );
+  const checkForUpcoming = currentAndUpcomingCycles?.upcoming_cycle?.filter(
+    (c) => c.id === cycleDetails?.id
+  );
+  const checkForInCompleted = completedCycles?.completed_cycles?.filter(
+    (c) => c.id === cycleDetails?.id
+  );
+
+  const cycleStatus =
+    checkForInCompleted && checkForInCompleted.length > 0
+      ? "completed"
+      : checkForInProgress && checkForInProgress.length > 0
+      ? "current"
+      : checkForUpcoming && checkForUpcoming.length > 0
+      ? "upcoming"
+      : "draft";
+
   const { data: cycleIssues } = useSWR<CycleIssueResponse[]>(
     workspaceSlug && projectId && cycleId ? CYCLE_ISSUES(cycleId as string) : null,
     workspaceSlug && projectId && cycleId
@@ -218,6 +254,7 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
           </div>
         )}
         <CycleDetailsSidebar
+          cycleStatus={cycleStatus}
           issues={cycleIssuesArray ?? []}
           cycle={cycleDetails}
           isOpen={cycleSidebar}
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
index 9c4c3fb8d..f690e0a16 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
@@ -25,7 +25,11 @@ import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 import { SelectCycleType } from "types";
 import type { NextPage, GetServerSidePropsContext } from "next";
 // fetching keys
-import { CYCLE_CURRENT_AND_UPCOMING_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
+import {
+  CYCLE_CURRENT_AND_UPCOMING_LIST,
+  CYCLE_DRAFT_LIST,
+  PROJECT_DETAILS,
+} from "constants/fetch-keys";
 
 const CompletedCyclesList = dynamic<CompletedCyclesListProps>(
   () => import("components/cycles").then((a) => a.CompletedCyclesList),
@@ -54,6 +58,13 @@ const ProjectCycles: NextPage = () => {
       : null
   );
 
+  const { data: draftCycles } = useSWR(
+    workspaceSlug && projectId ? CYCLE_DRAFT_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => cycleService.getDraftCycles(workspaceSlug as string, projectId as string)
+      : null
+  );
+
   const { data: currentAndUpcomingCycles } = useSWR(
     workspaceSlug && projectId ? CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string) : null,
     workspaceSlug && projectId
@@ -112,22 +123,29 @@ const ProjectCycles: NextPage = () => {
           <Tab.Group>
             <Tab.List
               as="div"
-              className="grid grid-cols-2 items-center gap-2 rounded-lg bg-gray-100 p-2 text-sm"
+              className="flex justify-between items-center gap-2 rounded-lg bg-gray-100 p-2 text-sm"
             >
               <Tab
                 className={({ selected }) =>
-                  `rounded-lg px-6 py-2 ${selected ? "bg-gray-300" : "hover:bg-gray-200"}`
+                  `w-1/3 rounded-lg px-6 py-2 ${selected ? "bg-gray-300" : "hover:bg-gray-200"}`
                 }
               >
                 Upcoming
               </Tab>
               <Tab
                 className={({ selected }) =>
-                  `rounded-lg px-6 py-2 ${selected ? "bg-gray-300" : "hover:bg-gray-200"}`
+                  `w-1/3 rounded-lg px-6 py-2 ${selected ? "bg-gray-300" : "hover:bg-gray-200"}`
                 }
               >
                 Completed
               </Tab>
+              <Tab
+                className={({ selected }) =>
+                  ` w-1/3 rounded-lg px-6 py-2 ${selected ? "bg-gray-300" : "hover:bg-gray-200"}`
+                }
+              >
+                Draft
+              </Tab>
             </Tab.List>
             <Tab.Panels>
               <Tab.Panel as="div" className="mt-8 space-y-5">
@@ -145,6 +163,14 @@ const ProjectCycles: NextPage = () => {
                 />
               </Tab.Panel>
             </Tab.Panels>
+            <Tab.Panel as="div" className="mt-8 space-y-5">
+              <CyclesList
+                cycles={draftCycles?.draft_cycles ?? []}
+                setCreateUpdateCycleModal={setCreateUpdateCycleModal}
+                setSelectedCycle={setSelectedCycle}
+                type="upcoming"
+              />
+            </Tab.Panel>
           </Tab.Group>
         </div>
       </div>