diff --git a/web/components/cycles/sidebar.tsx b/web/components/cycles/sidebar.tsx
index 17e3c0d19..cecdae5ec 100644
--- a/web/components/cycles/sidebar.tsx
+++ b/web/components/cycles/sidebar.tsx
@@ -270,7 +270,20 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
     ? Math.round((cycleDetails.completed_issues / cycleDetails.total_issues) * 100)
     : null;
 
-  if (!cycleDetails) return null;
+  if (!cycleDetails)
+    return (
+      <Loader className="px-5">
+        <div className="space-y-2">
+          <Loader.Item height="15px" width="50%" />
+          <Loader.Item height="15px" width="30%" />
+        </div>
+        <div className="mt-8 space-y-3">
+          <Loader.Item height="30px" />
+          <Loader.Item height="30px" />
+          <Loader.Item height="30px" />
+        </div>
+      </Loader>
+    );
 
   const endDate = new Date(cycleDetails.end_date ?? "");
   const startDate = new Date(cycleDetails.start_date ?? "");
@@ -300,57 +313,91 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
         />
       )}
 
-      {cycleDetails ? (
-        <>
-          <div className="flex items-center justify-between w-full">
-            <div>
-              <button
-                className="flex items-center justify-center h-5 w-5 rounded-full bg-custom-border-300"
-                onClick={() => handleClose()}
-              >
-                <ChevronRight className="h-3 w-3 text-white stroke-2" />
-              </button>
-            </div>
-            <div className="flex items-center gap-3.5">
-              <button onClick={handleCopyText}>
-                <LinkIcon className="h-3 w-3 text-custom-text-300" />
-              </button>
-              {!isCompleted && (
-                <CustomMenu width="lg" placement="bottom-end" ellipsis>
-                  <CustomMenu.MenuItem onClick={() => setCycleDeleteModal(true)}>
-                    <span className="flex items-center justify-start gap-2">
-                      <Trash2 className="h-3 w-3" />
-                      <span>Delete cycle</span>
-                    </span>
-                  </CustomMenu.MenuItem>
-                </CustomMenu>
-              )}
-            </div>
+      <>
+        <div className="flex items-center justify-between w-full">
+          <div>
+            <button
+              className="flex items-center justify-center h-5 w-5 rounded-full bg-custom-border-300"
+              onClick={() => handleClose()}
+            >
+              <ChevronRight className="h-3 w-3 text-white stroke-2" />
+            </button>
           </div>
+          <div className="flex items-center gap-3.5">
+            <button onClick={handleCopyText}>
+              <LinkIcon className="h-3 w-3 text-custom-text-300" />
+            </button>
+            {!isCompleted && (
+              <CustomMenu width="lg" placement="bottom-end" ellipsis>
+                <CustomMenu.MenuItem onClick={() => setCycleDeleteModal(true)}>
+                  <span className="flex items-center justify-start gap-2">
+                    <Trash2 className="h-3 w-3" />
+                    <span>Delete cycle</span>
+                  </span>
+                </CustomMenu.MenuItem>
+              </CustomMenu>
+            )}
+          </div>
+        </div>
 
-          <div className="flex flex-col gap-3">
-            <h4 className="text-xl font-semibold break-words w-full text-custom-text-100">{cycleDetails.name}</h4>
-            <div className="flex items-center gap-5">
-              {currentCycle && (
-                <span
-                  className="flex items-center justify-center text-xs text-center h-6 w-20 rounded-sm"
-                  style={{
-                    color: currentCycle.color,
-                    backgroundColor: `${currentCycle.color}20`,
-                  }}
+        <div className="flex flex-col gap-3">
+          <h4 className="text-xl font-semibold break-words w-full text-custom-text-100">{cycleDetails.name}</h4>
+          <div className="flex items-center gap-5">
+            {currentCycle && (
+              <span
+                className="flex items-center justify-center text-xs text-center h-6 w-20 rounded-sm"
+                style={{
+                  color: currentCycle.color,
+                  backgroundColor: `${currentCycle.color}20`,
+                }}
+              >
+                {currentCycle.value === "current"
+                  ? `${findHowManyDaysLeft(cycleDetails.end_date ?? new Date())} ${currentCycle.label}`
+                  : `${currentCycle.label}`}
+              </span>
+            )}
+            <div className="relative flex h-full w-52 items-center gap-2.5">
+              <Popover className="flex h-full items-center justify-center rounded-lg">
+                <Popover.Button
+                  disabled={isCompleted ?? false}
+                  className="text-sm text-custom-text-300 font-medium cursor-default"
                 >
-                  {currentCycle.value === "current"
-                    ? `${findHowManyDaysLeft(cycleDetails.end_date ?? new Date())} ${currentCycle.label}`
-                    : `${currentCycle.label}`}
-                </span>
-              )}
-              <div className="relative flex h-full w-52 items-center gap-2.5">
-                <Popover className="flex h-full items-center justify-center rounded-lg">
+                  {areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")}
+                </Popover.Button>
+
+                <Transition
+                  as={React.Fragment}
+                  enter="transition ease-out duration-200"
+                  enterFrom="opacity-0 translate-y-1"
+                  enterTo="opacity-100 translate-y-0"
+                  leave="transition ease-in duration-150"
+                  leaveFrom="opacity-100 translate-y-0"
+                  leaveTo="opacity-0 translate-y-1"
+                >
+                  <Popover.Panel className="absolute top-10 -right-5 z-20  transform overflow-hidden">
+                    <CustomRangeDatePicker
+                      value={watch("start_date") ? watch("start_date") : cycleDetails?.start_date}
+                      onChange={(val) => {
+                        if (val) {
+                          handleStartDateChange(val);
+                        }
+                      }}
+                      startDate={watch("start_date") ? `${watch("start_date")}` : null}
+                      endDate={watch("end_date") ? `${watch("end_date")}` : null}
+                      maxDate={new Date(`${watch("end_date")}`)}
+                      selectsStart
+                    />
+                  </Popover.Panel>
+                </Transition>
+              </Popover>
+              <MoveRight className="h-4 w-4 text-custom-text-300" />
+              <Popover className="flex h-full items-center justify-center rounded-lg">
+                <>
                   <Popover.Button
                     disabled={isCompleted ?? false}
                     className="text-sm text-custom-text-300 font-medium cursor-default"
                   >
-                    {areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")}
+                    {areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
                   </Popover.Button>
 
                   <Transition
@@ -362,193 +409,145 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
                     leaveFrom="opacity-100 translate-y-0"
                     leaveTo="opacity-0 translate-y-1"
                   >
-                    <Popover.Panel className="absolute top-10 -right-5 z-20  transform overflow-hidden">
+                    <Popover.Panel className="absolute top-10 -right-5 z-20 transform overflow-hidden">
                       <CustomRangeDatePicker
-                        value={watch("start_date") ? watch("start_date") : cycleDetails?.start_date}
+                        value={watch("end_date") ? watch("end_date") : cycleDetails?.end_date}
                         onChange={(val) => {
                           if (val) {
-                            handleStartDateChange(val);
+                            handleEndDateChange(val);
                           }
                         }}
                         startDate={watch("start_date") ? `${watch("start_date")}` : null}
                         endDate={watch("end_date") ? `${watch("end_date")}` : null}
-                        maxDate={new Date(`${watch("end_date")}`)}
-                        selectsStart
+                        minDate={new Date(`${watch("start_date")}`)}
+                        selectsEnd
                       />
                     </Popover.Panel>
                   </Transition>
-                </Popover>
-                <MoveRight className="h-4 w-4 text-custom-text-300" />
-                <Popover className="flex h-full items-center justify-center rounded-lg">
-                  <>
-                    <Popover.Button
-                      disabled={isCompleted ?? false}
-                      className="text-sm text-custom-text-300 font-medium cursor-default"
-                    >
-                      {areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
-                    </Popover.Button>
+                </>
+              </Popover>
+            </div>
+          </div>
+        </div>
 
-                    <Transition
-                      as={React.Fragment}
-                      enter="transition ease-out duration-200"
-                      enterFrom="opacity-0 translate-y-1"
-                      enterTo="opacity-100 translate-y-0"
-                      leave="transition ease-in duration-150"
-                      leaveFrom="opacity-100 translate-y-0"
-                      leaveTo="opacity-0 translate-y-1"
-                    >
-                      <Popover.Panel className="absolute top-10 -right-5 z-20 transform overflow-hidden">
-                        <CustomRangeDatePicker
-                          value={watch("end_date") ? watch("end_date") : cycleDetails?.end_date}
-                          onChange={(val) => {
-                            if (val) {
-                              handleEndDateChange(val);
-                            }
-                          }}
-                          startDate={watch("start_date") ? `${watch("start_date")}` : null}
-                          endDate={watch("end_date") ? `${watch("end_date")}` : null}
-                          minDate={new Date(`${watch("start_date")}`)}
-                          selectsEnd
-                        />
-                      </Popover.Panel>
-                    </Transition>
-                  </>
-                </Popover>
+        {cycleDetails.description && (
+          <span className="whitespace-normal text-sm leading-5 py-2.5 text-custom-text-200 break-words w-full">
+            {cycleDetails.description}
+          </span>
+        )}
+
+        <div className="flex flex-col gap-5 pt-2.5 pb-6">
+          <div className="flex items-center justify-start gap-1">
+            <div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
+              <UserCircle2 className="h-4 w-4" />
+              <span className="text-base">Lead</span>
+            </div>
+            <div className="flex items-center w-1/2 rounded-sm">
+              <div className="flex items-center gap-2.5">
+                <Avatar name={cycleDetails.owned_by.display_name} src={cycleDetails.owned_by.avatar} />
+                <span className="text-sm text-custom-text-200">{cycleDetails.owned_by.display_name}</span>
               </div>
             </div>
           </div>
 
-          {cycleDetails.description && (
-            <span className="whitespace-normal text-sm leading-5 py-2.5 text-custom-text-200 break-words w-full">
-              {cycleDetails.description}
-            </span>
-          )}
-
-          <div className="flex flex-col gap-5 pt-2.5 pb-6">
-            <div className="flex items-center justify-start gap-1">
-              <div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
-                <UserCircle2 className="h-4 w-4" />
-                <span className="text-base">Lead</span>
-              </div>
-              <div className="flex items-center w-1/2 rounded-sm">
-                <div className="flex items-center gap-2.5">
-                  <Avatar name={cycleDetails.owned_by.display_name} src={cycleDetails.owned_by.avatar} />
-                  <span className="text-sm text-custom-text-200">{cycleDetails.owned_by.display_name}</span>
-                </div>
-              </div>
+          <div className="flex items-center justify-start gap-1">
+            <div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
+              <LayersIcon className="h-4 w-4" />
+              <span className="text-base">Issues</span>
             </div>
-
-            <div className="flex items-center justify-start gap-1">
-              <div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
-                <LayersIcon className="h-4 w-4" />
-                <span className="text-base">Issues</span>
-              </div>
-              <div className="flex items-center w-1/2">
-                <span className="text-sm text-custom-text-300 px-1.5">{issueCount}</span>
-              </div>
+            <div className="flex items-center w-1/2">
+              <span className="text-sm text-custom-text-300 px-1.5">{issueCount}</span>
             </div>
           </div>
+        </div>
 
-          <div className="flex flex-col">
-            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-200 py-5 px-1.5">
-              <Disclosure>
-                {({ open }) => (
-                  <div className={`relative  flex  h-full w-full flex-col ${open ? "" : "flex-row"}`}>
-                    <Disclosure.Button
-                      className="flex w-full items-center justify-between gap-2 p-1.5"
-                      disabled={!isStartValid || !isEndValid}
-                    >
-                      <div className="flex items-center justify-start gap-2 text-sm">
-                        <span className="font-medium text-custom-text-200">Progress</span>
-                      </div>
+        <div className="flex flex-col">
+          <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-200 py-5 px-1.5">
+            <Disclosure>
+              {({ open }) => (
+                <div className={`relative  flex  h-full w-full flex-col ${open ? "" : "flex-row"}`}>
+                  <Disclosure.Button
+                    className="flex w-full items-center justify-between gap-2 p-1.5"
+                    disabled={!isStartValid || !isEndValid}
+                  >
+                    <div className="flex items-center justify-start gap-2 text-sm">
+                      <span className="font-medium text-custom-text-200">Progress</span>
+                    </div>
 
-                      <div className="flex items-center gap-2.5">
-                        {progressPercentage ? (
-                          <span className="flex items-center justify-center h-5 w-9 rounded text-xs font-medium text-amber-500 bg-amber-50">
-                            {progressPercentage ? `${progressPercentage}%` : ""}
+                    <div className="flex items-center gap-2.5">
+                      {progressPercentage ? (
+                        <span className="flex items-center justify-center h-5 w-9 rounded text-xs font-medium text-amber-500 bg-amber-50">
+                          {progressPercentage ? `${progressPercentage}%` : ""}
+                        </span>
+                      ) : (
+                        ""
+                      )}
+                      {isStartValid && isEndValid ? (
+                        <ChevronDown className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
+                      ) : (
+                        <div className="flex items-center gap-1">
+                          <AlertCircle height={14} width={14} className="text-custom-text-200" />
+                          <span className="text-xs italic text-custom-text-200">
+                            Invalid date. Please enter valid date.
                           </span>
+                        </div>
+                      )}
+                    </div>
+                  </Disclosure.Button>
+                  <Transition show={open}>
+                    <Disclosure.Panel>
+                      <div className="flex flex-col gap-3">
+                        {isStartValid && isEndValid ? (
+                          <div className="h-full w-full pt-4">
+                            <div className="flex  items-start  gap-4 py-2 text-xs">
+                              <div className="flex items-center gap-3 text-custom-text-100">
+                                <div className="flex items-center justify-center gap-1">
+                                  <span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" />
+                                  <span>Ideal</span>
+                                </div>
+                                <div className="flex items-center justify-center gap-1">
+                                  <span className="h-2.5 w-2.5 rounded-full bg-[#4C8FFF]" />
+                                  <span>Current</span>
+                                </div>
+                              </div>
+                            </div>
+                            <div className="relative h-40 w-80">
+                              <ProgressChart
+                                distribution={cycleDetails.distribution?.completion_chart ?? {}}
+                                startDate={cycleDetails.start_date ?? ""}
+                                endDate={cycleDetails.end_date ?? ""}
+                                totalIssues={cycleDetails.total_issues}
+                              />
+                            </div>
+                          </div>
                         ) : (
                           ""
                         )}
-                        {isStartValid && isEndValid ? (
-                          <ChevronDown className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
-                        ) : (
-                          <div className="flex items-center gap-1">
-                            <AlertCircle height={14} width={14} className="text-custom-text-200" />
-                            <span className="text-xs italic text-custom-text-200">
-                              Invalid date. Please enter valid date.
-                            </span>
+                        {cycleDetails.total_issues > 0 && cycleDetails.distribution && (
+                          <div className="h-full w-full pt-5 border-t border-custom-border-200">
+                            <SidebarProgressStats
+                              distribution={cycleDetails.distribution}
+                              groupedIssues={{
+                                backlog: cycleDetails.backlog_issues,
+                                unstarted: cycleDetails.unstarted_issues,
+                                started: cycleDetails.started_issues,
+                                completed: cycleDetails.completed_issues,
+                                cancelled: cycleDetails.cancelled_issues,
+                              }}
+                              totalIssues={cycleDetails.total_issues}
+                              isPeekView={Boolean(peekCycle)}
+                            />
                           </div>
                         )}
                       </div>
-                    </Disclosure.Button>
-                    <Transition show={open}>
-                      <Disclosure.Panel>
-                        <div className="flex flex-col gap-3">
-                          {isStartValid && isEndValid ? (
-                            <div className="h-full w-full pt-4">
-                              <div className="flex  items-start  gap-4 py-2 text-xs">
-                                <div className="flex items-center gap-3 text-custom-text-100">
-                                  <div className="flex items-center justify-center gap-1">
-                                    <span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" />
-                                    <span>Ideal</span>
-                                  </div>
-                                  <div className="flex items-center justify-center gap-1">
-                                    <span className="h-2.5 w-2.5 rounded-full bg-[#4C8FFF]" />
-                                    <span>Current</span>
-                                  </div>
-                                </div>
-                              </div>
-                              <div className="relative h-40 w-80">
-                                <ProgressChart
-                                  distribution={cycleDetails.distribution?.completion_chart ?? {}}
-                                  startDate={cycleDetails.start_date ?? ""}
-                                  endDate={cycleDetails.end_date ?? ""}
-                                  totalIssues={cycleDetails.total_issues}
-                                />
-                              </div>
-                            </div>
-                          ) : (
-                            ""
-                          )}
-                          {cycleDetails.total_issues > 0 && cycleDetails.distribution && (
-                            <div className="h-full w-full pt-5 border-t border-custom-border-200">
-                              <SidebarProgressStats
-                                distribution={cycleDetails.distribution}
-                                groupedIssues={{
-                                  backlog: cycleDetails.backlog_issues,
-                                  unstarted: cycleDetails.unstarted_issues,
-                                  started: cycleDetails.started_issues,
-                                  completed: cycleDetails.completed_issues,
-                                  cancelled: cycleDetails.cancelled_issues,
-                                }}
-                                totalIssues={cycleDetails.total_issues}
-                                isPeekView={Boolean(peekCycle)}
-                              />
-                            </div>
-                          )}
-                        </div>
-                      </Disclosure.Panel>
-                    </Transition>
-                  </div>
-                )}
-              </Disclosure>
-            </div>
+                    </Disclosure.Panel>
+                  </Transition>
+                </div>
+              )}
+            </Disclosure>
           </div>
-        </>
-      ) : (
-        <Loader className="px-5">
-          <div className="space-y-2">
-            <Loader.Item height="15px" width="50%" />
-            <Loader.Item height="15px" width="30%" />
-          </div>
-          <div className="mt-8 space-y-3">
-            <Loader.Item height="30px" />
-            <Loader.Item height="30px" />
-            <Loader.Item height="30px" />
-          </div>
-        </Loader>
-      )}
+        </div>
+      </>
     </>
   );
 });
diff --git a/web/components/modules/sidebar.tsx b/web/components/modules/sidebar.tsx
index df42fc0e4..4cc449534 100644
--- a/web/components/modules/sidebar.tsx
+++ b/web/components/modules/sidebar.tsx
@@ -198,7 +198,20 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
     setModuleLinkModal(true);
   };
 
-  if (!moduleDetails) return null;
+  if (!moduleDetails)
+    return (
+      <Loader className="px-5">
+        <div className="space-y-2">
+          <Loader.Item height="15px" width="50%" />
+          <Loader.Item height="15px" width="30%" />
+        </div>
+        <div className="mt-8 space-y-3">
+          <Loader.Item height="30px" />
+          <Loader.Item height="30px" />
+          <Loader.Item height="30px" />
+        </div>
+      </Loader>
+    );
 
   const startDate = new Date(moduleDetails.start_date ?? "");
   const endDate = new Date(moduleDetails.target_date ?? "");
@@ -230,200 +243,200 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
         updateIssueLink={handleUpdateLink}
       />
       <DeleteModuleModal isOpen={moduleDeleteModal} onClose={() => setModuleDeleteModal(false)} data={moduleDetails} />
-      {module ? (
-        <>
-          <div className="flex items-center justify-between w-full">
-            <div>
-              <button
-                className="flex items-center justify-center h-5 w-5 rounded-full bg-custom-border-300"
-                onClick={() => handleClose()}
-              >
-                <ChevronRight className="h-3 w-3 text-white stroke-2" />
-              </button>
-            </div>
-            <div className="flex items-center gap-3.5">
-              <button onClick={handleCopyText}>
-                <LinkIcon className="h-3 w-3 text-custom-text-300" />
-              </button>
-              <CustomMenu width="lg" placement="bottom-end" ellipsis>
-                <CustomMenu.MenuItem onClick={() => setModuleDeleteModal(true)}>
-                  <span className="flex items-center justify-start gap-2">
-                    <Trash2 className="h-3 w-3" />
-                    <span>Delete module</span>
-                  </span>
-                </CustomMenu.MenuItem>
-              </CustomMenu>
-            </div>
+
+      <>
+        <div className="flex items-center justify-between w-full">
+          <div>
+            <button
+              className="flex items-center justify-center h-5 w-5 rounded-full bg-custom-border-300"
+              onClick={() => handleClose()}
+            >
+              <ChevronRight className="h-3 w-3 text-white stroke-2" />
+            </button>
           </div>
-
-          <div className="flex flex-col gap-3">
-            <h4 className="text-xl font-semibold break-words w-full text-custom-text-100">{moduleDetails.name}</h4>
-            <div className="flex items-center gap-5">
-              <Controller
-                control={control}
-                name="status"
-                render={({ field: { value } }) => (
-                  <CustomSelect
-                    customButton={
-                      <span
-                        className={`flex items-center cursor-default justify-center text-sm h-6 w-20 rounded-sm ${moduleStatus?.textColor} ${moduleStatus?.bgColor}`}
-                      >
-                        {moduleStatus?.label ?? "Backlog"}
-                      </span>
-                    }
-                    value={value}
-                    onChange={(value: any) => {
-                      submitChanges({ status: value });
-                    }}
-                  >
-                    {MODULE_STATUS.map((status) => (
-                      <CustomSelect.Option key={status.value} value={status.value}>
-                        <div className="flex items-center gap-2">
-                          <ModuleStatusIcon status={status.value} />
-                          {status.label}
-                        </div>
-                      </CustomSelect.Option>
-                    ))}
-                  </CustomSelect>
-                )}
-              />
-
-              <span className="text-sm text-custom-text-300 font-mediu cursor-default">
-                {areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")} -{" "}
-                {areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
-              </span>
-            </div>
+          <div className="flex items-center gap-3.5">
+            <button onClick={handleCopyText}>
+              <LinkIcon className="h-3 w-3 text-custom-text-300" />
+            </button>
+            <CustomMenu width="lg" placement="bottom-end" ellipsis>
+              <CustomMenu.MenuItem onClick={() => setModuleDeleteModal(true)}>
+                <span className="flex items-center justify-start gap-2">
+                  <Trash2 className="h-3 w-3" />
+                  <span>Delete module</span>
+                </span>
+              </CustomMenu.MenuItem>
+            </CustomMenu>
           </div>
+        </div>
 
-          {moduleDetails.description && (
-            <span className="whitespace-normal text-sm leading-5 py-2.5 text-custom-text-200 break-words w-full">
-              {moduleDetails.description}
-            </span>
-          )}
-
-          <div className="flex flex-col gap-5 pt-2.5 pb-6">
+        <div className="flex flex-col gap-3">
+          <h4 className="text-xl font-semibold break-words w-full text-custom-text-100">{moduleDetails.name}</h4>
+          <div className="flex items-center gap-5">
             <Controller
               control={control}
-              name="lead"
+              name="status"
               render={({ field: { value } }) => (
-                <SidebarLeadSelect
-                  value={value}
-                  onChange={(val: string) => {
-                    submitChanges({ lead: val });
-                  }}
-                />
-              )}
-            />
-            <Controller
-              control={control}
-              name="members"
-              render={({ field: { value } }) => (
-                <SidebarMembersSelect
-                  value={value}
-                  onChange={(val: string[]) => {
-                    submitChanges({ members: val });
-                  }}
-                />
-              )}
-            />
-
-            <div className="flex items-center justify-start gap-1">
-              <div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
-                <LayersIcon className="h-4 w-4" />
-                <span className="text-base">Issues</span>
-              </div>
-              <div className="flex items-center w-1/2">
-                <span className="text-sm text-custom-text-300 px-1.5">{issueCount}</span>
-              </div>
-            </div>
-          </div>
-
-          <div className="flex flex-col">
-            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-200 py-5 px-1.5">
-              <Disclosure>
-                {({ open }) => (
-                  <div className={`relative  flex  h-full w-full flex-col ${open ? "" : "flex-row"}`}>
-                    <Disclosure.Button
-                      className="flex w-full items-center justify-between gap-2 p-1.5"
-                      disabled={!isStartValid || !isEndValid}
+                <CustomSelect
+                  customButton={
+                    <span
+                      className={`flex items-center cursor-default justify-center text-sm h-6 w-20 rounded-sm ${moduleStatus?.textColor} ${moduleStatus?.bgColor}`}
                     >
-                      <div className="flex items-center justify-start gap-2 text-sm">
-                        <span className="font-medium text-custom-text-200">Progress</span>
+                      {moduleStatus?.label ?? "Backlog"}
+                    </span>
+                  }
+                  value={value}
+                  onChange={(value: any) => {
+                    submitChanges({ status: value });
+                  }}
+                >
+                  {MODULE_STATUS.map((status) => (
+                    <CustomSelect.Option key={status.value} value={status.value}>
+                      <div className="flex items-center gap-2">
+                        <ModuleStatusIcon status={status.value} />
+                        {status.label}
                       </div>
+                    </CustomSelect.Option>
+                  ))}
+                </CustomSelect>
+              )}
+            />
 
-                      <div className="flex items-center gap-2.5">
-                        {progressPercentage ? (
-                          <span className="flex items-center justify-center h-5 w-9 rounded text-xs font-medium text-amber-500 bg-amber-50">
-                            {progressPercentage ? `${progressPercentage}%` : ""}
+            <span className="text-sm text-custom-text-300 font-mediu cursor-default">
+              {areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")} -{" "}
+              {areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
+            </span>
+          </div>
+        </div>
+
+        {moduleDetails.description && (
+          <span className="whitespace-normal text-sm leading-5 py-2.5 text-custom-text-200 break-words w-full">
+            {moduleDetails.description}
+          </span>
+        )}
+
+        <div className="flex flex-col gap-5 pt-2.5 pb-6">
+          <Controller
+            control={control}
+            name="lead"
+            render={({ field: { value } }) => (
+              <SidebarLeadSelect
+                value={value}
+                onChange={(val: string) => {
+                  submitChanges({ lead: val });
+                }}
+              />
+            )}
+          />
+          <Controller
+            control={control}
+            name="members"
+            render={({ field: { value } }) => (
+              <SidebarMembersSelect
+                value={value}
+                onChange={(val: string[]) => {
+                  submitChanges({ members: val });
+                }}
+              />
+            )}
+          />
+
+          <div className="flex items-center justify-start gap-1">
+            <div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
+              <LayersIcon className="h-4 w-4" />
+              <span className="text-base">Issues</span>
+            </div>
+            <div className="flex items-center w-1/2">
+              <span className="text-sm text-custom-text-300 px-1.5">{issueCount}</span>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex flex-col">
+          <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-200 py-5 px-1.5">
+            <Disclosure>
+              {({ open }) => (
+                <div className={`relative  flex  h-full w-full flex-col ${open ? "" : "flex-row"}`}>
+                  <Disclosure.Button
+                    className="flex w-full items-center justify-between gap-2 p-1.5"
+                    disabled={!isStartValid || !isEndValid}
+                  >
+                    <div className="flex items-center justify-start gap-2 text-sm">
+                      <span className="font-medium text-custom-text-200">Progress</span>
+                    </div>
+
+                    <div className="flex items-center gap-2.5">
+                      {progressPercentage ? (
+                        <span className="flex items-center justify-center h-5 w-9 rounded text-xs font-medium text-amber-500 bg-amber-50">
+                          {progressPercentage ? `${progressPercentage}%` : ""}
+                        </span>
+                      ) : (
+                        ""
+                      )}
+                      {isStartValid && isEndValid ? (
+                        <ChevronDown className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
+                      ) : (
+                        <div className="flex items-center gap-1">
+                          <AlertCircle height={14} width={14} className="text-custom-text-200" />
+                          <span className="text-xs italic text-custom-text-200">
+                            Invalid date. Please enter valid date.
                           </span>
+                        </div>
+                      )}
+                    </div>
+                  </Disclosure.Button>
+                  <Transition show={open}>
+                    <Disclosure.Panel>
+                      <div className="flex flex-col gap-3">
+                        {isStartValid && isEndValid ? (
+                          <div className=" h-full w-full pt-4">
+                            <div className="flex  items-start  gap-4 py-2 text-xs">
+                              <div className="flex items-center gap-3 text-custom-text-100">
+                                <div className="flex items-center justify-center gap-1">
+                                  <span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" />
+                                  <span>Ideal</span>
+                                </div>
+                                <div className="flex items-center justify-center gap-1">
+                                  <span className="h-2.5 w-2.5 rounded-full bg-[#4C8FFF]" />
+                                  <span>Current</span>
+                                </div>
+                              </div>
+                            </div>
+                            <div className="relative h-40 w-80">
+                              <ProgressChart
+                                distribution={moduleDetails.distribution.completion_chart}
+                                startDate={moduleDetails.start_date ?? ""}
+                                endDate={moduleDetails.target_date ?? ""}
+                                totalIssues={moduleDetails.total_issues}
+                              />
+                            </div>
+                          </div>
                         ) : (
                           ""
                         )}
-                        {isStartValid && isEndValid ? (
-                          <ChevronDown className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
-                        ) : (
-                          <div className="flex items-center gap-1">
-                            <AlertCircle height={14} width={14} className="text-custom-text-200" />
-                            <span className="text-xs italic text-custom-text-200">
-                              Invalid date. Please enter valid date.
-                            </span>
+                        {moduleDetails.total_issues > 0 && (
+                          <div className="h-full w-full pt-5 border-t border-custom-border-200">
+                            <SidebarProgressStats
+                              distribution={moduleDetails.distribution}
+                              groupedIssues={{
+                                backlog: moduleDetails.backlog_issues,
+                                unstarted: moduleDetails.unstarted_issues,
+                                started: moduleDetails.started_issues,
+                                completed: moduleDetails.completed_issues,
+                                cancelled: moduleDetails.cancelled_issues,
+                              }}
+                              totalIssues={moduleDetails.total_issues}
+                              module={moduleDetails}
+                              isPeekView={Boolean(peekModule)}
+                            />
                           </div>
                         )}
                       </div>
-                    </Disclosure.Button>
-                    <Transition show={open}>
-                      <Disclosure.Panel>
-                        <div className="flex flex-col gap-3">
-                          {isStartValid && isEndValid ? (
-                            <div className=" h-full w-full pt-4">
-                              <div className="flex  items-start  gap-4 py-2 text-xs">
-                                <div className="flex items-center gap-3 text-custom-text-100">
-                                  <div className="flex items-center justify-center gap-1">
-                                    <span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" />
-                                    <span>Ideal</span>
-                                  </div>
-                                  <div className="flex items-center justify-center gap-1">
-                                    <span className="h-2.5 w-2.5 rounded-full bg-[#4C8FFF]" />
-                                    <span>Current</span>
-                                  </div>
-                                </div>
-                              </div>
-                              <div className="relative h-40 w-80">
-                                <ProgressChart
-                                  distribution={moduleDetails.distribution.completion_chart}
-                                  startDate={moduleDetails.start_date ?? ""}
-                                  endDate={moduleDetails.target_date ?? ""}
-                                  totalIssues={moduleDetails.total_issues}
-                                />
-                              </div>
-                            </div>
-                          ) : (
-                            ""
-                          )}
-                          {moduleDetails.total_issues > 0 && (
-                            <div className="h-full w-full pt-5 border-t border-custom-border-200">
-                              <SidebarProgressStats
-                                distribution={moduleDetails.distribution}
-                                groupedIssues={{
-                                  backlog: moduleDetails.backlog_issues,
-                                  unstarted: moduleDetails.unstarted_issues,
-                                  started: moduleDetails.started_issues,
-                                  completed: moduleDetails.completed_issues,
-                                  cancelled: moduleDetails.cancelled_issues,
-                                }}
-                                totalIssues={moduleDetails.total_issues}
-                                module={moduleDetails}
-                                isPeekView={Boolean(peekModule)}
-                              />
-                            </div>
-                          )}
-                        </div>
-                      </Disclosure.Panel>
-                    </Transition>
-                  </div>
-                )}
-              </Disclosure>
-            </div>
+                    </Disclosure.Panel>
+                  </Transition>
+                </div>
+              )}
+            </Disclosure>
+          </div>
 
             <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-200 py-5 px-1.5">
               <Disclosure>
@@ -434,46 +447,16 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                         <span className="font-medium text-custom-text-200">Links</span>
                       </div>
 
-                      <div className="flex items-center gap-2.5">
-                        <ChevronDown
-                          className={`h-3.5 w-3.5 ${open ? "rotate-180 transform" : ""}`}
-                          aria-hidden="true"
-                        />
-                      </div>
-                    </Disclosure.Button>
-                    <Transition show={open}>
-                      <Disclosure.Panel>
-                        <div className="flex flex-col w-full mt-2 space-y-3 h-72 overflow-y-auto">
-                          {userRole && moduleDetails.link_module && moduleDetails.link_module.length > 0 ? (
-                            <>
-                              <div className="flex items-center justify-end w-full">
-                                <button
-                                  className="flex items-center gap-1.5 text-sm font-medium text-custom-primary-100"
-                                  onClick={() => setModuleLinkModal(true)}
-                                >
-                                  <Plus className="h-3 w-3" />
-                                  Add link
-                                </button>
-                              </div>
-
-                              <LinksList
-                                links={moduleDetails.link_module}
-                                handleEditLink={handleEditLink}
-                                handleDeleteLink={handleDeleteLink}
-                                userAuth={{
-                                  isGuest: userRole === 5,
-                                  isViewer: userRole === 10,
-                                  isMember: userRole === 15,
-                                  isOwner: userRole === 20,
-                                }}
-                              />
-                            </>
-                          ) : (
-                            <div className="flex items-center justify-between gap-2">
-                              <div className="flex items-center gap-2">
-                                <Info className="h-3.5 w-3.5 text-custom-text-300 stroke-[1.5]" />
-                                <span className="text-xs text-custom-text-300 p-0.5">No links added yet</span>
-                              </div>
+                    <div className="flex items-center gap-2.5">
+                      <ChevronDown className={`h-3.5 w-3.5 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
+                    </div>
+                  </Disclosure.Button>
+                  <Transition show={open}>
+                    <Disclosure.Panel>
+                      <div className="flex flex-col w-full mt-2 space-y-3 h-72 overflow-y-auto">
+                        {userRole && moduleDetails.link_module && moduleDetails.link_module.length > 0 ? (
+                          <>
+                            <div className="flex items-center justify-end w-full">
                               <button
                                 className="flex items-center gap-1.5 text-sm font-medium text-custom-primary-100"
                                 onClick={() => setModuleLinkModal(true)}
@@ -482,29 +465,43 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                                 Add link
                               </button>
                             </div>
-                          )}
-                        </div>
-                      </Disclosure.Panel>
-                    </Transition>
-                  </div>
-                )}
-              </Disclosure>
-            </div>
+
+                            <LinksList
+                              links={moduleDetails.link_module}
+                              handleEditLink={handleEditLink}
+                              handleDeleteLink={handleDeleteLink}
+                              userAuth={{
+                                isGuest: userRole === 5,
+                                isViewer: userRole === 10,
+                                isMember: userRole === 15,
+                                isOwner: userRole === 20,
+                              }}
+                            />
+                          </>
+                        ) : (
+                          <div className="flex items-center justify-between gap-2">
+                            <div className="flex items-center gap-2">
+                              <Info className="h-3.5 w-3.5 text-custom-text-300 stroke-[1.5]" />
+                              <span className="text-xs text-custom-text-300 p-0.5">No links added yet</span>
+                            </div>
+                            <button
+                              className="flex items-center gap-1.5 text-sm font-medium text-custom-primary-100"
+                              onClick={() => setModuleLinkModal(true)}
+                            >
+                              <Plus className="h-3 w-3" />
+                              Add link
+                            </button>
+                          </div>
+                        )}
+                      </div>
+                    </Disclosure.Panel>
+                  </Transition>
+                </div>
+              )}
+            </Disclosure>
           </div>
-        </>
-      ) : (
-        <Loader className="px-5">
-          <div className="space-y-2">
-            <Loader.Item height="15px" width="50%" />
-            <Loader.Item height="15px" width="30%" />
-          </div>
-          <div className="mt-8 space-y-3">
-            <Loader.Item height="30px" />
-            <Loader.Item height="30px" />
-            <Loader.Item height="30px" />
-          </div>
-        </Loader>
-      )}
+        </div>
+      </>
     </>
   );
 });