diff --git a/web/src/components/HeaderBar.vue b/web/src/components/HeaderBar.vue
index 5e91148..1b6379c 100644
--- a/web/src/components/HeaderBar.vue
+++ b/web/src/components/HeaderBar.vue
@@ -33,23 +33,28 @@
                 v-model="addLicenseName"
                 variant="outlined"
                 required
+                clearable
               ></v-text-field>
-              <div>
-                <div class="mb-2">
-                  <v-menu>
-                    <template v-slot:activator="{ props }">
+                <div>
+                  <div class="mb-3">
+                    <v-menu>
+                      <template v-slot:activator="{ props }">
 
-                    <v-text-field
-                      v-bind="props"
-                      label="Start Date (optional)"
-                      variant="outlined"
-                      v-model="addStartDate"
-                      readonly
-                    >
+                      <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>
                 </div>
@@ -58,15 +63,19 @@
                     <template v-slot:activator="{ props }">
                       <v-text-field
                         v-bind="props"
-                        label="Start Date (optional)"
+                        label="Stop Date (optional)"
                         variant="outlined"
-                        v-model="addStopDate"
+                        :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>
                 </div>
@@ -75,11 +84,13 @@
                 label="Amount (optional)"
                 v-model="addAmount"
                 variant="outlined"
+                clearable
               ></v-text-field>
               <v-text-field
                 label="Notes (optional)"
                 v-model="addNotes"
                 variant="outlined"
+                clearable
               ></v-text-field>
               <span class="dialogNote "> all fields marked with * are required </span>
             </div>
@@ -137,9 +148,7 @@
 <script setup lang="ts">
 import { store } from '@/store';
 import { Plus, LogOut, Pencil, CalendarCheck, CalendarX } from 'lucide-vue-next';
-import { ref } from 'vue';
-import { useDate } from 'vuetify' // Used for unifying Date inputs to ISO
-
+import { computed, ref } from 'vue';
 
 function handlelogout() {
   console.log('logout');
@@ -153,9 +162,10 @@ const addAmount = ref('');
 const addNotes = ref('');
 
 // Date Picker
-//this fucked it up somehow: new Date().toISOString().substr(0, 10)
-const addStartDate = ref();
-const addStopDate = ref();
+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(): "");
 
 </script>