diff --git a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateRange.vue b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateRange.vue
index 2c05b5a50..3b1e0d1e2 100644
--- a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateRange.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateRange.vue
@@ -18,7 +18,7 @@ const setDateRange = range => {
 <template>
   <div class="w-[200px] flex flex-col items-start">
     <h4
-      class="w-full px-5 py-4 text-sm font-medium capitalize text-start text-n-slate-12"
+      class="w-full px-5 py-4 text-xs font-bold capitalize text-start text-n-slate-10"
     >
       {{ $t('DATE_PICKER.DATE_RANGE_OPTIONS.TITLE') }}
     </h4>
diff --git a/app/javascript/dashboard/components/ui/DatePicker/components/DatePickerButton.vue b/app/javascript/dashboard/components/ui/DatePicker/components/DatePickerButton.vue
index 1d46bc9e1..ba0f46e37 100644
--- a/app/javascript/dashboard/components/ui/DatePicker/components/DatePickerButton.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/DatePickerButton.vue
@@ -36,19 +36,15 @@ const formatDateRange = computed(() => {
     return 'Select a date range';
   }
 
-  const formatString = isSameYear(startDate, endDate)
-    ? 'MMM d' // Same year: "Apr 1"
-    : 'MMM d yyyy'; // Different years: "Apr 1 2025"
+  const now = new Date();
+  const bothCurrentYear =
+    isSameYear(startDate, now) && isSameYear(endDate, now);
 
-  if (isSameYear(startDate, new Date()) && isSameYear(endDate, new Date())) {
-    // Both dates are in the current year
+  if (bothCurrentYear) {
     return `${format(startDate, 'MMM d')} - ${format(endDate, 'MMM d')}`;
   }
-  // At least one date is not in the current year
-  return `${format(startDate, formatString)} - ${format(
-    endDate,
-    formatString
-  )}`;
+
+  return `${format(startDate, 'MMM d yyyy')} - ${format(endDate, 'MMM d yyyy')}`;
 });
 
 const activeDateRange = computed(