diff --git a/src/modules/timesheet-approval/components/timesheet-approval-employee-overview-list-item.vue b/src/modules/timesheet-approval/components/timesheet-approval-employee-overview-list-item.vue
index 4952663..d3443fe 100644
--- a/src/modules/timesheet-approval/components/timesheet-approval-employee-overview-list-item.vue
+++ b/src/modules/timesheet-approval/components/timesheet-approval-employee-overview-list-item.vue
@@ -159,6 +159,8 @@
                 class="q-pa-sm text-weight-bold"
                 :class="props.initialState ? 'text-white bg-primary' : 'text-primary bg-white'"    
             >
+                <q-item-label class="text-uppercase text-h6 q-ml-sm text-weight-bolder"> {{ props.row.total_hours + 'h' }} </q-item-label>
+                <q-item-label class="text-uppercase text-weight-bold q-ml-xs"> total </q-item-label>
                 <q-space />
                 <q-checkbox 
                     dense 
diff --git a/src/modules/timesheet-approval/types/timesheet-approval-pay-period-overview-employee-interface.ts b/src/modules/timesheet-approval/types/timesheet-approval-pay-period-overview-employee-interface.ts
index 30f2fe3..9ad866f 100644
--- a/src/modules/timesheet-approval/types/timesheet-approval-pay-period-overview-employee-interface.ts
+++ b/src/modules/timesheet-approval/types/timesheet-approval-pay-period-overview-employee-interface.ts
@@ -5,6 +5,7 @@ export interface PayPeriodOverviewEmployee {
     evening_hours: number;
     emergency_hours: number;
     overtime_hours: number;
+    total_hours: number;
     expenses: number;
     mileage: number;
     is_approved: boolean;
@@ -17,6 +18,7 @@ export const default_pay_period_overview_employee: PayPeriodOverviewEmployee = {
     evening_hours: -1,
     emergency_hours: -1,
     overtime_hours: -1,
+    total_hours: -1,
     expenses: -1,
     mileage: -1,
     is_approved: false
diff --git a/src/modules/timesheets/types/timesheet-details-interface.ts b/src/modules/timesheets/types/timesheet-details-interface.ts
index 21b42ee..b5b5bfd 100644
--- a/src/modules/timesheets/types/timesheet-details-interface.ts
+++ b/src/modules/timesheets/types/timesheet-details-interface.ts
@@ -12,6 +12,7 @@ export interface TimesheetDetailsDailySchedule {
     evening_hours: number;
     emergency_hours: number;
     overtime_hours: number;
+    total_hours: number;
     short_date: string;     // ex. 08/24
     break_duration?: number;
 }
@@ -61,6 +62,7 @@ const emptyDailySchedule = (): TimesheetDetailsDailySchedule => ({
     evening_hours: 0,
     emergency_hours: 0,
     overtime_hours: 0,
+    total_hours: 0,
     short_date: "",
     break_duration: 0,
 });