diff --git a/src/i18n/en-ca/index.ts b/src/i18n/en-ca/index.ts
index db4d786..33ff984 100644
--- a/src/i18n/en-ca/index.ts
+++ b/src/i18n/en-ca/index.ts
@@ -331,6 +331,8 @@ export default {
             empty_list: 'No registered expenses',
             employee_comment: 'Comment',
             supervisor_comment: 'Supervisor note',
+            no_attachment: "no image attached",
+            temp_attachment_msg: "attachments are temporarily down, you can omit them from submissions and forward them to the finance department",
             actions: {
                 delete_confirm: "Delete this expense?",
             },
diff --git a/src/i18n/fr-ca/index.ts b/src/i18n/fr-ca/index.ts
index 935cdb4..c2e0e28 100644
--- a/src/i18n/fr-ca/index.ts
+++ b/src/i18n/fr-ca/index.ts
@@ -331,6 +331,8 @@ export default {
             empty_list: 'Aucun dépense enregistrée',
             employee_comment: 'Commentaire',
             supervisor_comment: 'Note du Superviseur',
+            no_attachment: "aucune pièce jointe",
+            temp_attachment_msg: "Les pièces jointes sont désactivés temporairement, vous pouvez laisser le champ vide et acheminez vos recus au département de la comptabilité",
             actions: {
                 delete_confirm: "Supprimer cette dépense?",
             },
diff --git a/src/modules/timesheets/components/expense-dialog-form.vue b/src/modules/timesheets/components/expense-dialog-form.vue
index 197b938..68b96c0 100644
--- a/src/modules/timesheets/components/expense-dialog-form.vue
+++ b/src/modules/timesheets/components/expense-dialog-form.vue
@@ -60,8 +60,10 @@
 
     const requestExpenseCreationOrUpdate = async () => {
         if (file.value)
-            await expenses_api.upsertExpense(expenses_store.current_expense, file.value, employeeEmail ?? auth_store.user?.email ?? 'MISSING_EMAIL');
-
+            await expenses_api.upsertExpense(expenses_store.current_expense, employeeEmail ?? auth_store.user?.email ?? 'MISSING_EMAIL', file.value);
+        else
+            await expenses_api.upsertExpense(expenses_store.current_expense, employeeEmail ?? auth_store.user?.email ?? 'MISSING_EMAIL');
+        
         expenses_store.is_showing_create_form = true;
         expenses_store.mode = 'create';
         expenses_store.current_expense = new Expense(date.formatDate(new Date(), 'YYYY-MM-DD'));
diff --git a/src/modules/timesheets/components/expense-dialog-header.vue b/src/modules/timesheets/components/expense-dialog-header.vue
index 0602f5e..d15945f 100644
--- a/src/modules/timesheets/components/expense-dialog-header.vue
+++ b/src/modules/timesheets/components/expense-dialog-header.vue
@@ -24,6 +24,7 @@
 
 <template>
     <div class="column items-center q-pa-none">
+        <!-- title bar with close button -->
         <div class="col row full-width bg-primary">
             <q-item-label class="col text-h6 text-weight-bolder text-uppercase text-white q-py-sm q-px-md">
                 {{ $t('timesheet.expense.title') }}
@@ -41,6 +42,19 @@
             />
         </div>
 
+        <!-- REMOVE: ONCE ATTACHMENTS ARE FULLY IMPLEMENTED -->
+        <div class="col-auto row bg-warning flex-center q-px-md q-py-xs full-width">
+            <q-icon 
+                name="las la-exclamation-triangle"
+                size="md"
+                class="q-px-md"
+            />
+
+            <span class="text-bold text-center">
+                {{ $t('timesheet.expense.temp_attachment_msg') }}
+            </span>
+        </div>
+
         <div class="col row flex-center full-width q-pt-sm q-px-md">
             <div class="col-auto row items-center q-px-md">
                 <span
@@ -80,7 +94,7 @@
                 >
                     {{ weekly_totals.mileage.toFixed(1) }}
                 </span>
-                
+
                 <q-icon
                     v-if="$q.screen.lt.md"
                     name="commute"
diff --git a/src/modules/timesheets/components/expense-dialog-list-item.vue b/src/modules/timesheets/components/expense-dialog-list-item.vue
index 0973c58..0d74415 100644
--- a/src/modules/timesheets/components/expense-dialog-list-item.vue
+++ b/src/modules/timesheets/components/expense-dialog-list-item.vue
@@ -4,7 +4,7 @@
 >
     import ExpenseDialogForm from 'src/modules/timesheets/components/expense-dialog-form.vue';
 
-    import { ref } from 'vue';
+    import { computed, ref } from 'vue';
     import { useI18n } from 'vue-i18n';
     import { date, Notify } from 'quasar';
     import { unwrapAndClone } from 'src/utils/unwrap-and-clone';
@@ -21,13 +21,19 @@
     const { mode = 'normal' } = defineProps<{
         mode?: 'approval' | 'normal';
     }>();
-    
+
     const { t } = useI18n();
     const expenses_api = useExpensesApi();
     const expenses_store = useExpensesStore();
     const timesheet_store = useTimesheetStore();
     const is_showing_update_form = ref(false);
-    
+
+    // ========== computed ===================================
+
+    const attachmentButtonColor = computed(() => expense.value.attachment_name ? 
+        (expense.value.is_approved ? 'white' : 'accent') : 
+        'grey-5');
+
     // ===================== methods =========================
 
     const requestExpenseDeletion = async () => {
@@ -46,7 +52,11 @@
         expenses_store.current_expense = unwrapAndClone(expense.value);
         expenses_store.current_expense.is_approved = !expenses_store.current_expense.is_approved;
 
-        const success = await expenses_store.upsertExpense(expenses_store.current_expense, timesheet_store.current_pay_period_overview?.email);
+        const success = await expenses_store.upsertExpense(
+            expenses_store.current_expense, 
+            timesheet_store.current_pay_period_overview?.email
+        );
+
         if (success) {
             expense.value.is_approved = !expense.value.is_approved;
         } else {
@@ -75,7 +85,6 @@
                 <div class="col-auto">
                     <q-icon
                         :name="getExpenseIcon(expense.type)"
-                        :color="expense.is_approved ? 'white' : ($q.dark.isActive ? 'white' : 'blue-grey-8')"
                         size="lg"
                         class="q-pr-md"
                     />
@@ -117,14 +126,24 @@
                 <div class="col row items-center justify-start">
                     <q-btn
                         push
-                        :color="expense.is_approved ? 'white' : 'accent'"
+                        :disable="expense.attachment_name === undefined"
+                        :color="attachmentButtonColor"
                         :text-color="expense.is_approved ? 'accent' : 'white'"
                         class="col-auto q-px-sm q-mr-sm"
                         icon="attach_file"
                     />
 
                     <q-item-label class="col">
-                        attachment_name.jpg
+                        <span v-if="expense.attachment_name">
+                            {{ expense.attachment_name }}
+                        </span>
+
+                        <span
+                            v-else
+                            class="text-italic text-blue-grey-5 text-uppercase"
+                        >
+                            {{ $t('timesheet.expense.no_attachment') }}
+                        </span>
                     </q-item-label>
                 </div>
 
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 5dea2bd..eb1e466 100644
--- a/src/modules/timesheets/components/mobile/expense-dialog-form-mobile.vue
+++ b/src/modules/timesheets/components/mobile/expense-dialog-form-mobile.vue
@@ -58,7 +58,8 @@
         if (file.value)
             await expenses_api.upsertExpense(
                 expenses_store.current_expense, 
-                file.value, employeeEmail ?? auth_store.user?.email ?? 'MISSING_EMAIL'
+                employeeEmail ?? auth_store.user?.email ?? 'MISSING_EMAIL',
+                file.value
             );
             
             emit('onUpdateClicked');
diff --git a/src/modules/timesheets/components/mobile/expense-dialog-list-item-mobile.vue b/src/modules/timesheets/components/mobile/expense-dialog-list-item-mobile.vue
index b663748..f39a7b7 100644
--- a/src/modules/timesheets/components/mobile/expense-dialog-list-item-mobile.vue
+++ b/src/modules/timesheets/components/mobile/expense-dialog-list-item-mobile.vue
@@ -134,7 +134,6 @@
                             <!-- avatar type icon section -->
                             <q-icon
                                 :name="getExpenseIcon(expense.type)"
-                                :color="expense.is_approved ? 'white' : ($q.dark.isActive ? 'white' : 'primary')"
                                 size="lg"
                                 class="col-auto q-pr-sm"
                             />
diff --git a/src/modules/timesheets/components/timesheet-wrapper.vue b/src/modules/timesheets/components/timesheet-wrapper.vue
index a9a8f67..daa5d19 100644
--- a/src/modules/timesheets/components/timesheet-wrapper.vue
+++ b/src/modules/timesheets/components/timesheet-wrapper.vue
@@ -81,12 +81,29 @@
         <LoadingOverlay v-model="timesheet_store.is_loading" />
 
         <!-- label for approval mode to delimit that this is the timesheet -->
-        <span
+        <div
             v-if="mode === 'approval'"
-            class="col-auto text-uppercase text-bold text-h5"
+            class="col-auto row full-width q-px-xl"
         >
-            {{ $t('timesheet.page_header') }}
-        </span>
+            <span class="col-auto text-uppercase text-bold text-h5">
+                {{ $t('timesheet.page_header') }}
+            </span>
+
+            <q-space />
+
+            <!-- desktop save timesheet changes button -->
+            <q-btn
+                v-if="!is_timesheets_approved && $q.screen.width > $q.screen.height"
+                push
+                rounded
+                :disable="timesheet_store.is_loading || has_shift_errors"
+                :color="timesheet_store.is_loading || has_shift_errors ? 'grey-5' : 'accent'"
+                icon="upload"
+                :label="$t('shared.label.save')"
+                :class="$q.platform.is.mobile && ($q.screen.width < $q.screen.height) ? 'full-width' : 'q-ml-md'"
+                @click="onClickSaveTimesheets"
+            />
+        </div>
 
 
         <!-- weekly overview -->
diff --git a/src/modules/timesheets/composables/use-expense-api.ts b/src/modules/timesheets/composables/use-expense-api.ts
index 75ace4e..18a204e 100644
--- a/src/modules/timesheets/composables/use-expense-api.ts
+++ b/src/modules/timesheets/composables/use-expense-api.ts
@@ -8,9 +8,12 @@ export const useExpensesApi = () => {
     const expenses_store = useExpensesStore();
     const timesheet_store = useTimesheetStore();
 
-    const upsertExpense = async (expense: Expense, file: File, employee_email: string): Promise<string> => {
-        const presignedURL = expenses_store.uploadAttachment(file);
-        if (!presignedURL) return 'PRESIGN_FAILED';
+    const upsertExpense = async (expense: Expense, employee_email: string, file?: File): Promise<string> => {
+        if (file) {
+            const presignedURL = expenses_store.uploadAttachment(file);
+
+            if (!presignedURL) return 'PRESIGN_FAILED';
+        }
 
         const success = await expenses_store.upsertExpense(expense, employee_email);
         
diff --git a/src/modules/timesheets/composables/use-shift-api.ts b/src/modules/timesheets/composables/use-shift-api.ts
index 2696836..1b3da43 100644
--- a/src/modules/timesheets/composables/use-shift-api.ts
+++ b/src/modules/timesheets/composables/use-shift-api.ts
@@ -2,31 +2,32 @@ import { useShiftStore } from "src/stores/shift-store";
 import { useTimesheetStore } from "src/stores/timesheet-store";
 
 export const useShiftApi = () => {
-    const timesheet_store = useTimesheetStore();
+    const timesheetStore = useTimesheetStore();
     const shift_store = useShiftStore();
 
     const deleteShiftById = async (shift_id: number, employee_email?: string) => {
-        timesheet_store.is_loading = true;
+        timesheetStore.is_loading = true;
         const success = await shift_store.deleteShiftById(shift_id, employee_email);
 
         if (success) {
-            await timesheet_store.getTimesheetsByOptionalEmployeeEmail(employee_email);
+            await timesheetStore.getTimesheetsByOptionalEmployeeEmail(employee_email);
         }
 
-        timesheet_store.is_loading = false;
+        timesheetStore.is_loading = false;
     };
 
     const saveShiftChanges = async (employee_email?: string) => {
-        timesheet_store.is_loading = true;
+        timesheetStore.is_loading = true;
         
         const update_success = await shift_store.updateShifts(employee_email);
         const create_success = await shift_store.createNewShifts(employee_email);
 
         if (create_success || update_success){
-            await timesheet_store.getTimesheetsByOptionalEmployeeEmail(employee_email);
+            await timesheetStore.getTimesheetsByOptionalEmployeeEmail(employee_email);
+            await timesheetStore.getPaidTimeOffTotalsWithOptionalEmployeeEmail();
         }
 
-        timesheet_store.is_loading = false;
+        timesheetStore.is_loading = false;
     }
 
     return {