diff --git a/web/components/cycles/sidebar.tsx b/web/components/cycles/sidebar.tsx
index 33b404e9d..33c2b3c82 100644
--- a/web/components/cycles/sidebar.tsx
+++ b/web/components/cycles/sidebar.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { useForm } from "react-hook-form";
@@ -46,6 +46,11 @@ type Props = {
   handleClose: () => void;
 };
 
+const defaultValues: Partial<ICycle> = {
+  start_date: null,
+  end_date: null,
+};
+
 // services
 const cycleService = new CycleService();
 
@@ -54,6 +59,9 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
   const { cycleId, handleClose } = props;
   // states
   const [cycleDeleteModal, setCycleDeleteModal] = useState(false);
+  // refs
+  const startDateButtonRef = useRef<HTMLButtonElement | null>(null);
+  const endDateButtonRef = useRef<HTMLButtonElement | null>(null);
   // router
   const router = useRouter();
   const { workspaceSlug, projectId, peekCycle } = router.query;
@@ -70,11 +78,6 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
 
   const { setToastAlert } = useToast();
 
-  const defaultValues: Partial<ICycle> = {
-    start_date: new Date().toString(),
-    end_date: new Date().toString(),
-  };
-
   const { setValue, reset, watch } = useForm({
     defaultValues,
   });
@@ -120,6 +123,9 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
 
   const handleStartDateChange = async (date: string) => {
     setValue("start_date", date);
+
+    if (!watch("end_date") || watch("end_date") === "") endDateButtonRef.current?.click();
+
     if (watch("start_date") && watch("end_date") && watch("start_date") !== "" && watch("start_date") !== "") {
       if (!isDateGreaterThanToday(`${watch("end_date")}`)) {
         setToastAlert({
@@ -127,6 +133,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
           title: "Error!",
           message: "Unable to create cycle in past date. Please enter a valid date.",
         });
+        reset({ ...cycleDetails });
         return;
       }
 
@@ -147,7 +154,6 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
             title: "Success!",
             message: "Cycle updated successfully.",
           });
-          return;
         } else {
           setToastAlert({
             type: "error",
@@ -155,8 +161,10 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
             message:
               "You have a cycle already on the given dates, if you want to create your draft cycle you can do that by removing dates",
           });
-          return;
         }
+
+        reset({ ...cycleDetails });
+        return;
       }
 
       const isDateValid = await dateChecker({
@@ -181,6 +189,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
           message:
             "You have a cycle already on the given dates, if you want to create your draft cycle you can do that by removing dates",
         });
+        reset({ ...cycleDetails });
       }
     }
   };
@@ -188,6 +197,8 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
   const handleEndDateChange = async (date: string) => {
     setValue("end_date", date);
 
+    if (!watch("start_date") || watch("start_date") === "") startDateButtonRef.current?.click();
+
     if (watch("start_date") && watch("end_date") && watch("start_date") !== "" && watch("start_date") !== "") {
       if (!isDateGreaterThanToday(`${watch("end_date")}`)) {
         setToastAlert({
@@ -195,6 +206,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
           title: "Error!",
           message: "Unable to create cycle in past date. Please enter a valid date.",
         });
+        reset({ ...cycleDetails });
         return;
       }
 
@@ -215,7 +227,6 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
             title: "Success!",
             message: "Cycle updated successfully.",
           });
-          return;
         } else {
           setToastAlert({
             type: "error",
@@ -223,8 +234,9 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
             message:
               "You have a cycle already on the given dates, if you want to create your draft cycle you can do that by removing dates",
           });
-          return;
         }
+        reset({ ...cycleDetails });
+        return;
       }
 
       const isDateValid = await dateChecker({
@@ -249,6 +261,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
           message:
             "You have a cycle already on the given dates, if you want to create your draft cycle you can do that by removing dates",
         });
+        reset({ ...cycleDetails });
       }
     }
   };
@@ -387,50 +400,56 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
           <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">
               <CalendarClock className="h-4 w-4" />
-              <span className="text-base">Start Date</span>
+              <span className="text-base">Start date</span>
             </div>
             <div className="relative flex w-1/2 items-center rounded-sm">
               <Popover className="flex h-full w-full items-center justify-center rounded-lg">
-                <Popover.Button
-                  className={`w-full cursor-pointer rounded-sm text-sm font-medium text-custom-text-300 hover:bg-custom-background-80 ${
-                    isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
-                  }`}
-                  disabled={isCompleted || !isEditingAllowed}
-                >
-                  <span
-                    className={`group flex w-full items-center justify-between gap-2 px-1.5 py-1 text-sm ${
-                      watch("start_date") ? "" : "text-custom-text-400"
-                    }`}
-                  >
-                    {renderFormattedDate(startDate) ?? "No date selected"}
-                  </span>
-                </Popover.Button>
+                {({ close }) => (
+                  <>
+                    <Popover.Button
+                      ref={startDateButtonRef}
+                      className={`w-full cursor-pointer rounded-sm text-sm font-medium text-custom-text-300 hover:bg-custom-background-80 ${
+                        isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
+                      }`}
+                      disabled={isCompleted || !isEditingAllowed}
+                    >
+                      <span
+                        className={`group flex w-full items-center justify-between gap-2 px-1.5 py-1 text-sm ${
+                          watch("start_date") ? "" : "text-custom-text-400"
+                        }`}
+                      >
+                        {renderFormattedDate(startDate) ?? "No date selected"}
+                      </span>
+                    </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 right-0 top-10 z-20  transform overflow-hidden">
-                    <CustomRangeDatePicker
-                      value={watch("start_date") ? watch("start_date") : cycleDetails?.start_date}
-                      onChange={(val) => {
-                        if (val) {
-                          setTrackElement("CYCLE_PAGE_SIDEBAR_START_DATE_BUTTON");
-                          handleStartDateChange(val);
-                        }
-                      }}
-                      startDate={watch("start_date") ?? watch("end_date") ?? null}
-                      endDate={watch("end_date") ?? watch("start_date") ?? null}
-                      maxDate={new Date(`${watch("end_date")}`)}
-                      selectsStart={watch("end_date") ? true : false}
-                    />
-                  </Popover.Panel>
-                </Transition>
+                    <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 right-0 top-10 z-20 transform overflow-hidden">
+                        <CustomRangeDatePicker
+                          value={watch("start_date") ? watch("start_date") : cycleDetails?.start_date}
+                          onChange={(val) => {
+                            if (val) {
+                              setTrackElement("CYCLE_PAGE_SIDEBAR_START_DATE_BUTTON");
+                              handleStartDateChange(val);
+                              close();
+                            }
+                          }}
+                          startDate={watch("start_date") ?? watch("end_date") ?? null}
+                          endDate={watch("end_date") ?? watch("start_date") ?? null}
+                          maxDate={new Date(`${watch("end_date")}`)}
+                          selectsStart={watch("end_date") ? true : false}
+                        />
+                      </Popover.Panel>
+                    </Transition>
+                  </>
+                )}
               </Popover>
             </div>
           </div>
@@ -438,52 +457,56 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
           <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">
               <CalendarCheck2 className="h-4 w-4" />
-              <span className="text-base">Target Date</span>
+              <span className="text-base">Target date</span>
             </div>
             <div className="relative flex w-1/2 items-center rounded-sm">
               <Popover className="flex h-full w-full items-center justify-center rounded-lg">
-                <>
-                  <Popover.Button
-                    className={`w-full cursor-pointer rounded-sm text-sm font-medium text-custom-text-300 hover:bg-custom-background-80 ${
-                      isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
-                    }`}
-                    disabled={isCompleted || !isEditingAllowed}
-                  >
-                    <span
-                      className={`group flex w-full items-center justify-between gap-2 px-1.5 py-1 text-sm ${
-                        watch("end_date") ? "" : "text-custom-text-400"
+                {({ close }) => (
+                  <>
+                    <Popover.Button
+                      ref={endDateButtonRef}
+                      className={`w-full cursor-pointer rounded-sm text-sm font-medium text-custom-text-300 hover:bg-custom-background-80 ${
+                        isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
                       }`}
+                      disabled={isCompleted || !isEditingAllowed}
                     >
-                      {renderFormattedDate(endDate) ?? "No date selected"}
-                    </span>
-                  </Popover.Button>
+                      <span
+                        className={`group flex w-full items-center justify-between gap-2 px-1.5 py-1 text-sm ${
+                          watch("end_date") ? "" : "text-custom-text-400"
+                        }`}
+                      >
+                        {renderFormattedDate(endDate) ?? "No date selected"}
+                      </span>
+                    </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 right-0 top-10 z-20 transform overflow-hidden">
-                      <CustomRangeDatePicker
-                        value={watch("end_date") ? watch("end_date") : cycleDetails?.end_date}
-                        onChange={(val) => {
-                          if (val) {
-                            setTrackElement("CYCLE_PAGE_SIDEBAR_END_DATE_BUTTON");
-                            handleEndDateChange(val);
-                          }
-                        }}
-                        startDate={watch("start_date") ?? watch("end_date") ?? null}
-                        endDate={watch("end_date") ?? watch("start_date") ?? null}
-                        minDate={new Date(`${watch("start_date")}`)}
-                        selectsEnd={watch("start_date") ? true : false}
-                      />
-                    </Popover.Panel>
-                  </Transition>
-                </>
+                    <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 right-0 top-10 z-20 transform overflow-hidden">
+                        <CustomRangeDatePicker
+                          value={watch("end_date") ? watch("end_date") : cycleDetails?.end_date}
+                          onChange={(val) => {
+                            if (val) {
+                              setTrackElement("CYCLE_PAGE_SIDEBAR_END_DATE_BUTTON");
+                              handleEndDateChange(val);
+                              close();
+                            }
+                          }}
+                          startDate={watch("start_date") ?? watch("end_date") ?? null}
+                          endDate={watch("end_date") ?? watch("start_date") ?? null}
+                          minDate={new Date(`${watch("start_date")}`)}
+                          selectsEnd={watch("start_date") ? true : false}
+                        />
+                      </Popover.Panel>
+                    </Transition>
+                  </>
+                )}
               </Popover>
             </div>
           </div>
diff --git a/web/components/modules/sidebar.tsx b/web/components/modules/sidebar.tsx
index 5b2c8f170..f43326b6b 100644
--- a/web/components/modules/sidebar.tsx
+++ b/web/components/modules/sidebar.tsx
@@ -1,20 +1,8 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { Controller, useForm } from "react-hook-form";
 import { Disclosure, Popover, Transition } from "@headlessui/react";
-// hooks
-import { useModule, useUser } from "hooks/store";
-// hooks
-import useToast from "hooks/use-toast";
-// components
-import { LinkModal, LinksList, SidebarProgressStats } from "components/core";
-import { DeleteModuleModal } from "components/modules";
-import ProgressChart from "components/core/sidebar/progress-chart";
-// ui
-import { CustomRangeDatePicker } from "components/ui";
-import { CustomMenu, Loader, LayersIcon, CustomSelect, ModuleStatusIcon, UserGroupIcon } from "@plane/ui";
-// icon
 import {
   AlertCircle,
   CalendarCheck2,
@@ -27,6 +15,17 @@ import {
   Trash2,
   UserCircle2,
 } from "lucide-react";
+// hooks
+import { useModule, useUser } from "hooks/store";
+import useToast from "hooks/use-toast";
+// components
+import { LinkModal, LinksList, SidebarProgressStats } from "components/core";
+import { DeleteModuleModal } from "components/modules";
+import ProgressChart from "components/core/sidebar/progress-chart";
+import { ProjectMemberDropdown } from "components/dropdowns";
+// ui
+import { CustomRangeDatePicker } from "components/ui";
+import { CustomMenu, Loader, LayersIcon, CustomSelect, ModuleStatusIcon, UserGroupIcon } from "@plane/ui";
 // helpers
 import { isDateGreaterThanToday, renderFormattedPayloadDate, renderFormattedDate } from "helpers/date-time.helper";
 import { copyUrlToClipboard } from "helpers/string.helper";
@@ -35,7 +34,6 @@ import { ILinkDetails, IModule, ModuleLink } from "@plane/types";
 // constant
 import { MODULE_STATUS } from "constants/module";
 import { EUserProjectRoles } from "constants/project";
-import { ProjectMemberDropdown } from "components/dropdowns";
 
 const defaultValues: Partial<IModule> = {
   lead: "",
@@ -57,6 +55,9 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
   const [moduleDeleteModal, setModuleDeleteModal] = useState(false);
   const [moduleLinkModal, setModuleLinkModal] = useState(false);
   const [selectedLinkToUpdate, setSelectedLinkToUpdate] = useState<ILinkDetails | null>(null);
+  // refs
+  const startDateButtonRef = useRef<HTMLButtonElement | null>(null);
+  const endDateButtonRef = useRef<HTMLButtonElement | null>(null);
   // router
   const router = useRouter();
   const { workspaceSlug, projectId, peekModule } = router.query;
@@ -164,6 +165,8 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
   const handleStartDateChange = async (date: string) => {
     setValue("start_date", date);
 
+    if (!watch("target_date") || watch("target_date") === "") endDateButtonRef.current?.click();
+
     if (watch("start_date") && watch("target_date") && watch("start_date") !== "" && watch("start_date") !== "") {
       if (!isDateGreaterThanToday(`${watch("target_date")}`)) {
         setToastAlert({
@@ -171,6 +174,9 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
           title: "Error!",
           message: "Unable to create module in past date. Please enter a valid date.",
         });
+        reset({
+          ...moduleDetails,
+        });
         return;
       }
 
@@ -189,6 +195,8 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
   const handleEndDateChange = async (date: string) => {
     setValue("target_date", date);
 
+    if (!watch("start_date") || watch("start_date") === "") endDateButtonRef.current?.click();
+
     if (watch("start_date") && watch("target_date") && watch("start_date") !== "" && watch("start_date") !== "") {
       if (!isDateGreaterThanToday(`${watch("target_date")}`)) {
         setToastAlert({
@@ -196,6 +204,9 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
           title: "Error!",
           message: "Unable to create module in past date. Please enter a valid date.",
         });
+        reset({
+          ...moduleDetails,
+        });
         return;
       }
 
@@ -355,49 +366,55 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
             <div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
               <CalendarClock className="h-4 w-4" />
 
-              <span className="text-base">Start Date</span>
+              <span className="text-base">Start date</span>
             </div>
             <div className="relative flex w-1/2 items-center rounded-sm">
               <Popover className="flex h-full w-full items-center justify-center rounded-lg">
-                <Popover.Button
-                  className={`w-full cursor-pointer rounded-sm text-sm font-medium text-custom-text-300 hover:bg-custom-background-80 ${
-                    isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
-                  }`}
-                  disabled={!isEditingAllowed}
-                >
-                  <span
-                    className={`group flex w-full items-center justify-between gap-2 px-1.5 py-1 text-sm ${
-                      watch("start_date") ? "" : "text-custom-text-400"
-                    }`}
-                  >
-                    {renderFormattedDate(startDate) ?? "No date selected"}
-                  </span>
-                </Popover.Button>
+                {({ close }) => (
+                  <>
+                    <Popover.Button
+                      ref={startDateButtonRef}
+                      className={`w-full cursor-pointer rounded-sm text-sm font-medium text-custom-text-300 hover:bg-custom-background-80 ${
+                        isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
+                      }`}
+                      disabled={!isEditingAllowed}
+                    >
+                      <span
+                        className={`group flex w-full items-center justify-between gap-2 px-1.5 py-1 text-sm ${
+                          watch("start_date") ? "" : "text-custom-text-400"
+                        }`}
+                      >
+                        {renderFormattedDate(startDate) ?? "No date selected"}
+                      </span>
+                    </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 right-0 top-10 z-20  transform overflow-hidden">
-                    <CustomRangeDatePicker
-                      value={watch("start_date") ? watch("start_date") : moduleDetails?.start_date}
-                      onChange={(val) => {
-                        if (val) {
-                          handleStartDateChange(val);
-                        }
-                      }}
-                      startDate={watch("start_date") ?? watch("target_date") ?? null}
-                      endDate={watch("target_date") ?? watch("start_date") ?? null}
-                      maxDate={new Date(`${watch("target_date")}`)}
-                      selectsStart={watch("target_date") ? true : false}
-                    />
-                  </Popover.Panel>
-                </Transition>
+                    <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 right-0 top-10 z-20  transform overflow-hidden">
+                        <CustomRangeDatePicker
+                          value={watch("start_date") ? watch("start_date") : moduleDetails?.start_date}
+                          onChange={(val) => {
+                            if (val) {
+                              handleStartDateChange(val);
+                              close();
+                            }
+                          }}
+                          startDate={watch("start_date") ?? watch("target_date") ?? null}
+                          endDate={watch("target_date") ?? watch("start_date") ?? null}
+                          maxDate={new Date(`${watch("target_date")}`)}
+                          selectsStart={watch("target_date") ? true : false}
+                        />
+                      </Popover.Panel>
+                    </Transition>
+                  </>
+                )}
               </Popover>
             </div>
           </div>
@@ -405,51 +422,55 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
           <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">
               <CalendarCheck2 className="h-4 w-4" />
-              <span className="text-base">Target Date</span>
+              <span className="text-base">Target date</span>
             </div>
             <div className="relative flex w-1/2 items-center rounded-sm">
               <Popover className="flex h-full w-full items-center justify-center rounded-lg">
-                <>
-                  <Popover.Button
-                    className={`w-full cursor-pointer rounded-sm text-sm font-medium text-custom-text-300 hover:bg-custom-background-80 ${
-                      isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
-                    }`}
-                    disabled={!isEditingAllowed}
-                  >
-                    <span
-                      className={`group flex w-full items-center justify-between gap-2 px-1.5 py-1 text-sm ${
-                        watch("target_date") ? "" : "text-custom-text-400"
+                {({ close }) => (
+                  <>
+                    <Popover.Button
+                      ref={endDateButtonRef}
+                      className={`w-full cursor-pointer rounded-sm text-sm font-medium text-custom-text-300 hover:bg-custom-background-80 ${
+                        isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
                       }`}
+                      disabled={!isEditingAllowed}
                     >
-                      {renderFormattedDate(endDate) ?? "No date selected"}
-                    </span>
-                  </Popover.Button>
+                      <span
+                        className={`group flex w-full items-center justify-between gap-2 px-1.5 py-1 text-sm ${
+                          watch("target_date") ? "" : "text-custom-text-400"
+                        }`}
+                      >
+                        {renderFormattedDate(endDate) ?? "No date selected"}
+                      </span>
+                    </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 right-0 top-10 z-20 transform overflow-hidden">
-                      <CustomRangeDatePicker
-                        value={watch("target_date") ? watch("target_date") : moduleDetails?.target_date}
-                        onChange={(val) => {
-                          if (val) {
-                            handleEndDateChange(val);
-                          }
-                        }}
-                        startDate={watch("start_date") ?? watch("target_date") ?? null}
-                        endDate={watch("target_date") ?? watch("start_date") ?? null}
-                        minDate={new Date(`${watch("start_date")}`)}
-                        selectsEnd={watch("start_date") ? true : false}
-                      />
-                    </Popover.Panel>
-                  </Transition>
-                </>
+                    <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 right-0 top-10 z-20 transform overflow-hidden">
+                        <CustomRangeDatePicker
+                          value={watch("target_date") ? watch("target_date") : moduleDetails?.target_date}
+                          onChange={(val) => {
+                            if (val) {
+                              handleEndDateChange(val);
+                              close();
+                            }
+                          }}
+                          startDate={watch("start_date") ?? watch("target_date") ?? null}
+                          endDate={watch("target_date") ?? watch("start_date") ?? null}
+                          minDate={new Date(`${watch("start_date")}`)}
+                          selectsEnd={watch("start_date") ? true : false}
+                        />
+                      </Popover.Panel>
+                    </Transition>
+                  </>
+                )}
               </Popover>
             </div>
           </div>
diff --git a/web/components/profile/index.ts b/web/components/profile/index.ts
index ffd05c5a5..f6d2a3775 100644
--- a/web/components/profile/index.ts
+++ b/web/components/profile/index.ts
@@ -1,5 +1,5 @@
 export * from "./overview";
 export * from "./navbar";
-export * from "./sidebar";
-
 export * from "./profile-issues-filter";
+export * from "./sidebar";
+export * from "./time";
diff --git a/web/components/profile/sidebar.tsx b/web/components/profile/sidebar.tsx
index a701a058d..3ce7747c9 100644
--- a/web/components/profile/sidebar.tsx
+++ b/web/components/profile/sidebar.tsx
@@ -7,6 +7,8 @@ import { observer } from "mobx-react-lite";
 import { useUser } from "hooks/store";
 // services
 import { UserService } from "services/user.service";
+// components
+import { ProfileSidebarTime } from "./time";
 // ui
 import { Loader, Tooltip } from "@plane/ui";
 // icons
@@ -34,16 +36,6 @@ export const ProfileSidebar = observer(() => {
       : null
   );
 
-  // Create a date object for the current time in the specified timezone
-  const currentTime = new Date();
-  const formatter = new Intl.DateTimeFormat("en-US", {
-    timeZone: userProjectsData?.user_data.user_timezone,
-    hour12: false, // Use 24-hour format
-    hour: "2-digit",
-    minute: "2-digit",
-  });
-  const timeString = formatter.format(currentTime);
-
   const userDetails = [
     {
       label: "Joined on",
@@ -51,11 +43,7 @@ export const ProfileSidebar = observer(() => {
     },
     {
       label: "Timezone",
-      value: (
-        <span>
-          {timeString} <span className="text-custom-text-200">{userProjectsData?.user_data.user_timezone}</span>
-        </span>
-      ),
+      value: <ProfileSidebarTime timeZone={userProjectsData?.user_data.user_timezone} />,
     },
   ];
 
diff --git a/web/components/profile/time.tsx b/web/components/profile/time.tsx
new file mode 100644
index 000000000..a1b740410
--- /dev/null
+++ b/web/components/profile/time.tsx
@@ -0,0 +1,27 @@
+// hooks
+import { useCurrentTime } from "hooks/use-current-time";
+
+type Props = {
+  timeZone: string | undefined;
+};
+
+export const ProfileSidebarTime: React.FC<Props> = (props) => {
+  const { timeZone } = props;
+  // current time hook
+  const { currentTime } = useCurrentTime();
+
+  // Create a date object for the current time in the specified timezone
+  const formatter = new Intl.DateTimeFormat("en-US", {
+    timeZone: timeZone,
+    hour12: false, // Use 24-hour format
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+  const timeString = formatter.format(currentTime);
+
+  return (
+    <span>
+      {timeString} <span className="text-custom-text-200">{timeZone}</span>
+    </span>
+  );
+};
diff --git a/web/components/user/user-greetings.tsx b/web/components/user/user-greetings.tsx
index a9a449c93..3341ac77f 100644
--- a/web/components/user/user-greetings.tsx
+++ b/web/components/user/user-greetings.tsx
@@ -1,4 +1,7 @@
 import { FC } from "react";
+// hooks
+import { useCurrentTime } from "hooks/use-current-time";
+// types
 import { IUser } from "@plane/types";
 
 export interface IUserGreetingsView {
@@ -7,8 +10,8 @@ export interface IUserGreetingsView {
 
 export const UserGreetingsView: FC<IUserGreetingsView> = (props) => {
   const { user } = props;
-
-  const currentTime = new Date();
+  // current time hook
+  const { currentTime } = useCurrentTime();
 
   const hour = new Intl.DateTimeFormat("en-US", {
     hour12: false,
diff --git a/web/hooks/use-current-time.tsx b/web/hooks/use-current-time.tsx
new file mode 100644
index 000000000..fc37129c6
--- /dev/null
+++ b/web/hooks/use-current-time.tsx
@@ -0,0 +1,17 @@
+import { useEffect, useState } from "react";
+
+export const useCurrentTime = () => {
+  const [currentTime, setCurrentTime] = useState(new Date());
+  // update the current time every second
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setCurrentTime(new Date());
+    }, 1000);
+
+    return () => clearInterval(intervalId);
+  }, []);
+
+  return {
+    currentTime,
+  };
+};