diff --git a/web/src/components/HeaderBar.vue b/web/src/components/HeaderBar.vue
index e9c67d7..d6419e6 100644
--- a/web/src/components/HeaderBar.vue
+++ b/web/src/components/HeaderBar.vue
@@ -31,46 +31,24 @@
                   ></v-text-field>
                   <div>
                     <div class="mb-3">
-                      <v-menu>
-                        <template v-slot:activator="{ props }">
-                          <v-text-field
-                            v-bind="props"
-                            label="Start Date (optional)"
-                            variant="outlined"
-                            :model-value="addStartDateDisplay"
-                            @click:clear="(event: Event) => addStartDate = undefined"
-                            readonly
-                            clearable
-                            hide-details
-                          >
-                          </v-text-field>
-                        </template>
-                        <v-date-picker
-                          v-model="addStartDate"
-                          show-adjacent-months
-                        ></v-date-picker>
-                      </v-menu>
+                      <v-date-input
+                        label="Start Date (optional)"
+                        variant="outlined"
+                        prepend-icon=""
+                        prepend-inner-icon="mdi-calendar-check"
+                        clearable
+                        v-model="addStartDate"
+                      ></v-date-input>
                     </div>
                     <div class="mb-5">
-                      <v-menu>
-                        <template v-slot:activator="{ props }">
-                          <v-text-field
-                            v-bind="props"
-                            label="Stop Date (optional)"
-                            variant="outlined"
-                            :model-value="addStopDateDisplay"
-                            @click:clear="(event: Event) => addStopDate = undefined"
-                            readonly
-                            clearable
-                            hide-details
-                          >
-                          </v-text-field>
-                        </template>
-                        <v-date-picker
-                          v-model="addStopDate"
-                          show-adjacent-months
-                        ></v-date-picker>
-                      </v-menu>
+                      <v-date-input
+                        label="Stop Date (optional)"
+                        variant="outlined"
+                        prepend-icon=""
+                        prepend-inner-icon="mdi-calendar-remove"
+                        clearable
+                        v-model="addStopDate"
+                      ></v-date-input>
                     </div>
                   </div>
                   <v-number-input
@@ -206,13 +184,7 @@ const addNotes = ref<string | undefined>("");
 
 // Date Picker
 const addStartDate = ref<Date | undefined>();
-const addStartDateDisplay = computed<string>(() =>
-  addStartDate.value ? addStartDate.value.toLocaleDateString() : ""
-);
 const addStopDate = ref<Date | undefined>();
-const addStopDateDisplay = computed<string>(() =>
-  addStopDate.value ? addStopDate.value.toLocaleDateString() : ""
-);
 
 //
 //  EDIT SECTION
diff --git a/web/src/plugins/vuetify.ts b/web/src/plugins/vuetify.ts
index 27d13ef..ce81042 100644
--- a/web/src/plugins/vuetify.ts
+++ b/web/src/plugins/vuetify.ts
@@ -10,7 +10,7 @@ import "vuetify/styles";
 
 // Composables
 import { createVuetify } from "vuetify";
-import { VNumberInput } from "vuetify/labs/components";
+import { VNumberInput, VDateInput } from "vuetify/labs/components";
 
 // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
 export default createVuetify({
@@ -31,5 +31,6 @@ export default createVuetify({
   },
   components: {
     VNumberInput,
+    VDateInput,
   },
 });