diff --git a/src/assets/village.png b/src/assets/village.png
index cb17b50..5d8da3f 100644
Binary files a/src/assets/village.png and b/src/assets/village.png differ
diff --git a/src/css/app.scss b/src/css/app.scss
index 29d530e..1ade66d 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -5,7 +5,6 @@
   }
 }
 
-
 .text-fb-blue {
   color: #4267B2 !important;
 }
diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index f803073..1b60238 100644
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -15,9 +15,9 @@
 $primary                    : #30303A;
 $secondary                  : #DAE0E7;
 $accent                     : #0c9a3b;
-$accent2                     : #0a7d32;
+$accent2                    : #0a7d32;
 
-$dark-shadow-color          : #173625;
+$dark-shadow-color          : #000000;
 
 $elevation-dark-umbra       : rgba($dark-shadow-color, 1);
 $elevation-dark-penumbra    : rgba($dark-shadow-color, 0.75);
diff --git a/src/i18n/en-ca/index.ts b/src/i18n/en-ca/index.ts
index 10b8813..1f96213 100644
--- a/src/i18n/en-ca/index.ts
+++ b/src/i18n/en-ca/index.ts
@@ -130,8 +130,8 @@ export default {
         nav_button: {
             calendar_date_picker: "Calendar",
             current_week: "This week",
-            next_week: "Next week",
-            previous_week: "Previous week",
+            next_week: "Next period",
+            previous_week: "Previous period",
         },
         save_button: "Save",
         cancel_button: "Cancel",
@@ -206,6 +206,7 @@ export default {
         table: {
             full_name: "full name",
             email: "email address",
+            is_approved: "approval",
             expenses: "expenses",
             mileage: "mileage",
             verified: "approved",
diff --git a/src/i18n/fr-ca/index.ts b/src/i18n/fr-ca/index.ts
index e4ff6d1..43b22b5 100644
--- a/src/i18n/fr-ca/index.ts
+++ b/src/i18n/fr-ca/index.ts
@@ -131,8 +131,8 @@ export default {
         nav_button: {
             calendar_date_picker: "Calendrier",
             current_week: "Semaine actuelle",
-            next_week: "Prochaine semaine",
-            previous_week: "Semaine précédente",
+            next_week: "Prochaine période",
+            previous_week: "Période précédente",
         },
         save_button: "Enregistrer",
         cancel_button: "Annuler",
@@ -207,6 +207,7 @@ export default {
         table: {
             full_name: "nom complet",
             email: "courriel",
+            is_approved: "approuvé",
             expenses: "dépenses",
             mileage: "kilométrage",
             verified: "approuvé",
diff --git a/src/modules/auth/components/login-connection-panel.vue b/src/modules/auth/components/login-connection-panel.vue
index 803e030..4cfb8c9 100644
--- a/src/modules/auth/components/login-connection-panel.vue
+++ b/src/modules/auth/components/login-connection-panel.vue
@@ -13,7 +13,7 @@
 </script>
 
 <template>
-    <q-card class="rounded-15 shadow-10">
+    <q-card class="rounded-15 shadow-10 full-width">
         <q-card-section class="text-center bg-primary q-pa-lg">
             <q-img
                 src="/src/assets/logo-targo-white.svg"
@@ -38,7 +38,7 @@
                     label-color="accent"
                     class="rounded-5 inset-shadow bg-white"
                     label-slot
-                    input-class="text-h6 text-dark"
+                    input-class="text-h6 text-primary"
                 >
                     <template #label>
                         <span class="text-weight-bolder text-uppercase text-overline"> {{ $t('login.email') }} </span>
diff --git a/src/modules/auth/pages/auth-login-popup-success.vue b/src/modules/auth/pages/auth-login-popup-success.vue
index 2913eab..bc01d6d 100644
--- a/src/modules/auth/pages/auth-login-popup-success.vue
+++ b/src/modules/auth/pages/auth-login-popup-success.vue
@@ -18,11 +18,11 @@
                 <transition appear enter-active-class="animated slow flipInX" leave-active-class="animated flipOutX">
                     <q-card class="col-3 items-center">
                         <q-card-section  class="row justify-center ">
-                            <q-icon name="check_circle" color="green" size="xl" />
+                            <q-icon name="check_circle" color="accent" size="xl" />
                         </q-card-section>
-                        <q-separator inset color="primary" />
+                        <q-separator inset color="accent" />
                         <q-card-section class="row justify-center">
-                            <span class="row text-primary text-h3">Login Successful!</span>
+                            <span class="row text-h3">Login Successful!</span>
                         </q-card-section>
                     </q-card>
                 </transition>
diff --git a/src/modules/shared/components/loading-overlay.vue b/src/modules/shared/components/loading-overlay.vue
new file mode 100644
index 0000000..f3bd6d7
--- /dev/null
+++ b/src/modules/shared/components/loading-overlay.vue
@@ -0,0 +1,21 @@
+<script
+    setup
+    lang="ts"
+>
+    const is_loading = defineModel < boolean > ({ required: true });
+</script>
+
+<template>
+    <q-dialog
+        v-model="is_loading"
+        transition-show="jump-down"
+        transition-hide="jump-down"
+    >
+        <q-card class="q-pa-xl rounded-200 frosted-glass">
+            <q-spinner-radio
+                color="accent"
+                size="20vh"
+            />
+        </q-card>
+    </q-dialog>
+</template>
\ No newline at end of file
diff --git a/src/modules/shared/components/pay-period-navigator.vue b/src/modules/shared/components/pay-period-navigator.vue
index daacdfb..c83acd3 100644
--- a/src/modules/shared/components/pay-period-navigator.vue
+++ b/src/modules/shared/components/pay-period-navigator.vue
@@ -88,7 +88,7 @@
             rounded
             icon="calendar_month"
             color="accent"
-            @click="is_showing_calendar_picker = true"
+            @click="is_showing_calendar_picker = !is_showing_calendar_picker"
             :disable="timesheet_store.is_loading || is_disabled"
             class="q-px-xl"
         >
@@ -102,6 +102,8 @@
 
             <!-- date picker calendar -->
             <q-menu
+                v-model="is_showing_calendar_picker"
+                no-parent-event
                 anchor="bottom middle"
                 self="top middle"
                 :offset="[0, 10]"
diff --git a/src/modules/shared/components/q-table-filters.vue b/src/modules/shared/components/q-table-filters.vue
index d387b5d..6696835 100644
--- a/src/modules/shared/components/q-table-filters.vue
+++ b/src/modules/shared/components/q-table-filters.vue
@@ -1,19 +1,8 @@
 <script setup lang="ts">
-    const search_model = defineModel<string | number | null>({ default: null, required: true });
+    const search_model = defineModel<string | number | null>('search', { default: null, required: true });
 </script>
 
 <template>
-    <!-- Filters toggle -->
-    <q-btn-dropdown 
-        push
-        rounded
-        icon="filter_alt" 
-        color="accent"
-        :label="$t('shared.label.filter')" 
-        class="q-mr-md" 
-    />
-
-    <!-- Search bar -->
         <q-input
             v-model="search_model" 
             outlined 
diff --git a/src/modules/timesheet-approval/components/details-dialog-chart-expenses.vue b/src/modules/timesheet-approval/components/details-dialog-chart-expenses.vue
index eb74d61..3dbda92 100644
--- a/src/modules/timesheet-approval/components/details-dialog-chart-expenses.vue
+++ b/src/modules/timesheet-approval/components/details-dialog-chart-expenses.vue
@@ -3,11 +3,11 @@
     lang="ts"
 >
     /* eslint-disable */
-    
-    import { ref } from 'vue';
+
+    import { onMounted, ref } from 'vue';
     import { Bar } from 'vue-chartjs';
     import { useI18n } from 'vue-i18n';
-    import { useQuasar } from 'quasar';
+    import { useQuasar, colors } 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';
 
@@ -21,44 +21,37 @@
 
     const timesheet_store = useTimesheetStore();
 
+    const all_days = timesheet_store.timesheets.flatMap(week => week.days.flatMap(day => day.daily_expenses));
+
+    const expenses_labels = ref<string[]>(timesheet_store.timesheets.flatMap(week => week.days.map(day => day.date.slice(-5,))));
     const expenses_dataset = ref<ChartDataset<'bar'>[]>([]);
-    const expenses_labels = ref<string[]>([]);
 
-    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 => day.total_expenses);
-        // console.log('costs, ', all_costs);
-        // const all_mileage = all_days.map(day => day.total_mileage);
-
-
-        // 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(),
-        //     }
-        // ]
-
-        // expenses_labels.value = all_days_dates.map(day => day.short_date);
-
-        return {
-            datasets: expenses_dataset.value,
-            labels: expenses_labels.value
-        };
-    };
+    onMounted(() => {
+        expenses_dataset.value = [
+            {
+                label: t('timesheet_approvals.table.expenses'),
+                data: all_days.map(day => (day.expenses + day.on_call + day.per_diem)),
+                backgroundColor: colors.getPaletteColor('accent'),
+            },
+            {
+                label: t('timesheet_approvals.table.mileage'),
+                data: all_days.map(day => day.mileage),
+                backgroundColor: colors.getPaletteColor('info'),
+            }
+        ]
+    });
 </script>
 
 <template>
-    <div>
+    <div
+        class="bg-dark rounded-10 q-pa-sm"
+        :style="`min-height: ${$q.screen.lt.md ? '350px;' : '200px'}`"
+    >
         <Bar
-            :data="getExpensesData()"
+            :data="{
+                datasets: expenses_dataset,
+                labels: expenses_labels,
+            }"
             :options="({
                 indexAxis: $q.screen.lt.md ? 'y' : 'x',
                 plugins: {
diff --git a/src/modules/timesheet-approval/components/details-dialog-chart-hours-worked.vue b/src/modules/timesheet-approval/components/details-dialog-chart-hours-worked.vue
index 743f4fe..09d21aa 100644
--- a/src/modules/timesheet-approval/components/details-dialog-chart-hours-worked.vue
+++ b/src/modules/timesheet-approval/components/details-dialog-chart-hours-worked.vue
@@ -1,75 +1,80 @@
-<script setup lang="ts">
-    /* eslint-disable */
-    import { ref } from 'vue';
-    import { colors } from 'quasar';
-    import { Bar } from 'vue-chartjs';
+<script
+    setup
+    lang="ts"
+>
+    import { ref, computed, onMounted } from 'vue';
     import { useI18n } from 'vue-i18n';
-    import { useQuasar } from 'quasar';
+    import { colors, useQuasar } from 'quasar';
+    import { Bar } from 'vue-chartjs';
     import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, type ChartData, type ChartDataset } from 'chart.js';
     import { useTimesheetStore } from 'src/stores/timesheet-store';
-    
+    import type { TotalHours } from 'src/modules/timesheets/models/timesheet.models';
+
+    interface ChartConfigHoursWorked {
+        key: keyof Pick<TotalHours, 'regular' | 'evening' | 'emergency' | 'overtime'>;
+        label: string;
+        color: string;
+    }
+
     const { t } = useI18n();
     const $q = useQuasar();
-    
+
     ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale);
     ChartJS.defaults.font.family = '"Roboto", sans-serif';
-    ChartJS.defaults.maintainAspectRatio = false;
+    // ChartJS.defaults.maintainAspectRatio = false;
     ChartJS.defaults.color = $q.dark.isActive ? '#F5F5F5' : '#616161';
 
     const timesheet_store = useTimesheetStore();
 
-    const hours_worked_labels = ref<string[]>([]);
-    const hours_worked_dataset = ref<ChartDataset<'bar'>[]>([]);    
+    const all_days = computed(() => timesheet_store.timesheets.flatMap(week => week.days));
 
-    const getHoursWorkedData = (): ChartData<'bar'> => {
-        
-            // const all_days = timesheet_store.pay_period_details.weeks.flatMap( week => Object.values(week.shifts));
-            // const datasetConfig = [
-            //     {
-            //         key: 'regular_hours',
-            //         label: t('shared.shift_type.regular'),
-            //         color: colors.getPaletteColor('green-5'),
-            //     },
-            //     {
-            //         key: 'evening_hours',
-            //         label: t('shared.shift_type.evening'),
-            //         color: colors.getPaletteColor('green-9'),
-            //     },
-            //     {
-            //         key: 'emergency_hours',
-            //         label: t('shared.shift_type.emergency'),
-            //         color: getComputedStyle(document.body).getPropertyValue('--q-warning').trim(),
-            //     },
-            //     {
-            //         key: 'overtime_hours',
-            //         label: t('shared.shift_type.overtime'),
-            //         color: getComputedStyle(document.body).getPropertyValue('--q-negative').trim(),
-            //     },
-            // ] as const;
+    const datasetConfig: ChartConfigHoursWorked[] = [
+        {
+            key: 'regular',
+            label: t('shared.shift_type.regular'),
+            color: colors.getPaletteColor('accent'),
+        },
+        {
+            key: 'evening',
+            label: t('shared.shift_type.evening'),
+            color: colors.getPaletteColor('green-10'),
+        },
+        {
+            key: 'emergency',
+            label: t('shared.shift_type.emergency'),
+            color: getComputedStyle(document.body).getPropertyValue('--q-warning').trim(),
+        },
+        {
+            key: 'overtime',
+            label: t('shared.shift_type.overtime'),
+            color: getComputedStyle(document.body).getPropertyValue('--q-negative').trim(),
+        },
+    ];
 
-            // hours_worked_dataset.value = datasetConfig.map(cfg => ({
-            //     label: cfg.label,
-            //     data: all_days.map(day => day[ cfg.key ]),
-            //     backgroundColor: cfg.color,
-            // }));
+    const hours_worked_labels = ref<string[]>(all_days.value.map(day => day.date.slice(-5,)));
+    const hours_worked_dataset = ref<ChartDataset<'bar'>[]>([]);
 
-            // hours_worked_labels.value = all_days.map(day => day.short_date);
-        
-
-        return {
-            labels: hours_worked_labels.value,
-            datasets: hours_worked_dataset.value,
-        };
-    };
-    
+    onMounted(() => {
+        hours_worked_dataset.value = datasetConfig.map(cfg => ({
+            label: cfg.label,
+            data: all_days.value.map(day => day.daily_hours[cfg.key]),
+            backgroundColor: cfg.color,
+        }));
+    });
 </script>
 
 <template>
-    <div>
+    <div
+        class="bg-dark rounded-10 q-pa-sm"
+        :style="`min-height: ${$q.screen.lt.md ? '450px;' : '200px'}`"
+    >
         <Bar
-            :data="getHoursWorkedData()"
+            :data="{
+                labels: hours_worked_labels,
+                datasets: hours_worked_dataset,
+            }"
             :options="({
-                indexAxis: $q.screen.lt.md? 'y' : 'x',
+                indexAxis: $q.screen.lt.md ? 'y' : 'x',
                 plugins: {
                     legend: {
                         labels: {
@@ -89,10 +94,10 @@
                         stacked: true,
                         suggestedMin: 0,
                         suggestedMax: 10,
-                        
+
                     }
                 }
             })"
-        />    
+        />
     </div>
 </template>
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/components/details-dialog-chart-shift-types.vue b/src/modules/timesheet-approval/components/details-dialog-chart-shift-types.vue
index f8016d0..a45f7b0 100644
--- a/src/modules/timesheet-approval/components/details-dialog-chart-shift-types.vue
+++ b/src/modules/timesheet-approval/components/details-dialog-chart-shift-types.vue
@@ -3,7 +3,7 @@
     lang="ts"
 >
     /* eslint-disable */
-    import { ref } from 'vue';
+    import { onMounted, ref } from 'vue';
     import { colors } from 'quasar';
     import { useQuasar } from 'quasar';
     import { Doughnut } from 'vue-chartjs';
@@ -17,46 +17,45 @@
     ChartJS.defaults.maintainAspectRatio = false;
     ChartJS.defaults.color = $q.dark.isActive ? '#F5F5F5' : '#616161';
 
-    const { current_pay_period_overview } = useTimesheetStore();
+    const timesheet_store = useTimesheetStore();
 
-    const shift_type_labels = ref<string[]>([]);
-    const shift_type_totals = ref<ChartDataset<'doughnut'>[]>([{ data: [40, 0, 2, 5], }]);
+    const shift_type_labels = ref<string[]>([
+        timesheet_store.current_pay_period_overview!.regular_hours.toString() + 'h',
+        timesheet_store.current_pay_period_overview!.other_hours.evening_hours.toString() + 'h',
+        timesheet_store.current_pay_period_overview!.other_hours.emergency_hours.toString() + 'h',
+        timesheet_store.current_pay_period_overview!.other_hours.overtime_hours.toString() + 'h',
+    ]);
 
+    const shift_type_totals = ref<ChartDataset<'doughnut'>[]>([]);
 
-    // shift_type_totals.value = [{
-    //     data: [
-    //         current_pay_period_overview.regular_hours,
-    //         current_pay_period_overview.other_hours.evening_hours,
-    //         current_pay_period_overview.other_hours.emergency_hours,
-    //         current_pay_period_overview.other_hours.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.other_hours.evening_hours.toString() + 'h',
-    //     current_pay_period_overview.other_hours.emergency_hours.toString() + 'h',
-    //     current_pay_period_overview.other_hours.overtime_hours.toString() + 'h',
-    // ]
-
-
-    const data = {
-        labels: shift_type_labels.value,
-        datasets: shift_type_totals.value,
-    }
-
+    onMounted(() => {
+        shift_type_totals.value = [{
+            data: [
+                timesheet_store.current_pay_period_overview!.regular_hours,
+                timesheet_store.current_pay_period_overview!.other_hours.evening_hours,
+                timesheet_store.current_pay_period_overview!.other_hours.emergency_hours,
+                timesheet_store.current_pay_period_overview!.other_hours.overtime_hours,
+            ],
+            backgroundColor: [
+                colors.getPaletteColor('accent'),   // Regular
+                colors.getPaletteColor('green-10'), // Evening
+                colors.getPaletteColor('warning'),  // Emergency
+                colors.getPaletteColor('negative'), // Overtime
+            ]
+        }]
+    });
 </script>
 
 <template>
-    <div>
+    <div
+        style="min-height: 100px;"
+        :style="$q.screen.lt.md ? 'max-height: 150px;' : ''"
+    >
         <Doughnut
-            :data="data"
+            :data="{
+                labels: shift_type_labels,
+                datasets: shift_type_totals,
+            }"
             :options="({
                 plugins: {
                     legend: {
diff --git a/src/modules/timesheet-approval/components/details-dialog.vue b/src/modules/timesheet-approval/components/details-dialog.vue
index b68be4a..90cf49c 100644
--- a/src/modules/timesheet-approval/components/details-dialog.vue
+++ b/src/modules/timesheet-approval/components/details-dialog.vue
@@ -3,7 +3,7 @@
     lang="ts"
 >
     /* eslint-disable */
-    import { provide, ref } from 'vue';
+    import { ref } from 'vue';
     import { useTimesheetStore } from 'src/stores/timesheet-store';
     import DetailsDialogChartHoursWorked from 'src/modules/timesheet-approval/components/details-dialog-chart-hours-worked.vue';
     import DetailsDialogChartShiftTypes from 'src/modules/timesheet-approval/components/details-dialog-chart-shift-types.vue';
@@ -11,66 +11,43 @@
     import TimesheetWrapper from 'src/modules/timesheets/components/timesheet-wrapper.vue';
     import ExpenseDialogList from 'src/modules/timesheets/components/expense-dialog-list.vue';
 
-    const { employeeEmail } = defineProps<{
-        employeeEmail: string;
-    }>();
-
-    const dialog_model = defineModel<boolean>('dialog', { default: false });
     const timesheet_store = useTimesheetStore();
-    const render_key = ref(1);
-
-    provide('employeeEmail', employeeEmail);
+    const is_dialog_open = ref(false);
 </script>
 
 <template>
     <q-dialog
-        v-model="dialog_model"
+        v-model="timesheet_store.is_details_dialog_open"
         full-width
         full-height
         transition-show="jump-down"
         transition-hide="jump-down"
-        @show="render_key += 1"
+        @show="is_dialog_open = true"
+        @hide="is_dialog_open = false"
     >
         <q-card
-            class="q-pa-sm shadow-12 rounded-15 column no-wrap relative"
-            :style="$q.screen.lt.md ? '' : 'width: 60vw !important;'"
+            class="shadow-12 rounded-15 column no-wrap relative bg-secondary hide-scrollbar"
+            :style="($q.screen.lt.md ? '' : 'width:80vw !important;') + ($q.dark.isActive ? ' border: 2px solid var(--q-accent)' : '')"
         >
 
             <!-- employee name -->
-            <q-card-section
-                class="text-h5 text-weight-bolder text-center bg-primary q-pa-none text-uppercase text-white col-auto"
-            >
-                <span>TODO: Name goes here</span>
+            <q-card-section class="col-auto text-h4 text-weight-bolder text-center text-uppercase q-px-none q-py-sm">
+                <span>{{ timesheet_store.selected_employee_name }}</span>
             </q-card-section>
 
             <!-- employee pay period details using chart -->
             <q-card-section
+                v-if="is_dialog_open"
                 :horizontal="!$q.screen.lt.md"
-                class=" col-auto q-px-sm no-wrap"
+                class="col-auto q-px-md rounded-10 no-wrap"
             >
-                <DetailsDialogChartHoursWorked
-                    :key="render_key"
-                    class="col"
-                />
-
-                <DetailsDialogChartShiftTypes
-                    :key="render_key + 1"
-                    class="col-2 q-ma-lg"
-                />
-
-                <DetailsDialogChartExpenses
-                    :key="render_key + 2"
-                    class="col"
-                />
+                <DetailsDialogChartHoursWorked class="col" />
+                <DetailsDialogChartShiftTypes class="col q-ma-lg" />
+                <DetailsDialogChartExpenses class="col" />
             </q-card-section>
 
             <q-card-section class="col-auto">
-                <q-separator />
-                <ExpenseDialogList
-                    horizontal
-                    :employee-email="employeeEmail"
-                />
-                <q-separator />
+                <ExpenseDialogList />
             </q-card-section>
 
             <!-- list of shifts -->
@@ -78,10 +55,7 @@
                 :horizontal="$q.screen.gt.sm"
                 class="col-auto q-px-sm rounded-5 no-wrap"
             >
-                <TimesheetWrapper
-                    dense
-                    :employee-email="employeeEmail"
-                />
+                <TimesheetWrapper mode="approval" />
             </q-card-section>
         </q-card>
     </q-dialog>
diff --git a/src/modules/timesheet-approval/components/overview-list-item.vue b/src/modules/timesheet-approval/components/overview-list-item.vue
index ddee93d..30720e6 100644
--- a/src/modules/timesheet-approval/components/overview-list-item.vue
+++ b/src/modules/timesheet-approval/components/overview-list-item.vue
@@ -5,137 +5,161 @@
     import type { TimesheetOverview } from 'src/modules/timesheet-approval/models/timesheet-overview.models';
 
     const modelApproval = defineModel<boolean>();
-    const { row } = defineProps<{ row: TimesheetOverview; }>();
+
+    const { row, index = 0 } = defineProps<{
+        row: TimesheetOverview;
+        index?: number;
+    }>();
+
     const emit = defineEmits<{
         'clickDetails': [overview: TimesheetOverview];
     }>();
 </script>
 
 <template>
-    <div class="q-px-sm q-pb-sm q-mt-sm col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-3 grid-style-transition">
-        <q-card class="rounded-10">
-            <!-- Card header with employee name and details button-->
-            <q-card-section
-                horizontal
-                class="q-py-none q-px-sm q-ma-none justify-between items-center"
+    <div class="q-px-sm q-pb-md col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-3 grid-style-transition">
+        <transition
+            appear
+            enter-active-class="animated fadeInUp"
+        >
+            <q-card
+                class="rounded-10 shadow-5"
+                :style="`animation-delay: ${index / 15}s;`"
             >
-                <span class="col text-primary text-h5 text-weight-bolder q-pt-xs"> {{ row.employee_name }} </span>
-
-                <!-- Buttons to view detailed shifts or view employee timesheet -->
-                <q-btn
-                    flat
-                    dense
-                    square
-                    unelevated
-                    class="col-auto q-pa-none q-ma-none"
-                    color="primary"
-                    icon="work_history"
-                    @click="emit('clickDetails', row)"
+                <!-- Card header with employee name and details button-->
+                <q-card-section
+                    horizontal
+                    class="q-py-none q-px-sm q-ma-none justify-between items-center bg-primary text-white"
                 >
-                    <q-tooltip
-                        anchor="top middle"
-                        self="center middle"
-                        class="bg-primary text-uppercase text-weight-bold"
+                    <div>
+                        <span class="text-h5 text-uppercase text-weight-medium text-accent q-mr-xs">{{ row.employee_name.split(' ')[0]
+                            }}</span>
+                        <span class="text-uppercase text-weight-light">{{ row.employee_name.split(' ')[1] }}</span>
+                    </div>
+
+                    <!-- Buttons to view detailed shifts or view employee timesheet -->
+                    <q-btn
+                        flat
+                        dense
+                        square
+                        unelevated
+                        class="col-auto q-pa-none q-ma-none"
+                        color="accent"
+                        icon="work_history"
+                        @click="emit('clickDetails', row)"
                     >
-                        {{ $t('timesheet_approvals.tooltip.button_detailed_view') }}
-                    </q-tooltip>
-                </q-btn>
-            </q-card-section>
+                        <q-tooltip
+                            anchor="top middle"
+                            self="center middle"
+                            class="bg-accent text-uppercase text-weight-bold"
+                        >
+                            {{ $t('timesheet_approvals.tooltip.button_detailed_view') }}
+                        </q-tooltip>
+                    </q-btn>
+                </q-card-section>
 
-            <q-separator size="2px" />
+                <!-- Main body of pay period card -->
+                <q-card-section class="q-py-none q-px-sm q-py-sm bg-dark">
+                    <div class="row">
+                        <!-- left portion of pay period card -->
+                        <div class="col column q-px-sm">
+                            <!-- Regular hours segment -->
+                            <div class="col column">
+                                <span
+                                    class="text-weight-bold text-uppercase q-pa-none q-my-none"
+                                    :class="row.regular_hours > 80 ? 'text-negative' : 'text-accent'"
+                                > {{
+                                    $t('shared.shift_type.regular') }} </span>
+                                <span
+                                    class="text-weight-bolder text-h3 q-py-none"
+                                    :class="row.regular_hours > 80 ? 'text-negative' : ''"
+                                > {{ row.regular_hours }} </span>
+                                <q-separator class="q-mr-sm" />
+                            </div>
 
-            <!-- Main body of pay period card -->
-            <q-card-section class="q-py-none q-px-sm q-my-sm">
-                <div class="row">
-                    <!-- left portion of pay period card -->
-                    <div class="col column q-px-sm">
-                        <!-- Regular hours segment -->
-                        <div class="col column">
-                            <span class="text-weight-bold text-primary text-uppercase q-pa-none q-my-none"> {{ $t('shared.shift_type.regular') }} </span>
-                            <span class="text-weight-bolder text-h3 q-py-none"> {{ row.regular_hours }} </span>
-                            <q-separator class="q-mx-sm" />
+                            <!-- Other hour types segment -->
+                            <div class="col-auto row ellipsis q-mt-xs">
+                                <div
+                                    v-for="hour_type, index in row.other_hours"
+                                    :key="index"
+                                    class="col-4 column ellipsis"
+                                    :class="hour_type === 0 ? 'invisible' : ''"
+                                >
+                                    <span
+                                        class="text-weight-bold text-accent text-uppercase q-pa-none q-my-none"
+                                        style="font-size: 0.7em;"
+                                    > {{ $t(`shared.shift_type.${index.replace('_hours', '')}`) }} </span>
+                                    <span
+                                        class="text-weight-bolder q-pa-none q-mb-xs"
+                                        style="font-size: 1.2em; line-height: 1em;"
+                                    > {{ hour_type }} </span>
+                                </div>
+                            </div>
                         </div>
 
-                        <!-- Other hour types segment -->
-                        <div class="col-auto row ellipsis q-mt-xs">
-                            <div
-                                v-for="hour_type, index in row.other_hours"
-                                :key="index"
-                                class="col-4 column ellipsis"
-                                :class="hour_type === 0 ? 'invisible' : ''"
-                            >
+                        <q-separator
+                            vertical
+                            class="q-mt-xs q-mb-none"
+                        />
+
+                        <!-- Right portion of pay period card -->
+                        <div class="col-auto column q-px-sm">
+                            <div class="col column no-wrap">
                                 <span
-                                    class="text-weight-bold text-primary text-uppercase q-pa-none q-my-none"
-                                    style="font-size: 0.7em;"
-                                > {{ $t(`shared.shift_type.${index.replace('_hours', '')}`) }} </span>
+                                    class="text-weight-bold text-accent text-uppercase q-pa-none q-my-none"
+                                    style="font-size: 0.8em;"
+                                > {{ $t('timesheet.expense.types.EXPENSES') }} </span>
                                 <span
-                                    class="text-weight-bolder q-pa-none q-mb-xs"
-                                    style="font-size: 1.2em; line-height: 1em;"
-                                > {{ hour_type }} </span>
+                                    class="text-weight-bolder text-h6 q-pa-none"
+                                    style="line-height: 0.9em;"
+                                > {{ row.expenses }} <span class="text-weight-light">$</span> </span>
+                            </div>
+
+                            <div class="col column no-wrap">
+                                <span
+                                    class="text-weight-bold text-accent text-uppercase q-pa-none q-my-none"
+                                    style="font-size: 0.8em;"
+                                > {{ $t('timesheet.expense.types.MILEAGE') }} </span>
+                                <span
+                                    class="text-weight-bolder text-h6 q-pa-none"
+                                    style="line-height: 0.9em;"
+                                > {{ row.mileage }} <span class="text-weight-light text-body2">km</span></span>
                             </div>
                         </div>
                     </div>
+                </q-card-section>
 
-                    <q-separator
-                        vertical
-                        class="q-mt-xs q-mb-none"
-                    />
-
-                    <!-- Right portion of pay period card -->
-                    <div class="col-auto column q-px-sm">
-                        <div class="col column no-wrap">
-                            <span
-                                class="text-weight-bold text-primary text-uppercase q-pa-none q-my-none"
-                                style="font-size: 0.8em;"
-                            > {{ $t('timesheet.expense.types.EXPENSES') }} </span>
-                            <span
-                                class="text-weight-bolder text-h6 q-pa-none"
-                                style="line-height: 0.9em;"
-                            > {{ row.expenses }} </span>
-                        </div>
-
-                        <div class="col column no-wrap">
-                            <span
-                                class="text-weight-bold text-primary text-uppercase q-pa-none q-my-none"
-                                style="font-size: 0.8em;"
-                            > {{ $t('timesheet.expense.types.MILEAGE') }} </span>
-                            <span
-                                class="text-weight-bolder text-h6 q-pa-none"
-                                style="line-height: 0.9em;"
-                            > {{ row.mileage }} </span>
-                        </div>
+                <!-- Validate Pay Period section -->
+                <q-card-section
+                    horizontal
+                    class="justify-between items-center text-weight-bold q-pa-none"
+                    :class="row.is_approved ? 'text-white bg-accent' : 'bg-dark text-accent'"
+                >
+                    <div class="col-auto">
+                        <span class="text-uppercase text-h6 q-ml-sm text-weight-bolder"> {{ row.total_hours }} </span>
+                        <span class="text-uppercase text-weight-bold text-caption q-ml-xs"> total </span>
                     </div>
-                </div>
-            </q-card-section>
 
-            <q-separator
-                color="primary"
-                size="2px"
-            />
-
-            <!-- Validate Pay Period section -->
-            <q-card-section
-                horizontal
-                class="justify-between items-center text-weight-bold q-px-sm"
-                :class="row.is_approved ? 'text-white bg-primary' : 'bg-dark'"
-            >
-                <div class="col-auto">
-                    <span class="text-uppercase text-h6 q-ml-sm text-weight-bolder"> {{ row.total_hours }} </span>
-                    <span class="text-uppercase text-weight-bold text-caption q-ml-xs"> total </span>
-                </div>
-
-                <q-checkbox
-                    v-model="modelApproval"
-                    dense
-                    left-label
-                    size="lg"
-                    checked-icon="lock"
-                    unchecked-icon="lock_open"
-                    :color="row.is_approved ? 'white' : 'primary'"
-                    :label="row.is_approved ? $t('timesheet_approvals.table.verified') : $t('timesheet_approvals.table.unverified')"
-                    class="col-auto text-uppercase"
-                />
-            </q-card-section>
-        </q-card>
+                    <div
+                        class="col-auto q-py-xs q-px-md"
+                        style="border: 1px solid var(--q-accent);"
+                    >
+                        <q-checkbox
+                            v-model="modelApproval"
+                            dense
+                            left-label
+                            keep-color
+                            size="lg"
+                            checked-icon="lock"
+                            unchecked-icon="lock_open"
+                            :color="row.is_approved ? 'white' : 'accent'"
+                            :label="row.is_approved ? $t('timesheet_approvals.table.verified') : $t('timesheet_approvals.table.unverified')"
+                            class="text-uppercase"
+                            :class="row.is_approved ? '' : 'text-accent'"
+                        />
+                    </div>
+                </q-card-section>
+            </q-card>
+        </transition>
     </div>
 </template>
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/components/overview-list.vue b/src/modules/timesheet-approval/components/overview-list.vue
index 44739d9..8b8f2dd 100644
--- a/src/modules/timesheet-approval/components/overview-list.vue
+++ b/src/modules/timesheet-approval/components/overview-list.vue
@@ -4,156 +4,160 @@
 >
     /* eslint-disable */
     import { computed, ref } from 'vue';
+    import OverviewListItem from 'src/modules/timesheet-approval/components/overview-list-item.vue';
+    import LoadingOverlay from 'src/modules/shared/components/loading-overlay.vue';
     import { useExpensesStore } from 'src/stores/expense-store';
     import { useTimesheetStore } from 'src/stores/timesheet-store';
     import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
-    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 TimesheetOverview } from 'src/modules/timesheet-approval/models/timesheet-overview.models';
+    import { overview_column_names, pay_period_overview_columns, type TimesheetOverview } from 'src/modules/timesheet-approval/models/timesheet-overview.models';
 
     const expenses_store = useExpensesStore();
     const timesheet_store = useTimesheetStore();
     const timesheet_approval_api = useTimesheetApprovalApi();
 
-    const filter = ref<string | number | null>('');
-    const is_grid_mode = ref(true);
-    const IS_ABNORMAL_SHIFT = ['OVERTIME', 'EMERGENCY'];
-    const IS_PTO = ['HOLIDAY', 'VACATION', 'SICK'];
-
-    const employeeEmail = defineModel();
-
-    const visible_columns = ref<string[]>(['REGULAR', 'email']);
-
-    const emit = defineEmits<{
-        'clickedDetailsButton': [email: string];
-    }>();
+    const visible_columns = ref<string[]>([
+        overview_column_names.REGULAR,
+        overview_column_names.EVENING,
+        overview_column_names.EMERGENCY,
+        overview_column_names.SICK,
+        overview_column_names.VACATION,
+        overview_column_names.HOLIDAY,
+        overview_column_names.OVERTIME,
+        overview_column_names.IS_APPROVED,
+    ]);
 
     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: TimesheetOverview) => {
-        employeeEmail.value = employee_email;
+    const onClickedDetails = async (row: TimesheetOverview) => {
         timesheet_store.current_pay_period_overview = row;
-        emit('clickedDetailsButton', employee_email);
-
-        await timesheet_store.getTimesheetsByEmployeeEmail(employee_email);
-        // await expenses_store.getPayPeriodExpensesByTimesheetId(employee_email);
+        await timesheet_store.getTimesheetsByOptionalEmployeeEmail(row.email);
+        
+        timesheet_store.is_details_dialog_open = true;
     };
 </script>
 
 <template>
-    <div class="q-pa-md">
-        <q-table
-            :visible-columns="visible_columns"
-            :rows="overview_rows"
-            :columns="pay_period_overview_columns"
-            row-key="email"
-            :filter="filter"
-            :grid="is_grid_mode"
-            dense
-            hide-pagination
-            color="primary"
-            :rows-per-page-options="[0]"
-            card-container-class="justify-center"
-            :loading="timesheet_store.is_loading"
-            class="q-py-md bg-transparent"
-            :class="is_grid_mode ? '' : 'sticky-header-table no-shadow'"
-            table-class="q-pa-none q-py-none q-mx-md rounded-10 bg-dark shadow-4'"
-            :no-data-label="$t('shared.error.no_data_found')"
-            :no-results-label="$t('shared.error.no_search_results')"
-            :loading-label="$t('shared.label.loading')"
+    <div class="q-px-md full-height">
+        <LoadingOverlay v-model="timesheet_store.is_loading" />
+        <transition
+            appear
+            enter-active-class="animated fadeInUp"
+            leave-active-class="animated fadeOutDown"
+            mode="out-in"
         >
-            <template #top>
-                <div
-                    class="full-width"
-                    :class="$q.screen.lt.md ? 'text-center' : 'row'"
-                >
-                    <PayPeriodNavigator
-                        @date-selected="timesheet_approval_api.getPayPeriodOverviewsByDateOrYearAndNumber"
-                    />
-
-                    <q-space />
-
-                    <q-btn-toggle
-                        v-model="is_grid_mode"
-                        push
-                        color="white"
-                        text-color="accent"
-                        toggle-color="accent"
-                        class="q-mr-md"
-                        :options="[
-                            { icon: 'grid_view', value: true },
-                            { icon: 'view_list', value: false },
-                        ]"
-                    />
-
-                    <QTableFilters v-model="filter" />
-                </div>
-            </template>
-
-            <template #header="props">
-                <q-tr
-                    :props="props"
-                    class="bg-primary"
-                >
-                    <q-th
-                        v-for="col in props.cols"
-                        :key="col.name"
+            <q-table
+                :key="timesheet_store.is_approval_grid_mode ? 'grid' : 'list'"
+                :visible-columns="visible_columns"
+                :rows="overview_rows"
+                :columns="pay_period_overview_columns"
+                row-key="email"
+                :filter="timesheet_store.search_filter"
+                :grid="timesheet_store.is_approval_grid_mode"
+                :dense="timesheet_store.is_approval_grid_mode"
+                hide-pagination
+                color="accent"
+                :rows-per-page-options="[0]"
+                card-container-class="justify-center"
+                class="bg-transparent"
+                :class="timesheet_store.is_approval_grid_mode ? '' : 'sticky-header-table no-shadow'"
+                table-class="q-pa-none q-mx-md rounded-10 bg-dark shadow-15"
+                :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 #header="props">
+                    <q-tr
                         :props="props"
+                        class="bg-primary"
                     >
-                        <span
-                            v-if="col.label !== 'timesheet_approvals.table.is_approved'"
-                            class="text-uppercase text-weight-bolder text-white"
+                        <q-th
+                            v-for="col in props.cols"
+                            :key="col.name"
+                            :props="props"
                         >
-                            {{ $t(col.label) }}
+                            <span class="text-uppercase text-weight-bolder text-white">
+                                {{ $t(col.label) }}
+                            </span>
+                        </q-th>
+                    </q-tr>
+                </template>
+
+                <template #body-cell="props">
+                    <q-td
+                        :props="props"
+                        class="text-weight-medium"
+                    >
+                        <transition
+                            appear
+                            enter-active-class="animated fadeInUp slow"
+                            leave-active-class="animated fadeOutDown"
+                            mode="out-in"
+                        >
+                            <div
+                                :key="props.rowIndex + (timesheet_store.pay_period?.pay_period_no ?? 0)"
+                                class="rounded-5"
+                                style="font-size: 1.2em;"
+                                :style="`animation-delay: ${props.rowIndex / 30}s;`"
+                            >
+                                <transition
+                                    v-if="props.col.name === 'is_approved'"
+                                    enter-active-class="animated swing"
+                                    mode="out-in"
+                                >
+                                    <q-btn
+                                        :key="props.row.is_approved"
+                                        flat
+                                        dense
+                                        :icon="props.value ? 'lock' : 'lock_open'"
+                                        :color="props.value ? 'white' : 'grey-5'"
+                                        class="rounded-5 z-top"
+                                        :class="props.value ? 'bg-accent' : ''"
+                                        @click.stop="props.row.is_approved = !props.row.is_approved"
+                                    />
+                                </transition>
+
+                                <div v-else-if="props.col.name === 'employee_name'">
+                                    <span class="text-h5 text-uppercase text-accent q-mr-xs">
+                                        {{ props.value.split(' ')[0] }}
+                                    </span>
+                                    <span class="text-uppercase text-weight-light">{{ props.value.split(' ')[1]
+                                    }}</span>
+                                </div>
+                                <span v-else>{{ props.value }}</span>
+                            </div>
+                        </transition>
+                    </q-td>
+                </template>
+
+                <!-- Template for individual employee cards -->
+                <template #item="props: { row: TimesheetOverview, rowIndex: number }">
+                    <OverviewListItem
+                        v-model="props.row.is_approved"
+                        :key="props.row.email + timesheet_store.pay_period?.pay_period_no"
+                        :index="props.rowIndex"
+                        :row="props.row"
+                        @click-details="overview => onClickedDetails(overview)"
+                    />
+                </template>
+
+                <!-- Template for custome failed-to-load state -->
+                <template #no-data="{ message, filter }">
+                    <div class="full-width column items-center text-accent q-gutter-sm">
+                        <q-icon
+                            size="4em"
+                            :name="filter ? 'filter_alt_off' : 'error_outline'"
+                        />
+
+                        <span class="text-h6">
+                            {{ message }}
                         </span>
-                    </q-th>
-                </q-tr>
-            </template>
-
-            <template #body-cell="props">
-                <q-td
-                    :props="props"
-                    class="text-weight-medium"
-                >
-                    <span
-                        v-if="(props.value > 0 && typeof props.value !== 'boolean') || typeof props.value === 'string'"
-                    >{{ props.value }}</span>
-                    <q-icon
-                        v-if="typeof props.value === 'boolean'"
-                        :name="props.value ? 'verified' : 'fiber_manual_record'"
-                        :color="props.value ? 'primary' : 'grey-5'"
-                        size="sm"
-                    />
-                </q-td>
-            </template>
-
-            <!-- Template for individual employee cards -->
-            <template #item="props: { row: TimesheetOverview, key: string }">
-                <OverviewListItem
-                    v-model="props.row.is_approved"
-                    :row="props.row"
-                    @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-accent q-gutter-sm">
-                    <q-icon
-                        size="4em"
-                        :name="filter ? 'filter_alt_off' : 'error_outline'"
-                    />
-
-                    <span class="text-h6">
-                        {{ message }}
-                    </span>
-                </div>
-            </template>
-        </q-table>
+                    </div>
+                </template>
+            </q-table>
+        </transition>
     </div>
 </template>
 
@@ -167,7 +171,7 @@
     position: sticky
     z-index: 1
   thead tr:first-child th
-    top: 0
+    top: 0px
 
   &.q-table--loading thead tr:last-child th
     top: 48px
diff --git a/src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts b/src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts
index 94294f8..39bb247 100644
--- a/src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts
+++ b/src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts
@@ -1,69 +1,51 @@
 import { useTimesheetStore } from "src/stores/timesheet-store";
-import { useAuthStore } from "src/stores/auth-store";
 import type { TimesheetApprovalCSVReportFilters } from "src/modules/timesheet-approval/models/timesheet-approval-csv-report.models";
-import { NavigatorConstants } from "src/modules/timesheet-approval/models/timesheet-overview.models";
 
 export const useTimesheetApprovalApi = () => {
     const timesheet_store = useTimesheetStore();
-    const auth_store = useAuthStore();
+    const DATE_REGEX = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/;
 
-    const getPayPeriodOverviewsByDateOrYearAndNumber = async (date_or_year: string | number, period_number?: number): Promise<void> => {
-        let success = false;
-        if (typeof date_or_year === 'string') success = await timesheet_store.getPayPeriodByDateOrYearAndNumber(date_or_year);
-        else if (typeof date_or_year === 'number' && period_number) success = await timesheet_store.getPayPeriodByDateOrYearAndNumber(date_or_year, period_number);
-        
-        if (success) {
-            await timesheet_store.getTimesheetOverviewsByPayPeriod(
-                timesheet_store.pay_period?.pay_year ?? 1, 
-                timesheet_store.pay_period?.pay_period_no ?? 1,
-                auth_store.user?.email 
-            );
-        }
-    };
-    
-    const getNextOrPreviousPayPeriodOverview = async (direction: number) => {
-        if (timesheet_store.pay_period === undefined) return;
+    const getTimesheetOverviews = async () => {
+        timesheet_store.is_loading = true;
 
-        let new_period_number = (timesheet_store.pay_period.pay_period_no) + direction;
-        let new_year = timesheet_store.pay_period.pay_year;
+        const success = await timesheet_store.getPayPeriodByDateOrYearAndNumber();
+        if (success) await timesheet_store.getTimesheetOverviews();
 
-        if ( new_period_number > 26 || new_period_number < 1) {
-            new_period_number = 1;
-            new_year += direction;
+        timesheet_store.is_loading = false;
+    }
+
+    const getTimesheetOverviewsByDate = async (date: string) => {
+        const valid_date = DATE_REGEX.test(date);
+        timesheet_store.is_loading = true;
+
+        if (valid_date) {
+            const success = await timesheet_store.getPayPeriodByDateOrYearAndNumber(date);
+            if (success) await timesheet_store.getTimesheetOverviews();
         }
 
-        await getPayPeriodOverviewsByDateOrYearAndNumber(new_year, new_period_number);
+        timesheet_store.is_loading = false;
     };
 
-    const getNextPayPeriodOverview = async () => {
-        await getNextOrPreviousPayPeriodOverview(NavigatorConstants.NEXT_PERIOD);
-    };
-
-    const getPreviousPayPeriodOverview = async () => {
-        await getNextOrPreviousPayPeriodOverview(NavigatorConstants.PREVIOUS_PERIOD);
-    };
-
-    const getTimesheetApprovalCSVReport = async ( report_filter_company: boolean[], report_filter_type: boolean[], year?: number, period_number?: number ) => {
+    const getTimesheetApprovalCSVReport = async (report_filter_company: boolean[], report_filter_type: boolean[], year?: number, period_number?: number) => {
         if (timesheet_store.pay_period === undefined) return;
 
-        const [ targo, solucom ] = report_filter_company;
-        const [ shifts, expenses, holiday, vacation ] = report_filter_type;
+        const [targo, solucom] = report_filter_company;
+        const [shifts, expenses, holiday, vacation] = report_filter_type;
         const options = {
             types: { shifts, expenses, holiday, vacation },
             companies: { targo, solucom },
         } as TimesheetApprovalCSVReportFilters;
-        
-        await timesheet_store.getPayPeriodReportByYearAndPeriodNumber( 
-            year ?? timesheet_store.pay_period.pay_year, 
-            period_number ?? timesheet_store.pay_period.pay_period_no, 
-            options 
+
+        await timesheet_store.getPayPeriodReportByYearAndPeriodNumber(
+            year ?? timesheet_store.pay_period.pay_year,
+            period_number ?? timesheet_store.pay_period.pay_period_no,
+            options
         );
     };
 
     return {
-        getPayPeriodOverviewsByDateOrYearAndNumber,
+        getTimesheetOverviewsByDate,
         getTimesheetApprovalCSVReport,
-        getNextPayPeriodOverview,
-        getPreviousPayPeriodOverview,
+        getTimesheetOverviews,
     }
 };
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/models/timesheet-overview.models.ts b/src/modules/timesheet-approval/models/timesheet-overview.models.ts
index ad4e4a2..9689da7 100644
--- a/src/modules/timesheet-approval/models/timesheet-overview.models.ts
+++ b/src/modules/timesheet-approval/models/timesheet-overview.models.ts
@@ -52,76 +52,102 @@ export const default_pay_period_overview: TimesheetOverview = {
     is_approved: false
 }
 
+export const overview_column_names = {
+    EMPLOYEE_NAME: 'employee_name',
+    EMAIL: 'email',
+    REGULAR: 'REGULAR',
+    EVENING: 'EVENING',
+    EMERGENCY: 'EMERGENCY',
+    SICK: 'SICK',
+    HOLIDAY: 'HOLIDAY',
+    VACATION: 'VACATION',
+    OVERTIME: 'OVERTIME',
+    EXPENSES: 'expenses',
+    MILEAGE: 'mileage',
+    IS_APPROVED: 'is_approved', 
+}
+
 export const pay_period_overview_columns: QTableColumn[] = [
     { 
-        name: 'employee_name', 
+        name: overview_column_names.EMPLOYEE_NAME, 
         label: 'timesheet_approvals.table.full_name', 
         align: 'left', 
         field: 'employee_name',
-        sortable: true 
+        sortable: true,
+        required: true, 
     },
     { 
-        name: 'email', 
-        label: 'timesheet_approvals.table.email', 
+        name: overview_column_names.EMAIL, 
+        label: 'timesheet_approvals.table.email',
+        align: 'left', 
         field: 'email', 
         sortable: true,
     },
     { 
-        name: 'REGULAR', 
-        label: 'shared.shift_type.regular', 
+        name: overview_column_names.REGULAR, 
+        label: 'shared.shift_type.regular',
+        align: 'left', 
         field: 'regular_hours', 
         sortable: true, 
     },
     { 
-        name: 'EVENING', 
-        label: 'shared.shift_type.evening', 
+        name: overview_column_names.EVENING, 
+        label: 'shared.shift_type.evening',
+        align: 'left',
         field: row => row.other_hours.evening_hours,
         sortable: true, 
     },
     { 
-        name: 'EMERGENCY', 
+        name: overview_column_names.EMERGENCY, 
         label: 'shared.shift_type.emergency', 
+        align: 'left',
         field: row => row.other_hours.emergency_hours,
         sortable: true, 
     },
      { 
-        name: 'SICK', 
+        name: overview_column_names.SICK, 
         label: 'shared.shift_type.sick', 
+        align: 'left',
         field: row => row.other_hours.sick_hours, 
         sortable: true, 
     },
     { 
-        name: 'HOLIDAY', 
+        name: overview_column_names.HOLIDAY, 
         label: 'shared.shift_type.holiday', 
+        align: 'left',
         field: row => row.other_hours.holiday_hours,
         sortable: true, 
     },
     { 
-        name: 'VACATION', 
+        name: overview_column_names.VACATION, 
         label: 'shared.shift_type.vacation', 
+        align: 'left',
         field: row => row.other_hours.vacation_hours,
         sortable: true, 
     },
     { 
-        name: 'OVERTIME', 
+        name: overview_column_names.OVERTIME, 
         label: 'shared.shift_type.overtime', 
+        align: 'left',
         field: row => row.other_hours.overtime_hours,
         sortable: true,
     },
     { 
-        name: 'expenses', 
+        name: overview_column_names.EXPENSES, 
         label: 'timesheet_approvals.table.expenses', 
+        align: 'left',
         field: 'expenses', 
         sortable: true, 
     },
     { 
-        name: 'mileage', 
+        name: overview_column_names.MILEAGE, 
         label: 'timesheet_approvals.table.mileage', 
+        align: 'left',
         field: 'mileage', 
         sortable: true,
     },
     {
-        name: 'is_approved',
+        name: overview_column_names.IS_APPROVED,
         label: 'timesheet_approvals.table.is_approved',
         field: 'is_approved',
         sortable: true,
diff --git a/src/modules/timesheet-approval/services/timesheet-approval-service.ts b/src/modules/timesheet-approval/services/timesheet-approval-service.ts
index 8712d5a..f431382 100644
--- a/src/modules/timesheet-approval/services/timesheet-approval-service.ts
+++ b/src/modules/timesheet-approval/services/timesheet-approval-service.ts
@@ -3,8 +3,8 @@ import type { TimesheetApprovalCSVReportFilters } from "src/modules/timesheet-ap
 import type { PayPeriodOverviewResponse } from "src/modules/timesheet-approval/models/timesheet-overview.models";
 
 export const timesheetApprovalService = {
-    getPayPeriodOverviewsBySupervisorEmail: async (year: number, period_number: number, supervisor_email: string): Promise<PayPeriodOverviewResponse> => {
-        const response = await api.get(`pay-periods/${year}/${period_number}/${supervisor_email}`);
+    getPayPeriodOverviews: async (year: number, period_number: number): Promise<PayPeriodOverviewResponse> => {
+        const response = await api.get(`pay-periods/crew/${year}/${period_number}`);
         return response.data;
     },
 
diff --git a/src/modules/timesheets/components/expense-dialog-list.vue b/src/modules/timesheets/components/expense-dialog-list.vue
index 8d32e57..207f2cf 100644
--- a/src/modules/timesheets/components/expense-dialog-list.vue
+++ b/src/modules/timesheets/components/expense-dialog-list.vue
@@ -15,9 +15,7 @@
 
     const expenses_list = computed(() => {
         if (timesheet_store.timesheets !== undefined) {
-            const current_expenses = timesheet_store.timesheets.flatMap(week => week.days).flatMap(day => day.expenses);
-            console.log('current expenses: ', current_expenses);
-            return current_expenses;
+            return timesheet_store.timesheets.flatMap(week => week.days).flatMap(day => day.expenses);
         }
         return [];
     })
diff --git a/src/modules/timesheets/components/shift-list-day-row.vue b/src/modules/timesheets/components/shift-list-day-row.vue
index aeafc77..0b92714 100644
--- a/src/modules/timesheets/components/shift-list-day-row.vue
+++ b/src/modules/timesheets/components/shift-list-day-row.vue
@@ -105,7 +105,7 @@
                 <q-btn
                     v-if="ui_store.is_mobile_mode && !dense"
                     :icon="shift.comment ? 'chat' : 'chat_bubble_outline'"
-                    :text-color="shift.comment ? ((shift.is_approved || isTimesheetApproved) ? 'white' : 'accent') : 'grey-5'"
+                    :text-color="shift.comment ? ((shift.is_approved && isTimesheetApproved) ? 'white' : 'accent') : 'grey-5'"
                     class="col-auto full-height q-mx-xs rounded-5 shadow-1"
                 >
                     <q-popup-edit
@@ -160,8 +160,8 @@
                     v-model="shift_type_selected"
                     :standout="$q.dark.isActive ? 'bg-blue-grey-3' : 'bg-blue-grey-9'"
                     dense
-                    :borderless="(shift.is_approved || isTimesheetApproved)"
-                    :readonly="(shift.is_approved || isTimesheetApproved)"
+                    :borderless="(shift.is_approved && isTimesheetApproved)"
+                    :readonly="(shift.is_approved && isTimesheetApproved)"
                     :options-dense="!ui_store.is_mobile_mode"
                     hide-dropdown-icon
                     :menu-offset="[0, 10]"
@@ -169,8 +169,8 @@
                     menu-self="top middle"
                     :options="SHIFT_OPTIONS"
                     class="col rounded-5 q-mx-xs bg-dark"
-                    :class="(shift.is_approved || isTimesheetApproved) ? 'inset-shadow' : ''"
-                    :style="(shift.is_approved || isTimesheetApproved) ? 'background-color: #0a7d32 !important;' : ''"
+                    :class="!shift.is_approved && !isTimesheetApproved ? '' : 'inset-shadow'"
+                    :style="shift.is_approved ? 'background-color: #0a7d32 !important;' : ''"
                     popup-content-class="text-uppercase text-weight-bold text-center rounded-5"
                     popup-content-style="border: 2px solid var(--q-accent)"
                     @blur="onBlurShiftTypeSelect"
@@ -191,33 +191,34 @@
                             <span
                                 style="line-height: 0.9em;"
                                 class="col-auto ellipsis"
-                                :class="(shift.is_approved || isTimesheetApproved) ? 'text-white' : ''"
+                                :class="!shift.is_approved ? '' : 'text-white'"
                             >{{ scope.opt.label }}</span>
                         </div>
                     </template>
                 </q-select>
             </div>
 
-            <div class="col row flex-center text-uppercase rounded-5 bg-transparent q-pa-xs">
+            <div class="col row flex-center text-uppercase rounded-5 q-pa-xs">
                 <!-- punch in field -->
                 <q-input
                     v-model="shift.start_time"
                     dense
-                    :borderless="(shift.is_approved || isTimesheetApproved)"
-                    :readonly="(shift.is_approved || isTimesheetApproved)"
+                    :borderless="(shift.is_approved && isTimesheetApproved)"
+                    :readonly="(shift.is_approved && isTimesheetApproved)"
                     type="time"
                     :standout="$q.dark.isActive ? 'bg-blue-grey-3' : 'bg-blue-grey-9'"
                     label-slot
-                    :label-color="(shift.is_approved || isTimesheetApproved) ? 'white' : 'accent'"
-                    :input-class="'text-weight-medium ' + (shift.id === -2 ? 'text-white ' : ' ') + ((shift.is_approved || isTimesheetApproved) ? 'cursor-not-allowed text-white' : '')"
+                    :label-color="!shift.is_approved ? 'accent' : 'white'"
+                    :input-class="'text-weight-medium ' + (shift.id === -2 ? 'text-white ' : ' ') + (shift.is_approved ? 'text-white cursor-not-allowed q-px-sm' : '')"
                     input-style="font-size: 1.2em;"
                     class="col rounded-5 bg-dark"
-                    :class="(shift.id === -2 ? 'bg-negative ' : ' ') + (ui_store.is_mobile_mode ? 'q-mr-xs ' : 'q-mx-xs ') + ((shift.is_approved || isTimesheetApproved) ? 'cursor-not-allowed q-px-xs transparent inset-shadow' : '')"
-                    :style="(shift.is_approved || isTimesheetApproved) ? 'background-color: #0a7d32 !important;' : ''"
+                    :class="(shift.id === -2 ? 'bg-negative ' : ' ') + (ui_store.is_mobile_mode ? 'q-mr-xs ' : 'q-mx-xs ') + (!shift.is_approved && !isTimesheetApproved ? '' : 'cursor-not-allowed inset-shadow')"
+                    :style="shift.is_approved ? 'background-color: #0a7d32 !important;' : ''"
                 >
                     <template #label>
                         <span
                             class="text-weight-bolder"
+                            :class="shift.is_approved ? ' q-ml-md' : ''"
                             style="font-size: 0.95em;"
                         >{{ $t('shared.misc.in') }}</span>
                     </template>
@@ -228,20 +229,21 @@
                     v-model="shift.end_time"
                     :standout="$q.dark.isActive ? 'bg-blue-grey-3' : 'bg-blue-grey-9'"
                     dense
-                    :borderless="(shift.is_approved || isTimesheetApproved)"
-                    :readonly="(shift.is_approved || isTimesheetApproved)"
+                    :borderless="(shift.is_approved && isTimesheetApproved)"
+                    :readonly="(shift.is_approved && isTimesheetApproved)"
                     type="time"
                     label-slot
-                    :label-color="(shift.is_approved || isTimesheetApproved) ? 'white' : 'accent'"
-                    :input-class="'text-weight-medium ' + (shift.id === -2 ? 'text-white ' : ' ') + ((shift.is_approved || isTimesheetApproved) ? 'cursor-not-allowed text-white' : '')"
+                    :label-color="!shift.is_approved ? 'accent' : 'white'"
+                    :input-class="'text-weight-medium ' + (shift.id === -2 ? 'text-white ' : ' ') + (shift.is_approved ? 'text-white cursor-not-allowed q-px-sm' : '')"
                     input-style="font-size: 1.2em;"
                     class="col rounded-5 bg-dark"
-                    :class="(shift.id === -2 ? 'bg-negative ' : ' ') + (ui_store.is_mobile_mode ? 'q-ml-xs ' : 'q-mx-xs ') + ((shift.is_approved || isTimesheetApproved) ? 'cursor-not-allowed q-px-xs transparent inset-shadow' : '')"
+                    :class="(shift.id === -2 ? 'bg-negative ' : ' ') + (ui_store.is_mobile_mode ? 'q-mr-xs ' : 'q-mx-xs ') + (shift.is_approved ? 'cursor-not-allowed q-px-xs transparent inset-shadow' : (isTimesheetApproved ? 'inset-shadow' : ''))"
                     :style="shift.is_approved ? 'background-color: #0a7d32 !important;' : ''"
                 >
                     <template #label>
                         <span
                             class="text-weight-bolder"
+                            :class="shift.is_approved ? ' q-ml-md' : ''"
                             style="font-size: 0.95em;"
                         >{{ $t('shared.misc.out') }}</span>
                     </template>
@@ -325,7 +327,14 @@
                         class="col"
                         :class="shift.is_approved ? 'invisible' : ''"
                         @click="$emit('requestDelete')"
-                    />
+                    >
+                        <q-badge 
+                            v-if="!shift.is_approved"
+                            color="white"
+                            class="absolute"
+                            style="z-index: -1;"
+                        />
+                    </q-btn>
                 </div>
             </div>
         </div>
diff --git a/src/modules/timesheets/components/shift-list.vue b/src/modules/timesheets/components/shift-list.vue
index df65ca0..e700eb6 100644
--- a/src/modules/timesheets/components/shift-list.vue
+++ b/src/modules/timesheets/components/shift-list.vue
@@ -31,7 +31,6 @@
             const day = timesheet_store.timesheets[timesheet_index]!.days[day_index]!;
             const shifts_without_deleted_shift = day.shifts.filter(shift => shift.id !== 0);
             day.shifts = shifts_without_deleted_shift;
-            console.log("day's shifts after cleanup: ", day.shifts);
         }
     }
 
@@ -44,7 +43,6 @@
 <template>
     <div
         :class="$q.screen.lt.md ? 'column full-width' : 'row'"
-        :style="$q.screen.lt.md ? 'width: 90vw !important;' : ''"
     >
         <div
             v-for="timesheet, timesheet_index in timesheet_store.timesheets"
@@ -73,7 +71,7 @@
 
                             <q-card-section
                                 class="text-weight-bolder text-uppercase text-h6 q-py-xs"
-                                :class="(getDayApproval(day) || timesheet.is_approved) ? 'bg-dark text-white' : 'bg-primary text-white'"
+                                :class="(getDayApproval(day) || timesheet.is_approved) ? 'bg-accent text-white' : 'bg-primary text-white'"
                                 style="line-height: 1em;"
                             >
                                 <span> {{ $d(extractDate(day.date, 'YYYY-MM-DD'), {
diff --git a/src/modules/timesheets/components/timesheet-wrapper.vue b/src/modules/timesheets/components/timesheet-wrapper.vue
index 6e83613..fee19f0 100644
--- a/src/modules/timesheets/components/timesheet-wrapper.vue
+++ b/src/modules/timesheets/components/timesheet-wrapper.vue
@@ -6,79 +6,63 @@
     import ExpenseDialog from 'src/modules/timesheets/components/expense-dialog.vue';
     import PayPeriodNavigator from 'src/modules/shared/components/pay-period-navigator.vue';
     import TimesheetErrorWidget from 'src/modules/timesheets/components/timesheet-error-widget.vue';
+    import LoadingOverlay from 'src/modules/shared/components/loading-overlay.vue';
     import { useTimesheetStore } from 'src/stores/timesheet-store';
     import { useTimesheetApi } from 'src/modules/timesheets/composables/use-timesheet-api';
     import { useExpensesStore } from 'src/stores/expense-store';
-    import { provide } from 'vue';
     import { useShiftApi } from 'src/modules/timesheets/composables/use-shift-api';
 
-    const { open } = useExpensesStore();
-    const shift_api = useShiftApi();
-
-    const { employeeEmail, dense = false } = defineProps<{
-        employeeEmail: string;
-        dense?: boolean;
-    }>();
-
+    const expenses_store = useExpensesStore();
     const timesheet_store = useTimesheetStore();
     const timesheet_api = useTimesheetApi();
+    const shift_api = useShiftApi();
 
-    provide('employeeEmail', employeeEmail);
+    const { mode = 'normal' } = defineProps<{
+        mode?: 'approval' | 'normal';
+    }>();
 </script>
 
 <template>
-    <div class="column flex-center full-width">
-
-        <q-dialog
-            v-model="timesheet_store.is_loading"
-            transition-show="jump-down"
-            transition-hide="jump-down"
-        >
-            <q-card class="q-pa-xl rounded-200 bg-white frosted-glass">
-                <q-spinner-radio
-                    color="accent"
-                    size="20vh"
-                />
-            </q-card>
-        </q-dialog>
+    <div
+        class="column flex-center full-width"
+        :class="mode === 'approval' ? 'bg-dark q-px-sm q-pb-sm q-mb-md rounded-10 shadow-10' : ''"
+    >
+        <LoadingOverlay v-model="timesheet_store.is_loading" />
 
         <q-card
             flat
             class="transparent full-width"
         >
             <q-card-section
-                v-if="!dense"
                 :horizontal="$q.screen.gt.sm"
                 class="q-px-md items-center q-mb-md"
                 :class="$q.screen.lt.md ? 'column' : ''"
             >
                 <!-- navigation btn -->
                 <PayPeriodNavigator
-                    v-if="!dense"
-                    @date-selected="timesheet_api.getTimesheetsByDate(employeeEmail)"
-                    @pressed-previous-button="timesheet_api.getTimesheetsByCurrentPayPeriod(employeeEmail)"
-                    @pressed-next-button="timesheet_api.getTimesheetsByCurrentPayPeriod(employeeEmail)"
+                    v-if="mode === 'normal'"
+                    @date-selected="date_value => timesheet_api.getTimesheetsByDate(date_value)"
+                    @pressed-previous-button="timesheet_api.getTimesheetsByCurrentPayPeriod"
+                    @pressed-next-button="timesheet_api.getTimesheetsByCurrentPayPeriod"
                 />
 
                 <!-- mobile expenses button -->
                 <q-btn
-                    v-if="$q.screen.lt.md"
+                    v-if="$q.screen.lt.md && mode === 'normal'"
                     push
                     rounded
                     color="accent"
                     icon="receipt_long"
                     :label="$t('timesheet.expense.open_btn')"
                     class="q-mt-sm"
-                    @click="open"
+                    @click="expenses_store.open"
                 />
 
-                <!-- shift's colored legend -->
-                <!-- <ShiftListLegend :is-loading="false" /> -->
-
                 <q-space />
+
                 <!-- save timesheet changes button -->
                 <q-btn
-                    v-if="$q.screen.gt.sm"
+                    v-if="mode === 'normal'"
                     push
                     rounded
                     :disable="timesheet_store.is_loading"
@@ -91,13 +75,13 @@
 
                 <!-- desktop expenses button -->
                 <q-btn
-                    v-if="$q.screen.gt.sm"
+                    v-if="mode === 'normal'"
                     push
                     rounded
                     color="accent"
                     icon="receipt_long"
                     :label="$t('timesheet.expense.open_btn')"
-                    @click="open"
+                    @click="expenses_store.open"
                 />
 
             </q-card-section>
@@ -106,7 +90,25 @@
                 <TimesheetErrorWidget />
             </q-card-section>
 
-            <ShiftList :dense="dense" />
+            <ShiftList :mode="mode" />
+
+            <q-card-section
+                horizontal
+                class="q-my-md"
+            >
+                <q-space />
+                <q-btn
+                    v-if="mode === 'approval'"
+                    push
+                    rounded
+                    :disable="timesheet_store.is_loading"
+                    color="accent"
+                    icon="upload"
+                    :label="$t('shared.label.save')"
+                    class="q-mr-md"
+                    @click="shift_api.saveShiftChanges"
+                />
+            </q-card-section>
         </q-card>
         <ExpenseDialog />
     </div>
diff --git a/src/modules/timesheets/composables/use-expense-api.ts b/src/modules/timesheets/composables/use-expense-api.ts
index da338c5..877e84f 100644
--- a/src/modules/timesheets/composables/use-expense-api.ts
+++ b/src/modules/timesheets/composables/use-expense-api.ts
@@ -10,14 +10,14 @@ export const useExpensesApi = () => {
     const upsertExpense = async (expense: Expense): Promise<void> => {
         const success = await expenses_store.upsertExpense(expense);
         if (success) {
-            timesheet_store.getTimesheetsByEmployeeEmail();
+            timesheet_store.getTimesheetsByOptionalEmployeeEmail();
         }   
     };
 
     const deleteExpenseById = async (expense_id: number): Promise<void> => {
         const success = await expenses_store.deleteExpenseById(expense_id);
         if (success) {
-            timesheet_store.getTimesheetsByEmployeeEmail();
+            timesheet_store.getTimesheetsByOptionalEmployeeEmail();
         }   
     };
 
diff --git a/src/modules/timesheets/composables/use-shift-api.ts b/src/modules/timesheets/composables/use-shift-api.ts
index bb41d22..9e06cbc 100644
--- a/src/modules/timesheets/composables/use-shift-api.ts
+++ b/src/modules/timesheets/composables/use-shift-api.ts
@@ -12,7 +12,7 @@ export const useShiftApi = () => {
         const success = await shift_store.deleteShiftById(shift_id);
 
         if (success) {
-            await timesheet_store.getTimesheetsByEmployeeEmail(auth_store.user?.email ?? '');
+            await timesheet_store.getTimesheetsByOptionalEmployeeEmail(auth_store.user?.email ?? '');
         }
 
         timesheet_store.is_loading = false;
@@ -25,7 +25,7 @@ export const useShiftApi = () => {
         const update_success = await shift_store.updateShifts();
 
         if (create_success || update_success){
-            await timesheet_store.getTimesheetsByEmployeeEmail(auth_store.user?.email ?? '');
+            await timesheet_store.getTimesheetsByOptionalEmployeeEmail(auth_store.user?.email ?? '');
         }
 
         timesheet_store.is_loading = false;
diff --git a/src/modules/timesheets/composables/use-timesheet-api.ts b/src/modules/timesheets/composables/use-timesheet-api.ts
index 967443e..1239622 100644
--- a/src/modules/timesheets/composables/use-timesheet-api.ts
+++ b/src/modules/timesheets/composables/use-timesheet-api.ts
@@ -1,16 +1,14 @@
-import { useAuthStore } from "src/stores/auth-store";
 import { useTimesheetStore } from "src/stores/timesheet-store"
 
 export const useTimesheetApi = () => {
     const timesheet_store = useTimesheetStore();
-    const auth_store = useAuthStore();
 
     const getTimesheetsByDate = async (date_string: string, employee_email?: string) => {
         timesheet_store.is_loading = true;
         const success = await timesheet_store.getPayPeriodByDateOrYearAndNumber(date_string);
 
         if (success) {
-            await timesheet_store.getTimesheetsByEmployeeEmail(employee_email ?? auth_store.user?.email ?? '');
+            await timesheet_store.getTimesheetsByOptionalEmployeeEmail(employee_email);
             timesheet_store.is_loading = false;
         }
 
@@ -21,10 +19,10 @@ export const useTimesheetApi = () => {
         if (timesheet_store.pay_period === undefined) return false;
         
         timesheet_store.is_loading = true;
-        const success = await timesheet_store.getPayPeriodByDateOrYearAndNumber(timesheet_store.pay_period.pay_year, timesheet_store.pay_period.pay_period_no );
+        const success = await timesheet_store.getPayPeriodByDateOrYearAndNumber();
 
         if (success) {
-            await timesheet_store.getTimesheetsByEmployeeEmail(employee_email ?? auth_store.user?.email ?? '');
+            await timesheet_store.getTimesheetsByOptionalEmployeeEmail(employee_email);
             timesheet_store.is_loading = false;
         }
 
diff --git a/src/modules/timesheets/models/timesheet.models.ts b/src/modules/timesheets/models/timesheet.models.ts
index 2a79e48..9e06725 100644
--- a/src/modules/timesheets/models/timesheet.models.ts
+++ b/src/modules/timesheets/models/timesheet.models.ts
@@ -5,7 +5,7 @@ export const TIME_FORMAT_PATTERN = /^(\d{2}:\d{2})?$/;
 export const DATE_FORMAT_PATTERN = /^\d{4}-\d{2}-\d{2}$/;
 
 export interface TimesheetResponse {
-    employee_full_name: string;
+    employee_fullname: string;
     timesheets: Timesheet[];
 }
 
@@ -38,6 +38,8 @@ export interface TotalHours {
 
 export interface TotalExpenses {
     expenses: number;
+    per_diem: number;
+    on_call: number;
     mileage: number;
 }
 
diff --git a/src/modules/timesheets/services/timesheet-service.ts b/src/modules/timesheets/services/timesheet-service.ts
index 5810788..1d1cb0f 100644
--- a/src/modules/timesheets/services/timesheet-service.ts
+++ b/src/modules/timesheets/services/timesheet-service.ts
@@ -19,8 +19,13 @@ export const timesheetService = {
         return response.data;
     },
 
-    getTimesheetsByPayPeriod: async (year: number, period_number: number): Promise<TimesheetResponse> => {
-        const response = await api.get(`timesheets/${year}/${period_number}`);
-        return response.data.data;
+    getTimesheetsByPayPeriodAndOptionalEmail: async (year: number, period_number: number, employee_email?: string): Promise<TimesheetResponse> => {
+        if (employee_email !== undefined) {
+            const response = await api.get<{success: boolean, data: TimesheetResponse, error? : string}>(`timesheets/${year}/${period_number}?employee_email=${employee_email}`);
+            return response.data.data;
+        } else {
+            const response = await api.get<{success: boolean, data: TimesheetResponse, error? : string}>(`timesheets/${year}/${period_number}`);
+            return response.data.data;
+        }
     },
 };
\ No newline at end of file
diff --git a/src/pages/login-page.vue b/src/pages/login-page.vue
index d77229c..49ffaa1 100644
--- a/src/pages/login-page.vue
+++ b/src/pages/login-page.vue
@@ -5,10 +5,12 @@
 <template>
     <q-layout view="hHh lpR fFf">
         <q-page-container class="bg-secondary">
-            <q-page class="column">
-                <q-img src="src/assets/village.png" fit="contain" class="col absolute-bottom-right" style="opacity: 50%;" />
-                <transition appear slow enter-active-class="animated zoomIn" leave-active-class="animated zoomOut" class="col absolute-center">
-                    <LoginConnectionPanel />
+            <q-page class="row">
+                <q-img src="src/assets/village.png" fit="cover" :class="$q.screen.lt.md ? 'absolute-bottom' : 'absolute-right'" />
+                <transition appear slow enter-active-class="animated zoomIn" leave-active-class="animated zoomOut" class="col-xs-10 absolute-center">
+                    <div class="col-sm-10 col-md-auto">
+                        <LoginConnectionPanel />
+                    </div>
                 </transition>
             </q-page>
         </q-page-container>
diff --git a/src/pages/timesheet-approval-page.vue b/src/pages/timesheet-approval-page.vue
index fcc3fa4..562a618 100644
--- a/src/pages/timesheet-approval-page.vue
+++ b/src/pages/timesheet-approval-page.vue
@@ -1,4 +1,8 @@
-<script setup lang="ts">
+<script
+    setup
+    lang="ts"
+>
+    /* eslint-disable */
     import { onMounted, ref } from 'vue';
     import { date } from 'quasar';
     import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
@@ -6,41 +10,76 @@
     import PageHeaderTemplate from 'src/modules/shared/components/page-header-template.vue';
     import OverviewList from 'src/modules/timesheet-approval/components/overview-list.vue';
     import DetailsDialog from 'src/modules/timesheet-approval/components/details-dialog.vue';
+    import QTableFilters from 'src/modules/shared/components/q-table-filters.vue';
+    import PayPeriodNavigator from 'src/modules/shared/components/pay-period-navigator.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.getPayPeriodOverviewsByDateOrYearAndNumber(date.formatDate( new Date(), 'YYYY-MM-DD'));
+    onMounted(async () => {
+        await timesheet_approval_api.getTimesheetOverviewsByDate(date.formatDate(new Date(), 'YYYY-MM-DD'));
     });
 </script>
 
 <template>
-    <q-page 
-        padding 
-        class="q-pa-md bg-secondary "
+    <q-page
+        padding
+        class="column q-pa-md bg-secondary"
     >
-        <PageHeaderTemplate 
+        <PageHeaderTemplate
             title="timesheet_approvals.page_title"
             :start-date="timesheet_store.pay_period?.period_start ?? ''"
             :end-date="timesheet_store.pay_period?.period_end ?? ''"
+            class="col-auto"
         />
-        
+
         <DetailsDialog
-            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"
             :timesheets="timesheet_store.timesheets"
         />
 
-        <OverviewList @clickedDetailsButton="onDetailsClicked"/>
+        <div
+            class="col-auto full-width q-px-lg"
+            :class="($q.screen.lt.md ? 'column flex-center' : 'row') + (timesheet_store.is_approval_grid_mode ? ' q-mb-sm' : ' q-mb-md')"
+        >
+            <PayPeriodNavigator
+                @date-selected="timesheet_approval_api.getTimesheetOverviews"
+                @pressed-next-button="timesheet_approval_api.getTimesheetOverviews"
+                @pressed-previous-button="timesheet_approval_api.getTimesheetOverviews"
+                :class="$q.screen.lt.md ? 'q-mb-sm' : ''"
+            />
+
+            <q-space />
+
+            <q-btn-toggle
+                v-model="timesheet_store.is_approval_grid_mode"
+                push
+                rounded
+                color="white"
+                text-color="accent"
+                toggle-color="accent"
+                :class="$q.screen.lt.md ? 'q-mb-sm' : 'q-mr-md'"
+                :options="[
+                    { icon: 'grid_view', value: true },
+                    { icon: 'view_list', value: false },
+                ]"
+            />
+
+            <div class="col-auto row no-wrap flex-center" :class="$q.screen.lt.md  ? 'q-mb-md' : ''">
+                <q-btn-dropdown
+                    push
+                    rounded
+                    icon="filter_alt"
+                    color="accent"
+                    :label="$q.screen.lt.md ? '' : $t('shared.label.filter')"
+                    class="col-auto q-mr-sm"
+                />
+
+                <QTableFilters v-model:search="timesheet_store.search_filter" />
+            </div>
+        </div>
+
+        <OverviewList class="col" />
     </q-page>
 </template>
\ No newline at end of file
diff --git a/src/stores/expense-store.ts b/src/stores/expense-store.ts
index 8246fc6..0f31f0b 100644
--- a/src/stores/expense-store.ts
+++ b/src/stores/expense-store.ts
@@ -45,7 +45,6 @@ export const useExpensesStore = defineStore('expenses', () => {
 
     const deleteExpenseById = async (expense_id: number): Promise<boolean> => {
         const data = await ExpenseService.deleteExpenseById(expense_id);
-        console.log('data received from expense deletion: ', data);
         return data.success;
     }
 
diff --git a/src/stores/timesheet-store.ts b/src/stores/timesheet-store.ts
index 07a746d..04f5833 100644
--- a/src/stores/timesheet-store.ts
+++ b/src/stores/timesheet-store.ts
@@ -1,6 +1,5 @@
 import { ref } from 'vue';
 import { defineStore } from 'pinia';
-import { useAuthStore } from 'src/stores/auth-store';
 import { unwrapAndClone } from 'src/utils/unwrap-and-clone';
 import { timesheetApprovalService } from 'src/modules/timesheet-approval/services/timesheet-approval-service';
 import { timesheetService } from 'src/modules/timesheets/services/timesheet-service';
@@ -11,24 +10,27 @@ import type { TimesheetApprovalCSVReportFilters } from 'src/modules/timesheet-ap
 
 
 export const useTimesheetStore = defineStore('timesheet', () => {
-    const auth_store = useAuthStore();
     const is_loading = ref<boolean>(false);
     const pay_period = ref<PayPeriod>();
-    const pay_period_overviews = ref<TimesheetOverview[]>([]);
-    const current_pay_period_overview = ref<TimesheetOverview>();
     const timesheets = ref<Timesheet[]>([]);
     const initial_timesheets = ref<Timesheet[]>([]);
+    
+    const pay_period_overviews = ref<TimesheetOverview[]>([]);
+    
+    const is_details_dialog_open = ref(false);
+    const selected_employee_name = ref<string>();
+    const current_pay_period_overview = ref<TimesheetOverview>();
+    const search_filter = ref<string | number | null>('');
+    const is_approval_grid_mode = ref<boolean>(true);
     const pay_period_report = ref();
 
-    const getPayPeriodByDateOrYearAndNumber = async (date_or_year: string | number, period_number?: number): Promise<boolean> => {
+    const getPayPeriodByDateOrYearAndNumber = async (date?: string): Promise<boolean> => {
         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 = undefined;
+            if (date !== undefined) {
+                pay_period.value = await timesheetService.getPayPeriodByDate(date);
+            } else if (pay_period.value !== undefined) {
+                pay_period.value = await timesheetService.getPayPeriodByYearAndPeriodNumber(pay_period.value.pay_year, pay_period.value.pay_period_no);
+            } else return false;
 
             return true;
         } catch (error) {
@@ -41,11 +43,16 @@ export const useTimesheetStore = defineStore('timesheet', () => {
         }
     };
 
-    const getTimesheetOverviewsByPayPeriod = async (pay_year: number, period_number: number, supervisor_email?: string): Promise<boolean> => {
+    const getTimesheetOverviews = async (): Promise<boolean> => {
         is_loading.value = true;
 
         try {
-            const response = await timesheetApprovalService.getPayPeriodOverviewsBySupervisorEmail(pay_year, period_number, supervisor_email ?? auth_store.user?.email ?? '');
+            if (pay_period.value === undefined) {
+                is_loading.value = false;
+                return false;
+            }
+
+            const response = await timesheetApprovalService.getPayPeriodOverviews(pay_period.value.pay_year, pay_period.value.pay_period_no);
             pay_period_overviews.value = response.employees_overview;
             is_loading.value = false;
 
@@ -60,15 +67,19 @@ export const useTimesheetStore = defineStore('timesheet', () => {
         }
     };
 
-    const getTimesheetsByEmployeeEmail = async (employee_email?: string) => {
-        is_loading.value = true;
-
+    const getTimesheetsByOptionalEmployeeEmail = async (employee_email?: string) => {
         if (pay_period.value === undefined) return;
+        is_loading.value = true;
+        let response;
+
         try {
             if (employee_email) {
-                console.log('email: ', employee_email);
+                response = await timesheetService.getTimesheetsByPayPeriodAndOptionalEmail(pay_period.value.pay_year, pay_period.value.pay_period_no, employee_email);
+            } else {
+                response = await timesheetService.getTimesheetsByPayPeriodAndOptionalEmail(pay_period.value.pay_year, pay_period.value.pay_period_no);
             }
-            const response = await timesheetService.getTimesheetsByPayPeriod(pay_period.value.pay_year, pay_period.value.pay_period_no);
+
+            selected_employee_name.value = response.employee_fullname;
             timesheets.value = response.timesheets;
             initial_timesheets.value = unwrapAndClone(timesheets.value);
             is_loading.value = false;
@@ -99,14 +110,18 @@ export const useTimesheetStore = defineStore('timesheet', () => {
 
     return {
         is_loading,
+        is_approval_grid_mode,
+        is_details_dialog_open,
+        search_filter,
         pay_period,
         pay_period_overviews,
         current_pay_period_overview,
+        selected_employee_name,
         timesheets,
         initial_timesheets,
         getPayPeriodByDateOrYearAndNumber,
-        getTimesheetOverviewsByPayPeriod,
-        getTimesheetsByEmployeeEmail,
+        getTimesheetOverviews,
+        getTimesheetsByOptionalEmployeeEmail,
         getPayPeriodReportByYearAndPeriodNumber,
     };
 });
\ No newline at end of file