diff --git a/frontend/src/components/Controls/DatePicker.vue b/frontend/src/components/Controls/DatePicker.vue
index af236935..79d799a9 100644
--- a/frontend/src/components/Controls/DatePicker.vue
+++ b/frontend/src/components/Controls/DatePicker.vue
@@ -167,7 +167,7 @@ export default {
     formatMonth() {
       let date = this.getDate(this.currentYear, this.currentMonth - 1, 1)
       return date.toLocaleString('en-US', {
-        month: 'short',
+        month: 'long',
         year: 'numeric',
       })
     },
diff --git a/frontend/src/components/Controls/DateRangePicker.vue b/frontend/src/components/Controls/DateRangePicker.vue
index 64a00fd6..3f147c51 100644
--- a/frontend/src/components/Controls/DateRangePicker.vue
+++ b/frontend/src/components/Controls/DateRangePicker.vue
@@ -18,81 +18,77 @@
     </template>
     <template #body="{ togglePopover }">
       <div
-        class="my-2 w-[16rem] select-none space-y-3 rounded border border-gray-50 bg-white p-3 text-base shadow"
+        class="mt-2 w-fit select-none divide-y rounded-lg bg-white text-base shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
       >
-        <div class="flex items-center text-gray-700">
-          <div
-            class="flex h-6 w-6 cursor-pointer items-center justify-center rounded hover:bg-gray-100"
-          >
-            <FeatherIcon
-              @click="prevMonth"
-              name="chevron-left"
-              class="h-5 w-5"
-            />
-          </div>
-          <div class="flex-1 text-center text-lg font-medium text-blue-500">
+        <div class="flex items-center p-1 text-gray-500">
+          <Button variant="ghost" class="h-7 w-7" @click="prevMonth">
+            <FeatherIcon stroke-width="2" name="chevron-left" class="h-4 w-4" />
+          </Button>
+          <div class="flex-1 text-center text-base font-medium text-gray-700">
             {{ formatMonth }}
           </div>
-          <div
-            class="flex h-6 w-6 cursor-pointer items-center justify-center rounded hover:bg-gray-100"
-          >
+          <Button variant="ghost" class="h-7 w-7" @click="nextMonth">
             <FeatherIcon
-              @click="nextMonth"
+              stroke-width="2"
               name="chevron-right"
-              class="h-5 w-5"
+              class="h-4 w-4"
             />
-          </div>
+          </Button>
         </div>
-        <div class="flex space-x-2">
-          <Input type="text" v-model="fromDate"></Input>
-          <Input type="text" v-model="toDate"></Input>
+        <div class="flex items-center justify-center gap-1 p-1">
+          <TextInput class="w-28 text-sm" type="text" v-model="fromDate" />
+          <TextInput class="w-28 text-sm" type="text" v-model="toDate" />
         </div>
-        <div class="mt-2 flex flex-col items-center justify-center text-base">
-          <div
-            class="flex w-full items-center justify-center space-x-1 text-gray-600"
-          >
+        <div
+          class="flex flex-col items-center justify-center p-1 text-gray-800"
+        >
+          <div class="flex items-center text-xs uppercase">
             <div
-              class="flex h-[30px] w-[30px] items-center justify-center text-center"
-              v-for="(d, i) in ['S', 'M', 'T', 'W', 'T', 'F', 'S']"
+              class="flex h-6 w-8 items-center justify-center text-center"
+              v-for="(d, i) in ['su', 'mo', 'tu', 'we', 'th', 'fr', 'sa']"
               :key="i"
             >
               {{ d }}
             </div>
           </div>
-          <div v-for="(week, i) in datesAsWeeks" :key="i">
-            <div class="flex w-full items-center">
-              <div
-                v-for="date in week"
-                :key="toValue(date)"
-                class="flex h-[30px] w-[30px] cursor-pointer items-center justify-center hover:bg-blue-50 hover:text-blue-500"
-                :class="{
-                  'text-gray-600': date.getMonth() !== currentMonth - 1,
-                  'text-blue-500': toValue(date) === toValue(today),
-                  'bg-blue-50 text-blue-500': isInRange(date),
-                  'rounded-l-md bg-blue-100':
-                    fromDate && toValue(date) === toValue(fromDate),
-                  'rounded-r-md bg-blue-100':
-                    toDate && toValue(date) === toValue(toDate),
-                }"
-                @click="() => handleDateClick(date)"
-              >
-                {{ date.getDate() }}
-              </div>
+          <div
+            class="flex items-center"
+            v-for="(week, i) in datesAsWeeks"
+            :key="i"
+          >
+            <div
+              v-for="date in week"
+              :key="toValue(date)"
+              class="flex h-8 w-8 cursor-pointer items-center justify-center rounded hover:bg-gray-50"
+              :class="{
+                'text-gray-400': date.getMonth() !== currentMonth - 1,
+                'text-gray-900': date.getMonth() === currentMonth - 1,
+                'font-extrabold text-gray-900':
+                  toValue(date) === toValue(today),
+                'rounded-none bg-gray-100': isInRange(date),
+                'rounded-l-md rounded-r-none bg-gray-800 text-white hover:bg-gray-800':
+                  fromDate && toValue(date) === toValue(fromDate),
+                'rounded-r-md bg-gray-800 text-white hover:bg-gray-800':
+                  toDate && toValue(date) === toValue(toDate),
+              }"
+              @click="() => handleDateClick(date)"
+            >
+              {{ date.getDate() }}
             </div>
           </div>
         </div>
-
-        <div class="mt-1 flex w-full justify-end space-x-2">
-          <Button @click="() => clearDates()" :disabled="!value">
-            Clear
-          </Button>
+        <div class="flex justify-end space-x-1 p-1">
           <Button
-            @click="() => selectDates() | togglePopover()"
+            label="Clear"
+            @click="() => clearDates() | togglePopover()"
             :disabled="!fromDate || !toDate"
+          />
+          <Button
             variant="solid"
-          >
-            Apply
-          </Button>
+            label="Apply"
+            :disabled="!fromDate || !toDate"
+            @click="() => selectDates() | togglePopover()"
+          />
         </div>
       </div>
     </template>
@@ -166,7 +162,7 @@ export default {
     formatMonth() {
       let date = this.getDate(this.currentYear, this.currentMonth - 1, 1)
       return date.toLocaleString('en-US', {
-        month: 'short',
+        month: 'long',
         year: 'numeric',
       })
     },