diff --git a/src/modules/timesheets/components/expense-dialog-form.vue b/src/modules/timesheets/components/expense-dialog-form.vue
index f630b99..8324b65 100644
--- a/src/modules/timesheets/components/expense-dialog-form.vue
+++ b/src/modules/timesheets/components/expense-dialog-form.vue
@@ -11,7 +11,7 @@
     import { useExpensesApi } from 'src/modules/timesheets/composables/use-expense-api';
     import { getExpenseIcon, useExpenseRules } from 'src/modules/timesheets/utils/expense.util';
     import { Expense, type ExpenseOption, TYPES_WITH_AMOUNT_ONLY } from 'src/modules/timesheets/models/expense.models';
-import { useAuthStore } from 'src/stores/auth-store';
+    import { useAuthStore } from 'src/stores/auth-store';
 
     // ================= state ======================
 
diff --git a/src/modules/timesheets/components/mobile/expense-dialog-form-mobile.vue b/src/modules/timesheets/components/mobile/expense-dialog-form-mobile.vue
index 675b34f..8b7c0bc 100644
--- a/src/modules/timesheets/components/mobile/expense-dialog-form-mobile.vue
+++ b/src/modules/timesheets/components/mobile/expense-dialog-form-mobile.vue
@@ -2,19 +2,20 @@
     setup
     lang="ts"
 >
-    import { computed, ref } from 'vue';
+    import { computed, ref, onMounted } from 'vue';
     import { useI18n } from 'vue-i18n';
     import { useUiStore } from 'src/stores/ui-store';
     import { useExpensesStore } from 'src/stores/expense-store';
     import { useTimesheetStore } from 'src/stores/timesheet-store';
     import { useExpensesApi } from 'src/modules/timesheets/composables/use-expense-api';
     import { getExpenseIcon, useExpenseRules } from 'src/modules/timesheets/utils/expense.util';
-    import { type ExpenseOption, TYPES_WITH_AMOUNT_ONLY } from 'src/modules/timesheets/models/expense.models';
-import { useAuthStore } from 'src/stores/auth-store';
+    import { Expense, type ExpenseOption, TYPES_WITH_AMOUNT_ONLY } from 'src/modules/timesheets/models/expense.models';
+    import { useAuthStore } from 'src/stores/auth-store';
 
     const COMMENT_MAX_LENGTH = 280;
 
-    const file = defineModel<File | undefined>();
+    const expense = defineModel<Expense>({ default: new Expense(new Date().toISOString().slice(0, 10)) })
+    const file = defineModel<File | undefined>('file');
 
     const { employeeEmail } = defineProps<{
         employeeEmail?: string;
@@ -53,6 +54,13 @@ import { useAuthStore } from 'src/stores/auth-store';
         if (file.value)
             await expenses_api.upsertExpense(expenses_store.current_expense, file.value, employeeEmail ?? auth_store.user?.email ?? 'MISSING_EMAIL');
     };
+
+    onMounted(() => {
+        if (expense.value)
+            expense_selected.value = expense_options.find(expense_option => expense_option.value === expense.value.type);
+        else
+            expense_selected.value = expense_options[1];
+    })
 </script>
 
 <template>
@@ -66,9 +74,8 @@ import { useAuthStore } from 'src/stores/auth-store';
             class="col column items-start rounded-5 q-pb-sm"
             :class="expenses_store.is_showing_create_form ? 'q-px-md' : 'q-px-sm'"
         >
-            <!-- date and type row -->
-            <div class="col row q-my-xs full-width">
-                <!-- date selection input -->
+            <!-- date selection input -->
+            <div class="col-auto row q-my-xs full-width">
                 <q-input
                     v-model="expenses_store.current_expense.date"
                     dense
@@ -77,7 +84,7 @@ import { useAuthStore } from 'src/stores/auth-store';
                     stack-label
                     hide-bottom-space
                     color="primary"
-                    class="col-auto q-mr-sm"
+                    class="col-auto full-width"
                     input-class="text-weight-medium"
                     input-style="font-size: 1em;"
                     :label="$t('timesheet.expense.date')"
@@ -114,8 +121,10 @@ import { useAuthStore } from 'src/stores/auth-store';
                         </span>
                     </template>
                 </q-input>
+            </div>
 
-                <!-- expenses type selection -->
+            <!-- expenses type selection -->
+            <div class="col-auto row q-my-xs full-width">
                 <q-select
                     v-model="expense_selected"
                     standout="bg-blue-grey-9 text-white"
@@ -127,12 +136,12 @@ import { useAuthStore } from 'src/stores/auth-store';
                     hide-bottom-space
                     class="col"
                     color="primary"
+                    behavior="menu"
+                    :menu-offset="[0, 5]"
                     :label="$t('timesheet.expense.type')"
-                    :menu-offset="[0, 10]"
-                    menu-anchor="bottom middle"
-                    menu-self="top middle"
-                    popup-content-class="text-uppercase text-weight-bold text-center rounded-5"
-                    popup-content-style="border: 2px solid var(--q-accent)"
+                    popup-content-class="text-uppercase text-weight-bold text-center rounded-5 z-top"
+                    popup-content-style="border: 3px solid var(--q-accent)"
+                    options-selected-class="text-weight-bolder text-white bg-accent"
                     :rules="[rules.typeRequired]"
                     @update:model-value="option => expenses_store.current_expense.type = option.value"
                 >