diff --git a/ui/src/components/loa/loaForm.vue b/ui/src/components/loa/loaForm.vue
index 43771b3..50bc08e 100644
--- a/ui/src/components/loa/loaForm.vue
+++ b/ui/src/components/loa/loaForm.vue
@@ -226,18 +226,28 @@ 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
-
                                             @update:model-value="(val: CalendarDate) => field.onChange(val.toDate(getLocalTimeZone()))"
                                             layout="month-and-year" :min-value="today(getLocalTimeZone())" />
                                     </PopoverContent>
@@ -253,18 +263,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
-                                            
                                             @update:model-value="(val: CalendarDate) => field.onChange(val.toDate(getLocalTimeZone()))"
                                             :default-placeholder="defaultPlaceholder" :min-value="minEndDate"
                                             :max-value="maxEndDate" layout="month-and-year">