diff --git a/web/components/cycles/sidebar.tsx b/web/components/cycles/sidebar.tsx
index c99ad9519..fa7fef008 100644
--- a/web/components/cycles/sidebar.tsx
+++ b/web/components/cycles/sidebar.tsx
@@ -273,10 +273,11 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
       </Loader>
     );
 
-  const endDate = new Date(cycleDetails.end_date ?? "");
-  const startDate = new Date(cycleDetails.start_date ?? "");
+  const endDate = new Date(watch("end_date") ?? cycleDetails.end_date ?? "");
+  const startDate = new Date(watch("start_date") ?? cycleDetails.start_date ?? "");
 
-  const areYearsEqual = startDate.getFullYear() === endDate.getFullYear();
+  const areYearsEqual =
+    startDate.getFullYear() === endDate.getFullYear() || isNaN(startDate.getFullYear()) || isNaN(endDate.getFullYear());
 
   const currentCycle = CYCLE_STATUS.find((status) => status.value === cycleStatus);
 
@@ -355,7 +356,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
               <Popover className="flex h-full items-center justify-center rounded-lg">
                 <Popover.Button
                   className={`text-sm font-medium text-custom-text-300 ${
-                    isEditingAllowed ? "cursor-default" : "cursor-not-allowed"
+                    isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
                   }`}
                   disabled={isCompleted || !isEditingAllowed}
                 >
@@ -380,10 +381,10 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
                           handleStartDateChange(val);
                         }
                       }}
-                      startDate={watch("start_date") ? `${watch("start_date")}` : null}
-                      endDate={watch("end_date") ? `${watch("end_date")}` : null}
+                      startDate={watch("start_date") ?? watch("end_date") ?? null}
+                      endDate={watch("end_date") ?? watch("start_date") ?? null}
                       maxDate={new Date(`${watch("end_date")}`)}
-                      selectsStart
+                      selectsStart={watch("end_date") ? true : false}
                     />
                   </Popover.Panel>
                 </Transition>
@@ -393,9 +394,9 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
                 <>
                   <Popover.Button
                     className={`text-sm font-medium text-custom-text-300 ${
-                      isEditingAllowed ? "cursor-default" : "cursor-not-allowed"
+                      isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
                     }`}
-                    disabled={isCompleted ?? !isEditingAllowed}
+                    disabled={isCompleted || !isEditingAllowed}
                   >
                     {areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
                   </Popover.Button>
@@ -418,10 +419,10 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
                             handleEndDateChange(val);
                           }
                         }}
-                        startDate={watch("start_date") ? `${watch("start_date")}` : null}
-                        endDate={watch("end_date") ? `${watch("end_date")}` : null}
+                        startDate={watch("start_date") ?? watch("end_date") ?? null}
+                        endDate={watch("end_date") ?? watch("start_date") ?? null}
                         minDate={new Date(`${watch("start_date")}`)}
-                        selectsEnd
+                        selectsEnd={watch("start_date") ? true : false}
                       />
                     </Popover.Panel>
                   </Transition>
diff --git a/web/components/modules/sidebar-select/select-lead.tsx b/web/components/modules/sidebar-select/select-lead.tsx
index 8729b12f4..f675925c4 100644
--- a/web/components/modules/sidebar-select/select-lead.tsx
+++ b/web/components/modules/sidebar-select/select-lead.tsx
@@ -13,12 +13,13 @@ import { PROJECT_MEMBERS } from "constants/fetch-keys";
 type Props = {
   value: string | null | undefined;
   onChange: (val: string) => void;
+  disabled?: boolean;
 };
 
 const projectMemberService = new ProjectMemberService();
 
 export const SidebarLeadSelect: FC<Props> = (props) => {
-  const { value, onChange } = props;
+  const { value, onChange, disabled = false } = props;
   // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
@@ -51,6 +52,7 @@ export const SidebarLeadSelect: FC<Props> = (props) => {
       </div>
       <div className="flex w-1/2 items-center rounded-sm">
         <CustomSearchSelect
+          disabled={disabled}
           className="w-full rounded-sm"
           value={value}
           customButtonClassName="rounded-sm"
@@ -63,7 +65,7 @@ export const SidebarLeadSelect: FC<Props> = (props) => {
             ) : (
               <div className="group flex w-full items-center justify-between gap-2 p-1 text-sm text-custom-text-400">
                 <span>No lead</span>
-                <ChevronDown className="hidden h-3.5 w-3.5 group-hover:flex" />
+                {!disabled && <ChevronDown className="hidden h-3.5 w-3.5 group-hover:flex" />}
               </div>
             )
           }
diff --git a/web/components/modules/sidebar-select/select-members.tsx b/web/components/modules/sidebar-select/select-members.tsx
index b1d926d2e..28b173388 100644
--- a/web/components/modules/sidebar-select/select-members.tsx
+++ b/web/components/modules/sidebar-select/select-members.tsx
@@ -13,12 +13,13 @@ import { PROJECT_MEMBERS } from "constants/fetch-keys";
 type Props = {
   value: string[] | undefined;
   onChange: (val: string[]) => void;
+  disabled?: boolean;
 };
 
 // services
 const projectMemberService = new ProjectMemberService();
 
-export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
+export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange, disabled = false }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
@@ -48,6 +49,7 @@ export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
       </div>
       <div className="flex w-1/2 items-center rounded-sm ">
         <CustomSearchSelect
+          disabled={disabled}
           className="w-full rounded-sm"
           value={value ?? []}
           customButtonClassName="rounded-sm"
@@ -67,7 +69,7 @@ export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
             ) : (
               <div className="group flex w-full items-center justify-between gap-2 p-1 text-sm text-custom-text-400">
                 <span>No members</span>
-                <ChevronDown className="hidden h-3.5 w-3.5 group-hover:flex" />
+                {!disabled && <ChevronDown className="hidden h-3.5 w-3.5 group-hover:flex" />}
               </div>
             )
           }
diff --git a/web/components/modules/sidebar.tsx b/web/components/modules/sidebar.tsx
index ea7acfbaa..f2db5dbd5 100644
--- a/web/components/modules/sidebar.tsx
+++ b/web/components/modules/sidebar.tsx
@@ -245,10 +245,11 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
       </Loader>
     );
 
-  const startDate = new Date(moduleDetails.start_date ?? "");
-  const endDate = new Date(moduleDetails.target_date ?? "");
+  const startDate = new Date(watch("start_date") ?? moduleDetails.start_date ?? "");
+  const endDate = new Date(watch("target_date") ?? moduleDetails.target_date ?? "");
 
-  const areYearsEqual = startDate.getFullYear() === endDate.getFullYear();
+  const areYearsEqual =
+    startDate.getFullYear() === endDate.getFullYear() || isNaN(startDate.getFullYear()) || isNaN(endDate.getFullYear());
 
   const moduleStatus = MODULE_STATUS.find((status) => status.value === moduleDetails.status);
 
@@ -316,7 +317,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                   customButton={
                     <span
                       className={`flex h-6 w-20 items-center justify-center rounded-sm text-center text-xs ${
-                        isEditingAllowed ? "cursor-default" : "cursor-not-allowed"
+                        isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
                       }`}
                       style={{
                         color: moduleStatus ? moduleStatus.color : "#a3a3a2",
@@ -348,7 +349,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
               <Popover className="flex h-full items-center justify-center rounded-lg">
                 <Popover.Button
                   className={`text-sm font-medium text-custom-text-300 ${
-                    isEditingAllowed ? "cursor-default" : "cursor-not-allowed"
+                    isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
                   }`}
                   disabled={!isEditingAllowed}
                 >
@@ -372,10 +373,10 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                           handleStartDateChange(val);
                         }
                       }}
-                      startDate={watch("start_date") ? `${watch("start_date")}` : null}
-                      endDate={watch("target_date") ? `${watch("target_date")}` : null}
+                      startDate={watch("start_date") ?? watch("target_date") ?? null}
+                      endDate={watch("target_date") ?? watch("start_date") ?? null}
                       maxDate={new Date(`${watch("target_date")}`)}
-                      selectsStart
+                      selectsStart={watch("target_date") ? true : false}
                     />
                   </Popover.Panel>
                 </Transition>
@@ -385,7 +386,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                 <>
                   <Popover.Button
                     className={`text-sm font-medium text-custom-text-300 ${
-                      isEditingAllowed ? "cursor-default" : "cursor-not-allowed"
+                      isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
                     }`}
                     disabled={!isEditingAllowed}
                   >
@@ -409,10 +410,10 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                             handleEndDateChange(val);
                           }
                         }}
-                        startDate={watch("start_date") ? `${watch("start_date")}` : null}
-                        endDate={watch("target_date") ? `${watch("target_date")}` : null}
+                        startDate={watch("start_date") ?? watch("target_date") ?? null}
+                        endDate={watch("target_date") ?? watch("start_date") ?? null}
                         minDate={new Date(`${watch("start_date")}`)}
-                        selectsEnd
+                        selectsEnd={watch("start_date") ? true : false}
                       />
                     </Popover.Panel>
                   </Transition>
@@ -434,6 +435,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
             name="lead"
             render={({ field: { value } }) => (
               <SidebarLeadSelect
+                disabled={!isEditingAllowed}
                 value={value}
                 onChange={(val: string) => {
                   submitChanges({ lead: val });
@@ -446,6 +448,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
             name="members"
             render={({ field: { value } }) => (
               <SidebarMembersSelect
+                disabled={!isEditingAllowed}
                 value={value}
                 onChange={(val: string[]) => {
                   submitChanges({ members: val });