diff --git a/eslint.config.js b/eslint.config.js
index 2498ecb..5923a57 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -63,14 +63,17 @@ export default defineConfigWithVueTs(
       }
     },
 
+    files: ['**/*.ts', '**/*.vue'],
+
     // add your custom rules here
     rules: {
       'prefer-promise-reject-errors': 'off',
 
       // warn about unused but underscored variables
+      "@typescript-eslint/no-unused-vars": "off",
       'no-unused-vars': [
         'warn',
-        { argsIgnorePattern: '^_' }
+        { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }
       ],
 
       // allow debugger during development only
diff --git a/src/boot/axios.ts b/src/boot/axios.ts
index 3ac8c4c..eb5145b 100644
--- a/src/boot/axios.ts
+++ b/src/boot/axios.ts
@@ -1,3 +1,4 @@
+/* eslint-disable */
 import { defineBoot } from '#q-app/wrappers';
 import axios, { type AxiosInstance } from 'axios';
 
diff --git a/src/env.d.ts b/src/env.d.ts
index 12dcd18..dd757b1 100644
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -1,3 +1,5 @@
+/* eslint-disable */
+
 declare namespace NodeJS {
   interface ProcessEnv {
     NODE_ENV: string;
diff --git a/src/i18n/en-ca/index.ts b/src/i18n/en-ca/index.ts
index 70e9afa..5f04d12 100644
--- a/src/i18n/en-ca/index.ts
+++ b/src/i18n/en-ca/index.ts
@@ -10,6 +10,8 @@ export default {
             supervisor: "Supervisor",
             company: "Company",
             is_supervisor: "is a supervisor",
+            active: "active",
+            inactive: "inactive",
         },
     },
 
diff --git a/src/i18n/fr-ca/index.ts b/src/i18n/fr-ca/index.ts
index 9e94c73..cc77711 100644
--- a/src/i18n/fr-ca/index.ts
+++ b/src/i18n/fr-ca/index.ts
@@ -10,6 +10,8 @@ export default {
             supervisor: "superviseur",
             company: "Compagnie",
             is_supervisor: "est un superviseur",
+            active: "actif",
+            inactive: "inactif",
         },
     },
 
diff --git a/src/modules/employee-list/components/employee-list-table-item.vue b/src/modules/employee-list/components/employee-list-table-item.vue
index ca2b4cb..652eb07 100644
--- a/src/modules/employee-list/components/employee-list-table-item.vue
+++ b/src/modules/employee-list/components/employee-list-table-item.vue
@@ -21,19 +21,21 @@
 <template>
     <transition
         appear
-        enter-active-class="animated fadeInUp slow"
+        enter-active-class="animated fadeInUp fast"
+        leave-active-class="animated fadeOutDown fast"
         mode="out-in"
     >
         <q-card
+            
             v-ripple
             class="column col-xs-6 col-sm-4 col-md-3 col-lg-2 no-wrap rounded-15 cursor-pointer q-ma-sm"
             style="max-width: 230px;"
-            :style="`animation-delay: ${index / 25}s;`"
+            :style="(`animation-delay: ${index / 25}s; `) + (row.last_work_day === null ? '' : 'opacity: 0.6;')"
             @click="emit('onProfileClick', row.email)"
         >
             <q-card-section class="col-6 text-center">
                 <q-avatar
-                    :color="row.last_work_day === undefined ? 'accent' : 'negative'"
+                    :color="row.last_work_day === null ? 'accent' : 'negative'"
                     size="8em"
                     class="shadow-3 q-mb-md"
                 >
@@ -51,12 +53,12 @@
             >
                 <div
                     class="ellipsis"
-                    :class="row.last_work_day === undefined ? 'text-accent' : 'text-negative'"
+                    :class="row.last_work_day === null ? 'text-accent' : 'text-negative'"
                 > 
                     {{ row.first_name }} {{ row.last_name }}
                 </div>
                 <q-separator
-                    color="accent"
+                    :color="row.last_work_day === null ? 'accent' : 'negative'"
                     class="q-mx-sm q-mt-xs"
                 />
                 <div class=" ellipsis-2-lines text-caption">{{ row.job_title }}</div>
diff --git a/src/modules/employee-list/components/employee-list-table.vue b/src/modules/employee-list/components/employee-list-table.vue
index 2b04a28..bd30821 100644
--- a/src/modules/employee-list/components/employee-list-table.vue
+++ b/src/modules/employee-list/components/employee-list-table.vue
@@ -2,6 +2,7 @@
     setup
     lang="ts"
 >
+    /* eslint-disable */
     import EmployeeListTableItem from 'src/modules/employee-list/components/employee-list-table-item.vue';
 
     import { onMounted, ref } from 'vue';
@@ -16,68 +17,59 @@
     const employee_store = useEmployeeStore();
     const timesheet_store = useTimesheetStore();
     const ui_store = useUiStore();
-    const is_loading_list = ref<boolean>(true);
+    const visible_columns = ref<(keyof EmployeeProfile)[]>(['first_name', 'email', 'company_name', 'supervisor_full_name', 'company_name', 'job_title', 'last_work_day']);
 
     const filters = ref<EmployeeListFilters>({
         search_bar_string: '',
         hide_inactive_users: true,
     });
 
-    const filterEmployeeRows = (
-        rows: readonly EmployeeProfile[],
-        terms: EmployeeListFilters,
-        _cols: readonly QTableColumn<EmployeeProfile>[],
-        _getCellValue: (col: QTableColumn<EmployeeProfile>, row: EmployeeProfile) => unknown
-    ): EmployeeProfile[] => {
-        let active_rows: EmployeeProfile[] = Array.from(rows);
-        console.log('active rows at start: ', active_rows);
+    const filterEmployeeRows = (rows: readonly EmployeeProfile[], terms: EmployeeListFilters): EmployeeProfile[] => {
+        let result = [...rows];
 
-        if (terms.hide_inactive_users === true) {
-            active_rows = active_rows.filter(row => 
-            row.last_work_day === null
-            // {
-            //     if (row.last_work_day === null) return true;
-
-            //     const inactive_date = date.extractDate(row.last_work_day!, 'YYYY-MM-DD');
-            //     const inactive_date_limit = new Date();
-            //     inactive_date_limit.setDate(inactive_date.getDate() + 14)
-
-            //     return inactive_date_limit > inactive_date
-            // }
-        );
+        if (terms.hide_inactive_users) {
+            const now = new Date();
+            result = result.filter(row => {
+                if (!row.last_work_day) return true;
+                const inactiveDate = date.extractDate(row.last_work_day, 'YYYY-MM-DD');
+                const limit = new Date(inactiveDate);
+                limit.setDate(limit.getDate() + 14);
+                return limit >= now;
+            });
         }
 
-        let filtered_rows: EmployeeProfile[] = Array.from(active_rows);
+        if (terms.search_bar_string.trim().length > 0) {
+            const searchTerms = terms.search_bar_string.split(' ').map(s => s.trim().toLowerCase());
 
-        if (terms.search_bar_string.length > 0) {
-            console.log('more filtering!!')
-            const search_terms = terms.search_bar_string.split(',');
+            result = result.filter(row => {
+                const rowValues = Object.values(row).map(v => String(v ?? '').toLowerCase());
+                return searchTerms.every(term =>
+                    rowValues.some(value => value.includes(term))
+                );
+            });
+        }
 
-            filtered_rows = active_rows.filter(row => Object.values(row).some(value => search_terms.includes(value)));
-        };
-
-        return filtered_rows;
-    }
+        return result;
+    };
 
     onMounted(async () => {
-        is_loading_list.value = true;
         await employee_list_api.getEmployeeList();
-        is_loading_list.value = false;
     })
 </script>
 
 <template>
     <div class="q-pa-lg">
         <q-table
+            :key="filters.hide_inactive_users ? '1' : '0'"
             dense
             hide-pagination
-            virtual-scroll
             title=" "
             card-style="max-height: 70vh;"
             :rows="employee_store.employee_list"
             :columns="employee_list_columns"
-            row-key="name"
+            row-key="email"
             :rows-per-page-options="[0]"
+            :pagination="{ sortBy: 'last_work_day', descending: true, }"
             :filter="filters"
             :filter-method="filterEmployeeRows"
             class="bg-transparent no-shadow sticky-header-table"
@@ -87,11 +79,11 @@
             table-header-class="text-accent text-uppercase"
             card-container-class="justify-center"
             :grid="ui_store.user_preferences.is_employee_list_grid"
-            :loading="is_loading_list"
+            :loading="employee_store.is_loading"
             :no-data-label="$t('shared.error.no_data_found')"
             :no-results-label="$t('shared.error.no_search_results')"
             :loading-label="$t('shared.label.loading')"
-            :visible-columns="['first_name', 'email', 'company', 'supervisor_full_name', 'company_name', 'job_title']"
+            :visible-columns="visible_columns"
         >
             <template #top>
                 <div class="row full-width q-mb-sm">
@@ -127,6 +119,7 @@
                         color="accent"
                         bg-color="white"
                         label-color="accent"
+                        debounce="300"
                         :label="$t('shared.label.search')"
                     >
                         <template v-slot:append>
@@ -148,16 +141,13 @@
             </template>
 
             <template #header="props">
-                <q-tr
-                    :props="props"
-                    class="bg-primary"
-                >
+                <q-tr :props="props">
                     <q-th
                         v-for="col in props.cols"
                         :key="col.name"
                         :props="props"
                     >
-                        <span class="text-uppercase text-weight-bolder text-white text-h6">
+                        <span class="text-uppercase text-weight-bolder text-white" style="font-size: 1.2em;">
                             {{ $t(col.label) }}
                         </span>
                     </q-th>
@@ -187,12 +177,32 @@
                             :key="scope.rowIndex + (timesheet_store.pay_period?.pay_period_no ?? 0)"
                             class="rounded-5 cursor-pointer"
                             style="font-size: 1.2em;"
-                            :style="`animation-delay: ${scope.rowIndex / 30}s;`"
+                            :style="`animation-delay: ${scope.rowIndex / 30}s; ` + (scope.row.last_work_day === null ? '' : 'opacity: 0.5;')"
                         >
                             <div v-if="scope.col.name === 'first_name'">
-                                <span class="text-h5 text-uppercase text-accent q-mr-xs">{{ scope.value }}</span>
+                                <span
+                                    class="text-h5 text-uppercase q-mr-xs"
+                                    :class="scope.row.last_work_day === null ? 'text-accent' : 'text-negative'"
+                                >{{ scope.value }}</span>
                                 <span class="text-uppercase text-weight-light">{{ scope.row.last_name }}</span>
                             </div>
+
+                            <div v-else-if="scope.col.name === 'last_work_day'">
+                                <q-badge
+                                    :color="scope.row.last_work_day === null ? 'accent' : 'negative'"
+                                    class="row rounded-50 q-px-sm self-center"
+                                >
+                                    <span class="text-bold text-uppercase q-mr-sm">
+                                        {{ scope.row.last_work_day === null ? $t('employee_list.table.active') :
+                                            $t('employee_list.table.inactive') }}
+                                    </span>
+                                    <q-icon
+                                        :name="scope.row.last_work_day === null ? 'check' : 'clear'"
+                                        size="xs"
+                                    />
+                                </q-badge>
+                            </div>
+
                             <span v-else>{{ scope.value }}</span>
                         </div>
                     </transition>
@@ -216,6 +226,15 @@
 </template>
 
 <style scoped>
+:deep(.q-table__card .q-table__sort-icon) {
+    fill: white !important;
+    color: white !important;
+}
+
+:deep(.q-table--dense .q-table__sort-icon) {
+    font-size: 150%;
+}
+
 .sticky-header-table thead tr:first-child th {
     background-color: var(--q-primary);
     margin-top: none;
diff --git a/src/modules/employee-list/models/employee-profile.models.ts b/src/modules/employee-list/models/employee-profile.models.ts
index 6288e1f..24ccb9f 100644
--- a/src/modules/employee-list/models/employee-profile.models.ts
+++ b/src/modules/employee-list/models/employee-profile.models.ts
@@ -92,6 +92,11 @@ export const employee_list_columns: QTableColumn<EmployeeProfile>[] = [
         field: 'last_work_day',
         align: 'center',
         sortable: true,
+        sort: (a: string | null, b: string | null) => {
+            if (a === null && b === null) return 0;
+            else if (a === null && b !== null) return 1;
+            else return -1;
+        },
     },
 ];
 
diff --git a/src/modules/timesheet-approval/components/overview-list.vue b/src/modules/timesheet-approval/components/overview-list.vue
index 8b8f2dd..46153d8 100644
--- a/src/modules/timesheet-approval/components/overview-list.vue
+++ b/src/modules/timesheet-approval/components/overview-list.vue
@@ -113,7 +113,7 @@
                                         dense
                                         :icon="props.value ? 'lock' : 'lock_open'"
                                         :color="props.value ? 'white' : 'grey-5'"
-                                        class="rounded-5 z-top"
+                                        class="rounded-5 "
                                         :class="props.value ? 'bg-accent' : ''"
                                         @click.stop="props.row.is_approved = !props.row.is_approved"
                                     />
diff --git a/src/stores/store-flag.d.ts b/src/stores/store-flag.d.ts
index f516596..683e459 100644
--- a/src/stores/store-flag.d.ts
+++ b/src/stores/store-flag.d.ts
@@ -1,3 +1,4 @@
+/* eslint-disable */
 // THIS FEATURE-FLAG FILE IS AUTOGENERATED,
 //  REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING
 import 'quasar/dist/types/feature-flag';