diff --git a/ui/src/components/loa/loaForm.vue b/ui/src/components/loa/loaForm.vue
index 44eeb1c..c6f71c2 100644
--- a/ui/src/components/loa/loaForm.vue
+++ b/ui/src/components/loa/loaForm.vue
@@ -121,7 +121,7 @@ const minEndDate = computed(() => {
     if (values.start_date) {
         return new CalendarDate(values.start_date.getFullYear(), values.start_date.getMonth() + 1, values.start_date.getDate())
     } else {
-        return null;
+        return today(getLocalTimeZone());
     }
 })
 
@@ -134,6 +134,17 @@ const maxEndDate = computed(() => {
     }
 })
 
+const minStartDate = computed(() => {
+    if (values.type && values.end_date) {
+        let endDateObj = new Date(values.end_date.getTime() - values.type.max_length_days * 24 * 60 * 60 * 1000);
+        let td = today(getLocalTimeZone());
+        let start = new CalendarDate(endDateObj.getFullYear(), endDateObj.getMonth() + 1, endDateObj.getDate())
+        return td.compare(start) > 0 ? td : start;
+    } else {
+        return today(getLocalTimeZone());
+    }
+})
+
 const memberFilter = ref('');
 
 const filteredMembers = computed(() => {
@@ -226,21 +237,31 @@ const filteredMembers = computed(() => {
                             <FieldContent>
                                 <FieldLabel>Start Date</FieldLabel>
                                 <Popover>
-                                    <PopoverTrigger as-child>
-                                        <Button variant="outline" :class="cn(
-                                            'w-full justify-start text-left font-normal',
-                                            !field.value && 'text-muted-foreground',
-                                        )">
-                                            <CalendarIcon class="mr-2 h-4 w-4" />
-                                            {{ field.value ? df.format(field.value) : "Pick a date" }}
-                                        </Button>
-                                    </PopoverTrigger>
+                                    <div class="relative inline-flex items-center group">
+                                        <PopoverTrigger as-child>
+                                            <Button :disabled="!values.type" variant="outline" :class="cn(
+                                                'w-full justify-start text-left font-normal',
+                                                !field.value && 'text-muted-foreground',
+                                            )">
+                                                <CalendarIcon class="mr-2 h-4 w-4" />
+                                                {{ field.value ? df.format(field.value) : "Pick a date" }}
+                                            </Button>
+                                        </PopoverTrigger>
+                                        <!-- Tooltip bubble -->
+                                        <div v-if="!values?.type" class="pointer-events-none absolute -top-9 left-1/2 -translate-x-1/2
+                                                    whitespace-nowrap rounded-md bg-popover px-2 py-1 text-xs
+                                                    text-popover-foreground shadow-md border border-border
+                                                    opacity-0 translate-y-1
+                                                    group-hover:opacity-100 group-hover:translate-y-0
+                                                    transition-opacity transition-transform duration-150">
+                                            Select an LOA type first
+                                        </div>
+                                    </div>
                                     <PopoverContent class="w-auto p-0">
                                         <Calendar
-                                            :model-value="field.value
-                                                ? new CalendarDate(field.value.getFullYear(), field.value.getMonth() + 1, field.value.getDate()) : null"
                                             @update:model-value="(val: CalendarDate) => field.onChange(val.toDate(getLocalTimeZone()))"
-                                            layout="month-and-year" :min-value="today(getLocalTimeZone())" />
+                                            layout="month-and-year"
+                                            :min-value="minStartDate || today(getLocalTimeZone())" />
                                     </PopoverContent>
                                 </Popover>
                                 <div class="h-4">
@@ -254,18 +275,28 @@ const filteredMembers = computed(() => {
                             <FieldContent>
                                 <FieldLabel>End Date</FieldLabel>
                                 <Popover>
-                                    <PopoverTrigger as-child>
-                                        <Button variant="outline" :class="cn(
-                                            'w-full justify-start text-left font-normal',
-                                            !field.value && 'text-muted-foreground',
-                                        )">
-                                            <CalendarIcon class="mr-2 h-4 w-4" />
-                                            {{ field.value ? df.format(field.value) : "Pick a date" }}
-                                        </Button>
-                                    </PopoverTrigger>
+                                    <div class="relative inline-flex items-center group">
+                                        <PopoverTrigger as-child>
+                                            <Button :disabled="!values.type" variant="outline" :class="cn(
+                                                'w-full justify-start text-left font-normal',
+                                                !field.value && 'text-muted-foreground',
+                                            )">
+                                                <CalendarIcon class="mr-2 h-4 w-4" />
+                                                {{ field.value ? df.format(field.value) : "Pick a date" }}
+                                            </Button>
+                                        </PopoverTrigger>
+                                        <!-- Tooltip bubble -->
+                                        <div v-if="!values?.type" class="pointer-events-none absolute -top-9 left-1/2 -translate-x-1/2
+                                                    whitespace-nowrap rounded-md bg-popover px-2 py-1 text-xs
+                                                    text-popover-foreground shadow-md border border-border
+                                                    opacity-0 translate-y-1
+                                                    group-hover:opacity-100 group-hover:translate-y-0
+                                                    transition-opacity transition-transform duration-150">
+                                            Select an LOA type first
+                                        </div>
+                                    </div>
                                     <PopoverContent class="w-auto p-0">
                                         <Calendar
-                                            :model-value="field.value ? new CalendarDate(field.value.getFullYear(), field.value.getMonth() + 1, field.value.getDate()) : null"
                                             @update:model-value="(val: CalendarDate) => field.onChange(val.toDate(getLocalTimeZone()))"
                                             :default-placeholder="defaultPlaceholder" :min-value="minEndDate"
                                             :max-value="maxEndDate" layout="month-and-year">