diff --git a/quasar.config.ts b/quasar.config.ts
index 3821349..13781d0 100644
--- a/quasar.config.ts
+++ b/quasar.config.ts
@@ -106,7 +106,7 @@ export default defineConfig((ctx) => {
           color: 'primary',
           avatar: 'https://cdn.quasar.dev/img/boy-avatar.png',
         },
-        dark: "auto",
+        dark: false,
       },
 
       // iconSet: 'material-icons', // Quasar icon set
@@ -127,15 +127,7 @@ export default defineConfig((ctx) => {
 
     // animations: 'all', // --- includes all animations
     // https://v2.quasar.dev/options/animations
-    animations: [
-      'fadeIn',
-      'fadeOut',
-      'fadeInUp',
-      'zoomIn',
-      'zoomOut',
-      'flipInX',
-      'flipOutX',
-    ],
+    animations: 'all',
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#sourcefiles
     // sourceFiles: {
diff --git a/src/i18n/en-ca/index.ts b/src/i18n/en-ca/index.ts
index 6c8f371..922125b 100644
--- a/src/i18n/en-ca/index.ts
+++ b/src/i18n/en-ca/index.ts
@@ -83,6 +83,7 @@ export default {
       cancel: "cancel",
       update: "update",
       modify: "modify",
+      close: "close",
     },
     misc: {
       or: "or",
diff --git a/src/i18n/fr-ca/index.ts b/src/i18n/fr-ca/index.ts
index 907802f..213d174 100644
--- a/src/i18n/fr-ca/index.ts
+++ b/src/i18n/fr-ca/index.ts
@@ -83,6 +83,7 @@ export default {
       cancel: "annuler",
       update: "mettre à jour",
       modify: "modifier",
+      close: "fermer",
     },
     misc: {
       or: "ou",
diff --git a/src/layouts/main-layout.vue b/src/layouts/main-layout.vue
index 3ea5017..90b6276 100644
--- a/src/layouts/main-layout.vue
+++ b/src/layouts/main-layout.vue
@@ -1,14 +1,14 @@
 <script lang="ts" setup>
   import { RouterView } from 'vue-router';
-  import HeaderBar from 'src/modules/layouts/components/main-layout-header-bar.vue';
-  import FooterBar from 'src/modules/layouts/components/main-layout-footer-bar.vue';
-  import RightDrawer from 'src/modules/layouts/components/main-layout-right-drawer.vue';
+  import HeaderBar from 'src/layouts/components/main-layout-header-bar.vue';
+  import FooterBar from 'src/layouts/components/main-layout-footer-bar.vue';
+  import LeftDrawer from 'src/layouts/components/main-layout-left-drawer.vue';
 </script>
 
 <template>
   <q-layout view="hHh lpR fFf">
     <HeaderBar />
-    <RightDrawer />
+    <LeftDrawer />
     <q-page-container>
       <router-view class="q-pa-sm bg-secondary" />
     </q-page-container>
diff --git a/src/modules/auth/types/auth-interface.ts b/src/modules/auth/models/auth.models.ts
similarity index 56%
rename from src/modules/auth/types/auth-interface.ts
rename to src/modules/auth/models/auth.models.ts
index 6027520..8a1042c 100644
--- a/src/modules/auth/types/auth-interface.ts
+++ b/src/modules/auth/models/auth.models.ts
@@ -1,4 +1,4 @@
-import type { User } from "src/modules/shared/types/user-interface";
+import type { User } from "src/modules/shared/models/user.models";
 
 export interface AuthState {
   token: string;
diff --git a/src/modules/shared/components/pay-period-navigator.vue b/src/modules/shared/components/pay-period-navigator.vue
index d440b8b..4485c1e 100644
--- a/src/modules/shared/components/pay-period-navigator.vue
+++ b/src/modules/shared/components/pay-period-navigator.vue
@@ -27,7 +27,7 @@
 </script>
 
 <template>
-    <div class="row q-mb-lg q-mt-lg" >
+    <div class="row" >
         <!-- navigation to previous week -->
         <q-btn 
             push rounded
@@ -53,7 +53,7 @@
             color="primary"
             @click="is_showing_calendar_picker = true"
             :disable="timesheet_store.is_loading"
-            class="q-px-lg"
+            class="q-px-xl"
         >
             <q-tooltip
                 anchor="top middle"
diff --git a/src/modules/shared/components/q-table-filters.vue b/src/modules/shared/components/q-table-filters.vue
index 5ceb9d9..1cb919a 100644
--- a/src/modules/shared/components/q-table-filters.vue
+++ b/src/modules/shared/components/q-table-filters.vue
@@ -6,7 +6,8 @@
     <!-- Filters toggle -->
     <q-btn-dropdown 
         push
-        class="q-mr-md bg-white text-primary left-rounded" 
+        rounded
+        class="q-mr-md bg-white text-primary" 
         :label="$t('shared.label.filter')" 
         icon="filter_alt" 
     />
@@ -16,6 +17,7 @@
             v-model="search_model" 
             outlined 
             dense
+            rounded
             debounce="300"
             class="right-rounded"
             :label="$t('shared.label.search')" 
@@ -23,21 +25,11 @@
             bg-color="white" 
             color="primary"
     >
-        <template #before>
+        <template #prepend>
             <q-icon 
                 name="search" 
                 color="primary"
             />
         </template>
     </q-input>
-</template>
-
-<style scoped>
-    .left-rounded {
-        border-radius: 50% 0 0 50%;
-    }
-
-    .right-rounded {
-        border-radius: 0 50% 50% 0;
-    }
-</style>
\ No newline at end of file
+</template>
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/components/details-crud-dialog-chart-expenses.vue b/src/modules/timesheet-approval/components/details-crud-dialog-chart-expenses.vue
index 18c1fe5..8854179 100644
--- a/src/modules/timesheet-approval/components/details-crud-dialog-chart-expenses.vue
+++ b/src/modules/timesheet-approval/components/details-crud-dialog-chart-expenses.vue
@@ -1,11 +1,13 @@
-<script setup lang="ts">
+<script
+    setup
+    lang="ts"
+>
     import { ref } from 'vue';
     import { Bar } from 'vue-chartjs';
     import { useI18n } from 'vue-i18n';
     import { useQuasar } from 'quasar';
     import { useTimesheetStore } from 'src/stores/timesheet-store';
     import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, TimeScale, type ChartData, type ChartDataset } from 'chart.js';
-    import type { Expense } from 'src/modules/timesheets/models/expense.models';
 
     const { t } = useI18n();
     const $q = useQuasar();
@@ -15,70 +17,55 @@
     ChartJS.defaults.maintainAspectRatio = false;
     ChartJS.defaults.color = $q.dark.isActive ? '#F5F5F5' : '#616161';
 
-    defineProps<{
-        
-    }>();
+    const timesheet_store = useTimesheetStore();
 
-    // const expenses_dataset = ref<ChartDataset<'bar'>[]>([]);
-    // const expenses_labels = ref<string[]>([]);
+    const expenses_dataset = ref<ChartDataset<'bar'>[]>([]);
+    const expenses_labels = ref<string[]>([]);
 
-    // const getExpensesData = (): ChartData<'bar'> => {
-    //     if (timesheetDetails) {
-    //         const all_weeks = [timesheetDetails.week1, timesheetDetails.week2];
-    //         const all_days = all_weeks.flatMap( week => Object.values(week.expenses));
-    //         const all_days_dates = all_weeks.flatMap( week => Object.values(week.shifts))          
+    const getExpensesData = (): ChartData<'bar'> => {
+        const all_days = timesheet_store.pay_period_details.weeks.flatMap(week => Object.values(week.expenses));
+        const all_days_dates = timesheet_store.pay_period_details.weeks.flatMap(week => Object.values(week.shifts))
 
-    //         const all_costs = all_days.map( day => getTotalAmounts(day.cash));
-    //         const all_mileage = all_days.map( day => getTotalAmounts(day.km));
-            
-            
-    //         expenses_dataset.value = [
-    //             {
-    //                 label: t('timesheet_approvals.table.expenses'),
-    //                 data: all_costs,
-    //                 backgroundColor: getComputedStyle(document.body).getPropertyValue('--q-primary').trim(),
-    //             },
-    //             {
-    //                 label: t('timesheet_approvals.table.mileage'),
-    //                 data: all_mileage,
-    //                 backgroundColor: getComputedStyle(document.body).getPropertyValue('--q-info').trim(),
-    //             }
-    //         ]
+        const all_costs = all_days.map(day => day.total_expenses);
+        const all_mileage = all_days.map(day => day.total_mileage);
 
-    //         expenses_labels.value = all_days_dates.map( day => day.short_date);
-    //     }
 
-    //     return {
-    //         datasets: expenses_dataset.value,
-    //         labels: expenses_labels.value
-    //     };
-    // };
+        expenses_dataset.value = [
+            {
+                label: t('timesheet_approvals.table.expenses'),
+                data: all_costs,
+                backgroundColor: getComputedStyle(document.body).getPropertyValue('--q-primary').trim(),
+            },
+            {
+                label: t('timesheet_approvals.table.mileage'),
+                data: all_mileage,
+                backgroundColor: getComputedStyle(document.body).getPropertyValue('--q-info').trim(),
+            }
+        ]
 
-    const getTotalAmounts = (expenses: Expense[]): number => {
-        let total_amount = 0;
+        expenses_labels.value = all_days_dates.map(day => day.short_date);
 
-        for (const expense of expenses) {
-            total_amount += expense.amount;
-        }
-
-        return total_amount;
-    }
+        return {
+            datasets: expenses_dataset.value,
+            labels: expenses_labels.value
+        };
+    };
 </script>
 
 <template>
     <div>
-        <Bar 
+        <Bar
             :data="getExpensesData()"
             :options="({
-                indexAxis: $q.screen.lt.md? 'y' : 'x',
+                indexAxis: $q.screen.lt.md ? 'y' : 'x',
                 plugins: {
-                
+
                     title: {
                         display: true,
                         text: t('timesheet_approvals.chart.expenses_title'),
                     },
-                    legend:{
-                        labels:{
+                    legend: {
+                        labels: {
                             boxWidth: 15,
                         }
                     }
diff --git a/src/modules/timesheet-approval/components/details-crud-dialog-chart-hours-worked.vue b/src/modules/timesheet-approval/components/details-crud-dialog-chart-hours-worked.vue
index 4a5bcad..862fae3 100644
--- a/src/modules/timesheet-approval/components/details-crud-dialog-chart-hours-worked.vue
+++ b/src/modules/timesheet-approval/components/details-crud-dialog-chart-hours-worked.vue
@@ -4,8 +4,8 @@
     import { Bar } from 'vue-chartjs';
     import { useI18n } from 'vue-i18n';
     import { useQuasar } from 'quasar';
-    import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, type ChartData, type ChartOptions, type Plugin, type ChartDataset } from 'chart.js';
-    import type { TimesheetDetails } from 'src/modules/timesheets/models/pay-period-details.models';
+    import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, type ChartData, type ChartDataset } from 'chart.js';
+    import { useTimesheetStore } from 'src/stores/timesheet-store';
     
     const { t } = useI18n();
     const $q = useQuasar();
@@ -15,19 +15,14 @@
     ChartJS.defaults.maintainAspectRatio = false;
     ChartJS.defaults.color = $q.dark.isActive ? '#F5F5F5' : '#616161';
 
-    const props = defineProps<{
-        rawData: TimesheetDetails | undefined;
-        options?: ChartOptions<"bar"> | undefined;
-        plugins?: Plugin<"bar">[] | undefined;
-    }>();
+    const { pay_period_details } = useTimesheetStore();
 
     const hours_worked_labels = ref<string[]>([]);
     const hours_worked_dataset = ref<ChartDataset<'bar'>[]>([]);    
 
     const getHoursWorkedData = (): ChartData<'bar'> => {
-        if (props.rawData) {
-            const all_weeks = [props.rawData.week1, props.rawData.week2];
-            const all_days = all_weeks.flatMap( week => Object.values(week.shifts));
+        
+            const all_days = pay_period_details.weeks.flatMap( week => Object.values(week.shifts));
             const datasetConfig = [
                 {
                     key: 'regular_hours',
@@ -58,7 +53,7 @@
             }));
 
             hours_worked_labels.value = all_days.map(day => day.short_date);
-        }
+        
 
         return {
             labels: hours_worked_labels.value,
diff --git a/src/modules/timesheet-approval/components/details-crud-dialog-chart-shift-types.vue b/src/modules/timesheet-approval/components/details-crud-dialog-chart-shift-types.vue
index 45060a8..14bd9c9 100644
--- a/src/modules/timesheet-approval/components/details-crud-dialog-chart-shift-types.vue
+++ b/src/modules/timesheet-approval/components/details-crud-dialog-chart-shift-types.vue
@@ -1,51 +1,49 @@
-<script setup lang="ts">
-    /* eslint-disable */
+<script
+    setup
+    lang="ts"
+>
     import { ref } from 'vue';
     import { colors } from 'quasar';
-    import { useI18n } from 'vue-i18n';
     import { useQuasar } from 'quasar';
     import { Doughnut } from 'vue-chartjs';
     import { Chart as ChartJS, Title, Tooltip, Legend, ArcElement, CategoryScale, LinearScale, type ChartDataset } from 'chart.js';
-    import type { PayPeriodEmployeeOverview } from 'src/modules/timesheet-approval/types/pay-period-employee-overview';
-    
-    const { t } = useI18n();
+    import { useTimesheetStore } from 'src/stores/timesheet-store';
+
     const $q = useQuasar();
-    
+
     ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale, LinearScale);
     ChartJS.defaults.font.family = '"Roboto", sans-serif';
     ChartJS.defaults.maintainAspectRatio = false;
     ChartJS.defaults.color = $q.dark.isActive ? '#F5F5F5' : '#616161';
 
-    const props = defineProps<{
-        rawData: PayPeriodEmployeeOverview | undefined;
-    }>();
+    const { current_pay_period_overview } = useTimesheetStore();
 
     const shift_type_labels = ref<string[]>([]);
     const shift_type_totals = ref<ChartDataset<'doughnut'>[]>([{ data: [40, 0, 2, 5], }]);
 
-    if (props.rawData){
-        shift_type_totals.value = [{
-            data: [
-                props.rawData.regular_hours, 
-                props.rawData.evening_hours,
-                props.rawData.emergency_hours,
-                props.rawData.overtime_hours,
-            ],
-            backgroundColor: [
-                colors.getPaletteColor('green-5'),                                          // Regular
-                colors.getPaletteColor('green-9'),                                          // Evening
-                getComputedStyle(document.body).getPropertyValue('--q-warning').trim(),     // Emergency
-                getComputedStyle(document.body).getPropertyValue('--q-negative').trim(),    // Overtime
-            ]
-        }];
 
-        shift_type_labels.value = [
-            props.rawData.regular_hours.toString() + 'h', 
-            props.rawData.evening_hours.toString()  + 'h',
-            props.rawData.emergency_hours.toString()  + 'h',
-            props.rawData.overtime_hours.toString()  + 'h',
+    shift_type_totals.value = [{
+        data: [
+            current_pay_period_overview.regular_hours,
+            current_pay_period_overview.evening_hours,
+            current_pay_period_overview.emergency_hours,
+            current_pay_period_overview.overtime_hours,
+        ],
+        backgroundColor: [
+            colors.getPaletteColor('green-5'),                                          // Regular
+            colors.getPaletteColor('green-9'),                                          // Evening
+            getComputedStyle(document.body).getPropertyValue('--q-warning').trim(),     // Emergency
+            getComputedStyle(document.body).getPropertyValue('--q-negative').trim(),    // Overtime
         ]
-    }
+    }];
+
+    shift_type_labels.value = [
+        current_pay_period_overview.regular_hours.toString() + 'h',
+        current_pay_period_overview.evening_hours.toString() + 'h',
+        current_pay_period_overview.emergency_hours.toString() + 'h',
+        current_pay_period_overview.overtime_hours.toString() + 'h',
+    ]
+
 
     const data = {
         labels: shift_type_labels.value,
@@ -59,9 +57,9 @@
         <Doughnut
             :data="data"
             :options="({
-                plugins:{
-                    legend:{
-                        labels:{
+                plugins: {
+                    legend: {
+                        labels: {
                             boxWidth: 15,
                         }
                     }
diff --git a/src/modules/timesheet-approval/components/details-crud-dialog.vue b/src/modules/timesheet-approval/components/details-crud-dialog.vue
index a594f1d..35530f4 100644
--- a/src/modules/timesheet-approval/components/details-crud-dialog.vue
+++ b/src/modules/timesheet-approval/components/details-crud-dialog.vue
@@ -1,72 +1,73 @@
-<script setup lang="ts">
+<script
+    setup
+    lang="ts"
+>
     import { ref } from 'vue';
-    // import { useTimesheetStore } from 'src/stores/timesheet-store';
-    import { shift_type_legend } from 'src/modules/timesheet-approval/models/detailed-dialog-shift-color.model';
-    import DetailedDialogChartHoursWorked from 'src/modules/timesheet-approval/components/graphs/detailed-chart-hours-worked.vue';
-    import DetailedDialogChartShiftTypes from 'src/modules/timesheet-approval/components/graphs/detailed-chart-shift-types.vue';
-    import DetailedDialogChartExpenses from 'src/modules/timesheet-approval/components/graphs/detailed-chart-expenses.vue';
-    import type { PayPeriodOverview }   from 'src/modules/timesheet-approval/models/pay-period-overview.models';
-    import type { PayPeriodDetails } from 'src/modules/timesheets/models/pay-period-details.models';
-
-    const dialog_model = defineModel<boolean>('dialog', { default: false });
+    import { useTimesheetStore } from 'src/stores/timesheet-store';
+    import DetailedDialogChartHoursWorked from 'src/modules/timesheet-approval/components/details-crud-dialog-chart-hours-worked.vue';
+    import DetailedDialogChartShiftTypes from 'src/modules/timesheet-approval/components/details-crud-dialog-chart-shift-types.vue';
+    import DetailedDialogChartExpenses from 'src/modules/timesheet-approval/components/details-crud-dialog-chart-expenses.vue';
+    import TimesheetWrapper from 'src/modules/timesheets/components/timesheet-wrapper.vue';
 
     defineProps<{
-        isLoading: boolean;
-        payPeriodOverview: PayPeriodOverview;
-        payPeriodDetails: PayPeriodDetails;
+        employeeEmail: string;
     }>();
 
+    const dialog_model = defineModel<boolean>('dialog', { default: false });
+    const timesheet_store = useTimesheetStore();
+
     // const timesheet_store = useTimesheetStore();
     const is_showing_graph = ref(true);
 </script>
 
 <template>
-    <q-dialog 
-        v-model="dialog_model" 
+    <q-dialog
+        v-model="dialog_model"
         full-width
-        transition-show="jump-down" 
+        transition-show="jump-down"
         transition-hide="jump-down"
     >
-        <q-card 
+        <!-- loader -->
+        <q-card
+            v-if="timesheet_store.is_loading"
+            class="column flex-center text-center"
+        >
+            <q-spinner
+                color="primary"
+                size="5em"
+                :thickness="10"
+                class="col-auto"
+            />
+            <div class="col-auto text-primary text-h6 text-weight-bold text-center ">
+                {{ $t('shared.loading') }}
+            </div>
+        </q-card>
+
+        <q-card
+            v-else
             class="q-pa-sm shadow-12 rounded-15 column no-wrap relative"
             :style="$q.screen.lt.md ? '' : 'width: 60vw !important;'"
         >
-            <!-- loader -->
-            <q-card-section 
-                v-if="isLoading" 
-                class="column flex-center text-center"
-            >
-                <q-spinner 
-                    color="primary" 
-                    size="5em" 
-                    :thickness="10" 
-                    class="col-auto"
-                />
-                <div class="col-auto text-primary text-h6 text-weight-bold text-center ">
-                    {{ $t('shared.loading') }}
-                </div>
-            </q-card-section>
 
             <!-- employee name -->
-            <q-card-section 
-                v-if="!isLoading"
+            <q-card-section
                 class="text-h5 text-weight-bolder text-center text-primary q-pa-none text-uppercase col-auto"
             >
-                <span> {{ payPeriodDetails.employee_full_name }} </span>
+                <span>{{ timesheet_store.pay_period_details.employee_full_name }}</span>
 
-                <q-separator 
-                    spaced 
-                    size="2px" 
+                <q-separator
+                    spaced
+                    size="2px"
                 />
-                
-                <q-card-actions 
+
+                <q-card-actions
                     align="center"
                     class="q-pa-none"
                 >
-                    <q-btn-toggle 
-                        v-model="is_showing_graph" 
-                        color="white" 
-                        text-color="primary" 
+                    <q-btn-toggle
+                        v-model="is_showing_graph"
+                        color="white"
+                        text-color="primary"
                         toggle-color="primary"
                         :options="[
                             { icon: 'bar_chart', value: true },
@@ -77,67 +78,48 @@
             </q-card-section>
 
             <!-- employee timesheet for supervisor editting -->
-            <q-card-section 
-                v-if="!is_showing_graph" 
+            <q-card-section
+                v-if="!is_showing_graph"
                 class="q-pa-none"
             >
-                <!-- shift type color legend -->
-                <q-card-section class="q-py-xs q-px-none text-center q-my-s">
-                    <q-badge 
-                        v-for="shift_type, index in shift_type_legend"
-                        :key="index"
-                        :color="shift_type.background_color" 
-                        :label="$t(shift_type.type_label)"
-                        :text-color="shift_type.font_color"
-                        class="q-px-md q-py-xs q-mx-xs q-my-none text-uppercase text-weight-bolder justify-center"
-                        style="width: 120px; font-size: 0.8em;" 
-                    />
-                </q-card-section>
-
-                <!-- list of shifts, broken down into weekly columns -->
-                <q-card-section 
-                    :horizontal="$q.screen.gt.sm" 
-                    class="q-pa-none bg-secondary rounded-10"
+                <!-- list of shifts -->
+                <q-card-section
+                    :horizontal="$q.screen.gt.sm"
+                    class="q-pa-none rounded-10"
                 >
-                    <!-- IMPORTANT: Timesheet shift list goes here!!! -->
+                    <TimesheetWrapper
+                        dense
+                        :employee-email="employeeEmail"
+                    />
                 </q-card-section>
             </q-card-section>
 
             <!-- employee timesheet details with chart -->
-            <q-card-section 
-                v-if="is_showing_graph" 
+            <q-card-section
+                v-if="is_showing_graph"
                 class="q-pa-md col column full-width no-wrap"
             >
-                <q-card-section 
-                    :horizontal="!$q.screen.lt.md" 
-                    class="q-pa-none col no-wrap" 
+                <q-card-section
+                    :horizontal="!$q.screen.lt.md"
+                    class="q-pa-none col no-wrap"
                     style="min-height: 300px;"
                 >
-                    <DetailedDialogChartHoursWorked 
-                        :raw-data="payPeriodDetails" 
-                        class="col-7" 
-                    />
+                    <DetailedDialogChartHoursWorked class="col-7" />
 
-                    <q-separator 
-                        spaced 
-                        :vertical="!$q.screen.lt.md" 
+                    <q-separator
+                        spaced
+                        :vertical="!$q.screen.lt.md"
                     />
 
                     <div class="column col justify-center no-wrap q-pa-none">
-                        <DetailedDialogChartShiftTypes 
-                            :raw-data="payPeriodOverview" 
-                            class="col-5" 
+                        <DetailedDialogChartShiftTypes class="col-5" />
+
+                        <q-separator
+                            spaced
+                            :vertical="!$q.screen.lt.md"
                         />
 
-                        <q-separator 
-                            spaced 
-                            :vertical="!$q.screen.lt.md" 
-                        />
-
-                        <DetailedDialogChartExpenses 
-                            :raw-data="payPeriodDetails" 
-                            class="col" 
-                        />
+                        <DetailedDialogChartExpenses class="col" />
                     </div>
                 </q-card-section>
             </q-card-section>
diff --git a/src/modules/timesheet-approval/components/overview-list-item.vue b/src/modules/timesheet-approval/components/overview-list-item.vue
index 2702c30..852fa91 100644
--- a/src/modules/timesheet-approval/components/overview-list-item.vue
+++ b/src/modules/timesheet-approval/components/overview-list-item.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
-    import type { PayPeriodEmployeeOverview } from 'src/modules/timesheet-approval/types/pay-period-employee-overview';
+    import type { PayPeriodOverview } from 'src/modules/timesheet-approval/models/pay-period-overview.models';
 
     const modelApproval = defineModel<boolean>();
-    const { row } = defineProps<{ row: PayPeriodEmployeeOverview; }>();
-    const emit = defineEmits<{ clickDetails: []; }>();
+    const { row } = defineProps<{ row: PayPeriodOverview; }>();
+    const emit = defineEmits<{ 
+        'clickDetails': [overview: PayPeriodOverview]; 
+    }>();
 
     const stack_label_class = "text-weight-bold text-primary text-uppercase text-caption q-pa-none q-my-none ellipsis";
 </script>
@@ -25,7 +27,7 @@
                 class="col-auto q-pa-none q-ma-none"
                 color="primary"
                 icon="work_history"
-                @click="emit('clickDetails')"
+                @click="emit('clickDetails', row)"
                 >
                     <q-tooltip 
                     anchor="top middle"
diff --git a/src/modules/timesheet-approval/components/overview-list.vue b/src/modules/timesheet-approval/components/overview-list.vue
index 2cc04c9..923469e 100644
--- a/src/modules/timesheet-approval/components/overview-list.vue
+++ b/src/modules/timesheet-approval/components/overview-list.vue
@@ -1,70 +1,89 @@
-<script setup lang="ts">
-    import { ref } from 'vue';
+<script
+    setup
+    lang="ts"
+>
+    import { computed, ref } from 'vue';
     import { useTimesheetStore } from 'src/stores/timesheet-store';
-    import OverviewListItem from 'src/modules/timesheet-approval/components/employee-overview/overview-list-item.vue';
-    import QTableFilters from 'src/modules/shared/components/utils/q-table-filters.vue';
-    import { pay_period_employee_overview_columns, type PayPeriodEmployeeOverview } from 'src/modules/timesheet-approval/types/pay-period-employee-overview';
+    import OverviewListItem from 'src/modules/timesheet-approval/components/overview-list-item.vue';
+    import QTableFilters from 'src/modules/shared/components/q-table-filters.vue';
+    import PayPeriodNavigator from 'src/modules/shared/components/pay-period-navigator.vue';
+    import { pay_period_overview_columns, type PayPeriodOverview } from 'src/modules/timesheet-approval/models/pay-period-overview.models';
 
     const timesheet_store = useTimesheetStore();
-
-    // const FORWARD = 1
-    // const BACKWARD = -1
     const filter = ref<string | number | null>('');
 
-    const onClickedDetails = async ( employee_email: string ) => {
-        await timesheet_store.getPayPeriodEmployeeDetailsByEmployeeEmail(employee_email);
+    const employeeEmail = defineModel();
+
+    const emit = defineEmits<{
+        'clickedDetailsButton': [email: string];
+    }>();
+
+    const overview_rows = computed(() => timesheet_store.pay_period_overviews[0]?.regular_hours === -1 ?
+        [] :
+        timesheet_store.pay_period_overviews
+    )
+
+    const onClickedDetails = async (employee_email: string, row: PayPeriodOverview) => {
+        employeeEmail.value = employee_email;
+        emit('clickedDetailsButton', employee_email);
+        timesheet_store.current_pay_period_overview = row;
+        await timesheet_store.getPayPeriodDetailsByEmployeeEmail(employee_email);
     };
 </script>
 
 <template>
     <div class="q-pa-md">
-        <q-table 
-        :rows="timesheet_store.pay_period_employee_overview_list" 
-        :columns="pay_period_employee_overview_columns"
-        row-key="email" 
-        :filter="filter" 
-        grid 
-        dense
-        hide-pagination
-        color="primary"
-        :rows-per-page-options="[0]" 
-        card-container-class="justify-center"
-        :loading="timesheet_store.is_loading"
-        :no-data-label="$t('shared.error.no_data_found')"
-        :no-results-label="$t('shared.error.no_search_results')"
-        :loading-label="$t('shared.label.loading')"
+        <q-table
+            :rows="overview_rows"
+            :columns="pay_period_overview_columns"
+            row-key="email"
+            :filter="filter"
+            grid
+            dense
+            hide-pagination
+            color="primary"
+            :rows-per-page-options="[0]"
+            card-container-class="justify-center"
+            :loading="timesheet_store.is_loading"
+            :no-data-label="$t('shared.error.no_data_found')"
+            :no-results-label="$t('shared.error.no_search_results')"
+            :loading-label="$t('shared.label.loading')"
         >
             <template #top>
-                <div class="full-width" :class="$q.screen.lt.md ? 'text-center q-gutter-sm' : 'row'">
-                    <!-- Calendar Picker goes here -->
+                <div
+                    class="full-width"
+                    :class="$q.screen.lt.md ? 'text-center' : 'row'"
+                >
+                    <PayPeriodNavigator />
 
                     <q-space />
 
                     <!-- Grid-or-List toggle goes here -->
 
-                    <QTableFilters v-model="filter"/>            
+                    <QTableFilters v-model="filter" />
                 </div>
             </template>
 
             <!-- Template for individual employee cards -->
-            <template #item="props: { row: PayPeriodEmployeeOverview, key: string }">
+            <template #item="props: { row: PayPeriodOverview, key: string }">
                 <OverviewListItem
-                    v-model="props.row.is_approved" 
+                    v-model="props.row.is_approved"
                     :row="props.row"
-                    @click-details="onClickedDetails(props.row.email)"
+                    @click-details="overview => onClickedDetails(props.row.email, overview)"
                 />
             </template>
 
             <!-- Template for custome failed-to-load state -->
             <template #no-data="{ message, filter }">
                 <div class="full-width column items-center text-primary q-gutter-sm">
-                    <span class="text-h6 q-mt-xl">
+                    <q-icon
+                    size="4em"
+                    :name="filter ? 'filter_alt_off' : 'error_outline'"
+                    />
+
+                    <span class="text-h6">
                         {{ message }}
                     </span>
-                    <q-icon 
-                    size="4em" 
-                    :name="filter ? 'filter_alt_off' : 'error_outline'" 
-                    />
                 </div>
             </template>
         </q-table>
diff --git a/src/modules/timesheet-approval/components/overview-report.vue b/src/modules/timesheet-approval/components/overview-report.vue
index cd353ac..417f2b4 100644
--- a/src/modules/timesheet-approval/components/overview-report.vue
+++ b/src/modules/timesheet-approval/components/overview-report.vue
@@ -1,9 +1,12 @@
-<script setup lang="ts">
+<script
+    setup
+    lang="ts"
+>
+    import { default_timesheet_approval_cvs_report_filters, type TimesheetApprovalCSVReportFilters } from 'src/modules/timesheet-approval/models/timesheet-approval-csv-report.models';
     import { ref, computed } from 'vue';
-    import { default_pay_period_report_filters, type PayPeriodReportFilters } from 'src/modules/timesheet-approval/types/pay-period-report-options';
-    
-    const report_filter_options = ref<PayPeriodReportFilters>(default_pay_period_report_filters);
-    
+
+    const report_filter_options = ref<TimesheetApprovalCSVReportFilters>(default_timesheet_approval_cvs_report_filters);
+
     const company_options = [
         { label: 'Targo', value: report_filter_options.value.companies.targo },
         { label: 'Solucom', value: report_filter_options.value.companies.solucom },
@@ -16,15 +19,18 @@
         { label: 'shared.shift_type.vacation', value: report_filter_options.value.types.vacation },
     ];
 
-    const is_download_button_disabled = computed(() => { 
-        return company_options.map( option => option.value ).filter( value => value === true ).length > 0 || 
-        type_options.map( option => option.value ).filter( value => value === true ).length > 0; 
+    const is_download_button_disabled = computed(() => {
+        return company_options.map(option => option.value).filter(value => value === true).length > 0 ||
+            type_options.map(option => option.value).filter(value => value === true).length > 0;
     });
 </script>
 
 <template>
-    <q-btn-group rounded push>
-        <q-btn 
+    <q-btn-group
+        rounded
+        push
+    >
+        <q-btn
             rounded
             push
             color="primary"
@@ -42,14 +48,17 @@
             <q-list class="row">
                 <q-item class="col">
                     <q-item-label class="text-weight-bolder text-primary q-ma-none q-pa-none text-uppercase">
-                        {{$t('timesheet_approvals.print_report.company')}}
+                        {{ $t('timesheet_approvals.print_report.company') }}
                     </q-item-label>
 
-                    <q-item-section row no-wrap>
-                        <q-checkbox 
+                    <q-item-section
+                        row
+                        no-wrap
+                    >
+                        <q-checkbox
                             v-for="option, index in company_options"
                             :key="index"
-                            v-model="option.value" 
+                            v-model="option.value"
                             :val="option.label"
                             :label="option.label"
                         />
@@ -59,13 +68,17 @@
                 <q-separator
                     spaced
                     vertical
-                    color="primary" 
+                    color="primary"
                 />
 
                 <q-item class="col">
-                    <q-item-section row no-wrap>
-                        <p class="text-weight-bolder text-primary q-ma-none q-pa-none text-uppercase">{{$t('timesheet_approvals.print_report.type')}}</p>
-                        <q-checkbox 
+                    <q-item-section
+                        row
+                        no-wrap
+                    >
+                        <p class="text-weight-bolder text-primary q-ma-none q-pa-none text-uppercase">
+                            {{ $t('timesheet_approvals.print_report.type') }}</p>
+                        <q-checkbox
                             v-for="option, index in type_options"
                             :key="index"
                             v-model="option.value"
diff --git a/src/modules/timesheet-approval/models/pay-period-overview.models.ts b/src/modules/timesheet-approval/models/pay-period-overview.models.ts
index 57c32ba..a83271d 100644
--- a/src/modules/timesheet-approval/models/pay-period-overview.models.ts
+++ b/src/modules/timesheet-approval/models/pay-period-overview.models.ts
@@ -11,6 +11,16 @@ export interface PayPeriodOverview {
     is_approved: boolean;
 };
 
+export interface PayPeriodOverviewResponse {
+  pay_period_no: number;
+  pay_year: number;
+  period_start: string;
+  period_end: string;
+  payday: string;
+  label: string;
+  employees_overview: PayPeriodOverview[];
+}
+
 export const default_pay_period_overview: PayPeriodOverview = {
     email: '',
     employee_name: '',
diff --git a/src/modules/timesheet-approval/models/timesheet-approval-csv-report.models.ts b/src/modules/timesheet-approval/models/timesheet-approval-csv-report.models.ts
index d5e8381..3633813 100644
--- a/src/modules/timesheet-approval/models/timesheet-approval-csv-report.models.ts
+++ b/src/modules/timesheet-approval/models/timesheet-approval-csv-report.models.ts
@@ -11,7 +11,7 @@ export interface TimesheetApprovalCSVReportFilters {
     };
 }
 
-export const default_pay_period_report_filters: TimesheetApprovalCSVReportFilters = {
+export const default_timesheet_approval_cvs_report_filters: TimesheetApprovalCSVReportFilters = {
     types: {
         shifts: true,
         expenses: true,
diff --git a/src/modules/timesheet-approval/pages/timesheet-approval-page.vue b/src/modules/timesheet-approval/pages/timesheet-approval-page.vue
deleted file mode 100644
index 636811d..0000000
--- a/src/modules/timesheet-approval/pages/timesheet-approval-page.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<script setup lang="ts">
-    import { onMounted } from 'vue';
-    import { date } from 'quasar';
-    import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
-    import { useTimesheetStore } from 'src/stores/timesheet-store';
-    import PageHeaderTemplate from 'src/modules/shared/components/page-header-template.vue';
-    import EmployeeOverviewList from 'src/modules/timesheet-approval/components/employee-overview/overview-list.vue';
-    import DetailedDialog from 'src/modules/timesheet-approval/components/detailed-dialog.vue';
-
-    const timesheet_approval_api = useTimesheetApprovalApi();
-    const timesheet_store = useTimesheetStore();
-
-    onMounted( async () => {
-        await timesheet_approval_api.getPayPeriodOverviewByDate(date.formatDate( new Date(), 'YYYY-MM-DD'));
-    });
-</script>
-
-<template>
-    <q-page 
-        padding 
-        class="q-pa-md bg-secondary "
-    >
-        <PageHeaderTemplate 
-            title="timesheet_approvals.page_title"
-            :start-date="timesheet_store.pay_period.period_start"
-            :end-date="timesheet_store.pay_period.period_end"
-        />
-        
-        <DetailedDialog
-            :is-loading="timesheet_store.is_loading"
-            :employee-overview="timesheet_store.pay_period_employee_overview"
-            :timesheet-details="timesheet_store.pay_period_employee_details"
-        />
-
-        <EmployeeOverviewList />
-    </q-page>
-</template>
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/services/timesheet-approval-service.ts b/src/modules/timesheet-approval/services/timesheet-approval-service.ts
index d156929..53e3e9b 100644
--- a/src/modules/timesheet-approval/services/timesheet-approval-service.ts
+++ b/src/modules/timesheet-approval/services/timesheet-approval-service.ts
@@ -1,9 +1,9 @@
 import { api } from "src/boot/axios";
 import type { TimesheetApprovalCSVReportFilters } from "src/modules/timesheet-approval/models/timesheet-approval-csv-report.models";
-import type { PayPeriodOverview } from "src/modules/timesheet-approval/models/pay-period-overview.models";
+import type { PayPeriodOverviewResponse } from "src/modules/timesheet-approval/models/pay-period-overview.models";
 
 export const timesheetApprovalService = {
-    getPayPeriodOverviewsBySupervisorEmail: async (year: number, period_number: number, supervisor_email: string): Promise<PayPeriodOverview[]> => {
+    getPayPeriodOverviewsBySupervisorEmail: async (year: number, period_number: number, supervisor_email: string): Promise<PayPeriodOverviewResponse> => {
         const response = await api.get(`pay-periods/${year}/${period_number}/${supervisor_email}`);
         return response.data;
     },
diff --git a/src/modules/timesheets/components/expenses/expense-crud-dialog-form.vue b/src/modules/timesheets/components/expense-crud-dialog-form.vue
similarity index 65%
rename from src/modules/timesheets/components/expenses/expense-crud-dialog-form.vue
rename to src/modules/timesheets/components/expense-crud-dialog-form.vue
index 8ffeb3a..38773bf 100644
--- a/src/modules/timesheets/components/expenses/expense-crud-dialog-form.vue
+++ b/src/modules/timesheets/components/expense-crud-dialog-form.vue
@@ -2,50 +2,53 @@
     setup
     lang="ts"
 >
-    import { ref } from 'vue';
+    import { inject, ref } from 'vue';
+    import { useI18n } from 'vue-i18n';
     import { useExpensesStore } from 'src/stores/expense-store';
-    import type { ExpenseType, Expense } from 'src/modules/timesheets/models/expense.models';
+    import { default_expense, EXPENSE_TYPE, TYPES_WITH_AMOUNT_ONLY } from 'src/modules/timesheets/models/expense.models';
+    import { makeExpenseRules } from 'src/modules/timesheets/utils/expense.util';
+    import { useExpensesApi } from 'src/modules/timesheets/composables/api/use-expense-api';
 
-    const expense_store = useExpensesStore();
+    const { t } = useI18n();
+
+    const expenses_store = useExpensesStore();
+    const expenses_api = useExpensesApi();
     const files = defineModel<File[] | null>('files');
     const is_navigator_open = ref(false);
 
-    //------------------ props ------------------
-    defineProps<{     
-        type_options: { label: string; value: ExpenseType }[];
-        show_amount: boolean;
-        is_readonly: boolean;
-        rules: {
-            typeRequired: (val: unknown) => true | string;
-            amountRequired: (val: unknown) => true | string;
-            mileageRequired: (val: unknown) => true | string;
-            commentRequired: (val: unknown) => true | string;
-            commentTooLong: (val: unknown) => true | string;
-        };
-        comment_max_length: number;
-        setType: (val: ExpenseType) => void;
-    }>();
+    const COMMENT_MAX_LENGTH = 280;
+    const employee_email = inject<string>('employeeEmail');
+    const rules = makeExpenseRules(t);
 
-    //------------------ emits ------------------
-    const emit = defineEmits<{
-        'submit': [void];
-    }>();
+    const cancelUpdateMode = () => {
+        expenses_store.current_expense = default_expense;
+        expenses_store.initial_expense = default_expense;
+        expenses_store.mode = 'create';
+    }
+
+    const requestExpenseCreationOrUpdate = async () => {
+        if (expenses_store.mode === 'create') await expenses_api.createExpenseByEmployeeEmail(employee_email ?? '', expenses_store.current_expense.date);
+        else await expenses_api.updateExpenseByEmployeeEmail(employee_email ?? '', expenses_store.current_expense.date);
+    }
 </script>
 
 <template>
     <q-form
         flat
-        v-if="!is_readonly"
-        @submit.prevent="$emit('submit')"
+        v-if="!expenses_store.pay_period_expenses.is_approved"
+        @submit.prevent="requestExpenseCreationOrUpdate"
     >
         <div class="text-subtitle2 q-py-sm">
             {{ $t('timesheet.expense.add_expense') }}
         </div>
-        <div class="row justify-between">
+        <div
+            class="row justify-between rounded-5"
+            :class="expenses_store.mode === 'update' ? 'bg-accent' : ''"
+        >
 
             <!-- date selection input -->
             <q-input
-                v-model="expense_store.current_expense.date"
+                v-model="expenses_store.current_expense.date"
                 dense
                 filled
                 readonly
@@ -64,7 +67,7 @@
                     />
                     <q-dialog v-model="is_navigator_open">
                         <q-date
-                            v-model="expense_store.current_expense.date"
+                            v-model="expenses_store.current_expense.date"
                             @update:model-value="is_navigator_open = false"
                             mask="YYYY-MM-DD"
                         />
@@ -74,8 +77,8 @@
 
             <!-- expenses type selection -->
             <q-select
-                v-model="expense_store.current_expense.type"
-                :options="type_options"
+                v-model="expenses_store.current_expense.type"
+                :options="EXPENSE_TYPE"
                 filled
                 dense
                 class="col q-px-xs"
@@ -85,14 +88,13 @@
                 :label="$t('timesheet.expense.type')"
                 :rules="[rules.typeRequired]"
                 :option-label="label => $t(label)"
-                @update:model-value="val => setType(val as ExpenseType)"
             />
 
             <!-- amount input -->
-            <template v-if="show_amount">
+            <template v-if="TYPES_WITH_AMOUNT_ONLY.includes(expenses_store.current_expense.type)">
                 <q-input
                     key="amount"
-                    v-model.number="expense_store.current_expense.amount"
+                    v-model.number="expenses_store.current_expense.amount"
                     filled
                     input-class="text-right"
                     dense
@@ -111,7 +113,7 @@
             <template v-else>
                 <q-input
                     key="mileage"
-                    v-model.number="expense_store.current_expense.mileage"
+                    v-model.number="expenses_store.current_expense.mileage"
                     filled
                     input-class="text-right"
                     dense
@@ -128,7 +130,7 @@
 
             <!-- employee comment input -->
             <q-input
-                v-model="expense_store.current_expense.comment"
+                v-model="expenses_store.current_expense.comment"
                 filled
                 color="primary"
                 type="text"
@@ -137,9 +139,9 @@
                 stack-label
                 clearable
                 :counter="true"
-                :maxlength="comment_max_length"
+                :maxlength="COMMENT_MAX_LENGTH"
                 lazy-rules="ondemand"
-                :rules="[rules.commentRequired, rules.commentTooLong]"
+                :rules="[rules.commentRequired]"
             >
                 <template #label>
                     <span class="text-weight-bold ">
@@ -171,6 +173,15 @@
 
             <!-- add btn section -->
             <div>
+                <q-btn
+                    v-if="expenses_store.mode === 'update'"
+                    flat
+                    dense
+                    size="sm"
+                    class="q-mt-sm q-ml-sm"
+                    @click="cancelUpdateMode"
+                />
+
                 <q-btn
                     push
                     dense
diff --git a/src/modules/timesheets/components/expense-crud-dialog-header.vue b/src/modules/timesheets/components/expense-crud-dialog-header.vue
new file mode 100644
index 0000000..682b8e5
--- /dev/null
+++ b/src/modules/timesheets/components/expense-crud-dialog-header.vue
@@ -0,0 +1,34 @@
+<script
+    setup
+    lang="ts"
+>
+    import { useExpensesStore } from 'src/stores/expense-store';
+
+    const expense_store = useExpensesStore();
+</script>
+
+<template>
+    <q-item class="row justify-between">
+        <q-item-label
+            header
+            class="text-h6 col-auto"
+        >
+            {{ $t('timesheet.expense.title') }}
+        </q-item-label>
+        <q-item-section class="items-center col-auto">
+            <q-badge
+                lines="1"
+                class="q-pa-sm q-px-md"
+                :label="$t('timesheet.expense.total_amount') + ': ' + expense_store.pay_period_expenses_totals.amount.toFixed(2)"
+            />
+
+            <q-separator spaced />
+
+            <q-badge
+                lines="2"
+                class="q-pa-sm q-px-md"
+                :label="$t('timesheet.expense.total_mileage') + ': ' + expense_store.pay_period_expenses_totals.mileage.toFixed(1)"
+            />
+        </q-item-section>
+    </q-item>
+</template>
\ No newline at end of file
diff --git a/src/modules/timesheets/components/expense-crud-dialog-list.vue b/src/modules/timesheets/components/expense-crud-dialog-list.vue
new file mode 100644
index 0000000..eef7b96
--- /dev/null
+++ b/src/modules/timesheets/components/expense-crud-dialog-list.vue
@@ -0,0 +1,151 @@
+<script
+    setup
+    lang="ts"
+>
+    import { unwrapAndClone } from 'src/utils/unwrap-and-clone';
+    import { expenseTypeIcon } from 'src/modules/timesheets/utils/expense.util';
+    import { useExpensesStore } from 'src/stores/expense-store';
+    import { useTimesheetStore } from 'src/stores/timesheet-store';
+    import { useExpensesApi } from 'src/modules/timesheets/composables/api/use-expense-api';
+    import { default_expense, type Expense } from 'src/modules/timesheets/models/expense.models';
+    import { computed, inject } from 'vue';
+
+    const timesheet_store = useTimesheetStore();
+    const expenses_store = useExpensesStore();
+    const expenses_api = useExpensesApi();
+
+    const expenses_list = computed(() => timesheet_store.pay_period_details.weeks.flatMap(week =>
+        Object.values(week.expenses).flatMap(day => day.expenses)));
+
+    const employee_email = inject('employeeEmail', '');
+
+    const setExpenseToModify = (expense: Expense) => {
+        expenses_store.mode = 'update';
+        expenses_store.current_expense = expense;
+        expenses_store.initial_expense = unwrapAndClone(expense);
+    };
+
+    const requestExpenseDeletion = async (expense: Expense) => {
+        expenses_store.mode = 'delete';
+        expenses_store.initial_expense = expense;
+        expenses_store.current_expense = default_expense;
+        await expenses_api.deleteExpenseByEmployeeEmail(employee_email, expenses_store.initial_expense.date);
+    }
+</script>
+
+<template>
+    <!-- liste des dépenses pré existantes -->
+    <q-list
+        padding
+        class="rounded-borders"
+    >
+        <q-item-label
+            v-if="expenses_store.pay_period_expenses.expenses.length === 0"
+            class="text-italic q-px-sm"
+        >
+            {{ $t('timesheet.expense.empty_list') }}
+        </q-item-label>
+        <q-item
+            style="border: solid 1px lightgrey; border-radius: 7px;"
+            v-for="(expense, index) in expenses_list"
+            :key="index"
+            class="q-my-xs shadow-1"
+            :class="expenses_store.mode === 'update' ? 'bg-accent' : ''"
+        >
+            <!-- avatar type icon section -->
+            <q-item-section avatar>
+                <q-icon
+                    :name="expenseTypeIcon(expense.type)"
+                    color="primary"
+                />
+            </q-item-section>
+
+            <!-- amount or mileage section -->
+            <q-item-section top>
+                <q-item-label v-if="String(expense.type).trim().toUpperCase() === 'MILEAGE'">
+                    <template v-if="typeof expense.mileage === 'number'">
+                        {{ expense.mileage?.toFixed(1) }} km
+                    </template>
+                    <template v-else>
+                        {{ expense.amount.toFixed(2) }} $
+                    </template>
+                </q-item-label>
+                <q-item-label v-else>
+                    {{ expense.amount.toFixed(2) }} $
+                </q-item-label>
+
+                <!-- date label -->
+                <q-item-label
+                    caption
+                    lines="2"
+                >
+                    {{ $d(new Date(expense.date), { year: 'numeric', month: 'short', day: 'numeric', weekday: 'short' })
+                    }}
+                </q-item-label>
+            </q-item-section>
+
+            <!-- attachment file icon -->
+            <q-item-section side>
+                <q-btn
+                    push
+                    dense
+                    size="md"
+                    color="primary"
+                    class="q-mx-lg"
+                    icon="attach_file"
+                />
+            </q-item-section>
+
+            <!-- comment section -->
+            <q-item-section top>
+                <q-item-label lines="1">
+                    {{ $t('timesheet.expense.employee_comment') }}
+                </q-item-label>
+                <q-item-label
+                    caption
+                    lines="2"
+                >
+                    {{ expense.comment }}
+                </q-item-label>
+            </q-item-section>
+
+            <!-- supervisor comment section -->
+            <q-item-section top>
+                <q-item-label lines="1">
+                    {{ $t('timesheet.expense.supervisor_comment') }}
+                </q-item-label>
+                <q-item-label
+                    v-if="expense.supervisor_comment"
+                    caption
+                    lines="2"
+                >
+                    {{ expense.supervisor_comment }}
+                </q-item-label>
+            </q-item-section>
+
+            <q-item-section
+                v-if="!expenses_store.pay_period_expenses.is_approved && !expense.is_approved"
+                side
+            >
+                <q-btn
+                    push
+                    dense
+                    size="xs"
+                    color="primary"
+                    icon="edit"
+                    @click="setExpenseToModify(expense)"
+                />
+
+                <q-btn
+                    push
+                    dense
+                    size="xs"
+                    color="negative"
+                    icon="close"
+                    @click="requestExpenseDeletion(expense)"
+                />
+            </q-item-section>
+        </q-item>
+    </q-list>
+
+</template>
\ No newline at end of file
diff --git a/src/modules/timesheets/components/expenses/expense-crud-dialog-supervisor-comment.vue b/src/modules/timesheets/components/expense-crud-dialog-supervisor-comment.vue
similarity index 100%
rename from src/modules/timesheets/components/expenses/expense-crud-dialog-supervisor-comment.vue
rename to src/modules/timesheets/components/expense-crud-dialog-supervisor-comment.vue
diff --git a/src/modules/timesheets/components/expense-crud-dialog.vue b/src/modules/timesheets/components/expense-crud-dialog.vue
new file mode 100644
index 0000000..ed9d3ed
--- /dev/null
+++ b/src/modules/timesheets/components/expense-crud-dialog.vue
@@ -0,0 +1,58 @@
+<script
+    setup
+    lang="ts"
+>
+    import { useExpensesStore } from 'src/stores/expense-store';
+    import ExpenseCrudDialogList from 'src/modules/timesheets/components/expense-crud-dialog-list.vue';
+    import ExpenseCrudDialogForm from 'src/modules/timesheets/components/expense-crud-dialog-form.vue';
+    import ExpenseCrudDialogHeader from 'src/modules/timesheets/components/expense-crud-dialog-header.vue';
+
+    const expense_store = useExpensesStore();
+</script>
+
+<template>
+    <q-dialog
+        v-model="expense_store.is_open"
+        persistent
+    >
+        <q-card
+            class="q-pa-md"
+            style=" min-width: 70vw;"
+        >
+            <q-inner-loading :showing="expense_store.is_loading">
+                <q-spinner size="32px" />
+            </q-inner-loading>
+
+            <q-card-section>
+                <!-- <q-banner 
+                    v-if="expenses_error"
+                    dense
+                    class="bg-red-2 col-auto text-negative q-mt-sm"
+                >
+                    {{ expenses_error }}
+                </q-banner> -->
+
+                <ExpenseCrudDialogHeader />
+
+                <ExpenseCrudDialogList />
+
+                <ExpenseCrudDialogForm />
+
+                <q-separator spaced />
+
+            </q-card-section>
+
+            <q-card-actions align="right">
+                <!-- close btn -->
+                <q-btn
+                    flat
+                    class="col-auto q-mr-sm"
+                    color="primary"
+                    :label="$t('shared.label.close')"
+                    @click="expense_store.close"
+                />
+            </q-card-actions>
+
+        </q-card>
+    </q-dialog>
+</template>
\ No newline at end of file
diff --git a/src/modules/timesheets/components/expenses/expense-crud-dialog-list.vue b/src/modules/timesheets/components/expenses/expense-crud-dialog-list.vue
deleted file mode 100644
index 9e5f12b..0000000
--- a/src/modules/timesheets/components/expenses/expense-crud-dialog-list.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-<script setup lang="ts">
-import type { TimesheetExpense } from '../../types/expense.interfaces';
-import { expenseTypeIcon }  from '../../utils/expense.util';
-/* eslint-disable */
-defineProps<{
-    items: TimesheetExpense[];
-    is_readonly: boolean;
-}>();
-
-defineEmits<{
-    (e: 'remove', index: number): void;
-    (e: 'edit'  , index: number): void;
-}>();
-
-</script>
-
-<template>
-    <!-- liste des dépenses pré existantes -->
-    <q-list 
-        padding 
-        class="rounded-borders"
-
-    >
-        <q-item-label v-if="items.length === 0" class="text-italic q-px-sm">
-            {{ $t('timesheet.expense.empty_list') }}
-        </q-item-label>
-        <q-item
-            style="border: solid 1px lightgrey; border-radius: 7px;"
-            v-for="(expense, index) in items" :key="index"
-            class="q-my-xs shadow-1"
-        >
-            <!-- avatar type icon section -->
-            <q-item-section avatar>
-                <q-icon :name="expenseTypeIcon(expense.type)" color="primary"/>
-            </q-item-section>
-
-            <!-- amount or mileage section -->
-            <q-item-section top>
-                <q-item-label v-if="String(expense.type).trim().toUpperCase() === 'MILEAGE'">
-                    <template v-if="typeof expense.mileage === 'number'">
-                        {{ expense.mileage?.toFixed(1) }} km
-                    </template>
-                    <template v-else>
-                        {{ expense.amount?.toFixed(2) }} $
-                    </template>
-                </q-item-label>
-                <q-item-label v-else>
-                    {{ expense.amount?.toFixed(2) }} $
-                </q-item-label>
-                
-                <!-- date label -->
-                <q-item-label caption lines="2">
-                        {{ $d(new Date(expense.date + 'T00:00:00'), { year:'numeric', month:'short', day: 'numeric', weekday: 'short'}) }}
-                </q-item-label>
-            </q-item-section>
-
-            <!-- attachment file icon -->
-            <q-item-section side>
-                <q-btn
-                    push   
-                    dense
-                    size="md"
-                    color="primary"
-                    class="q-mx-lg"
-                    icon="attach_file"
-                />
-            </q-item-section>
-
-            <!-- comment section -->
-            <q-item-section top>
-                <q-item-label lines="1">
-                    {{ $t('timesheet.expense.employee_comment') }}
-                </q-item-label>
-                <q-item-label caption lines="2">
-                    {{ expense.comment }}
-                </q-item-label>
-            </q-item-section>
-
-            <!-- supervisor comment section -->
-            <q-item-section top>
-                <q-item-label lines="1">
-                    {{ $t('timesheet.expense.supervisor_comment') }}
-                </q-item-label>
-                <q-item-label v-if="expense.supervisor_comment" caption lines="2">
-                    {{ expense.supervisor_comment }}    
-                </q-item-label>
-            </q-item-section>
-            
-            <!-- delete btn -->
-            <q-item-section side>
-                <q-btn
-                    v-if="!is_readonly"
-                    push
-                    dense
-                    size="xs"
-                    color="primary"
-                    icon="edit"
-                    @click="$emit('edit', index)"
-                />
-            </q-item-section>
-
-            <!-- delete btn -->
-            <q-item-section side>
-                <q-btn
-                    v-if="!is_readonly"
-                    push
-                    dense
-                    size="xs"
-                    color="negative"
-                    icon="close"
-                    @click="$emit('remove', index)"
-                />
-            </q-item-section>
-        </q-item>
-    </q-list>
-
-</template>
\ No newline at end of file
diff --git a/src/modules/timesheets/components/expenses/expense-crud-dialog.vue b/src/modules/timesheets/components/expenses/expense-crud-dialog.vue
deleted file mode 100644
index 7c78582..0000000
--- a/src/modules/timesheets/components/expenses/expense-crud-dialog.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<script
-    setup
-    lang="ts"
->
-    import { useI18n } from 'vue-i18n';
-    import { computed, ref } from 'vue';
-    import { useExpensesStore } from 'src/stores/expense-store';
-    import { useExpenseForm } from '../../composables/use-expense-form';
-    import { COMMENT_MAX_LENGTH } from '../../constants/expense.constants';
-    import ExpenseList from './expense-list.vue';
-    import ExpenseCrudDialogForm from 'src/modules/timesheets/components/expenses/expense-crud-dialog-form.vue';
-    import { computeExpenseTotals, makeExpenseRules, buildExpenseSavePayload } from '../../utils/expense.util';
-    import { EXPENSE_TYPE } from 'src/modules/timesheets/models/expense.models';
-    import type { Expense, ExpenseType, PayPeriodExpenses } from 'src/modules/timesheets/models/expense.models';
-    import { toQSelectOptions } from 'src/utils/to-qselect-options';
-
-    const { t } = useI18n();
-    const rules = makeExpenseRules(t, COMMENT_MAX_LENGTH);
-    const expense_store = useExpensesStore();
-
-    const { employeeEmail } = defineProps<{
-        employeeEmail: string;
-    }>();
-
-    const type_options = toQSelectOptions<ExpenseType>(EXPENSE_TYPE, 'timesheet.expense.types.');
-
-
-
-    //------------------ refs and computed ------------------
-    const files = ref<File[] | null>(null);
-    const { validateAnd } = useExpenseForm();
-    
-    const totals = computed(() => computeExpenseTotals(expenses));
-</script>
-
-<template>
-    <q-dialog
-        v-model="expense_store.is_open"
-        persistent
-    >
-        <q-card
-            class="q-pa-md"
-            style=" min-width: 70vw;"
-        >
-            <q-inner-loading :showing="expense_store.is_loading">
-                <q-spinner size="32px" />
-            </q-inner-loading>
-
-            <q-card-section>
-                <!-- <q-banner 
-                    v-if="expenses_error"
-                    dense
-                    class="bg-red-2 col-auto text-negative q-mt-sm"
-                >
-                    {{ expenses_error }}
-                </q-banner> -->
-
-                <!-- header (title with totals)-->
-                <q-item class="row justify-between">
-                    <q-item-label
-                        header
-                        class="text-h6 col-auto"
-                    >
-                        {{ $t('timesheet.expense.title') }}
-                    </q-item-label>
-                    <q-item-section class="items-center col-auto">
-                        <q-badge
-                            lines="1"
-                            class="q-pa-sm q-px-md"
-                            :label="$t('timesheet.expense.total_amount') + ': ' + totals.amount.toFixed(2)"
-                        />
-                        <q-separator spaced />
-                        <q-badge
-                            lines="2"
-                            class="q-pa-sm q-px-md"
-                            :label="$t('timesheet.expense.total_mileage') + ': ' + totals.mileage.toFixed(1)"
-                        />
-                    </q-item-section>
-                </q-item>
-                <ExpenseList
-                    :items="expense_store.current_expenses"
-                    @remove="expense_store.upsertOrDeletePayPeriodExpenseByEmployeeEmail(employeeEmail, expense_store.current_expenses.expenses)"
-                />
-                <ExpenseCrudDialogForm
-                    :current-expenses:"expense_store.current_expenses.exp"
-                    v-model:files="files"
-                    :is_readonly="expense_store.current_expenses.is_approved"
-                    :type_options="type_options"
-                    :rules="rules"
-                    :comment_max_length="COMMENT_MAX_LENGTH"
-                    :set-type="setType"
-                    @submit="expense_store.upsertOrDeletePayPeriodExpenseByEmployeeEmail(employeeEmail, expense_store.current_expenses.expenses)"
-                />
-
-                <q-separator spaced />
-
-            </q-card-section>
-
-            <q-card-actions align="right">
-                <!-- close btn -->
-                <q-btn
-                    flat
-                    class="col-auto q-mr-sm"
-                    color="primary"
-                    :label="$t('timesheet.cancel_button')"
-                    @click="close"
-                />
-                <!-- save btn -->
-                <q-btn
-                    push
-                    color="primary"
-                    class="col-auto"
-                    :disable="pay_period_expenses.is_approved || expenses.length === 0"
-                    :label="$t('timesheet.save_button')"
-                    @click="onSave"
-                />
-            </q-card-actions>
-
-        </q-card>
-    </q-dialog>
-</template>
\ No newline at end of file
diff --git a/src/modules/timesheets/components/expenses/timesheet-details-expenses.vue b/src/modules/timesheets/components/expenses/timesheet-details-expenses.vue
deleted file mode 100644
index 40ba68a..0000000
--- a/src/modules/timesheets/components/expenses/timesheet-details-expenses.vue
+++ /dev/null
@@ -1,267 +0,0 @@
-<script setup lang="ts">
-import { useI18n }         from 'vue-i18n';
-import { computed, ref }   from 'vue';
-import { useExpenseForm }  from '../../composables/use-expense-form';
-import { useExpenseDraft } from '../../composables/use-expense-draft';
-import { useExpenseItems } from '../../composables/use-expense-items';
-import { useToggle }       from 'src/modules/shared/composables/use-toggle';
-import ExpenseList         from './expense-list.vue';
-import ExpenseForm         from './expense-form.vue';
-import {
-    buildExpenseTypeOptions,
-    computeExpenseTotals,
-    makeExpenseRules,
-    buildExpenseSavePayload
-} from '../../utils/expense.util';
-import { COMMENT_MAX_LENGTH }      from '../../constants/expense.constants';
-import { ExpensesValidationError } from '../../types/expense-validation.interface';
-import { EXPENSE_TYPE }            from '../../types/expense.types';
-import type { ExpenseType }        from '../../types/expense.types';
-import type { ExpenseDay, TimesheetExpense }   from '../../types/expense.interfaces';
-import { 
-    createExpenseByDate, 
-    deleteExpenseByDate, 
-    getPayPeriodExpenses, 
-    updateExpenseByDate
-} from '../../composables/api/use-expense-api';
-
-/* eslint-disable */
-
-const { t, locale } = useI18n();
-const rules = makeExpenseRules(t, COMMENT_MAX_LENGTH);
-
-//------------------ props ------------------
-const {email, pay_period_no, pay_year, is_approved, initial_expenses} = defineProps<{
-    pay_period_no: number;
-    pay_year: number;
-    email: string;
-    is_approved?: boolean;
-    initial_expenses?: TimesheetExpense[];
-}>();
-
-//------------------ emits ------------------
-const emit = defineEmits<{
-    (e: 'close'): void;
-    (e: 'save', payload: {
-        pay_period_no: number;
-        pay_year:       number;
-        email:          string;
-        expenses: TimesheetExpense[];
-    }): void;
-    (e: 'error', err: ExpensesValidationError): void;
-}>();
-
-//------------------ q-select mapper ------------------
-const type_options = computed(() => {
-    void locale.value;
-    return buildExpenseTypeOptions(EXPENSE_TYPE, t);
-})
-
-//------------------ refs and computed ------------------
-const files       = ref<File[] | null>(null);
-const is_readonly = computed(() => !!is_approved);
-const editing_old = ref<ExpenseDay | null>(null);
-
-const { state: is_open_date_picker }        = useToggle();
-const { draft, setType, reset, showAmount } = useExpenseDraft();
-const { formRef, validateAnd }              = useExpenseForm();
-const { items, validateAll, payload }       = useExpenseItems({
-    initial_expenses: initial_expenses,
-    is_approved:      is_readonly,
-    draft,
-});
-const totals = computed(() => computeExpenseTotals(items.value));
-
-//------------------ actions ------------------
-const onSave = () => {
-    try {
-        validateAll();
-        reset();
-        emit('save', buildExpenseSavePayload({
-            pay_period_no: pay_period_no,
-            pay_year:      pay_year,
-            email:         email,
-            expenses:      payload(),
-        }));
-
-    } catch (err: any) {
-        const e = err instanceof ExpensesValidationError
-            ? err
-            : new ExpensesValidationError({
-                status_code: 400,
-                message: String(err?.message || err)
-            });
-        emit('error', e);
-    }
-};
-
-const refreshFromServer = async () => {
-    const fresh = await getPayPeriodExpenses(email, pay_year, pay_period_no);
-    items.value = Array.isArray(fresh.expenses) ? fresh.expenses : [];
-};
-
-const onFormSubmit = async () => {
-    try {
-        await validateAnd(async () => {
-            if (is_readonly.value) throw new Error(t('common.read_only') || 'Read-only');
-
-            const day = draft.value;
-            if (!day?.date || !day?.type || !day?.comment) {
-                throw new ExpensesValidationError({ status_code: 400, message: 'Missing required fields' });
-            }
-
-            const is_mileage = String(day.type).toUpperCase() === 'MILEAGE';
-            const new_payload = {
-                date:    day.date,
-                type:    day.type as ExpenseType,
-                comment: day.comment,
-                ...(is_mileage && typeof day.mileage === 'number'
-                    ? { mileage: day.mileage }
-                    : !is_mileage && typeof day.amount === 'number'
-                        ? { amount: day.amount }
-                        : {}),
-            };
-            if(editing_old.value) {
-                await updateExpenseByDate(email, editing_old.value, new_payload as any);
-                editing_old.value = null;
-            } else {
-                await createExpenseByDate(email, new_payload as any);
-            }
-            await refreshFromServer();
-            reset();
-        });
-    } catch (err: any) {
-        const e = err instanceof ExpensesValidationError ? err : new ExpensesValidationError({
-            status_code: 400,
-            message: String(err?.message || err)
-        });
-        emit('error', e);
-    }
-};
-
-const onRemove = async (index: number) => {
-    try {
-        if (is_readonly.value) throw new Error(t('common.read_only') || 'Read-only');
-
-        const item = items.value[index];
-        if (!item) return;
-        const is_mileage = String(item.type).toUpperCase() === 'MILEAGE';
-
-        const old_payload: any = {
-            date:    item.date,
-            type:    item.type as ExpenseType,
-            comment: item.comment ?? '',
-            ...(is_mileage && typeof item.mileage === 'number'
-                ? { mileage: item.mileage }
-                : !is_mileage && typeof item.amount === 'number'
-                    ? { amount: item.amount }
-                    : {}),
-        };
-
-            await deleteExpenseByDate(email, old_payload as any);
-            await refreshFromServer();
-    } catch (err: any) {
-        const e = err instanceof ExpensesValidationError ? err : new ExpensesValidationError({
-            status_code: 400, message: String(err?.message || err)
-        });
-        emit('error', e);
-    }
-};
-
-const onEdit = async (index: number) => {
-    if(is_readonly) return;
-    const item = items.value[index];
-    if(!item) return;
-    const old_amount = Number(item.amount) || 0;
-    editing_old.value = {
-        date: item.date,
-        type: item.type as ExpenseType,
-        amount: old_amount,
-        comment: item.comment ?? '',
-        is_approved: !!item.is_approved,
-    };
-
-    const is_mileage = String(item.type).toUpperCase() === 'MILEAGE';
-    const next: Partial<TimesheetExpense> = {
-        date: item.date,
-        type: item.type,
-        comment: item.comment ?? '',
-        ...(is_mileage
-            ? (typeof item.mileage === 'number' ? { mileage: item.mileage } : {})
-            : (typeof item.amount === 'number' ? { amnount: item.amount } : {})),
-    };
-    (draft as any).value = next;
-    setType(item.type as ExpenseType);
-};
-
-const onClose = () => emit('close');
-
-</script>
-
-<template>
-    <div>
-        <!-- header (title with totals)-->
-        <q-item class="row justify-between">
-            <q-item-label
-                header
-                class="text-h6 col-auto"
-            >
-                {{ $t('timesheet.expense.title') }}
-            </q-item-label>
-            <q-item-section class="items-center col-auto">
-                <q-badge
-                    lines="1"
-                    class="q-pa-sm q-px-md"
-                    :label="$t('timesheet.expense.total_amount') + ': ' + totals.amount.toFixed(2)"
-                />
-                <q-separator spaced />
-                <q-badge
-                    lines="2"
-                    class="q-pa-sm q-px-md"
-                    :label="$t('timesheet.expense.total_mileage') + ': ' + totals.mileage.toFixed(1)"
-                />
-            </q-item-section>
-        </q-item>
-        <ExpenseList
-            :items="items"
-            :is_readonly="is_readonly"
-            @remove="onRemove"
-            @edit="onEdit"
-        />
-        <ExpenseForm
-            ref="formRef"
-            v-model:draft="draft"
-            v-model:files="files"
-            v-model:date-picker-open="is_open_date_picker"
-            :type_options="type_options"
-            :show_amount="showAmount"
-            :is_readonly="is_readonly"
-            :rules="rules"
-            :comment_max_length="COMMENT_MAX_LENGTH"
-            :set-type="setType"
-            @submit="onFormSubmit"
-        />
-
-        <q-separator spaced />
-
-        <div class="row col-auto justify-end">
-            <!-- close btn -->
-            <q-btn
-                flat
-                class="q-mr-sm"
-                color="primary"
-                :label="$t('timesheet.cancel_button')"
-                @click="onClose"
-            />
-            <!-- save btn -->
-            <q-btn
-                color="primary"
-                unelevated
-                push
-                :disable="is_readonly || items.length === 0"
-                :label="$t('timesheet.save_button')"
-                @click="onSave"
-            />
-        </div>
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/modules/timesheets/components/shift/shift-crud-dialog.vue b/src/modules/timesheets/components/shift-crud-dialog.vue
similarity index 100%
rename from src/modules/timesheets/components/shift/shift-crud-dialog.vue
rename to src/modules/timesheets/components/shift-crud-dialog.vue
diff --git a/src/modules/timesheets/components/shift/shift-list-header.vue b/src/modules/timesheets/components/shift-list-header.vue
similarity index 91%
rename from src/modules/timesheets/components/shift/shift-list-header.vue
rename to src/modules/timesheets/components/shift-list-header.vue
index 37d2af7..780e833 100644
--- a/src/modules/timesheets/components/shift/shift-list-header.vue
+++ b/src/modules/timesheets/components/shift-list-header.vue
@@ -9,7 +9,7 @@
                 <!-- punch-in timestamps -->
                 <q-card-section class="col q-pa-none">
                     <q-item-label class="text-weight-bolder text-primary" style="font-size: 0.7em;">
-                            {{ $t('shiftColumns.labelIn') }}
+                            {{ $t('shared.misc.in') }}
                     </q-item-label>
                 </q-card-section>
         
@@ -20,7 +20,7 @@
                 <!-- punch-out timestamps -->
                 <q-card-section class="col q-pa-none">
                     <q-item-label class="text-weight-bolder text-primary" style="font-size: 0.7em;">
-                        {{ $t('shiftColumns.labelOut') }}
+                        {{ $t('shared.misc.out') }}
                     </q-item-label>
                 </q-card-section>
 
diff --git a/src/modules/timesheets/components/shift-list-legend.vue b/src/modules/timesheets/components/shift-list-legend.vue
new file mode 100644
index 0000000..f8327fe
--- /dev/null
+++ b/src/modules/timesheets/components/shift-list-legend.vue
@@ -0,0 +1,72 @@
+<script
+    setup
+    lang="ts"
+>
+    import { computed, ref } from 'vue';
+    import { useI18n } from 'vue-i18n';
+    import type { ShiftLegendItem } from 'src/modules/timesheets/models/shift.models';
+
+    const { t } = useI18n();
+    const is_showing_legend = ref(false);
+
+    const legend: ShiftLegendItem[] = [
+        { type: 'REGULAR', color: 'secondary', label_type: 'timesheet.shift.types.REGULAR', text_color: 'grey-8' },
+        { type: 'EVENING', color: 'warning', label_type: 'timesheet.shift.types.EVENING' },
+        { type: 'EMERGENCY', color: 'amber-10', label_type: 'timesheet.shift.types.EMERGENCY' },
+        { type: 'OVERTIME', color: 'negative', label_type: 'timesheet.shift.types.OVERTIME' },
+        { type: 'VACATION', color: 'purple-10', label_type: 'timesheet.shift.types.VACATION' },
+        { type: 'HOLIDAY', color: 'purple-5', label_type: 'timesheet.shift.types.HOLIDAY' },
+        { type: 'SICK', color: 'grey-8', label_type: 'timesheet.shift.types.SICK' },
+    ]
+
+    const shift_type_legend = computed(() =>
+        legend.map(item => ({ ...item, label: t(item.label_type) }))
+    );
+
+</script>
+
+<template>
+    <div
+        class="items-center"
+        :class="$q.screen.lt.md ? 'column' : 'row'"
+    >
+        <q-btn
+            flat
+            dense
+            rounded
+            color="primary"
+            class="col-auto q-ma-sm"
+            @click="is_showing_legend = !is_showing_legend"
+        >
+            <template #default>
+                <q-icon
+                    :name="is_showing_legend ? 'close' : 'info_outline'"
+                    size="md"
+                    class="col-auto"
+                />
+            </template>
+        </q-btn>
+
+        <transition
+            appear
+            enter-active-class="animated fadeIn"
+            leave-active-class="animated fadeOut"
+            class="col-auto"
+        >
+            <div
+                v-if="is_showing_legend"
+                class="q-pa-xs bg-white rounded-5 shadow-2 text-center q-ma-xs"
+            >
+                <q-badge
+                    v-for="shift_type in shift_type_legend"
+                    :key="shift_type.type"
+                    :color="shift_type.color"
+                    :label="shift_type.label"
+                    :text-color="shift_type.text_color || 'white'"
+                    class="q-px-md q-py-xs q-mx-xs q-my-none text-uppercase text-weight-bolder justify-center"
+                    style="font-size: 0.8em;"
+                />
+            </div>
+        </transition>
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/modules/timesheets/components/shift/shift-list-row.vue b/src/modules/timesheets/components/shift-list-row.vue
similarity index 92%
rename from src/modules/timesheets/components/shift/shift-list-row.vue
rename to src/modules/timesheets/components/shift-list-row.vue
index 3e18540..b978473 100644
--- a/src/modules/timesheets/components/shift/shift-list-row.vue
+++ b/src/modules/timesheets/components/shift-list-row.vue
@@ -3,8 +3,9 @@
     import type { Shift } from 'src/modules/timesheets/models/shift.models';
 
 
-    const { shift } = defineProps<{
+    const { shift, dense = false } = defineProps<{
         shift: Shift;
+        dense?: boolean;
     }>();
 
     const emit = defineEmits<{
@@ -14,11 +15,12 @@
     }>();
 
     const has_comment = computed(() => {
-        const comment = (shift as any).description ?? (shift as any).comment ?? '';
+        const comment = shift.comment ?? '';
         return typeof comment === 'string' && comment.trim().length > 0;
     })
     const comment_icon = computed(() => (has_comment.value ? 'announcement' : 'chat_bubble_outline'));
     const comment_color = computed(() => (has_comment.value ? 'primary' : 'grey-8'));
+    const hour_font_size = computed(() => dense ? '0.9em' : '1.5em' )
 
     const get_shift_color = (type: string): string => {
         switch (type) {
@@ -27,7 +29,7 @@
             case 'EMERGENCY': return 'amber-10';
             case 'OVERTIME': return 'negative';
             case 'VACATION': return 'purple-10';
-            case 'HOLIDAY': return 'purple-10';
+            case 'HOLIDAY': return 'purple-5';
             case 'SICK': return 'grey-8';
             default: return 'transparent';
         }
@@ -61,7 +63,7 @@
             <q-item-label
                 class="text-weight-bolder q-pa-xs rounded-5"
                 :class="'bg-' + get_shift_color(shift.type) + ' text-' + get_text_color(shift.type)"
-                style="font-size: 1.5em; line-height: 80% !important;"
+                :style="'font-size: ' + hour_font_size + '; line-height: 80% !important;'"
             >
                 {{ shift.start_time }}
             </q-item-label>
diff --git a/src/modules/timesheets/components/shift/shift-list.vue b/src/modules/timesheets/components/shift-list.vue
similarity index 56%
rename from src/modules/timesheets/components/shift/shift-list.vue
rename to src/modules/timesheets/components/shift-list.vue
index 6b6a4ef..fc43565 100644
--- a/src/modules/timesheets/components/shift/shift-list.vue
+++ b/src/modules/timesheets/components/shift-list.vue
@@ -3,26 +3,23 @@
     lang="ts"
 >
     import { date } from 'quasar';
-    import ShiftListHeader from 'src/modules/timesheets/components/shift/shift-list-header.vue';
-    import ShiftListRow from 'src/modules/timesheets/components/shift/shift-list-row.vue';
-    import ShiftListLegend from 'src/modules/timesheets/components/shift/shift-list-legend.vue';
-    import PayPeriodNavigator from 'src/modules/shared/components/pay-period-navigator.vue';
+    import ShiftListHeader from 'src/modules/timesheets/components/shift-list-header.vue';
+    import ShiftListRow from 'src/modules/timesheets/components/shift-list-row.vue';
     import { useShiftStore } from 'src/stores/shift-store';
-    import { useTimesheetApi } from 'src/modules/timesheets/composables/api/use-timesheet-api';
+    import { useTimesheetStore } from 'src/stores/timesheet-store';
     import { type Shift, default_shift } from 'src/modules/timesheets/models/shift.models';
-    import type { PayPeriodDetails } from 'src/modules/timesheets/models/pay-period-details.models';
-    import type { PayPeriod } from 'src/modules/shared/types/pay-period-interface';
+import { computed } from 'vue';
 
-    const props = defineProps<{
-        rawData: PayPeriodDetails;
-        currentPayPeriod: PayPeriod;
+    const timesheet_store = useTimesheetStore();
+    const { openCreate, openDelete, openUpdate } = useShiftStore();
+    const { dense = false } = defineProps<{
+        dense?: boolean;
     }>();
 
-    const timesheet_api = useTimesheetApi();
-    const { openCreate, openDelete, openUpdate } = useShiftStore();
+    const font_size = computed(() => dense ? '1.5em' : '2.5em')
 
     const get_date_from_short = (short_date: string): Date => {
-        return new Date(props.currentPayPeriod.pay_year.toString() + '/' + short_date);
+        return new Date(timesheet_store.pay_period.pay_year.toString() + '/' + short_date);
     };
 
     const to_iso_date = (short_date: string): string => {
@@ -34,37 +31,35 @@
     };
 
     const getDate = (shift_date: string): Date => {
-        return new Date(props.currentPayPeriod.pay_year.toString() + '/' + shift_date);
+        return new Date(timesheet_store.pay_period.pay_year.toString() + '/' + shift_date);
     };
 </script>
 
 <template>
-    <!-- shift's colored legend -->
-    <ShiftListLegend :is-loading="false" />
-
     <div
-        v-for="week, index in props.rawData.weeks"
+        v-for="week, index in timesheet_store.pay_period_details.weeks"
         :key="index"
-        class="q-px-xs q-pt-xs rounded-5 col"
+        class="col q-px-xs q-pt-xs q-mx-sm rounded-5"
     >
         <q-card
             v-for="day, day_index in week.shifts"
-            :key="day_index"
-            flat
-            bordered
+            :key="day_index + index"
             class="row items-center rounded-10 q-mb-xs"
         >
 
             <!-- Dates column -->
-            <q-card-section class="col-auto q-pa-xs text-white">
-                <div class="bg-primary rounded-10 q-pa-xs text-center">
+            <q-card-section class="col-auto q-pa-xs text-white q-mr-md">
+                <div
+                    class="bg-primary rounded-10 q-pa-xs text-center"
+                    :style="'width: ' + dense? '60px' : '75px;'"
+                >
                     <q-item-label
                         style="font-size: 0.7em;"
                         class="text-uppercase"
                     >{{ $d(getDate(day.short_date), { weekday: $q.screen.lt.md ? 'short' : 'long' }) }}</q-item-label>
                     <q-item-label
                         class="text-weight-bolder"
-                        style="font-size: 2.5em; line-height: 90% !important;"
+                        :style="'font-size: ' + font_size + '; line-height: 90% !important;'"
                     >{{ day.short_date.split('/')[1] }}</q-item-label>
                     <q-item-label
                         style="font-size: 0.7em;"
@@ -75,14 +70,18 @@
 
             <!-- List of shifts column -->
             <q-card-section class="col q-pa-none">
-                <ShiftListHeader />
-                <ShiftListRow
-                    v-for="shift, shift_index in shifts_or_placeholder(day.shifts)"
-                    :key="shift_index"
-                    :shift="shift"
-                    @request-update="value => openUpdate(to_iso_date(day.short_date), value)"
-                    @request-delete="value => openDelete(to_iso_date(day.short_date), value)"
-                />
+                <ShiftListHeader v-if="day.shifts.length > 0"/>
+                <div
+                    v-if="day.shifts.length > 0"
+                >
+                    <ShiftListRow
+                        v-for="shift, shift_index in shifts_or_placeholder(day.shifts)"
+                        :key="shift_index"    
+                        :shift="shift"
+                        @request-update="value => openUpdate(to_iso_date(day.short_date), value)"
+                        @request-delete="value => openDelete(to_iso_date(day.short_date), value)"
+                    />
+                </div>
             </q-card-section>
             <!-- add shift btn column -->
             <q-card-section class="q-pr-xs col-auto">
diff --git a/src/modules/timesheets/components/shift/shift-list-legend.vue b/src/modules/timesheets/components/shift/shift-list-legend.vue
deleted file mode 100644
index 82f5f7a..0000000
--- a/src/modules/timesheets/components/shift/shift-list-legend.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import type { ShiftLegendItem } from 'src/modules/timesheets/models/shift.models';
-
-const { t } = useI18n();
-const props = defineProps<{ isLoading: boolean; }>();
-
-const legend: ShiftLegendItem[] = [
-    {type:'REGULAR'  , color: 'secondary', label_type: 'timesheet.shift.types.REGULAR', text_color: 'grey-8'},
-    {type:'EVENING'  , color: 'warning'  , label_type: 'timesheet.shift.types.EVENING'},
-    {type:'EMERGENCY', color: 'amber-10' , label_type: 'timesheet.shift.types.EMERGENCY'},
-    {type:'OVERTIME' , color: 'negative' , label_type: 'timesheet.shift.types.OVERTIME'},
-    {type:'VACATION' , color: 'purple-10', label_type: 'timesheet.shift.types.VACATION'},
-    {type:'HOLIDAY'  , color: 'purple-8' , label_type: 'timesheet.shift.types.HOLIDAY'},
-    {type:'SICK'     , color: 'grey-8'   , label_type: 'timesheet.shift.types.SICK'},
-]
-
-const shift_type_legend = computed(()=>
-    legend.map(item => ({ ...item, label: t(item.label_type)} ))
-);
-
-</script>
-
-<template>
-    <q-card class="q-px-xs q-pt-xs col rounded-10 q-mx-xs q-py-xs">
-        <q-card-section 
-            class="q-py-xs q-pa-none text-center q-my-s"
-            v-if="!props.isLoading"    
-        >
-            <q-badge
-                v-for="shift_type in shift_type_legend"
-                :key="shift_type.type"
-                :color="shift_type.color"
-                :label="shift_type.label"
-                :text-color="shift_type.text_color || 'white'"
-                class="q-px-md q-py-xs q-mx-xs q-my-none text-uppercase text-weight-bolder justify-center"
-                style="width: 120px; font-size: 0.8em;"
-            />
-        </q-card-section>
-    </q-card>
-</template>
\ No newline at end of file
diff --git a/src/modules/timesheets/components/timesheet-wrapper.vue b/src/modules/timesheets/components/timesheet-wrapper.vue
new file mode 100644
index 0000000..31bd9a8
--- /dev/null
+++ b/src/modules/timesheets/components/timesheet-wrapper.vue
@@ -0,0 +1,88 @@
+<script
+    setup
+    lang="ts"
+>
+    import ShiftList from 'src/modules/timesheets/components/shift-list.vue';
+    import ShiftCrudDialog from 'src/modules/timesheets/components/shift-crud-dialog.vue';
+    import ExpenseCrudDialog from 'src/modules/timesheets/components/expense-crud-dialog.vue';
+    import PayPeriodNavigator from 'src/modules/shared/components/pay-period-navigator.vue';
+    import ShiftListLegend from 'src/modules/timesheets/components/shift-list-legend.vue';
+    import { useTimesheetStore } from 'src/stores/timesheet-store';
+    import { useTimesheetApi } from 'src/modules/timesheets/composables/api/use-timesheet-api';
+    import { useExpensesStore } from 'src/stores/expense-store';
+    import { provide } from 'vue';
+
+    const { open } = useExpensesStore();
+
+    const { employeeEmail, dense = false } = defineProps<{
+        employeeEmail: string;
+        dense?: boolean;
+    }>();
+
+    const { is_loading } = useTimesheetStore();
+    const { getPayPeriodDetailsByDate, getPreviousPayPeriodDetails, getNextPayPeriodDetails } = useTimesheetApi();
+
+    provide('employeeEmail', employeeEmail);
+</script>
+
+<template>
+    <q-card
+        flat
+        class="q-mt-md bg-secondary full-width"
+    >
+        <q-inner-loading
+            :showing="is_loading"
+            color="primary"
+        />
+
+        <q-card-section
+            :horizontal="$q.screen.gt.sm"
+            class="q-px-lg items-center"
+            :class="$q.screen.lt.md ? 'column' : ''"
+        >
+            <!-- navigation btn -->
+            <PayPeriodNavigator
+                @date-selected="getPayPeriodDetailsByDate"
+                @pressed-previous-button="getPreviousPayPeriodDetails"
+                @pressed-next-button="getNextPayPeriodDetails"
+            />
+
+            <!-- mobile expenses button -->
+            <q-btn
+                v-if="$q.screen.lt.md"
+                push
+                rounded
+                color="primary"
+                icon="receipt_long"
+                :label="$t('timesheet.expense.open_btn')"
+                class="q-mt-sm"
+                @click="open(employeeEmail)"
+            />
+
+            <!-- shift's colored legend -->
+            <ShiftListLegend :is-loading="false" />
+
+            <q-space />
+
+            <!-- desktop expenses button -->
+            <q-btn
+                v-if="$q.screen.gt.sm"
+                push
+                rounded
+                color="primary"
+                icon="receipt_long"
+                :label="$t('timesheet.expense.open_btn')"
+                @click="open(employeeEmail)"
+            />
+
+        </q-card-section>
+
+        <q-card-section :horizontal="$q.screen.gt.sm">
+            <ShiftList :dense="dense"/>
+        </q-card-section>
+    </q-card>
+
+    <ExpenseCrudDialog />
+
+    <ShiftCrudDialog :employee-email="employeeEmail" />
+</template>
\ No newline at end of file
diff --git a/src/modules/timesheets/components/timesheet/timesheet-wrapper.vue b/src/modules/timesheets/components/timesheet/timesheet-wrapper.vue
deleted file mode 100644
index fa4f330..0000000
--- a/src/modules/timesheets/components/timesheet/timesheet-wrapper.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<script
-    setup
-    lang="ts"
->
-    import ShiftList from 'src/modules/timesheets/components/shift/shift-list.vue';
-    import ShiftCrudDialog from 'src/modules/timesheets/components/shift/shift-crud-dialog.vue';
-    import ExpenseCrudDialog from 'src/modules/timesheets/components/expenses/expense-crud-dialog.vue';
-    import { useTimesheetStore } from 'src/stores/timesheet-store';
-    import { useTimesheetApi } from 'src/modules/timesheets/composables/api/use-timesheet-api';
-    import { useExpensesStore } from 'src/stores/expense-store';
-    import { onMounted } from 'vue';
-
-    const { openExpensesDialog } = useExpensesStore();
-
-    const { employeeEmail } = defineProps<{
-        employeeEmail: string;
-    }>();
-
-    const { pay_period, pay_period_details, is_loading } = useTimesheetStore();
-    const { getPayPeriodDetailsByDate, getPreviousPayPeriodDetails, getNextPayPeriodDetails } = useTimesheetApi();
-
-    onMounted(() => {
-
-    });
-</script>
-
-<template>
-    <q-card
-        flat
-        class=" col q-mt-md bg-secondary"
-    >
-        <q-inner-loading
-            :showing="is_loading"
-            color="primary"
-        />
-
-        <q-card-section horizontal>
-            <!-- expenses button -->
-            <q-btn
-                color="primary"
-                unelevated
-                icon="receipt_long"
-                :label="$t('timesheet.expense.open_btn')"
-                @click="openExpensesDialog"
-            />
-
-            <!-- navigation btn -->
-            <PayPeriodNavigator
-                @date-selected="getPayPeriodDetailsByDate"
-                @pressed-previous-button="getPreviousPayPeriodDetails"
-                @pressed-next-button="getNextPayPeriodDetails"
-            />
-        </q-card-section>
-
-        <q-card-section>
-            <ShiftList
-                :raw-data="pay_period_details"
-                :current-pay-period="pay_period"
-            />
-        </q-card-section>
-    </q-card>
-
-    <!-- dialog for Expenses or Shifts -->
-    <ExpenseCrudDialog :email="employeeEmail" />
-
-    <!-- shift crud dialog -->
-    <ShiftCrudDialog :employee-email="employeeEmail" />
-</template>
\ No newline at end of file
diff --git a/src/modules/timesheets/composables/api/use-expense-api.ts b/src/modules/timesheets/composables/api/use-expense-api.ts
index 4bcc01c..ee9a3fd 100644
--- a/src/modules/timesheets/composables/api/use-expense-api.ts
+++ b/src/modules/timesheets/composables/api/use-expense-api.ts
@@ -1,6 +1,6 @@
 import { normalizeObject } from "src/utils/normalize-object";
 import { useExpensesStore } from "src/stores/expense-store";
-import { expense_validation_schema, type ExpensesApiError } from "src/modules/timesheets/models/expense.validation";
+import { expense_validation_schema } from "src/modules/timesheets/models/expense.validation";
 import type { Expense, UpsertExpense } from "src/modules/timesheets/models/expense.models";
 
 export const useExpensesApi = () => {
@@ -11,26 +11,26 @@ export const useExpensesApi = () => {
         new_expense?: Expense;
     }) => obj as UpsertExpense;
 
-    const createExpenseByEmployeeEmail = async (employee_email: string): Promise<void> => {
+    const createExpenseByEmployeeEmail = async (employee_email: string, date: string): Promise<void> => {
         const upsert_expense = toUpsertExpense({ 
             new_expense: normalizeObject(expenses_store.current_expense, expense_validation_schema),
         });
-        await expenses_store.upsertOrDeleteExpensesByEmployeeEmail(employee_email, upsert_expense);
+        await expenses_store.upsertOrDeleteExpensesByEmployeeEmail(employee_email, date, upsert_expense);
     };
 
-    const updateExpenseByEmployeeEmail = async (employee_email: string): Promise<void> => {
+    const updateExpenseByEmployeeEmail = async (employee_email: string, date: string): Promise<void> => {
         const upsert_expense = toUpsertExpense({
             old_expense: normalizeObject(expenses_store.initial_expense, expense_validation_schema),
             new_expense: normalizeObject(expenses_store.current_expense, expense_validation_schema),
         });
-        await expenses_store.upsertOrDeleteExpensesByEmployeeEmail(employee_email, upsert_expense);
+        await expenses_store.upsertOrDeleteExpensesByEmployeeEmail(employee_email, date, upsert_expense);
     };
 
-    const deleteExpenseByEmployeeEmail = async (employee_email: string): Promise<void> => {
+    const deleteExpenseByEmployeeEmail = async (employee_email: string, date: string): Promise<void> => {
         const upsert_expense = toUpsertExpense({
             old_expense: normalizeObject(expenses_store.initial_expense, expense_validation_schema),
         });
-        await expenses_store.upsertOrDeleteExpensesByEmployeeEmail(employee_email, upsert_expense);
+        await expenses_store.upsertOrDeleteExpensesByEmployeeEmail(employee_email, date, upsert_expense);
     };
 
     return {
diff --git a/src/modules/timesheets/composables/api/use-shift-api.ts b/src/modules/timesheets/composables/api/use-shift-api.ts
index a7f043c..f32461d 100644
--- a/src/modules/timesheets/composables/api/use-shift-api.ts
+++ b/src/modules/timesheets/composables/api/use-shift-api.ts
@@ -1,5 +1,5 @@
 import { unwrapAndClone } from "src/utils/unwrap-and-clone";
-import { DATE_FORMAT_PATTERN, TIME_FORMAT_PATTERN } from "src/modules/timesheets/constants/shift.constants";
+import { TIME_FORMAT_PATTERN } from "src/modules/timesheets/constants/shift.constants";
 import { GenericApiError } from "src/modules/timesheets/models/expense.validation";
 import { useShiftStore } from "src/stores/shift-store";
 import { default_shift, type Shift, type UpsertShift } from "src/modules/timesheets/models/shift.models";
diff --git a/src/modules/timesheets/composables/use-expense-draft.ts b/src/modules/timesheets/composables/use-expense-draft.ts
index 182a5d3..8b7afa2 100644
--- a/src/modules/timesheets/composables/use-expense-draft.ts
+++ b/src/modules/timesheets/composables/use-expense-draft.ts
@@ -1,11 +1,11 @@
 import { ref, computed } from "vue";
-import type { TimesheetExpense } from "../types/expense.interfaces";
-import type { ExpenseType } from "../types/expense.types";
+import type { Expense } from "src/modules/timesheets/models/expense.models";
+import type { ExpenseType } from "src/modules/timesheets/models/expense.models";
 
-export const useExpenseDraft = (initial?: Partial<TimesheetExpense>) => {
+export const useExpenseDraft = (initial?: Partial<Expense>) => {
     const DEFAULT_TYPE: ExpenseType = 'EXPENSES';
 
-    const draft = ref<Partial<TimesheetExpense>>({
+    const draft = ref<Partial<Expense>>({
         date: '',
         type: DEFAULT_TYPE,
         comment: '',
diff --git a/src/modules/timesheets/composables/use-expense-items.ts b/src/modules/timesheets/composables/use-expense-items.ts
index 46d4e8e..aeeae5a 100644
--- a/src/modules/timesheets/composables/use-expense-items.ts
+++ b/src/modules/timesheets/composables/use-expense-items.ts
@@ -1,58 +1,59 @@
-import { ref, type Ref } from "vue";
-import { normalizeExpense, validateExpenseUI } from "../utils/expenses-validators";
-import { normExpenseType } from "../utils/expense.util";
-import type { Expense, PayPeriodExpenses } from "src/modules/timesheets/models/expense.models";
-import { useExpensesStore } from "src/stores/expense-store";
-import { unwrapAndClone } from "src/utils/unwrap-and-clone";
+// import { ref, type Ref } from "vue";
+// import { normalizeObject } from "src/utils/normalize-object";
+// import { normExpenseType } from "../utils/expense.util";
+// import type { Expense, PayPeriodExpenses } from "src/modules/timesheets/models/expense.models";
+// import { useExpensesStore } from "src/stores/expense-store";
+// import { unwrapAndClone } from "src/utils/unwrap-and-clone";
+// import { expense_validation_schema } from "src/modules/timesheets/models/expense.validation";
 
-const expenses_store = useExpensesStore();
+// const expenses_store = useExpensesStore();
 
-export const useExpenseItems = () => {
-    let expenses = unwrapAndClone(expenses_store.pay_period_expenses.expenses.map(normalizeExpense));
+// export const useExpenseItems = () => {
+//     let expenses = unwrapAndClone(expenses_store.pay_period_expenses.expenses.map(normalizeExpense));
 
-    const normalizePayload = (expense: Expense): Expense => {
-    const exp = normalizeExpense(expense);
-    const out: Expense = {
-        date: exp.date,
-        type: exp.type as ExpenseType,
-        comment: exp.comment || '',
-    };
-    if(typeof exp.amount  === 'number') out.amount  = exp.amount;
-    if(typeof exp.mileage === 'number') out.mileage = exp.mileage;
-    return out;
-}
+//     const normalizePayload = (expense: Expense): Expense => {
+//     const exp = normalizeObject(expense, expense_validation_schema);
+//     const out: Expense = {
+//         date: exp.date,
+//         type: exp.type as ExpenseType,
+//         comment: exp.comment || '',
+//     };
+//     if(typeof exp.amount  === 'number') out.amount  = exp.amount;
+//     if(typeof exp.mileage === 'number') out.mileage = exp.mileage;
+//     return out;
+// }
 
-    const addFromDraft = () => {
-        const candidate: Expense = normalizeExpense({
-            date: draft.date,
-            type: normExpenseType(draft.type),
-            ...(typeof draft.amount  === 'number' ? { amount: draft.amount   }: {}),
-            ...(typeof draft.mileage === 'number' ? { mileage: draft.mileage }: {}),
-            comment: String(draft.comment ?? '').trim(),
-        } as Expense);
+//     const addFromDraft = () => {
+//         const candidate: Expense = normalizeExpense({
+//             date: draft.date,
+//             type: normExpenseType(draft.type),
+//             ...(typeof draft.amount  === 'number' ? { amount: draft.amount   }: {}),
+//             ...(typeof draft.mileage === 'number' ? { mileage: draft.mileage }: {}),
+//             comment: String(draft.comment ?? '').trim(),
+//         } as Expense);
 
-        validateExpenseUI(candidate, 'expense_draft');
-        expenses = [ ...expenses, candidate];
-    };
+//         validateExpenseUI(candidate, 'expense_draft');
+//         expenses = [ ...expenses, candidate];
+//     };
 
-    const removeAt = (index: number) => {
-        if(index < 0 || index >= expenses.length) return;
-        expenses = expenses.filter((_,i)=> i !== index);
-    };
+//     const removeAt = (index: number) => {
+//         if(index < 0 || index >= expenses.length) return;
+//         expenses = expenses.filter((_,i)=> i !== index);
+//     };
 
-    const validateAll = () => {
-        for (const expense of expenses) {
-            validateExpenseUI(expense, 'expense_item');
-        }
-    };
+//     const validateAll = () => {
+//         for (const expense of expenses) {
+//             validateExpenseUI(expense, 'expense_item');
+//         }
+//     };
 
-    const payload = () => expenses.map(normalizeExpense);
+//     const payload = () => expenses.map(normalizeExpense);
 
-    return {
-        expenses,
-        addFromDraft,
-        removeAt,
-        validateAll,
-        payload,
-    };
-};
+//     return {
+//         expenses,
+//         addFromDraft,
+//         removeAt,
+//         validateAll,
+//         payload,
+//     };
+// };
diff --git a/src/modules/timesheets/constants/expense.constants.ts b/src/modules/timesheets/constants/expense.constants.ts
index 14ad95b..ce6d207 100644
--- a/src/modules/timesheets/constants/expense.constants.ts
+++ b/src/modules/timesheets/constants/expense.constants.ts
@@ -1,3 +1 @@
-export const COMMENT_MAX_LENGTH = 280;
-
 export const DATE_FORMAT_PATTERN = /^\d{4}-\d{2}-\d{2}$/;
\ No newline at end of file
diff --git a/src/modules/timesheets/models/expense.models.ts b/src/modules/timesheets/models/expense.models.ts
index 12d8c08..dbc32a5 100644
--- a/src/modules/timesheets/models/expense.models.ts
+++ b/src/modules/timesheets/models/expense.models.ts
@@ -7,7 +7,7 @@ export const TYPES_WITH_AMOUNT_ONLY: Readonly<ExpenseType[]> = ['PER_DIEM', 'EXP
 export interface Expense {
     date: string;
     type: ExpenseType;
-    amount?: number;
+    amount: number;
     mileage?: number;
     comment: string;
     supervisor_comment?: string;
@@ -26,10 +26,9 @@ export interface PayPeriodExpenses {
     totals?: ExpenseTotals;
 }
 
-export interface TimesheetDetailsWeekDayExpenses {
-    cash: Expense[];
-    km: Expense[];
-    [otherType: string]: Expense[];
+export interface UpsertExpense {
+    old_expense: Expense;
+    new_expense: Expense;
 }
 
 export const default_expense: Expense = {
diff --git a/src/modules/timesheets/models/expense.validation.ts b/src/modules/timesheets/models/expense.validation.ts
index 5fbe65a..9a9700a 100644
--- a/src/modules/timesheets/models/expense.validation.ts
+++ b/src/modules/timesheets/models/expense.validation.ts
@@ -1,5 +1,5 @@
-import { Expense, EXPENSE_TYPE, ExpenseType } from "src/modules/timesheets/models/expense.models";
-import { Normalizer } from "src/utils/normalize-object";
+import { type Expense, EXPENSE_TYPE, type ExpenseType } from "src/modules/timesheets/models/expense.models";
+import type { Normalizer } from "src/utils/normalize-object";
 
 export interface ApiErrorPayload {
   status_code: number;
@@ -43,12 +43,12 @@ export class ExpensesApiError extends ApiError {
 };
 
 export const expense_validation_schema: Normalizer<Expense> = {
-    date:               v => String(v ?? "1970-01-01").trim(),
-    type:               v => EXPENSE_TYPE.includes(v) ? v as ExpenseType : "EXPENSES",
-    amount:             v => typeof v === "number" ? v : undefined,
+    date:               v => typeof v === 'string' ? v.trim() : '1970-01-01',
+    type:               v => EXPENSE_TYPE.includes(v as ExpenseType) ? v as ExpenseType : "EXPENSES",
+    amount:             v => typeof v === "number" ? v : -1,
     mileage:            v => typeof v === "number" ? v : undefined,
-    comment:            v => String(v ?? "").trim(),
-    supervisor_comment: v => String(v ?? "").trim(),
+    comment:            v => typeof v === 'string' ? v.trim() : '',
+    supervisor_comment: v => typeof v === 'string' ? v.trim() : '',
     is_approved:        v => !!v,
 };
 
diff --git a/src/modules/timesheets/models/pay-period-details.models.ts b/src/modules/timesheets/models/pay-period-details.models.ts
index c19a69f..4ec846c 100644
--- a/src/modules/timesheets/models/pay-period-details.models.ts
+++ b/src/modules/timesheets/models/pay-period-details.models.ts
@@ -1,5 +1,5 @@
 import type { Shift } from "./shift.models";
-import type { Expense } from "src/modules/timesheets/models/expense.models";
+import { default_expense, type Expense } from "src/modules/timesheets/models/expense.models";
 
 export type Week<T> = {
     sun: T;
@@ -34,9 +34,9 @@ export interface PayPeriodDetailsWeekDayShifts {
 }
 
 export interface PayPeriodDetailsWeekDayExpenses {
-    cash: Expense[];
-    km:   Expense[];
-    [otherType: string]: Expense[];
+    expenses: Expense[];
+    total_expenses: number;
+    total_mileage: number;
 }
 
 const makeWeek = <T>(factory: ()=> T): Week<T> => ({
@@ -61,8 +61,9 @@ const emptyDailySchedule = (): PayPeriodDetailsWeekDayShifts => ({
 });
 
 const emptyDailyExpenses = (): PayPeriodDetailsWeekDayExpenses => ({
-    cash: [],
-    km: [],
+    expenses: [default_expense,],
+    total_expenses: -1,
+    total_mileage: -1,
 });
 
 export const defaultPayPeriodDetailsWeek = (): PayPeriodDetailsWeek => ({
diff --git a/src/modules/timesheets/pages/timesheet-page.vue b/src/modules/timesheets/pages/timesheet-page.vue
deleted file mode 100644
index 7be7fd6..0000000
--- a/src/modules/timesheets/pages/timesheet-page.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<script
-    setup
-    lang="ts"
->
-    import { date } from 'quasar';
-    import { computed, onMounted } from 'vue';
-    import { useI18n } from 'vue-i18n';
-    import { useAuthStore } from 'src/stores/auth-store';
-    import { useTimesheetStore } from 'src/stores/timesheet-store';
-    import { useTimesheetApi } from '../composables/api/use-timesheet-api';
-    import { formatPayPeriodLabel } from '../utils/timesheet-format.util';
-    import PageHeaderTemplate from 'src/modules/shared/components/page-header-template.vue';
-
-    //------------------- stores ------------------- 
-    const { locale } = useI18n();
-    const auth_store = useAuthStore();
-    const timesheet_api = useTimesheetApi();
-
-    //------------------- pay-period format label -------------------
-    const date_options: Intl.DateTimeFormatOptions = { day: 'numeric', month: 'long', year: 'numeric' };
-
-    const pay_period_label = computed(() => formatPayPeriodLabel(
-        pay_period.label,
-        locale.value,
-        date.extractDate,
-        date_options
-    )
-    );
-
-    onMounted(async () => {
-        await timesheet_api.getPayPeriodDetailsByDate(date.formatDate(new Date(), 'YYYY-MM-DD'));
-    });
-</script>
-
-
-<template>
-    <q-page
-        padding
-        class="q-pa-md bg-secondary"
-    >
-        <PageHeaderTemplate
-            :title="$t('timesheet.title')"
-            :start-date="pay_period_label.start_date"
-            :end-date="pay_period_label.end_date"
-        />
-
-    </q-page>
-</template>
\ No newline at end of file
diff --git a/src/modules/timesheets/services/timesheet-service.ts b/src/modules/timesheets/services/timesheet-service.ts
index d52d38c..0f4fdda 100644
--- a/src/modules/timesheets/services/timesheet-service.ts
+++ b/src/modules/timesheets/services/timesheet-service.ts
@@ -3,7 +3,7 @@ import type { UpsertShift } from "src/modules/timesheets/models/shift.models";
 import type { PayPeriod } from "src/modules/shared/models/pay-period.models";
 import type { PayPeriodDetails } from "src/modules/timesheets/models/pay-period-details.models";
 import type { PayPeriodOverview } from "src/modules/timesheet-approval/models/pay-period-overview.models";
-import type { PayPeriodExpenses } from "src/modules/timesheets/models/expense.models";
+import type { Expense, PayPeriodExpenses, UpsertExpense } from "src/modules/timesheets/models/expense.models";
 
 export const timesheetService = {
     getPayPeriodDetailsByEmployeeEmail: async (email: string): Promise<PayPeriodDetails> => {
@@ -31,8 +31,20 @@ export const timesheetService = {
         return response.data;
     },
 
-    upsertOrDeletePayPeriodDetailsByDateAndEmployeeEmail: async (email: string, payload: UpsertShift[] | PayPeriodExpenses, pay_period: PayPeriod, date?: string): Promise<PayPeriodDetails> => {
-        if (date) return (await api.put(`/shifts/upsert/${email}/${date}`, payload)).data;
-        else return (await api.put(`/expenses/${email}/${pay_period.pay_year}/${pay_period.pay_period_no}`, payload, { headers: {'Content-Type': 'application/json'}})).data;
+    getExpensesByPayPeriodAndEmployeeEmail: async (email: string, year: string, period_number: string): Promise<PayPeriodExpenses> => {
+        const response = await api.get(`/expenses/${email}/${year}/${period_number}`);
+        return response.data;
     },
+
+    upsertOrDeleteShiftsByDateAndEmployeeEmail: async (email: string, payload: UpsertShift[], date: string): Promise<PayPeriodDetails> => {
+        const response = await api.put(`/shifts/upsert/${email}/${date}`, payload);
+        return response.data;
+    },
+
+    upsertOrDeleteExpensesByPayPeriodAndEmployeeEmail: async (email: string, date: string, payload: UpsertExpense): Promise<Expense[]> => {
+        const headers = { 'Content-Type': 'application/json' }
+
+        const response = await api.put(`/expenses/upsert/${email}/${date}`, payload, { headers });
+        return response.data;
+    }
 };
\ No newline at end of file
diff --git a/src/modules/timesheets/utils/expense.util.ts b/src/modules/timesheets/utils/expense.util.ts
index b81918b..36e0bb3 100644
--- a/src/modules/timesheets/utils/expense.util.ts
+++ b/src/modules/timesheets/utils/expense.util.ts
@@ -1,8 +1,8 @@
-import type { Expense, ExpenseTotals, ExpenseType, PayPeriodExpenses } from "src/modules/timesheets/models/expense.models";
+import type { Expense, ExpenseTotals } from "src/modules/timesheets/models/expense.models";
 
 //------------------ normalization / icons ------------------
 export const normExpenseType = (type: unknown): string => 
-    String(type ?? '').trim().toUpperCase();
+    typeof type === 'string' ? type.trim().toUpperCase() : '';
 
 const icon_map: Record<string,string> = {
     MILEAGE:     'time_to_leave',
@@ -31,7 +31,7 @@ export const computeExpenseTotals = (items: readonly Expense[]): ExpenseTotals =
 );
 
 //------------------ Quasar :rules=[] ------------------
-export const makeExpenseRules = (t: (key: string) => string, max_comment_char: number) => {
+export const makeExpenseRules = (t: (_key: string) => string) => {
     const isPresent = (val: unknown) => val !== undefined && val !== null && val !== '';
 
     const typeRequired    = (val: unknown) => (!!val)                               || t('timesheet.expense.errors.type_required');
@@ -40,15 +40,12 @@ export const makeExpenseRules = (t: (key: string) => string, max_comment_char: n
 
     const mileageRequired = (val: unknown) => (isPresent(val))                      || t('timesheet.expense.errors.mileage_required_for_type');
     
-    const commentRequired = (val: unknown) => (String(val ?? '').trim().length > 0) || t('timesheet.expense.errors.comment_required');
-
-    const commentTooLong  = (val: unknown) => (String(val ?? '').trim().length <= max_comment_char) || t('timesheet.expense.errors.comment_too_long');
+    const commentRequired = (val: unknown) => (typeof val === 'string' ? val.trim().length > 0 : false ) || t('timesheet.expense.errors.comment_required');
 
     return {
         typeRequired,
         amountRequired,
         mileageRequired,
         commentRequired,
-        commentTooLong,
     };
 };
\ No newline at end of file
diff --git a/src/modules/timesheets/utils/timesheet-format.util.ts b/src/modules/timesheets/utils/timesheet-format.util.ts
index 5c4775a..c2ecb12 100644
--- a/src/modules/timesheets/utils/timesheet-format.util.ts
+++ b/src/modules/timesheets/utils/timesheet-format.util.ts
@@ -1,4 +1,4 @@
-import type { PayPeriodLabel } from "../types/ui.types";
+import type { PayPeriodLabel } from "src/modules/timesheets/models/ui.models";
 
 export const formatPayPeriodLabel = (
     raw_label: string | undefined,
diff --git a/src/modules/profile/pages/profile-container.vue b/src/pages/profile-page.vue
similarity index 100%
rename from src/modules/profile/pages/profile-container.vue
rename to src/pages/profile-page.vue
diff --git a/src/modules/employee-list/pages/supervisor-crew-page.vue b/src/pages/supervisor-crew-page.vue
similarity index 100%
rename from src/modules/employee-list/pages/supervisor-crew-page.vue
rename to src/pages/supervisor-crew-page.vue
diff --git a/src/pages/timesheet-approval-page.vue b/src/pages/timesheet-approval-page.vue
new file mode 100644
index 0000000..cb972db
--- /dev/null
+++ b/src/pages/timesheet-approval-page.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+    import { onMounted, ref } from 'vue';
+    import { date } from 'quasar';
+    import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
+    import { useTimesheetStore } from 'src/stores/timesheet-store';
+    import PageHeaderTemplate from 'src/modules/shared/components/page-header-template.vue';
+    import OverviewList from 'src/modules/timesheet-approval/components/overview-list.vue';
+    import DetailscrudDialog from 'src/modules/timesheet-approval/components/details-crud-dialog.vue';
+
+    const timesheet_approval_api = useTimesheetApprovalApi();
+    const timesheet_store = useTimesheetStore();
+    const is_details_dialog_open = ref(false);
+    const employee_email = ref('');
+
+    const onDetailsClicked = (email: string) => {
+        employee_email.value = email;
+        is_details_dialog_open.value = true;
+    };
+
+    onMounted( async () => {
+        await timesheet_approval_api.getPayPeriodOverviewsByDate(date.formatDate( new Date(), 'YYYY-MM-DD'));
+    });
+</script>
+
+<template>
+    <q-page 
+        padding 
+        class="q-pa-md bg-secondary "
+    >
+        <PageHeaderTemplate 
+            title="timesheet_approvals.page_title"
+            :start-date="timesheet_store.pay_period.period_start"
+            :end-date="timesheet_store.pay_period.period_end"
+        />
+        
+        <DetailscrudDialog
+            v-model:dialog="is_details_dialog_open"
+            :employee-email="employee_email"
+            :is-loading="timesheet_store.is_loading"
+            :employee-overview="timesheet_store.current_pay_period_overview"
+            :timesheet-details="timesheet_store.pay_period_details"
+        />
+
+        <OverviewList @clickedDetailsButton="onDetailsClicked"/>
+    </q-page>
+</template>
\ No newline at end of file
diff --git a/src/pages/timesheet-page.vue b/src/pages/timesheet-page.vue
new file mode 100644
index 0000000..639d8db
--- /dev/null
+++ b/src/pages/timesheet-page.vue
@@ -0,0 +1,37 @@
+<script
+    setup
+    lang="ts"
+>
+    import { date } from 'quasar';
+    import { onMounted } from 'vue';
+    import { useAuthStore } from 'src/stores/auth-store';
+    import { useTimesheetApi } from 'src/modules/timesheets/composables/api/use-timesheet-api';
+    import { useTimesheetStore } from 'src/stores/timesheet-store';
+    import PageHeaderTemplate from 'src/modules/shared/components/page-header-template.vue';
+    import TimesheetWrapper from 'src/modules/timesheets/components/timesheet-wrapper.vue';
+
+    const { user } = useAuthStore();
+    const timesheet_store = useTimesheetStore();
+    const timesheet_api = useTimesheetApi();
+
+    onMounted(async () => {
+        await timesheet_api.getPayPeriodDetailsByDate(date.formatDate(new Date(), 'YYYY-MM-DD'));
+    });
+</script>
+
+
+<template>
+    <q-page
+        padding
+        class="q-pa-md bg-secondary"
+    >
+        <PageHeaderTemplate
+            :title="$t('timesheet.page_header')"
+            :start-date="timesheet_store.pay_period.period_start"
+            :end-date="timesheet_store.pay_period.period_end"
+        />
+
+        <TimesheetWrapper :employee-email="user.email" />
+
+    </q-page>
+</template>
\ No newline at end of file
diff --git a/src/router/routes.ts b/src/router/routes.ts
index a0c8225..7a21d96 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -15,22 +15,22 @@ const routes: RouteRecordRaw[] = [
       {
         path: 'timesheet-approvals',
         name: RouteNames.TIMESHEET_APPROVALS,
-        component: () => import('src/modules/timesheet-approval/pages/timesheet-approval.vue'),
+        component: () => import('src/pages/timesheet-approval-page.vue'),
       },
       {
         path: 'employees',
         name: RouteNames.EMPLOYEE_LIST,
-        component: () => import('src/modules/employee-list/pages/supervisor-crew-page.vue'),
+        component: () => import('src/pages/supervisor-crew-page.vue'),
       },
       {
         path: 'timesheet-temp',
         name: RouteNames.TIMESHEET_TEMP,
-        component: () => import('src/modules/timesheets/pages/timesheet-details-overview.vue')
+        component: () => import('src/pages/timesheet-page.vue')
       },
       {
         path: 'user/profile',
         name: RouteNames.PROFILE,
-        component: () => import('src/modules/profile/pages/profile-container.vue'),
+        component: () => import('src/pages/profile-page.vue'),
       },
     ],
   },
diff --git a/src/stores/auth-store.ts b/src/stores/auth-store.ts
index d7ba1f5..603876f 100644
--- a/src/stores/auth-store.ts
+++ b/src/stores/auth-store.ts
@@ -1,20 +1,20 @@
 import { computed, ref } from "vue";
 import { defineStore } from "pinia";
 import { AuthService } from "../modules/auth/services/services-auth";
-import type { User } from "src/modules/shared/types/user-interface";
+import type { User } from "src/modules/shared/models/user.models";
 
 export type CompanyRole = 'guest' | 'supervisor' | 'accounting' | 'human_resources' | 'employee';
 
 const TestUsers: Record<CompanyRole, User> = {
   guest: { firstName: 'Unknown', lastName: 'Unknown', email: 'guest@guest.com', role: 'guest' },
-  supervisor: { firstName: 'Robin', lastName: 'Clark', email: 'user5@example.test', role: 'supervisor' },
+  supervisor: { firstName: 'User', lastName: 'Test', email: 'user@targointernet.com', role: 'supervisor' },
   accounting: { firstName: 'Robin', lastName: 'Clark', email: 'user5@example.test', role: 'supervisor' },
   human_resources: { firstName: 'Robin', lastName: 'Clark', email: 'user5@example.test', role: 'supervisor' },
   employee: { firstName: 'Robin', lastName: 'Clark', email: 'user5@example.test', role: 'supervisor' },
 }
 
 export const useAuthStore = defineStore('auth', () => {  
-  const user = ref(TestUsers.guest);
+  const user = ref<User>(TestUsers.guest);
   const authError = ref("");
   const isAuthorizedUser = computed(() => user.value.role !== 'guest');
 
diff --git a/src/stores/expense-store.ts b/src/stores/expense-store.ts
index 307ccf8..b9bbfbd 100644
--- a/src/stores/expense-store.ts
+++ b/src/stores/expense-store.ts
@@ -1,86 +1,103 @@
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import { defineStore } from "pinia";
 import { useTimesheetStore } from "src/stores/timesheet-store";
-import { default_expense, default_pay_period_expenses, type Expense, type PayPeriodExpenses } from "src/modules/timesheets/models/expense.models";
-import { unwrapAndClone } from "src/utils/unwrap-and-clone";
+import { default_expense, default_pay_period_expenses, type UpsertExpense, type Expense, type PayPeriodExpenses } from "src/modules/timesheets/models/expense.models";
 import { timesheetService } from "src/modules/timesheets/services/timesheet-service";
-import { ExpensesApiError } from "src/modules/timesheets/models/expense.validation";
+import { ExpensesApiError, type GenericApiError } from "src/modules/timesheets/models/expense.validation";
+import { computeExpenseTotals } from "src/modules/timesheets/utils/expense.util";
+import type { UpsertAction } from "src/modules/timesheets/models/shift.models";
 
-const { pay_period } = useTimesheetStore();
 
-const encodeData = ( email: string, year: number, period_number: number ) => {
-    return { email: encodeURIComponent(email), year: encodeURIComponent(year), period_number: encodeURIComponent(period_number)};
-}
 
 export const useExpensesStore = defineStore('expenses', () => {
+    const timesheet_store = useTimesheetStore();
     const is_open = ref(false);
     const is_loading = ref(false);
+    const mode = ref<UpsertAction>('create');
     const pay_period_expenses = ref<PayPeriodExpenses>(default_pay_period_expenses);
+    const pay_period_expenses_totals = computed(() => computeExpenseTotals(pay_period_expenses.value.expenses))
     const current_expense = ref<Expense>(default_expense);
     const initial_expense = ref<Expense>(default_expense);
     const error = ref<string | null>(null);
 
-    const setErrorFrom = (err: unknown) => {
-        const e = err as any;
-        error.value = e?.message || 'Unknown error';
-    };
+    // const setErrorFrom = (err: unknown) => {
+    //     const e = err as any;
+    //     error.value = e?.message || 'Unknown error';
+    // };
 
     const open = async (employee_email: string): Promise<void> => {
         is_open.value = true;
         is_loading.value = true;
         error.value = null;
+        current_expense.value = default_expense;
+        initial_expense.value = default_expense;
 
         await getPayPeriodExpensesByEmployeeEmail(employee_email);
         is_loading.value = false;
     }
 
-    const getPayPeriodExpensesByEmployeeEmail = async (employee_email: string): Promise<void> => {
-        const encoded_data = encodeData(employee_email, pay_period.pay_year, pay_period.pay_period_no);
-
-        try {
-            const expenses = await timesheetService.getExpensesByPayPeriodAndEmployeeEmail(encoded_data.email, encoded_data.year, encoded_data.period_number);
-            pay_period_expenses.value = expenses;
-        } catch(err:any) {
-            const status_code: number = err?.response?.status ?? 500;
-            const data = err?.response?.data ?? {};
-            error.value = data.message || data.error || err.message;
-
-            throw new ExpensesApiError({
-                status_code,
-                error_code: data.error_code,
-                message: data.message || data.error || err.message,
-                context: data.context,
-            });
-        }
-    };
-
-    const upsertOrDeleteExpensesByEmployeeEmail = async (employee_email: string, expenses: Expense[]): Promise<void> => {
-        is_loading.value = true;
-        error.value = null;
-
-        try {
-            const encoded_data = encodeData(employee_email, pay_period.pay_year, pay_period.pay_period_no);
-            const payload = { is_approved: false, expenses };
-            
-            const updated_expenses = await timesheetService.upsertOrDeleteExpensesByPayPeriodAndEmployeeEmail(encoded_data.email, encoded_data.year, encoded_data.period_number, payload);
-            pay_period_expenses.value.expenses = updated_expenses;
-            is_open.value = false;
-        } catch (err) {
-            setErrorFrom(err);
-        } finally {
-            is_loading.value = false;
-        }
-    };
-
     const close = () => {
         error.value = null;
         is_open.value = false;
     };
 
+    const getPayPeriodExpensesByEmployeeEmail = async (employee_email: string): Promise<void> => {
+        is_loading.value = true;
+        error.value = null;
+
+        try {
+            const expenses = await timesheetService.getExpensesByPayPeriodAndEmployeeEmail(
+                encodeURIComponent(employee_email),
+                encodeURIComponent(timesheet_store.pay_period.pay_year),
+                encodeURIComponent(timesheet_store.pay_period.pay_period_no),
+            );
+            pay_period_expenses.value = expenses;
+        } catch (err: unknown) {
+            if (typeof err === 'object') {
+                const error = err as GenericApiError;
+                const status_code: number = error.status_code ?? 500;
+                // const data = error.context ?? '';
+                // error.value = data.message || data.error || err.message;
+                
+                throw new ExpensesApiError({
+                    status_code,
+                    // error_code: data.error_code,
+                    // message: data.message || data.error || err.message,
+                    // context: data.context,
+                });
+            }
+
+        } finally {
+            is_loading.value = false;
+        }
+    };
+
+    const upsertOrDeleteExpensesByEmployeeEmail = async (employee_email: string, date: string, expense: UpsertExpense): Promise<void> => {
+        is_loading.value = true;
+        error.value = null;
+
+        try {
+            const updated_expenses = await timesheetService.upsertOrDeleteExpensesByPayPeriodAndEmployeeEmail(
+                encodeURIComponent(employee_email),
+                encodeURIComponent(date),
+                expense,
+            );
+            console.log('updated expenses received: ', updated_expenses)
+            pay_period_expenses.value.expenses = updated_expenses;
+        } catch (err) {
+            // setErrorFrom(err);
+            console.log('error doing some expense thing: ', err)
+        } finally {
+            is_loading.value = false;
+        }
+    };
+
     return {
         is_open,
         is_loading,
+        mode,
         pay_period_expenses,
+        pay_period_expenses_totals,
         current_expense,
         initial_expense,
         error,
diff --git a/src/stores/shift-store.ts b/src/stores/shift-store.ts
index c5b33c3..1dac9be 100644
--- a/src/stores/shift-store.ts
+++ b/src/stores/shift-store.ts
@@ -3,8 +3,7 @@ import { defineStore } from "pinia";
 import { unwrapAndClone } from "src/utils/unwrap-and-clone";
 import { timesheetService } from "src/modules/timesheets/services/timesheet-service";
 import { useTimesheetStore } from "src/stores/timesheet-store";
-import { default_shift, type UpsertAction, type Shift, UpsertShift } from "src/modules/timesheets/models/shift.models";
-import { GenericApiError } from "src/modules/timesheets/models/expense.validation";
+import { default_shift, type UpsertAction, type Shift, type UpsertShift } from "src/modules/timesheets/models/shift.models";
 
 export const useShiftStore = defineStore('shift', () => {
     const is_open = ref(false);
@@ -31,7 +30,7 @@ export const useShiftStore = defineStore('shift', () => {
         open('update', date, shift, unwrapAndClone(shift));
     };
 
-    const openDelete = (date: string, shift: any) => {
+    const openDelete = (date: string, shift: Shift) => {
         open('delete', date, default_shift, shift);
     }
 
@@ -48,17 +47,18 @@ export const useShiftStore = defineStore('shift', () => {
         const encoded_date = encodeURIComponent(current_shift.value.date);
 
         try {
-            const result = await timesheetService.upsertOrDeletePayPeriodShifts(encoded_email, encoded_date, [ upsert_shift, ]);
+            const result = await timesheetService.upsertOrDeleteShiftsByDateAndEmployeeEmail(encoded_email, [ upsert_shift, ], encoded_date);
             timesheet_store.pay_period_details = result;
-        } catch (err: any) {
-            const status_code: number = err?.response?.status ?? 500;
-            const data = err?.response?.data ?? {};
-            throw new GenericApiError({
-                status_code,
-                error_code: data.error_code,
-                message: data.message || data.error || err.message,
-                context: data.context,
-            });
+        } catch (err) {
+            console.log('error doing thing: ', err)
+            // const status_code: number = err?.response?.status ?? 500;
+            // const data = err?.response?.data ?? {};
+            // throw new GenericApiError({
+            //     status_code,
+            //     error_code: data.error_code,
+            //     message: data.message || data.error || err.message,
+            //     context: data.context,
+            // });
         } finally {
             close();
         }
diff --git a/src/stores/timesheet-store.ts b/src/stores/timesheet-store.ts
index 00c09ed..b93a33d 100644
--- a/src/stores/timesheet-store.ts
+++ b/src/stores/timesheet-store.ts
@@ -4,93 +4,91 @@ import { withLoading } from 'src/utils/store-helpers';
 import { timesheetApprovalService } from 'src/modules/timesheet-approval/services/timesheet-approval-service';
 import { timesheetService } from 'src/modules/timesheets/services/timesheet-service';
 import { default_pay_period_overview, type PayPeriodOverview } from "src/modules/timesheet-approval/models/pay-period-overview.models";
-import { default_pay_period, type PayPeriod } from 'src/modules/shared/types/pay-period-interface';
+import { default_pay_period, type PayPeriod } from 'src/modules/shared/models/pay-period.models';
 import { default_pay_period_details, type PayPeriodDetails } from 'src/modules/timesheets/models/pay-period-details.models';
-import { TimesheetApprovalCSVReportFilters } from 'src/modules/timesheet-approval/models/timesheet-approval-csv-report.models';
+import type { TimesheetApprovalCSVReportFilters } from 'src/modules/timesheet-approval/models/timesheet-approval-csv-report.models';
 
 export const useTimesheetStore = defineStore('timesheet', () => {
     const is_loading = ref<boolean>(false);
     const pay_period = ref<PayPeriod>(default_pay_period);
-    const pay_period_overviews = ref<PayPeriodOverview[]>([ default_pay_period_overview, ]);
+    const pay_period_overviews = ref<PayPeriodOverview[]>([default_pay_period_overview,]);
     const current_pay_period_overview = ref<PayPeriodOverview>(default_pay_period_overview);
     const pay_period_details = ref<PayPeriodDetails>(default_pay_period_details);
     const pay_period_report = ref();
-    const is_calendar_limit = computed( ()=> 
+    const is_calendar_limit = computed(() =>
         pay_period.value.pay_year === 2024 &&
         pay_period.value.pay_period_no <= 1
     );
 
-    const getPayPeriodByDateOrYearAndNumber = (date_or_year: string | number, period_number?: number): Promise<boolean> => {
-        return withLoading( is_loading, async () => {
-            try {
-                let response;
+    const getPayPeriodByDateOrYearAndNumber = async (date_or_year: string | number, period_number?: number): Promise<boolean> => {
+        is_loading.value = true;
 
-                if (typeof date_or_year === 'string') {
-                    response = await timesheetService.getPayPeriodByDate(date_or_year);  
-                    return true;
-                }
-                else if ( typeof date_or_year === 'number' && period_number ) {
-                    response = await timesheetService.getPayPeriodByYearAndPeriodNumber(date_or_year, period_number);
-                    return true;
-                }
-                else response = default_pay_period;
-
-                pay_period.value = response;
-                return false;
-            } catch(error){
-                console.error('Could not get current pay period: ', error );
-                pay_period.value = default_pay_period;
-                pay_period_overviews.value = [ default_pay_period_overview, ];
-                //TODO: More in-depth error-handling here
+        try {
+            if (typeof date_or_year === 'string') {
+                pay_period.value = await timesheetService.getPayPeriodByDate(date_or_year);
             }
+            else if (typeof date_or_year === 'number' && period_number) {
+                pay_period.value = await timesheetService.getPayPeriodByYearAndPeriodNumber(date_or_year, period_number);
+            }
+            else pay_period.value = default_pay_period;
+            is_loading.value = false;
+
+            return true;
+        } catch (error) {
+            console.error('Could not get current pay period: ', error);
+            pay_period.value = default_pay_period;
+            pay_period_overviews.value = [default_pay_period_overview,];
+            //TODO: More in-depth error-handling here
+            is_loading.value = false;
 
             return false;
-        });
-    };
-
-    const getPayPeriodDetailsByEmployeeEmail = async (employee_email: string) => {
-        return withLoading( is_loading, async () => {
-            try {
-                const response = await timesheetService.getPayPeriodDetailsByPayPeriodAndEmployeeEmail(
-                    pay_period.value.pay_year, 
-                    pay_period.value.pay_period_no, 
-                    employee_email
-                );
-                pay_period_details.value = response;
-
-                return true;
-            } catch (error) {
-                console.error('There was an error retrieving timesheet details for this employee: ', error);
-                // TODO: More in-depth error-handling here
-            }
-
-            pay_period_details.value = default_pay_period_details;
-            return false;
-        });
+        }
     };
 
     const getPayPeriodOverviewsBySupervisorEmail = async (pay_year: number, period_number: number, supervisor_email: string): Promise<boolean> => {
-        return withLoading( is_loading, async () => {
-            try {
-                const response = await timesheetApprovalService.getPayPeriodOverviewsBySupervisorEmail( pay_year,  period_number, supervisor_email );
-                pay_period_overviews.value = response;
-                return true;
-            } catch (error) {
-                console.error('There was an error retrieving Employee Pay Period overviews: ', error);
-                pay_period_overviews.value = [ default_pay_period_overview, ];
-                // TODO: More in-depth error-handling here
-            }
+        is_loading.value = true;
 
+        try {
+            const response = await timesheetApprovalService.getPayPeriodOverviewsBySupervisorEmail(pay_year, period_number, supervisor_email);
+            pay_period_overviews.value = response.employees_overview;
+            is_loading.value = false;
+
+            return true;
+        } catch (error) {
+            console.error('There was an error retrieving Employee Pay Period overviews: ', error);
+            pay_period_overviews.value = [default_pay_period_overview,];
+            // TODO: More in-depth error-handling here
+            is_loading.value = false;
+            
             return false;
-        });
+        }
+    };
+
+    const getPayPeriodDetailsByEmployeeEmail = async (employee_email: string) => {
+        is_loading.value = true;
+        try {
+            const response = await timesheetService.getPayPeriodDetailsByPayPeriodAndEmployeeEmail(
+                pay_period.value.pay_year,
+                pay_period.value.pay_period_no,
+                employee_email
+            );
+            pay_period_details.value = response;
+            console.log('pay period details: ', response, pay_period_details.value.employee_full_name)
+            is_loading.value = false;
+        } catch (error) {
+            console.error('There was an error retrieving timesheet details for this employee: ', error);
+            // TODO: More in-depth error-handling here
+            pay_period_details.value = default_pay_period_details;
+            is_loading.value = false;
+        } 
     };
 
     const getPayPeriodReportByYearAndPeriodNumber = async (year: number, period_number: number, report_filters?: TimesheetApprovalCSVReportFilters) => {
-        return withLoading( is_loading, async () => {
+        return withLoading(is_loading.value, async () => {
             try {
                 const response = await timesheetApprovalService.getPayPeriodReportByYearAndPeriodNumber(
-                    year, 
-                    period_number, 
+                    year,
+                    period_number,
                     report_filters
                 );
                 pay_period_report.value = response;
@@ -105,10 +103,10 @@ export const useTimesheetStore = defineStore('timesheet', () => {
         });
     };
 
-    return { 
+    return {
         is_loading,
         is_calendar_limit,
-        pay_period, 
+        pay_period,
         pay_period_overviews,
         current_pay_period_overview,
         pay_period_details,
diff --git a/src/utils/normalize-object.ts b/src/utils/normalize-object.ts
index 2b1c6d4..dfb6316 100644
--- a/src/utils/normalize-object.ts
+++ b/src/utils/normalize-object.ts
@@ -1,8 +1,8 @@
 export type Normalizer<T> = {
-    [K in keyof T]: (val: unknown) => T[K];
+    [K in keyof T]: (_val: unknown) => T[K];
 };
 
-export const normalizeObject = <T>(raw: any, schema: Normalizer<T>): T => {
+export const normalizeObject = <T>(raw: Partial<Record<keyof T, unknown>>, schema: Normalizer<T>): T => {
     const result = {} as T;
     for (const key in schema) {
         result[key] = schema[key](raw[key]);
diff --git a/src/utils/store-helpers.ts b/src/utils/store-helpers.ts
index 99c2daf..e38831c 100644
--- a/src/utils/store-helpers.ts
+++ b/src/utils/store-helpers.ts
@@ -1,5 +1,6 @@
 export const withLoading = async <T>( loading_state: boolean, fn: () => Promise<T> ) => {
     loading_state = true;
+    
     try {
         return await fn();
     } finally {
diff --git a/src/utils/to-qselect-options.ts b/src/utils/to-qselect-options.ts
index c12619b..15c670c 100644
--- a/src/utils/to-qselect-options.ts
+++ b/src/utils/to-qselect-options.ts
@@ -1,6 +1,6 @@
 export const toQSelectOptions = <T>(values: readonly T[], i18n_domain?: string): { label: string; value: T }[] => {
     return values.map(value => ({
         label: ((i18n_domain ?? "") + value).toString(),
-        value: value as T
+        value: value
     }));
 };
\ No newline at end of file
diff --git a/src/utils/unwrap-and-clone.ts b/src/utils/unwrap-and-clone.ts
index 779a358..73cc45a 100644
--- a/src/utils/unwrap-and-clone.ts
+++ b/src/utils/unwrap-and-clone.ts
@@ -7,8 +7,8 @@ export const unwrapAndClone = <T extends object>(obj: T): T => {
     const raw = isProxy(obj) ? toRaw(obj) : obj;
 
     // Use structuredClone if available (handles Dates, Maps, Sets, circulars)
-    if (typeof (globalThis as any).structuredClone === "function") {
-        return (globalThis as any).structuredClone(raw);
+    if (typeof globalThis.structuredClone === "function") {
+        return globalThis.structuredClone(raw);
     }
 
     // Fallback for older environments (loses Dates, Sets, Maps)