diff --git a/src/layouts/components/main-layout-left-drawer.vue b/src/layouts/components/main-layout-left-drawer.vue
index ee55de3..b0b1fa8 100644
--- a/src/layouts/components/main-layout-left-drawer.vue
+++ b/src/layouts/components/main-layout-left-drawer.vue
@@ -73,7 +73,7 @@ const handleLogout = () => {
                     </q-item-section>
                     <q-item-section>
                         <q-item-label class="text-uppercase text-weight-bold">{{ $t('nav_bar.timesheet_approvals')
-                            }}</q-item-label>
+                        }}</q-item-label>
                     </q-item-section>
                 </q-item>
 
@@ -93,7 +93,7 @@ const handleLogout = () => {
                     </q-item-section>
                     <q-item-section>
                         <q-item-label class="text-uppercase text-weight-bold">{{ $t('nav_bar.employee_list')
-                            }}</q-item-label>
+                        }}</q-item-label>
                     </q-item-section>
                 </q-item>
 
@@ -113,7 +113,7 @@ const handleLogout = () => {
                     </q-item-section>
                     <q-item-section>
                         <q-item-label class="text-uppercase text-weight-bold">{{ $t('nav_bar.timesheet')
-                            }}</q-item-label>
+                        }}</q-item-label>
                     </q-item-section>
                 </q-item>
 
diff --git a/src/modules/timesheet-approval/components/overview-list.vue b/src/modules/timesheet-approval/components/overview-list.vue
index 923469e..d6cefc8 100644
--- a/src/modules/timesheet-approval/components/overview-list.vue
+++ b/src/modules/timesheet-approval/components/overview-list.vue
@@ -1,34 +1,31 @@
-<script
-    setup
-    lang="ts"
->
-    import { computed, ref } from 'vue';
-    import { useTimesheetStore } from 'src/stores/timesheet-store';
-    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 PayPeriodOverview } from 'src/modules/timesheet-approval/models/pay-period-overview.models';
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useTimesheetStore } from 'src/stores/timesheet-store';
+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 PayPeriodOverview } from 'src/modules/timesheet-approval/models/pay-period-overview.models';
 
-    const timesheet_store = useTimesheetStore();
-    const filter = ref<string | number | null>('');
+const timesheet_store = useTimesheetStore();
+const filter = ref<string | number | null>('');
 
-    const employeeEmail = defineModel();
+const employeeEmail = defineModel();
 
-    const emit = defineEmits<{
-        'clickedDetailsButton': [email: string];
-    }>();
+const emit = defineEmits<{
+    'clickedDetailsButton': [email: string];
+}>();
 
-    const overview_rows = computed(() => timesheet_store.pay_period_overviews[0]?.regular_hours === -1 ?
-        [] :
-        timesheet_store.pay_period_overviews
-    )
+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: PayPeriodOverview) => {
-        employeeEmail.value = employee_email;
-        emit('clickedDetailsButton', employee_email);
-        timesheet_store.current_pay_period_overview = row;
-        await timesheet_store.getPayPeriodDetailsByEmployeeEmail(employee_email);
-    };
+const onClickedDetails = async (employee_email: string, row: PayPeriodOverview) => {
+    employeeEmail.value = employee_email;
+    emit('clickedDetailsButton', employee_email);
+    timesheet_store.current_pay_period_overview = row;
+    await timesheet_store.getPayPeriodDetailsByEmployeeEmail(employee_email);
+};
 </script>
 
 <template>
@@ -77,8 +74,8 @@
             <template #no-data="{ message, filter }">
                 <div class="full-width column items-center text-primary q-gutter-sm">
                     <q-icon
-                    size="4em"
-                    :name="filter ? 'filter_alt_off' : 'error_outline'"
+                        size="4em"
+                        :name="filter ? 'filter_alt_off' : 'error_outline'"
                     />
 
                     <span class="text-h6">
diff --git a/src/page-contexts/index.ts b/src/page-contexts/index.ts
new file mode 100644
index 0000000..36183de
--- /dev/null
+++ b/src/page-contexts/index.ts
@@ -0,0 +1,6 @@
+export * from "./pages/dashboard-context";
+export * from "./pages/left-drawer-context";
+export * from "./pages/supervisor-crew-context";
+export * from "./pages/profile-context";
+export * from "./pages/timesheet-approval-context";
+export * from "./pages/timesheet-context";
diff --git a/src/page-contexts/pages/dashboard-context.ts b/src/page-contexts/pages/dashboard-context.ts
new file mode 100644
index 0000000..834307e
--- /dev/null
+++ b/src/page-contexts/pages/dashboard-context.ts
@@ -0,0 +1,10 @@
+export const dashboardContext = {
+  name: "Test-Page",
+  description:
+    "Temporary static landing page while the application is still in development",
+  features: [
+    "Used as a landing platform and navigate the left drawer",
+    "Access the ai chatbot from the header",
+    "See your user icon with a notification icon",
+  ],
+};
diff --git a/src/page-contexts/pages/left-drawer-context.ts b/src/page-contexts/pages/left-drawer-context.ts
new file mode 100644
index 0000000..04d7aba
--- /dev/null
+++ b/src/page-contexts/pages/left-drawer-context.ts
@@ -0,0 +1,14 @@
+export const leftDrawerContext = {
+  name: "Left Drawer",
+  description:
+    "A drawer that acts as a navigation bar, able to surf to differnent parts of the website.",
+  features: [
+    "The user can navigate to the home page.",
+    "Depending on their role and clearence can approve timesheets. ",
+    "Depending on their role, can see the full list of employees.",
+    "Can access the timesheet interface to input employee hours.",
+    "Can acess your user profile to add or change information",
+    "Can access the Help page to ask for assistance.",
+    "Can logout",
+  ],
+};
diff --git a/src/page-contexts/pages/profile-context.ts b/src/page-contexts/pages/profile-context.ts
new file mode 100644
index 0000000..811f280
--- /dev/null
+++ b/src/page-contexts/pages/profile-context.ts
@@ -0,0 +1,9 @@
+export const profileContext = {
+  name: "Profile",
+  description: "Display and edit user information",
+  features: [
+    "Add and edit Personal information such as first and last name, phone, birthdate and address.",
+    "Add and edit Career information such job title, company, supervisor, email and hiring date.",
+    "Edit available preferences such as Display options of light and dark mode, and language options",
+  ],
+};
diff --git a/src/page-contexts/pages/supervisor-crew-context.ts b/src/page-contexts/pages/supervisor-crew-context.ts
new file mode 100644
index 0000000..b118c13
--- /dev/null
+++ b/src/page-contexts/pages/supervisor-crew-context.ts
@@ -0,0 +1,8 @@
+export const supervisorContext = {
+  name: "Supervisor Crew Page",
+  description: "View all the hired Staff",
+  feature: [
+    "View the list of hired employees",
+    "Access an individual employee",
+  ],
+};
diff --git a/src/page-contexts/pages/timesheet-approval-context.ts b/src/page-contexts/pages/timesheet-approval-context.ts
new file mode 100644
index 0000000..8f979eb
--- /dev/null
+++ b/src/page-contexts/pages/timesheet-approval-context.ts
@@ -0,0 +1,14 @@
+export const timesheetApprovalContext = {
+  name: "Timesheet-Approval",
+  description:
+    "Page where employee hours and shifts are approved by the HR deparment",
+  features: [
+    "See a list of cards with the total hours for the week for each employee.",
+    "Access different weeks thanks to the calender button",
+    "Approve the hours for the cards displayed.",
+    "Open a detailed modal for each card",
+    "Display a bar chart within the modal to display the type of hours, expenses, and mileage.",
+    "Edit the hours, and their type such as regular, holiday, vacation etc.",
+    "Add and edit expenses for the week, along with attached files for said expenses",
+  ],
+};
diff --git a/src/page-contexts/pages/timesheet-context.ts b/src/page-contexts/pages/timesheet-context.ts
new file mode 100644
index 0000000..c4966f6
--- /dev/null
+++ b/src/page-contexts/pages/timesheet-context.ts
@@ -0,0 +1,13 @@
+export const timesheetContext = {
+  name: "Timesheet-page",
+  description:
+    "Page where an employee can enter their hours for their day and week",
+  features: [
+    "Enter your in and out times per day",
+    "Add and edit what kind of hours your shift was example regular, overtime, vacation etc.",
+    "Edit your own shift hours",
+    "Delete your shift hours",
+    "List your expenses for the week",
+    "Add expenses for the week, along with attached files for said expenses",
+  ],
+};
diff --git a/src/pages/profile-page.vue b/src/pages/profile-page.vue
index 19702a3..f98522b 100644
--- a/src/pages/profile-page.vue
+++ b/src/pages/profile-page.vue
@@ -1,20 +1,20 @@
 <script setup lang="ts">
-    import ProfileEmployee from 'src/modules/profile/pages/employee/profile-employee.vue';
-    import { useAuthStore } from 'src/stores/auth-store';
-    import { type EmployeeProfile } from 'src/modules/employee-list/types/employee-profile-interface';
+import ProfileEmployee from 'src/modules/profile/pages/employee/profile-employee.vue';
+import { useAuthStore } from 'src/stores/auth-store';
+import { type EmployeeProfile } from 'src/modules/employee-list/types/employee-profile-interface';
 
-    const auth_store = useAuthStore();
-    const employee_roles = [ 'SUPERVISOR', 'EMPLOYEE', 'ADMIN', 'HR', 'ACCOUNTING' ];
+const auth_store = useAuthStore();
+const employee_roles = ['SUPERVISOR', 'EMPLOYEE', 'ADMIN', 'HR', 'ACCOUNTING'];
 
-    const { employeeProfile } = defineProps<{
-        employeeProfile?: EmployeeProfile | undefined;
-    }>();
+const { employeeProfile } = defineProps<{
+    employeeProfile?: EmployeeProfile | undefined;
+}>();
 </script>
 
 <template>
-    <q-page class="bg-secondary column items-center justify-center">        
-        <ProfileEmployee 
-            v-if="employee_roles.includes( auth_store.user.role.toUpperCase() )"
+    <q-page class="bg-secondary column items-center justify-center">
+        <ProfileEmployee
+            v-if="employee_roles.includes(auth_store.user.role.toUpperCase())"
             class="col-auto"
             :employee-profile="employeeProfile"
         />
diff --git a/src/pages/supervisor-crew-page.vue b/src/pages/supervisor-crew-page.vue
index 536eb4b..5fe11a6 100644
--- a/src/pages/supervisor-crew-page.vue
+++ b/src/pages/supervisor-crew-page.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-    import SupervisorCrewTable from '../components/supervisor/supervisor-crew-table.vue';
-    import EmployeeListAddModifyDialog from '../components/employee/employee-list-add-modify-dialog.vue';
+import SupervisorCrewTable from '../components/supervisor/supervisor-crew-table.vue';
+import EmployeeListAddModifyDialog from '../components/employee/employee-list-add-modify-dialog.vue';
 </script>
 
 <template>
diff --git a/src/pages/test-page.vue b/src/pages/test-page.vue
index 2954dd8..d62f747 100644
--- a/src/pages/test-page.vue
+++ b/src/pages/test-page.vue
@@ -1,17 +1,14 @@
-<script
-    setup
-    lang="ts"
->
-    import { useQuasar } from 'quasar';
-    import type { QVueGlobals } from 'quasar';
+<script setup lang="ts">
+import { useQuasar } from 'quasar';
+import type { QVueGlobals } from 'quasar';
 
-    const q: QVueGlobals = useQuasar();
+const q: QVueGlobals = useQuasar();
 
-    const clickNotify = () => {
-        q.notify({
-            message: 'Nick pinged you.',
-        })
-    }
+const clickNotify = () => {
+    q.notify({
+        message: 'Nick pinged you.',
+    })
+}
 </script>
 
 <template>
diff --git a/src/pages/timesheet-approval-page.vue b/src/pages/timesheet-approval-page.vue
index cb972db..7ef554f 100644
--- a/src/pages/timesheet-approval-page.vue
+++ b/src/pages/timesheet-approval-page.vue
@@ -1,38 +1,38 @@
 <script setup lang="ts">
-    import { onMounted, ref } from 'vue';
-    import { date } from 'quasar';
-    import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
-    import { useTimesheetStore } from 'src/stores/timesheet-store';
-    import PageHeaderTemplate from 'src/modules/shared/components/page-header-template.vue';
-    import OverviewList from 'src/modules/timesheet-approval/components/overview-list.vue';
-    import DetailscrudDialog from 'src/modules/timesheet-approval/components/details-crud-dialog.vue';
+import { onMounted, ref } from 'vue';
+import { date } from 'quasar';
+import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
+import { useTimesheetStore } from 'src/stores/timesheet-store';
+import PageHeaderTemplate from 'src/modules/shared/components/page-header-template.vue';
+import OverviewList from 'src/modules/timesheet-approval/components/overview-list.vue';
+import DetailscrudDialog from 'src/modules/timesheet-approval/components/details-crud-dialog.vue';
 
-    const timesheet_approval_api = useTimesheetApprovalApi();
-    const timesheet_store = useTimesheetStore();
-    const is_details_dialog_open = ref(false);
-    const employee_email = ref('');
+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;
-    };
+const onDetailsClicked = (email: string) => {
+    employee_email.value = email;
+    is_details_dialog_open.value = true;
+};
 
-    onMounted( async () => {
-        await timesheet_approval_api.getPayPeriodOverviewsByDate(date.formatDate( new Date(), 'YYYY-MM-DD'));
-    });
+onMounted(async () => {
+    await timesheet_approval_api.getPayPeriodOverviewsByDate(date.formatDate(new Date(), 'YYYY-MM-DD'));
+});
 </script>
 
 <template>
-    <q-page 
-        padding 
+    <q-page
+        padding
         class="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"
         />
-        
+
         <DetailscrudDialog
             v-model:dialog="is_details_dialog_open"
             :employee-email="employee_email"
@@ -41,6 +41,6 @@
             :timesheet-details="timesheet_store.pay_period_details"
         />
 
-        <OverviewList @clickedDetailsButton="onDetailsClicked"/>
+        <OverviewList @clickedDetailsButton="onDetailsClicked" />
     </q-page>
 </template>
\ No newline at end of file
diff --git a/src/pages/timesheet-page.vue b/src/pages/timesheet-page.vue
index 639d8db..a91997a 100644
--- a/src/pages/timesheet-page.vue
+++ b/src/pages/timesheet-page.vue
@@ -1,25 +1,21 @@
-<script
-    setup
-    lang="ts"
->
-    import { date } from 'quasar';
-    import { onMounted } from 'vue';
-    import { useAuthStore } from 'src/stores/auth-store';
-    import { useTimesheetApi } from 'src/modules/timesheets/composables/api/use-timesheet-api';
-    import { useTimesheetStore } from 'src/stores/timesheet-store';
-    import PageHeaderTemplate from 'src/modules/shared/components/page-header-template.vue';
-    import TimesheetWrapper from 'src/modules/timesheets/components/timesheet-wrapper.vue';
+<script setup lang="ts">
+import { date } from 'quasar';
+import { onMounted } from 'vue';
+import { useAuthStore } from 'src/stores/auth-store';
+import { useTimesheetApi } from 'src/modules/timesheets/composables/api/use-timesheet-api';
+import { useTimesheetStore } from 'src/stores/timesheet-store';
+import PageHeaderTemplate from 'src/modules/shared/components/page-header-template.vue';
+import TimesheetWrapper from 'src/modules/timesheets/components/timesheet-wrapper.vue';
 
-    const { user } = useAuthStore();
-    const timesheet_store = useTimesheetStore();
-    const timesheet_api = useTimesheetApi();
+const { user } = useAuthStore();
+const timesheet_store = useTimesheetStore();
+const timesheet_api = useTimesheetApi();
 
-    onMounted(async () => {
-        await timesheet_api.getPayPeriodDetailsByDate(date.formatDate(new Date(), 'YYYY-MM-DD'));
-    });
+onMounted(async () => {
+    await timesheet_api.getPayPeriodDetailsByDate(date.formatDate(new Date(), 'YYYY-MM-DD'));
+});
 </script>
 
-
 <template>
     <q-page
         padding