diff --git a/src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-expenses-chart.vue b/src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-expenses-chart.vue
index 9382ccd..7d78a9c 100644
--- a/src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-expenses-chart.vue
+++ b/src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-expenses-chart.vue
@@ -32,12 +32,12 @@
             
             expenses_dataset.value = [
                 {
-                    label: t('timeSheet.refund'),
+                    label: t('timesheet.refund'),
                     data: all_costs,
                     backgroundColor: getComputedStyle(document.body).getPropertyValue('--q-primary').trim(),
                 },
                 {
-                    label: t('timeSheet.mileage'),
+                    label: t('timesheet.mileage'),
                     data: all_mileage,
                     backgroundColor: getComputedStyle(document.body).getPropertyValue('--q-info').trim(),
                 }
diff --git a/src/modules/timesheet-approval/pages/timesheet-approval-employee-details.vue b/src/modules/timesheet-approval/pages/timesheet-approval-employee-details.vue
index 048b5a7..94c8f5c 100644
--- a/src/modules/timesheet-approval/pages/timesheet-approval-employee-details.vue
+++ b/src/modules/timesheet-approval/pages/timesheet-approval-employee-details.vue
@@ -40,16 +40,16 @@ import { colors } from 'quasar';
 
     const shift_type_legend: shiftColor[] = [
         {
-            type: t('timeSheet.shiftRegular'),
+            type: t('timesheet.shift_types.REGULAR'),
             color: 'secondary',
             text_color: 'grey-8',
         },
         {
-            type: t('timeSheet.shiftEvening'),
+            type: t('timesheet.shift_types.EVENING'),
             color: 'warning',
         },
         {
-            type: t('timeSheet.shiftEmergency'),
+            type: t('timesheet.shift_types.EMERGENCY'),
             color: 'amber-10',
         },
         {
@@ -57,15 +57,15 @@ import { colors } from 'quasar';
             color: 'negative',
         },
         {
-            type: t('timeSheet.shiftVacation'),
+            type: t('timesheet.shift_types.VACATION'),
             color: 'purple-10',
         },
         {
-            type: t('timeSheet.shiftHoliday'),
+            type: t('timesheet.shift_types.HOLIDAY'),
             color: 'purple-8',
         },
         {
-            type: t('timeSheet.shiftSick'),
+            type: t('timesheet.shift_types.SICK'),
             color: 'grey-8',
         },
     ]
diff --git a/src/modules/timesheet-approval/pages/timesheet-approval.vue b/src/modules/timesheet-approval/pages/timesheet-approval.vue
index c924c24..a9fa76a 100644
--- a/src/modules/timesheet-approval/pages/timesheet-approval.vue
+++ b/src/modules/timesheet-approval/pages/timesheet-approval.vue
@@ -48,7 +48,7 @@
                 class="text-grey-8 text-uppercase q-mx-md"
                 :class="$q.screen.lt.md ? 'text-weight-medium text-caption' : 'text-weight-bold'"
             >
-                {{ $t('timeSheet.dateRangesTo') }}
+                {{ $t('timesheet.dateRangesTo') }}
             </div>
             <div 
                 class="text-primary text-uppercase text-center text-weight-bold"
diff --git a/src/modules/timesheets/components/timesheet/timesheet-shift-form.vue b/src/modules/timesheets/components/timesheet/timesheet-shift-form.vue
index c583a08..e9e3afc 100644
--- a/src/modules/timesheets/components/timesheet/timesheet-shift-form.vue
+++ b/src/modules/timesheets/components/timesheet/timesheet-shift-form.vue
@@ -5,7 +5,7 @@ import { useI18n } from 'vue-i18n';
 import { useTimesheetStore } from 'src/stores/timesheet-store';
 import TimesheetShiftComment from '../shift/timesheet-shift-comment.vue';
 import TimesheetSavePayload from './timesheet-save-payload.vue';
-import type { Shift } from '../../types/timesheet-shift-interface';
+import { Shift } from '../../types/timesheet-shift-interface';
 import type { CreateShiftPayload } from '../../types/timesheet-shift-interface';
 
 const timesheet_store = useTimesheetStore();
@@ -23,7 +23,7 @@ const shift_options = computed(()=> {
     return SHIFT_KEY.map(key => ({ value: key, label: t(`timesheet.shift_types.${key}`)}))
 });
 
-const empty_row = { type: '', start_time: '', end_time: '', comment: '', is_approved: false, is_remote: false };
+const empty_row = { date:'', type: '', start_time: '', end_time: '', comment: '', is_approved: false, is_remote: false };
 //Week dates
 const week_dates = computed(() => {
     const start_date = timesheet_store.current_timesheet.start_day;
@@ -53,6 +53,7 @@ const rows = ref<Shift[]>(
         const date_ISO = week_dates.value[index];
         const shift = timesheet_store.current_timesheet.shifts.find(sh => sh.date === date_ISO);
         return shift ? {
+                        date:shift.date || '',
                         type: shift.bank_type || '',
                         start_time: shift.start_time || '',
                         end_time: shift.end_time || '',
@@ -88,6 +89,7 @@ const clearRow = (index: number) => {
 
 const emit = defineEmits<{ (e: 'save', payload: CreateShiftPayload[]): void }>();
 
+//onMounted?
 watch(
     () => [timesheet_store.current_timesheet.start_day, timesheet_store.current_timesheet.shifts],
     () => {
@@ -95,14 +97,16 @@ watch(
         rows.value = days.value.map((_, idx)=> {
             const shift = timesheet_store.current_timesheet.shifts.find(sh => sh.date === dates[idx]);
             return shift
-                ? { type: shift.bank_type || '',
+                ? { date: shift.date || '',
+                    type: shift.bank_type || '',
                     start_time: shift.start_time || '',
                     end_time: shift.end_time || '',
                     comment: shift.description || '',
                     is_approved: shift.is_approved,
                     is_remote: shift.is_remote,
                 } 
-                : { type: '',
+                : { date: '',
+                    type: '',
                     start_time: '',
                     end_time: '',
                     comment: '',
@@ -132,10 +136,16 @@ watch(
             />
         </q-dialog>
 
-        <q-form id="timesheet_shifts" autofocus class="bg-white q-pa-sm q-pt-lg rounded-10">
+        <q-form 
+            autofocus 
+            class="bg-white q-pa-sm q-pt-lg rounded-10">
             
-            <div v-for="(row, index) in rows" :key="week_dates[index] ??  index" class="q-gutter-sm q-mb-sm" :class="$q.screen.lt.md ? 'column' : 'row'" >
-            <!--Week days-->
+            <div 
+                v-for="(row, index) in rows" 
+                :key="week_dates[index] ??  index" 
+                class="q-gutter-sm q-mb-sm" 
+                :class="$q.screen.lt.md ? 'column' : 'row'" >
+            <!--Week days-->            
                 <span class="text-weight-bold text-primary col-1">{{ days[index] }}</span>
                 <!-- remote work toggle -->
                 <q-toggle
diff --git a/src/modules/timesheets/types/timesheet-details-interface.ts b/src/modules/timesheets/types/timesheet-details-interface.ts
index 0721eb8..21b42ee 100644
--- a/src/modules/timesheets/types/timesheet-details-interface.ts
+++ b/src/modules/timesheets/types/timesheet-details-interface.ts
@@ -16,7 +16,7 @@ export interface TimesheetDetailsDailySchedule {
     break_duration?: number;
 }
 
-interface Expense {
+export interface Expense {
     is_approved: boolean;
     amount: number;
 };