diff --git a/src/assets/facturation_thumbnail.png b/src/assets/facturation_thumbnail.png
new file mode 100644
index 0000000..b312a2a
Binary files /dev/null and b/src/assets/facturation_thumbnail.png differ
diff --git a/src/assets/map_targo_banner.png b/src/assets/map_targo_banner.png
new file mode 100644
index 0000000..3077661
Binary files /dev/null and b/src/assets/map_targo_banner.png differ
diff --git a/src/assets/targo_building.png b/src/assets/targo_building.png
new file mode 100644
index 0000000..42e9927
Binary files /dev/null and b/src/assets/targo_building.png differ
diff --git a/src/assets/targo_help_banner.png b/src/assets/targo_help_banner.png
new file mode 100644
index 0000000..a55cf4d
Binary files /dev/null and b/src/assets/targo_help_banner.png differ
diff --git a/src/i18n/en-ca/index.ts b/src/i18n/en-ca/index.ts
index e15536a..acb390b 100644
--- a/src/i18n/en-ca/index.ts
+++ b/src/i18n/en-ca/index.ts
@@ -1,6 +1,11 @@
 export default {
     dashboard: {
-        welcome: "Welcome to the Targo App!",
+        carousel: {
+            welcome_title: "Welcome to the new Targo Application!",
+            welcome_message: "Development is complete and the application is live! Things have remained mostly the same, but with a new coat of paint, a more streamlined user experience, and most importantly, drastically improved security and optimization!",
+            help_title: "We have a help page!",
+            help_message: "We did our best to keep the app intuitive with as few clicks and changes as possible, but it's not always perfect! We made this page to explain every part of the app if you any of it ever feels confusing.",
+        },
     },
     help: {
         label: "Centre d'aide",
@@ -339,6 +344,8 @@ export default {
             verified: "approved",
             unverified: "pending",
             inactive: "inactive",
+            filter_active: "show only active employees",
+            filter_team: "",
         },
         tooltip: {
             button_detailed_view: "detailed view",
diff --git a/src/i18n/fr-ca/index.ts b/src/i18n/fr-ca/index.ts
index 61e9e2a..db605e0 100644
--- a/src/i18n/fr-ca/index.ts
+++ b/src/i18n/fr-ca/index.ts
@@ -1,6 +1,11 @@
 export default {
     dashboard: {
-        welcome: "Bienvenue dans l'application Targo!",
+        carousel: {
+            welcome_title: "Bienvenue dans la nouvelle application Targo!",
+            welcome_message: "Le développement est terminé et l'application est officiellement en ligne! Les fonctionnalités demeurent grandement intactes comparé à l'ancienne version, mise à part une nouvelle couche de peinture, une expérience utilisateur plus intuitive et surtout une sécurité et optimization drastiquement amélioriés!",
+            help_title: "Nous avons une page d'aide!",
+            help_message: "Nous avons fait notre possible pour rendre l'application plus intuitive et facile d'accès en suivant les tendances modernes, mais il y a toujours place à l'amélioration! La page d'aide est là pour vous si jamais nous avons raté la cible et qu'une partie du site semble nébuleux.",
+        },
     },
     help: {
         label: "Centre d'aide",
@@ -107,7 +112,7 @@ export default {
         },
     },
 
-    error :{
+    error: {
         not_found_header: "page introuvable",
         not_found_description: "Vous avez possiblement entré une mauvaise addresse URL, ou vous n'avez pas accès à cette section du site",
         go_back: "retour en arrière",
@@ -340,6 +345,8 @@ export default {
             verified: "approuvé",
             unverified: "à vérifier",
             inactive: "inactif",
+            filter_active: "",
+            filter_team: "",
         },
         tooltip: {
             button_detailed_view: "vue détaillée",
diff --git a/src/modules/timesheet-approval/components/overview-list-filters.vue b/src/modules/timesheet-approval/components/overview-list-filters.vue
index b4adcc4..d51c3d0 100644
--- a/src/modules/timesheet-approval/components/overview-list-filters.vue
+++ b/src/modules/timesheet-approval/components/overview-list-filters.vue
@@ -8,28 +8,26 @@
 </script>
 
 <template>
-    <div class="column text-weight-medium">
-        <q-separator
-            color="accent"
-            size="5px"
-            class="col-auto"
-        />
-
+    <div class="column bg-primary text-uppercase">
         <div class="col row">
             <q-checkbox
                 v-model="filters.is_showing_inactive"
+                keep-color
                 size="lg"
                 color="accent"
                 label="show inactive"
                 class="col"
+                :class="filters.is_showing_inactive ? 'text-accent text-weight-bolder' : 'text-white text-weight-medium'"
             />
             <q-checkbox
                 v-model="filters.is_showing_team_only"
+                keep-color
                 size="lg"
                 val="team"
                 color="accent"
                 label="show team only"
                 class="col"
+                :class="filters.is_showing_team_only ? 'text-accent text-weight-bolder' : 'text-white text-weight-medium'"
             />
         </div>
     </div>
diff --git a/src/modules/timesheet-approval/components/overview-list-item.vue b/src/modules/timesheet-approval/components/overview-list-item.vue
index 55599e5..5e9201b 100644
--- a/src/modules/timesheet-approval/components/overview-list-item.vue
+++ b/src/modules/timesheet-approval/components/overview-list-item.vue
@@ -2,31 +2,20 @@
     setup
     lang="ts"
 >
-    import type { TimesheetOverview } from 'src/modules/timesheet-approval/models/timesheet-overview.models';
+    import type { TimesheetApprovalOverview } from 'src/modules/timesheet-approval/models/timesheet-overview.models';
+import { getHoursMinutesStringFromHoursFloat, getMinutes } from 'src/utils/date-and-time-utils';
 
     const modelApproval = defineModel<boolean>();
 
     const { row, index = 0 } = defineProps<{
-        row: TimesheetOverview;
+        row: TimesheetApprovalOverview;
         index?: number;
     }>();
 
     const emit = defineEmits<{
-        'clickDetails': [overview: TimesheetOverview];
+        'clickDetails': [overview: TimesheetApprovalOverview];
         'clickApprovalAll' : [is_approved: boolean];
     }>();
-
-    const getMinutes = (hours: number) => {
-        const minutes_percent = hours - Math.floor(hours);
-        const minutes = Math.round(minutes_percent * 60);
-        return minutes > 1 ? minutes.toString() : '0';
-    }
-
-    const getHoursMinutesString = (hours: number): string => {
-        const flat_hours = Math.floor(hours);
-        const minutes = Math.round((hours - flat_hours) * 60);
-        return `${flat_hours}h ${minutes > 1 ? minutes : ''}`
-    }
 </script>
 
 <template>
@@ -37,7 +26,7 @@
         >
             <q-card
                 class="rounded-10 shadow-5"
-                :style="`animation-delay: ${index / 15}s; opacity: ${row.is_active ? '1' : '0.5'}; transform: scale(${row.is_active ? '1' : '0.9'})`"
+                :style="`animation-delay: ${index / 15}s; opacity: ${row.is_active ? '1' : '0.75'}; transform: scale(${row.is_active ? '1' : '0.9'})`"
             >
                 <!-- Card header with employee name and details button-->
                 <q-card-section
@@ -49,9 +38,9 @@
                             class="text-h5 text-uppercase text-weight-medium q-mr-xs"
                             :class="row.is_active ? 'text-accent' : 'text-negative'"
                         >
-                            {{ row.employee_name.split(' ')[0] }}
+                            {{ row.employee_first_name }}
                         </span>
-                        <span class="text-uppercase text-weight-light">{{ row.employee_name.split(' ')[1] }}</span>
+                        <span class="text-uppercase text-weight-light">{{ row.employee_last_name }}</span>
                     </div>
 
                     <!-- Buttons to view detailed shifts or view employee timesheet -->
@@ -95,7 +84,7 @@
                                 <span
                                     class="text-weight-bolder text-h3 q-py-none"
                                     :class="row.regular_hours > 80 || !row.is_active ? 'text-negative' : ''"
-                                > {{ getHoursMinutesString(row.regular_hours) }} </span>
+                                > {{ getHoursMinutesStringFromHoursFloat(row.regular_hours) }} </span>
                                 <q-separator class="q-mr-sm" />
                             </div>
 
@@ -116,7 +105,7 @@
                                     <span
                                         class="text-weight-bolder q-pa-none q-mb-xs"
                                         style="font-size: 1.2em; line-height: 1em;"
-                                    > {{ getHoursMinutesString(hour_type) }} </span>
+                                    > {{ getHoursMinutesStringFromHoursFloat(hour_type) }} </span>
                                 </div>
                             </div>
                         </div>
diff --git a/src/modules/timesheet-approval/components/overview-list.vue b/src/modules/timesheet-approval/components/overview-list.vue
index 08dcedf..864e7ae 100644
--- a/src/modules/timesheet-approval/components/overview-list.vue
+++ b/src/modules/timesheet-approval/components/overview-list.vue
@@ -10,24 +10,31 @@
     import OverviewListFilters from 'src/modules/timesheet-approval/components/overview-list-filters.vue';
 
     import { computed, ref } from 'vue';
+    import { useAuthStore } from 'src/stores/auth-store';
     import { useTimesheetStore } from 'src/stores/timesheet-store';
     import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
-    import { overview_column_names, pay_period_overview_columns, PayPeriodOverviewFilters, type TimesheetOverview } from 'src/modules/timesheet-approval/models/timesheet-overview.models';
+    import { overview_column_names, OverviewColumns, pay_period_overview_columns, PayPeriodOverviewFilters, type TimesheetApprovalOverview } from 'src/modules/timesheet-approval/models/timesheet-overview.models';
+    import { getHoursMinutesStringFromHoursFloat } from 'src/utils/date-and-time-utils';
 
 
+    const auth_store = useAuthStore();
     const timesheet_store = useTimesheetStore();
     const timesheet_approval_api = useTimesheetApprovalApi();
 
-    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 TIME_COLUMNS: OverviewColumns[] = ['REGULAR', 'EVENING', 'EMERGENCY', 'OVERTIME', 'HOLIDAY', 'VACATION'];
+    const VISIBLE_COLUMNS = ref<OverviewColumns[]>([
+        'employee_first_name',
+        'REGULAR',
+        'EVENING',
+        'EMERGENCY',
+        'OVERTIME',
+        'HOLIDAY',
+        'VACATION',
+        'expenses',
+        'mileage',
+        'is_approved',
     ]);
+
     const is_showing_filters = ref(false);
     const search_string = ref('');
 
@@ -39,7 +46,7 @@
         name_search_string: search_string.value,
     });
 
-    const onClickedDetails = async (row: TimesheetOverview) => {
+    const onClickedDetails = async (row: TimesheetApprovalOverview) => {
         timesheet_store.current_pay_period_overview = row;
         await timesheet_store.getTimesheetsByOptionalEmployeeEmail(row.email);
 
@@ -50,16 +57,23 @@
         await timesheet_approval_api.toggleTimesheetsApprovalByEmployeeEmail(email, is_approved);
     }
 
-    const filterEmployeeRows = (rows: readonly TimesheetOverview[], terms: PayPeriodOverviewFilters): TimesheetOverview[] => {
+    const filterEmployeeRows = (rows: readonly TimesheetApprovalOverview[], terms: PayPeriodOverviewFilters): TimesheetApprovalOverview[] => {
         let result = [...rows];
 
         if (!terms.is_showing_inactive) {
             result = result.filter(row => row.is_active);
         }
 
-        // if (terms.name_search_string) {
-        //     result = result.filter(row => row.employee_name.includes(terms.name_search_string ?? ''));
-        // }
+        if (terms.is_showing_team_only) {
+            result = result.filter(row => row.supervisor !== null && row.supervisor.email === (auth_store.user ? auth_store.user.email : ''));
+        }
+
+        if (terms.name_search_string.length > 0) {
+            const search_words = terms.name_search_string.trim().split(' ');
+            search_words.map(word => result = result.filter(row =>
+                row.employee_first_name.includes(word ?? '') || row.employee_last_name.includes(word ?? '')
+            ));
+        }
 
         return result;
     };
@@ -68,206 +82,209 @@
 <template>
     <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"
+
+        <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"
+            :grid="timesheet_store.is_approval_grid_mode"
+            :dense="timesheet_store.is_approval_grid_mode"
+            hide-pagination
+            :pagination="{ sortBy: 'is_active' }"
+            :filter="overview_filters"
+            :filter-method="filterEmployeeRows"
+            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 hide-scrollbar"
+            :no-data-label="$t('shared.error.no_data_found')"
+            :no-results-label="$t('shared.error.no_search_results')"
+            :loading-label="$t('shared.label.loading')"
+            :style="$q.platform.is.mobile ? '' : 'max-height: 70vh;'"
         >
-            <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"
-                :grid="timesheet_store.is_approval_grid_mode"
-                :dense="timesheet_store.is_approval_grid_mode"
-                hide-pagination
-                :pagination="{ sortBy: 'is_active' }"
-                :filter="overview_filters"
-                :filter-method="filterEmployeeRows"
-                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 #top>
-                    <div class="column full-width">
+            <template #top>
+                <div class="column full-width">
+
+                    <div
+                        class="col-auto row items-start full-width q-px-lg"
+                        :class="$q.platform.is.mobile ? 'column flex-center' : 'row q-mt-md'"
+                    >
+                        <PayPeriodNavigator
+                            @date-selected="timesheet_approval_api.getTimesheetOverviews"
+                            @pressed-next-button="timesheet_approval_api.getTimesheetOverviews"
+                            @pressed-previous-button="timesheet_approval_api.getTimesheetOverviews"
+                            :class="$q.platform.is.mobile ? 'q-mb-sm' : ''"
+                            style="height: 40px;"
+                        />
+
+                        <q-space />
 
                         <div
-                            class="col-auto row items-start full-width q-px-lg"
-                            :class="($q.platform.is.mobile ? 'column flex-center' : 'row q-mt-md') + (timesheet_store.is_approval_grid_mode ? '' : ' q-mb-md')"
+                            class="col-auto row no-wrap items-start"
+                            :class="$q.platform.is.mobile ? '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.platform.is.mobile ? 'q-mb-sm' : ''"
+                            <q-btn-toggle
+                                v-model="timesheet_store.is_approval_grid_mode"
+                                push
+                                rounded
+                                color="white"
+                                text-color="accent"
+                                toggle-color="accent"
+                                class="col-auto"
+                                :class="$q.platform.is.mobile ? 'q-mb-sm' : 'q-mr-sm'"
+                                :options="[
+                                    { icon: 'grid_view', value: true },
+                                    { icon: 'view_list', value: false },
+                                ]"
                                 style="height: 40px;"
                             />
-    
-                            <q-space />
-    
-                            <div
-                                class="col-auto row no-wrap items-start"
-                                :class="$q.platform.is.mobile ? 'q-mb-md' : ''"
-                            >
-                                <q-btn-toggle
-                                    v-model="timesheet_store.is_approval_grid_mode"
-                                    push
-                                    rounded
-                                    color="white"
-                                    text-color="accent"
-                                    toggle-color="accent"
-                                    class="col-auto"
-                                    :class="$q.platform.is.mobile ? 'q-mb-sm' : 'q-mr-sm'"
-                                    :options="[
-                                        { icon: 'grid_view', value: true },
-                                        { icon: 'view_list', value: false },
-                                    ]"
-                                    style="height: 40px;"
-                                />
-    
-                                <q-btn
-                                    push
-                                    rounded
-                                    icon="download"
-                                    color="accent"
-                                    :label="$q.screen.lt.md ? '' : $t('shared.label.download')"
-                                    class="col-auto q-mr-sm"
-                                    style="height: 40px;"
-                                    @click="timesheet_store.is_report_dialog_open = true"
-                                />
-    
-                                <QTableFilters
-                                    v-model:search="search_string"
-                                    class="col-auto q-mb-xs"
-                                />
-    
-                                <q-btn
-                                    flat
-                                    icon="filter_alt"
-                                    color="white"
-                                    :label="$q.platform.is.mobile ? '' : $t('shared.label.filter')"
-                                    class="col q-ml-sm self-stretch bg-accent"
-                                    style="border-radius: 5px 5px 0 0;"
-                                    @click="is_showing_filters = !is_showing_filters"
-                                />
-                            </div>
-                        </div>
-    
-                        <q-slide-transition>
-                            <OverviewListFilters
-                                v-if="is_showing_filters"
-                                v-model:filters="overview_filters"
-                                class="q-mx-lg col-auto"
+
+                            <q-btn
+                                push
+                                rounded
+                                icon="download"
+                                color="accent"
+                                :label="$q.screen.lt.md ? '' : $t('shared.label.download')"
+                                class="col-auto q-mr-sm"
+                                style="height: 40px;"
+                                @click="timesheet_store.is_report_dialog_open = true"
                             />
-                        </q-slide-transition>
-    
-                        <q-separator
-                            color="accent"
-                            size="5px"
-                            class="q-mx-lg"
-                        />
+
+                            <QTableFilters
+                                v-model:search="search_string"
+                                class="col-auto q-mb-sm"
+                            />
+
+                            <q-btn
+                                flat
+                                icon="filter_alt"
+                                color="white"
+                                :label="$q.platform.is.mobile ? '' : $t('shared.label.filter')"
+                                class="col q-ml-sm self-stretch bg-primary"
+                                style="border-radius: 5px 5px 0 0;"
+                                @click="is_showing_filters = !is_showing_filters"
+                            />
+                        </div>
                     </div>
-                </template>
 
-                <template #header="props">
-                    <q-tr
-                        :props="props"
-                        class="bg-primary"
-                    >
-                        <q-th
-                            v-for="col in props.cols"
-                            :key="col.name"
-                            :props="props"
-                        >
-                            <span class="text-uppercase text-weight-bolder text-white">
-                                {{ $t(col.label) }}
-                            </span>
-                        </q-th>
-                    </q-tr>
-                </template>
+                    <q-slide-transition>
+                        <OverviewListFilters
+                            v-if="is_showing_filters"
+                            v-model:filters="overview_filters"
+                            class="q-mx-lg col-auto"
+                        />
+                    </q-slide-transition>
 
-                <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 "
-                                        :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="onClickedDetails"
-                        @click-approval-all="is_approved => onClickApproveAll(props.row.email, is_approved)"
+                    <q-separator
+                        color="primary"
+                        size="5px"
+                        class="q-mx-lg q-my-none q-pa-none"
                     />
-                </template>
+                </div>
+            </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 }}
+            <template #header="props">
+                <q-tr
+                    :props="props"
+                    class="bg-primary"
+                >
+                    <q-th
+                        v-for="col in props.cols"
+                        :key="col.name"
+                        :props="props"
+                    >
+                        <span class="text-uppercase text-weight-bolder text-white">
+                            {{ $t(col.label) }}
                         </span>
-                    </div>
-                </template>
-            </q-table>
-        </transition>
+                    </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 "
+                                    :class="props.value ? 'bg-accent' : ''"
+                                    @click.stop="onClickApproveAll(props.row.email, props.row.is_approved)"
+                                />
+                            </transition>
+
+                            <div v-else-if="props.col.name === 'employee_first_name'">
+                                <span class="text-h5 text-uppercase text-accent q-mr-xs">
+                                    {{ props.value }}
+                                </span>
+                                <span class="text-uppercase text-weight-light">
+                                    {{ props.row.employee_last_name }}
+                                </span>
+                            </div>
+
+                            <span
+                                v-else
+                                :class="props.col.name === overview_column_names.REGULAR && props.row.overtime > 0 ? 'text-negative text-weight-bolder' : 'text-weight-regular'"
+                            >
+                                {{ TIME_COLUMNS.includes(props.col.name) ?
+                                    getHoursMinutesStringFromHoursFloat(props.value) : props.value }}
+                            </span>
+                        </div>
+                    </transition>
+                </q-td>
+            </template>
+
+            <!-- Template for individual employee cards -->
+            <template #item="props: { row: TimesheetApprovalOverview, 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="onClickedDetails"
+                    @click-approval-all="is_approved => onClickApproveAll(props.row.email, is_approved)"
+                />
+            </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>
 
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 c623cc6..eec21e6 100644
--- a/src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts
+++ b/src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts
@@ -5,10 +5,10 @@ export const useTimesheetApprovalApi = () => {
     const timesheet_store = useTimesheetStore();
     const DATE_REGEX = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/;
 
-    const getTimesheetOverviews = async () => {
+    const getTimesheetOverviews = async (date?: string) => {
         timesheet_store.is_loading = true;
 
-        const success = await timesheet_store.getPayPeriodByDateOrYearAndNumber();
+        const success = await timesheet_store.getPayPeriodByDateOrYearAndNumber(date);
         if (success) await timesheet_store.getTimesheetOverviews();
 
         timesheet_store.is_loading = false;
diff --git a/src/modules/timesheet-approval/models/timesheet-overview.models.ts b/src/modules/timesheet-approval/models/timesheet-overview.models.ts
index 6e9225d..984f276 100644
--- a/src/modules/timesheet-approval/models/timesheet-overview.models.ts
+++ b/src/modules/timesheet-approval/models/timesheet-overview.models.ts
@@ -1,8 +1,14 @@
 import type { QTableColumn } from "quasar";
 
-export class TimesheetOverview {
+export class TimesheetApprovalOverview {
     email: string;
-    employee_name: string;
+    employee_first_name: string;
+    employee_last_name: string;
+    supervisor: {
+        first_name: string;
+        last_name: string;
+        email: string;
+    } | null;
     is_active: boolean;
     regular_hours: number;
     other_hours: {
@@ -20,7 +26,9 @@ export class TimesheetOverview {
 
     constructor() {
         this.email = '';
-        this.employee_name = 'John Doe';
+        this.employee_first_name = 'Unknown';
+        this.employee_last_name = 'Unknown';
+        this.supervisor = null;
         this.is_active = true;
         this.regular_hours = 0;
         this.other_hours = {
@@ -45,18 +53,21 @@ export interface PayPeriodOverviewResponse {
   period_end: string;
   payday: string;
   label: string;
-  employees_overview: TimesheetOverview[];
+  employees_overview: TimesheetApprovalOverview[];
 }
 
 export interface PayPeriodOverviewFilters {
     is_showing_inactive: boolean;
     is_showing_team_only: boolean;
     supervisors: string[];
-    name_search_string: string | number | null;
+    name_search_string: string;
 }
 
+export type OverviewColumns = 'employee_first_name' | 'employee_last_name' | 'email' | 'REGULAR' | 'EVENING' | 'EMERGENCY' | 'SICK' | 'HOLIDAY' | 'VACATION' | 'OVERTIME' | 'expenses' | 'mileage' | 'is_approved' | 'is_active'
+
 export const overview_column_names = {
-    EMPLOYEE_NAME: 'employee_name',
+    FIRST_NAME: 'employee_first_name',
+    LAST_NAME: 'employee_last_name',
     EMAIL: 'email',
     REGULAR: 'REGULAR',
     EVENING: 'EVENING',
@@ -73,18 +84,25 @@ export const overview_column_names = {
 
 export const pay_period_overview_columns: QTableColumn[] = [
     { 
-        name: overview_column_names.EMPLOYEE_NAME, 
+        name: overview_column_names.FIRST_NAME, 
         label: 'timesheet_approvals.table.full_name', 
         align: 'left', 
-        field: 'employee_name',
+        field: overview_column_names.FIRST_NAME,
         sortable: true,
         required: true, 
     },
+    { 
+        name: overview_column_names.LAST_NAME, 
+        label: 'timesheet_approvals.table.full_name', 
+        align: 'left', 
+        field: 'employee_last_name',
+        sortable: true,
+    },
     { 
         name: overview_column_names.EMAIL, 
         label: 'timesheet_approvals.table.email',
         align: 'left', 
-        field: 'email', 
+        field: overview_column_names.EMAIL, 
         sortable: true,
     },
     { 
diff --git a/src/modules/timesheets/components/timesheet-wrapper.vue b/src/modules/timesheets/components/timesheet-wrapper.vue
index 2bc0ec8..baec39e 100644
--- a/src/modules/timesheets/components/timesheet-wrapper.vue
+++ b/src/modules/timesheets/components/timesheet-wrapper.vue
@@ -67,7 +67,7 @@
             />
 
             <!-- label for approval mode to delimit that this is the timesheet -->
-            <span class="col-auto text-uppercase text-bold text-h5"> {{ $t('timesheet.page_header') }}</span>
+            <span v-if="mode === 'approval'" class="col-auto text-uppercase text-bold text-h5"> {{ $t('timesheet.page_header') }}</span>
 
             <q-space v-if="$q.screen.width > $q.screen.height" />
 
diff --git a/src/modules/timesheets/services/timesheet-service.ts b/src/modules/timesheets/services/timesheet-service.ts
index 6db5988..f5b7f57 100644
--- a/src/modules/timesheets/services/timesheet-service.ts
+++ b/src/modules/timesheets/services/timesheet-service.ts
@@ -1,7 +1,7 @@
 import { api } from "src/boot/axios";
 import type { PayPeriod } from "src/modules/shared/models/pay-period.models";
 import type { TimesheetResponse } from "src/modules/timesheets/models/timesheet.models";
-import type { TimesheetOverview } from "src/modules/timesheet-approval/models/timesheet-overview.models";
+import type { TimesheetApprovalOverview } from "src/modules/timesheet-approval/models/timesheet-overview.models";
 import type { BackendResponse } from "src/modules/shared/models/backend-response.models";
 
 export const timesheetService = {
@@ -15,8 +15,8 @@ export const timesheetService = {
         return response.data.data;
     },
 
-    getTimesheetOverviewsByPayPeriodAndSupervisorEmail: async (year: number, period_number: number, supervisor_email: string): Promise<TimesheetOverview[]> => {
-        const response = await api.get<{ success: boolean, data: TimesheetOverview[], error?: string }>(`pay-periods/${year}/${period_number}/${supervisor_email}`);
+    getTimesheetOverviewsByPayPeriodAndSupervisorEmail: async (year: number, period_number: number, supervisor_email: string): Promise<TimesheetApprovalOverview[]> => {
+        const response = await api.get<{ success: boolean, data: TimesheetApprovalOverview[], error?: string }>(`pay-periods/${year}/${period_number}/${supervisor_email}`);
         return response.data.data;
     },
 
diff --git a/src/pages/dashboard-page.vue b/src/pages/dashboard-page.vue
index e3bbe1c..f7f1b95 100644
--- a/src/pages/dashboard-page.vue
+++ b/src/pages/dashboard-page.vue
@@ -4,83 +4,105 @@
 >
     import { ref } from 'vue';
 
-    const LOREM_IPSUM = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et \
-                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip \
-                ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu \
-                fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia \
-                deserunt mollit anim id est laborum."
-
     const slide = ref<string>('welcome');
 </script>
 
 <template>
     <q-page
         padding
-        class="q-pa-md row justify-center"
+        class="q-pa-md justify-center items-stretch"
+        :class="$q.platform.is.mobile ? 'column' : 'row'"
     >
-        <q-card flat class="column col-9 transparent ">
-            <div class="col-1"></div>
+        <!-- left column -->
+        <div class="column col flex-center q-pa-md">
+
+        </div>
+
+        <!-- center column -->
+        <div class="column col-xs-12 col-md-8 col-xl-6 flex-center q-pa-md">
             <q-carousel
                 v-model="slide"
                 transition-prev="jump-right"
                 transition-next="jump-left"
                 swipeable
                 animated
-                control-color="accent"
-                navigation-icon="radio_button_unchecked"
                 navigation
-                class="col-5 bg-dark rounded-15 shadow-2"
+                infinite
+                :autoplay="9001"
+                control-color="accent"
+                class="col-auto bg-dark rounded-15 shadow-18"
+                :style="$q.platform.is.mobile ? 'height: 60vh;' : 'height: 50vh;'"
             >
+                <!-- welcome slide -->
                 <q-carousel-slide
                     name="welcome"
-                    class="column no-wrap flex-center q-pa-none q-pb-xl"
+                    class="q-pa-none q-pb-xl fit"
                 >
-                    <q-img src="src/assets/line-truck-1.jpg" class="full-height">
-                        <div class="absolute-bottom text-h5">
-                            {{ $t('dashboard.welcome') }}
+                    <div class="column fit">
+                        <q-img
+                            src="src/assets/targo_building.png"
+                            height="30vh"
+                            position="50% 25%"
+                            fit="cover"
+                            class="col-auto"
+                        >
+                            <div class="absolute-bottom text-h6 text-uppercase text-weight-light">
+                                {{ $t('dashboard.carousel.welcome_title') }}
+                            </div>
+                        </q-img>
+
+                        <div class="column col q-mt-md q-px-md flex-center">
+                            <span class="col-auto">{{ $t('dashboard.carousel.welcome_message') }}</span>
                         </div>
-                    </q-img>
-                    <div class="q-mt-md text-center">
-                        {{ LOREM_IPSUM }}
                     </div>
                 </q-carousel-slide>
+
+                <!-- help page slide -->
                 <q-carousel-slide
                     name="tv"
-                    class="column no-wrap flex-center q-pa-none q-pb-xl"
+                    class="q-pa-none q-pb-xl"
                 >
-                    <q-icon
-                        name="live_tv"
-                        size="56px"
-                    />
-                    <div class="q-mt-md text-center">
-                        {{ LOREM_IPSUM }}
-                    </div>
-                </q-carousel-slide>
-                <q-carousel-slide
-                    name="layers"
-                    class="column no-wrap flex-center q-pa-none q-pb-xl"
-                >
-                    <q-icon
-                        name="layers"
-                        size="56px"
-                    />
-                    <div class="q-mt-md text-center">
-                        {{ LOREM_IPSUM }}
-                    </div>
-                </q-carousel-slide>
-                <q-carousel-slide
-                    name="map"
-                    class="column no-wrap flex-center q-pa-none q-pb-xl"
-                >
-                    <q-icon
-                        name="terrain"
-                        size="56px"
-                    />
-                    <div class="q-mt-md text-center">
-                        {{ LOREM_IPSUM }}
+                    <div class="column fit">
+                        <q-img
+                            src="src/assets/targo_help_banner.png"
+                            height="30vh"
+                            position="50% 25%"
+                            fit="none"
+                            class="col-auto"
+                        >
+                            <div class="absolute-bottom text-h6 text-uppercase text-weight-light">
+                                {{ $t('dashboard.carousel.help_title') }}
+                            </div>
+                        </q-img>
+
+                        <div class="col column justify-center q-mt-md q-px-md">
+                            <span class="col-auto">{{ $t('dashboard.carousel.help_message') }}</span>
+                        </div>
                     </div>
                 </q-carousel-slide>
             </q-carousel>
-        </q-card>
+
+            <div class="col column">
+                <span class="col-auto text-h6 text-uppercase"> </span>
+            </div>
+        </div>
+
+        <!-- right column -->
+        <div class="column col items-center">
+            <div
+                class="col-auto row full-width within-iframe"
+                :class="$q.platform.is.mobile ? 'justify-center' : 'justify-end q-pl-md'"
+                style="height: 50vh;"
+            >
+                <iframe
+                    title="Environment Canada Weather"
+                    height="400px"
+                    src="https://weather.gc.ca/wxlink/wxlink.html?coords=45.159%2C-73.676&lang=e"
+                    allowtransparency="true"
+                    style="border: 0;"
+                    class="col-auto"
+                ></iframe>
+            </div>
+        </div>
     </q-page>
 </template>
\ No newline at end of file
diff --git a/src/pages/login-page.vue b/src/pages/login-page.vue
index 49ffaa1..6630cd9 100644
--- a/src/pages/login-page.vue
+++ b/src/pages/login-page.vue
@@ -4,7 +4,7 @@
 
 <template>
     <q-layout view="hHh lpR fFf">
-        <q-page-container class="bg-secondary">
+        <q-page-container class="bg-dark">
             <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">
diff --git a/src/stores/timesheet-store.ts b/src/stores/timesheet-store.ts
index 2ac9f4e..81900b2 100644
--- a/src/stores/timesheet-store.ts
+++ b/src/stores/timesheet-store.ts
@@ -3,7 +3,7 @@ import { defineStore } from 'pinia';
 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';
-import type { PayPeriodOverviewResponse, TimesheetOverview } from "src/modules/timesheet-approval/models/timesheet-overview.models";
+import type { PayPeriodOverviewResponse, TimesheetApprovalOverview } from "src/modules/timesheet-approval/models/timesheet-overview.models";
 import type { PayPeriod } from 'src/modules/shared/models/pay-period.models';
 import type { Timesheet } from 'src/modules/timesheets/models/timesheet.models';
 import type { TimesheetApprovalCSVReportFilters } from 'src/modules/timesheet-approval/models/timesheet-approval-csv-report.models';
@@ -16,13 +16,13 @@ export const useTimesheetStore = defineStore('timesheet', () => {
     const all_current_shifts = computed(() => timesheets.value.flatMap(week => week.days.flatMap(day => day.shifts)) ?? []);
     const initial_timesheets = ref<Timesheet[]>([]);
 
-    const pay_period_overviews = ref<TimesheetOverview[]>([]);
+    const pay_period_overviews = ref<TimesheetApprovalOverview[]>([]);
     const pay_period_infos = ref<PayPeriodOverviewResponse>();
     const is_report_dialog_open = ref(false);
 
     const is_details_dialog_open = ref(false);
     const selected_employee_name = ref<string>();
-    const current_pay_period_overview = ref<TimesheetOverview>();
+    const current_pay_period_overview = ref<TimesheetApprovalOverview>();
     const is_approval_grid_mode = ref<boolean>(true);
     const pay_period_report = ref();
 
diff --git a/src/utils/date-and-time-utils.ts b/src/utils/date-and-time-utils.ts
index e7afed9..3f6313d 100644
--- a/src/utils/date-and-time-utils.ts
+++ b/src/utils/date-and-time-utils.ts
@@ -3,13 +3,25 @@ import { date } from 'quasar';
 const anchor_date: Date = new Date('2023-12-17');
 
 export const getCurrentPayPeriod = (today = new Date()): number => {
-  const period_length = 14; // days
-  const periods_per_year = 26;
+    const period_length = 14; // days
+    const periods_per_year = 26;
 
-  const days_since_anchor = date.getDateDiff(today, anchor_date, 'days');
-  const periods_since_anchor = Math.floor(days_since_anchor / period_length);
+    const days_since_anchor = date.getDateDiff(today, anchor_date, 'days');
+    const periods_since_anchor = Math.floor(days_since_anchor / period_length);
 
-  const current_period = (periods_since_anchor % periods_per_year) + 1;
-  
-  return current_period;
+    const current_period = (periods_since_anchor % periods_per_year) + 1;
+
+    return current_period;
+}
+
+export const getMinutes = (hours: number) => {
+    const minutes_percent = hours - Math.floor(hours);
+    const minutes = Math.round(minutes_percent * 60);
+    return minutes > 1 ? minutes.toString() : '0';
+}
+
+export const getHoursMinutesStringFromHoursFloat = (hours: number): string => {
+    const flat_hours = Math.floor(hours);
+    const minutes = Math.round((hours - flat_hours) * 60);
+    return `${flat_hours}h ${minutes > 1 ? minutes : ''}`
 }
\ No newline at end of file