diff --git a/web/src/components/HeaderBar.vue b/web/src/components/HeaderBar.vue
index 08bb44a..5e91148 100644
--- a/web/src/components/HeaderBar.vue
+++ b/web/src/components/HeaderBar.vue
@@ -44,18 +44,31 @@
                       label="Start Date (optional)"
                       variant="outlined"
                       v-model="addStartDate"
+                      readonly
                     >
                     </v-text-field>
                   </template>
                   <v-date-picker
-                    v-modle="addStartDate"
+                    v-model="addStartDate"
                   ></v-date-picker>
                   </v-menu>
                 </div>
                 <div class="mb-5">
-                  <v-btn stacked variant="outlined">
-                    <CalendarX/>
-                  </v-btn>
+                  <v-menu>
+                    <template v-slot:activator="{ props }">
+                      <v-text-field
+                        v-bind="props"
+                        label="Start Date (optional)"
+                        variant="outlined"
+                        v-model="addStopDate"
+                        readonly
+                      >
+                      </v-text-field>
+                    </template>
+                    <v-date-picker
+                      v-model="addStopDate"
+                    ></v-date-picker>
+                  </v-menu>
                 </div>
               </div>
               <v-text-field
@@ -140,7 +153,9 @@ const addAmount = ref('');
 const addNotes = ref('');
 
 // Date Picker
-const addStartDate = ref(new Date().toISOString().substr(0, 10));
+//this fucked it up somehow: new Date().toISOString().substr(0, 10)
+const addStartDate = ref();
+const addStopDate = ref();
 
 </script>