diff --git a/src/i18n/en-ca/index.ts b/src/i18n/en-ca/index.ts
index eaf461a..258e6ef 100644
--- a/src/i18n/en-ca/index.ts
+++ b/src/i18n/en-ca/index.ts
@@ -248,7 +248,7 @@ export default {
     timeSheets: 'Time sheet',
     timeSheetValidations: 'Time sheet approvals',
   },
-  timeSheet: {
+  timesheet: {
     timeSheetTab_1: 'Shifts',
     timeSheetTab_2: 'Expenses',
     templateButton: 'Apply Templates',
diff --git a/src/i18n/fr-ca/index.ts b/src/i18n/fr-ca/index.ts
index 873ab03..0c24684 100644
--- a/src/i18n/fr-ca/index.ts
+++ b/src/i18n/fr-ca/index.ts
@@ -298,7 +298,7 @@ export default {
     noResultsLabel: 'Le filtre n’a révélé aucun résultat',
     noDataLabel: 'Je n’ai rien trouvé pour toi',
   },
-  timeSheet: {
+  timesheet: {
     timeSheetTab_1: 'Quarts de travail',
     timeSheetTab_2: 'Dépenses',
     templateButton: 'Appliquer le modèle',
diff --git a/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row.vue b/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row.vue
index 97da77d..e39bc52 100644
--- a/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row.vue
+++ b/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
     import type { Shift } from 'src/modules/timesheets/types/timesheet-shift-interface';
+import { ref } from 'vue';
 
     const props = defineProps<{
         shift: Shift;
     }>();
+
+    const is_showing_time_popup = ref<boolean>(false);
     
     const getShiftColor = (type: string): string => {
         switch(type) {
@@ -28,10 +31,19 @@
 </script>
 
 <template>
+    <q-dialog
+        v-model="is_showing_time_popup"
+    >
+        <q-card class="q-pa-xl">
+            LOL
+        </q-card>
+
+    </q-dialog>
     <q-card-section 
         horizontal
         class="q-pa-none text-uppercase text-center items-center cursor-pointer rounded-10"
         style="line-height: 1;"
+        @click="is_showing_time_popup = true"
     >
         <!-- punch-in timestamps -->
         <q-card-section class="q-pa-none col">
diff --git a/src/modules/timesheet-approval/pages/timesheet-approval-employee-details.vue b/src/modules/timesheet-approval/pages/timesheet-approval-employee-details.vue
index 048b5a7..b5b3e4c 100644
--- a/src/modules/timesheet-approval/pages/timesheet-approval-employee-details.vue
+++ b/src/modules/timesheet-approval/pages/timesheet-approval-employee-details.vue
@@ -8,8 +8,7 @@
     import TimesheetApprovalEmployeeExpensesChart from 'src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-expenses-chart.vue';
     import type { PayPeriodOverviewEmployee } from 'src/modules/timesheet-approval/types/timesheet-approval-pay-period-overview-employee-interface';
     import type { PayPeriodEmployeeDetails } from '../types/timesheet-approval-pay-period-employee-details-interface';
-import { PayPeriod } from 'src/modules/shared/types/pay-period-interface';
-import { colors } from 'quasar';
+    import type { PayPeriod } from 'src/modules/shared/types/pay-period-interface';
 
     const props = defineProps<{
         isLoading: boolean;
@@ -23,15 +22,6 @@ import { colors } from 'quasar';
     const { t } = useI18n();
     const is_showing_graph = ref<boolean>(true);
 
-    //  case 'REGULAR':     return 'green-5';
-    //         case 'EVENING':     return 'green-9';
-    //         case 'EMERGENCY':   return 'warning';
-    //         case 'OVERTIME':    return 'negative';
-    //         case 'VACATION':    return 'purple-10';
-    //         case 'HOLIDAY':     return 'purple-10';
-    //         case 'SICK':        return 'grey-9';
-    //         default :           return 'transparent';
-
     type shiftColor = {
         type: string;
         color: string;
@@ -40,16 +30,16 @@ import { colors } from 'quasar';
 
     const shift_type_legend: shiftColor[] = [
         {
-            type: t('timeSheet.shiftRegular'),
+            type: t('timesheet.shiftRegular'),
             color: 'secondary',
             text_color: 'grey-8',
         },
         {
-            type: t('timeSheet.shiftEvening'),
+            type: t('timesheet.shiftEvening'),
             color: 'warning',
         },
         {
-            type: t('timeSheet.shiftEmergency'),
+            type: t('timesheet.shiftEmergency'),
             color: 'amber-10',
         },
         {
@@ -57,15 +47,15 @@ import { colors } from 'quasar';
             color: 'negative',
         },
         {
-            type: t('timeSheet.shiftVacation'),
+            type: t('timesheet.shiftVacation'),
             color: 'purple-10',
         },
         {
-            type: t('timeSheet.shiftHoliday'),
+            type: t('timesheet.shiftHoliday'),
             color: 'purple-8',
         },
         {
-            type: t('timeSheet.shiftSick'),
+            type: t('timesheet.shiftSick'),
             color: 'grey-8',
         },
     ]