diff --git a/apps/app/components/core/board-view/single-issue.tsx b/apps/app/components/core/board-view/single-issue.tsx
index b36008c77..e0ad96d1f 100644
--- a/apps/app/components/core/board-view/single-issue.tsx
+++ b/apps/app/components/core/board-view/single-issue.tsx
@@ -349,7 +349,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
               />
             )}
             {properties.sub_issue_count && (
-              <div className="flex flex-shrink-0 items-center gap-1 rounded-md border border-brand-base px-3 py-1.5 text-xs shadow-sm">
+              <div className="flex flex-shrink-0 items-center gap-1 rounded-md border border-brand-base px-2 py-1 text-xs text-brand-secondary shadow-sm">
                 {issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
               </div>
             )}
diff --git a/apps/app/components/core/list-view/single-issue.tsx b/apps/app/components/core/list-view/single-issue.tsx
index 0d34adf9e..71ccc9db4 100644
--- a/apps/app/components/core/list-view/single-issue.tsx
+++ b/apps/app/components/core/list-view/single-issue.tsx
@@ -268,7 +268,7 @@ export const SingleListIssue: React.FC<Props> = ({
             />
           )}
           {properties.sub_issue_count && (
-            <div className="flex items-center gap-1 rounded-md border border-brand-base px-3 py-1 text-xs text-brand-secondary shadow-sm">
+            <div className="flex items-center gap-1 rounded-md border border-brand-base px-2 py-1 text-xs text-brand-secondary shadow-sm">
               {issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
             </div>
           )}
diff --git a/apps/app/components/cycles/sidebar.tsx b/apps/app/components/cycles/sidebar.tsx
index f896d232e..863da7934 100644
--- a/apps/app/components/cycles/sidebar.tsx
+++ b/apps/app/components/cycles/sidebar.tsx
@@ -141,25 +141,25 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
           <>
             <div className="flex flex-col items-start justify-center">
               <div className="flex gap-2.5 px-5 text-sm">
-                <div className="flex items-center ">
-                  <span
-                    className={`flex items-center rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2.5 py-1.5 text-center text-sm capitalize text-brand-muted-1 `}
-                  >
+                <div className="flex items-center">
+                  <span className="flex items-center rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2 py-1 text-center text-xs capitalize">
                     {capitalizeFirstLetter(cycleStatus)}
                   </span>
                 </div>
-                <div className="relative flex h-full w-52 items-center justify-center gap-2 text-sm text-brand-muted-1">
-                  <Popover className="flex h-full items-center  justify-center rounded-lg">
+                <div className="relative flex h-full w-52 items-center gap-2">
+                  <Popover className="flex h-full items-center justify-center rounded-lg">
                     {({ open }) => (
                       <>
                         <Popover.Button
                           disabled={isCompleted ?? false}
-                          className={`group flex h-full items-center gap-1 rounded border-[0.5px]  border-brand-base bg-brand-surface-1 px-2.5 py-1.5 text-brand-muted-1   ${
-                            open ? "bg-brand-surface-1" : ""
+                          className={`group flex h-full items-center gap-2 whitespace-nowrap rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2 py-1 text-xs ${
+                            cycle.start_date ? "" : "text-brand-secondary"
                           }`}
                         >
                           <CalendarDaysIcon className="h-3 w-3" />
-                          <span>{renderShortDate(new Date(`${cycle?.start_date}`))}</span>
+                          <span>
+                            {renderShortDate(new Date(`${cycle?.start_date}`), "Start date")}
+                          </span>
                         </Popover.Button>
 
                         <Transition
@@ -209,20 +209,20 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                     )}
                   </Popover>
                   <span>
-                    <ArrowLongRightIcon className="h-3 w-3" />
+                    <ArrowLongRightIcon className="h-3 w-3 text-brand-secondary" />
                   </span>
-                  <Popover className="flex h-full items-center  justify-center rounded-lg">
+                  <Popover className="flex h-full items-center justify-center rounded-lg">
                     {({ open }) => (
                       <>
                         <Popover.Button
                           disabled={isCompleted ?? false}
-                          className={`group flex items-center gap-1 rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2.5 py-1.5 text-brand-muted-1  ${
-                            open ? "bg-brand-surface-1" : ""
+                          className={`group flex items-center gap-2 whitespace-nowrap rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2 py-1 text-xs ${
+                            cycle.end_date ? "" : "text-brand-secondary"
                           }`}
                         >
-                          <CalendarDaysIcon className="h-3 w-3 " />
+                          <CalendarDaysIcon className="h-3 w-3" />
 
-                          <span>{renderShortDate(new Date(`${cycle?.end_date}`))}</span>
+                          <span>{renderShortDate(new Date(`${cycle?.end_date}`), "End date")}</span>
                         </Popover.Button>
 
                         <Transition
@@ -234,7 +234,7 @@ export const CycleDetailsSidebar: React.FC<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">
                             <DatePicker
                               selected={
                                 watch("end_date") ? new Date(`${watch("end_date")}`) : new Date()
@@ -275,9 +275,9 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                 </div>
               </div>
 
-              <div className="flex flex-col gap-6 px-6 py-6 w-full">
-                <div className="flex flex-col items-start justify-start gap-2 w-full">
-                  <div className="flex items-start justify-between gap-2 w-full">
+              <div className="flex w-full flex-col gap-6 px-6 py-6">
+                <div className="flex w-full flex-col items-start justify-start gap-2">
+                  <div className="flex w-full items-start justify-between gap-2">
                     <h4 className="text-xl font-semibold text-brand-base">{cycle.name}</h4>
                     <CustomMenu width="lg" ellipsis>
                       {!isCompleted && (
diff --git a/apps/app/components/issues/sidebar-select/parent.tsx b/apps/app/components/issues/sidebar-select/parent.tsx
index 36c4a57cc..92a51269f 100644
--- a/apps/app/components/issues/sidebar-select/parent.tsx
+++ b/apps/app/components/issues/sidebar-select/parent.tsx
@@ -83,11 +83,13 @@ export const SidebarParentSelect: React.FC<Props> = ({
           onClick={() => setIsParentModalOpen(true)}
           disabled={isNotAllowed}
         >
-          {watch("parent") && watch("parent") !== ""
-            ? `${issues?.find((i) => i.id === watch("parent"))?.project_detail?.identifier}-${
-                issues?.find((i) => i.id === watch("parent"))?.sequence_id
-              }`
-            : "Select issue"}
+          {watch("parent") && watch("parent") !== "" ? (
+            `${issues?.find((i) => i.id === watch("parent"))?.project_detail?.identifier}-${
+              issues?.find((i) => i.id === watch("parent"))?.sequence_id
+            }`
+          ) : (
+            <span className="text-brand-secondary">Select issue</span>
+          )}
         </button>
       </div>
     </div>
diff --git a/apps/app/components/issues/sidebar.tsx b/apps/app/components/issues/sidebar.tsx
index fbdcd7714..54cf69e1d 100644
--- a/apps/app/components/issues/sidebar.tsx
+++ b/apps/app/components/issues/sidebar.tsx
@@ -354,6 +354,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                   name="target_date"
                   render={({ field: { value } }) => (
                     <CustomDatePicker
+                      placeholder="Due date"
                       value={value}
                       onChange={(val) =>
                         submitChanges({
diff --git a/apps/app/components/issues/view-select/due-date.tsx b/apps/app/components/issues/view-select/due-date.tsx
index 61aad5766..d3f16c5b4 100644
--- a/apps/app/components/issues/view-select/due-date.tsx
+++ b/apps/app/components/issues/view-select/due-date.tsx
@@ -31,7 +31,7 @@ export const ViewDueDateSelect: React.FC<Props> = ({ issue, partialUpdateIssue,
         }`}
       >
         <CustomDatePicker
-          placeholder="N/A"
+          placeholder="Due date"
           value={issue?.target_date}
           onChange={(val) => {
             partialUpdateIssue({
@@ -51,7 +51,7 @@ export const ViewDueDateSelect: React.FC<Props> = ({ issue, partialUpdateIssue,
               "ISSUE_PROPERTY_UPDATE_DUE_DATE"
             );
           }}
-          className={issue?.target_date ? "w-[6.5rem]" : "w-[3rem] text-center"}
+          className={issue?.target_date ? "w-[6.5rem]" : "w-[5rem] text-center"}
           disabled={isNotAllowed}
         />
       </div>
diff --git a/apps/app/components/modules/sidebar-select/select-lead.tsx b/apps/app/components/modules/sidebar-select/select-lead.tsx
index b551294fb..cea3627f1 100644
--- a/apps/app/components/modules/sidebar-select/select-lead.tsx
+++ b/apps/app/components/modules/sidebar-select/select-lead.tsx
@@ -62,25 +62,17 @@ export const SidebarLeadSelect: React.FC<Props> = ({ value, onChange }) => {
         <CustomSearchSelect
           value={value}
           label={
-            <div className="flex items-center gap-2 text-brand-secondary">
+            <div className="flex items-center gap-2">
+              {selectedOption && <Avatar user={selectedOption} />}
               {selectedOption ? (
-                <Avatar user={selectedOption} />
+                selectedOption?.first_name && selectedOption.first_name !== "" ? (
+                  selectedOption?.first_name
+                ) : (
+                  selectedOption?.email
+                )
               ) : (
-                <div className="h-5 w-5 rounded-full border-2 border-transparent bg-brand-surface-2">
-                  <Image
-                    src={User}
-                    height="100%"
-                    width="100%"
-                    className="rounded-full"
-                    alt="No user"
-                  />
-                </div>
+                <span className="text-brand-secondary">No lead</span>
               )}
-              {selectedOption
-                ? selectedOption?.first_name && selectedOption.first_name !== ""
-                  ? selectedOption?.first_name
-                  : selectedOption?.email
-                : "N/A"}
             </div>
           }
           options={options}
diff --git a/apps/app/components/modules/sidebar.tsx b/apps/app/components/modules/sidebar.tsx
index e3d75be45..3b3076e05 100644
--- a/apps/app/components/modules/sidebar.tsx
+++ b/apps/app/components/modules/sidebar.tsx
@@ -198,9 +198,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
                     render={({ field: { value } }) => (
                       <CustomSelect
                         customButton={
-                          <span
-                            className={`flex cursor-pointer items-center rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2.5 py-1.5 text-center text-sm capitalize text-brand-muted-1 `}
-                          >
+                          <span className="flex cursor-pointer items-center rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2 py-1 text-center text-xs capitalize">
                             {capitalizeFirstLetter(`${watch("status")}`)}
                           </span>
                         }
@@ -218,17 +216,19 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
                     )}
                   />
                 </div>
-                <div className="relative flex h-full w-52 items-center justify-center gap-2 text-sm text-brand-muted-1">
-                  <Popover className="flex h-full items-center  justify-center rounded-lg">
+                <div className="relative flex h-full w-52 items-center gap-2 text-sm">
+                  <Popover className="flex h-full items-center justify-center rounded-lg">
                     {({ open }) => (
                       <>
                         <Popover.Button
-                          className={`group flex h-full items-center gap-1 rounded border-[0.5px]  border-brand-base bg-brand-surface-1 px-2.5 py-1.5 text-brand-muted-1   ${
-                            open ? "bg-brand-surface-1" : ""
+                          className={`group flex h-full items-center gap-2 whitespace-nowrap rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2 py-1 text-xs ${
+                            module.start_date ? "" : "text-brand-secondary"
                           }`}
                         >
                           <CalendarDaysIcon className="h-3 w-3" />
-                          <span>{renderShortDate(new Date(`${module.start_date}`))}</span>
+                          <span>
+                            {renderShortDate(new Date(`${module.start_date}`), "Start date")}
+                          </span>
                         </Popover.Button>
 
                         <Transition
@@ -265,19 +265,21 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
                     )}
                   </Popover>
                   <span>
-                    <ArrowLongRightIcon className="h-3 w-3" />
+                    <ArrowLongRightIcon className="h-3 w-3 text-brand-secondary" />
                   </span>
-                  <Popover className="flex h-full items-center  justify-center rounded-lg">
+                  <Popover className="flex h-full items-center justify-center rounded-lg">
                     {({ open }) => (
                       <>
                         <Popover.Button
-                          className={`group flex items-center gap-1 rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2.5 py-1.5 text-brand-muted-1  ${
-                            open ? "bg-brand-surface-1" : ""
+                          className={`group flex items-center gap-2 whitespace-nowrap rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2 py-1 text-xs ${
+                            module.target_date ? "" : "text-brand-secondary"
                           }`}
                         >
                           <CalendarDaysIcon className="h-3 w-3 " />
 
-                          <span>{renderShortDate(new Date(`${module?.target_date}`))}</span>
+                          <span>
+                            {renderShortDate(new Date(`${module?.target_date}`), "End date")}
+                          </span>
                         </Popover.Button>
 
                         <Transition
@@ -316,9 +318,9 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
                 </div>
               </div>
 
-              <div className="flex flex-col gap-6 px-6 py-6 w-full">
-                <div className="flex flex-col items-start justify-start gap-2 w-full">
-                  <div className="flex items-start justify-between gap-2 w-full  ">
+              <div className="flex w-full flex-col gap-6 px-6 py-6">
+                <div className="flex w-full flex-col items-start justify-start gap-2">
+                  <div className="flex w-full items-start justify-between gap-2  ">
                     <h4 className="text-xl font-semibold text-brand-base">{module.name}</h4>
                     <CustomMenu width="lg" ellipsis>
                       <CustomMenu.MenuItem onClick={() => setModuleDeleteModal(true)}>
@@ -522,9 +524,9 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
               </Disclosure>
             </div>
 
-            <div className="flex w-full flex-col text-xs border-t border-brand-base px-6 py-6">
-              <div className="flex justify-between items-center w-full">
-                <h4 className="font-medium text-sm text-brand-secondary">Links</h4>
+            <div className="flex w-full flex-col border-t border-brand-base px-6 py-6 text-xs">
+              <div className="flex w-full items-center justify-between">
+                <h4 className="text-sm font-medium text-brand-secondary">Links</h4>
                 <button
                   className="grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-1"
                   onClick={() => setModuleLinkModal(true)}
diff --git a/apps/app/helpers/date-time.helper.ts b/apps/app/helpers/date-time.helper.ts
index 1aa7ca4cc..6333e7558 100644
--- a/apps/app/helpers/date-time.helper.ts
+++ b/apps/app/helpers/date-time.helper.ts
@@ -134,7 +134,7 @@ export const renderShortDateWithYearFormat = (date: string | Date) => {
   return isNaN(date.getTime()) ? "N/A" : ` ${month} ${day}, ${year}`;
 };
 
-export const renderShortDate = (date: string | Date) => {
+export const renderShortDate = (date: string | Date, placeholder?: string) => {
   if (!date || date === "") return null;
 
   date = new Date(date);
@@ -155,7 +155,8 @@ export const renderShortDate = (date: string | Date) => {
   ];
   const day = date.getDate();
   const month = months[date.getMonth()];
-  return isNaN(date.getTime()) ? "N/A" : `${day} ${month}`;
+
+  return isNaN(date.getTime()) ? placeholder ?? "N/A" : `${day} ${month}`;
 };
 
 export const renderShortTime = (date: string | Date) => {
@@ -177,11 +178,11 @@ export const renderShortTime = (date: string | Date) => {
 export const isDateRangeValid = (startDate: string, endDate: string) =>
   new Date(startDate) < new Date(endDate);
 
-export const isDateGreaterThanToday = (dateStr: string) =>{
+export const isDateGreaterThanToday = (dateStr: string) => {
   const date = new Date(dateStr);
   const today = new Date();
   return date > today;
-}
+};
 
 export const renderLongDateFormat = (dateString: string) => {
   const date = new Date(dateString);
diff --git a/apps/app/styles/globals.css b/apps/app/styles/globals.css
index 5f846e038..8ca808544 100644
--- a/apps/app/styles/globals.css
+++ b/apps/app/styles/globals.css
@@ -116,11 +116,12 @@ body {
 
 .horizontal-scroll-enable::-webkit-scrollbar-track {
   height: 7px;
+  background-color: rgba(var(--color-bg-base));
 }
 
 .horizontal-scroll-enable::-webkit-scrollbar-thumb {
   border-radius: 5px;
-  background-color: rgba(var(--color-bg-surface-1));
+  background-color: rgba(var(--color-bg-surface-2));
 }
 
 .vertical-scroll-enable::-webkit-scrollbar {