diff --git a/src/modules/timesheets/composables/use-timesheet-api.ts b/src/modules/timesheets/composables/use-timesheet-api.ts
index e69de29..f04ecf4 100644
--- a/src/modules/timesheets/composables/use-timesheet-api.ts
+++ b/src/modules/timesheets/composables/use-timesheet-api.ts
@@ -0,0 +1,33 @@
+import { useAuthStore } from "src/stores/auth-store";
+import { useTimesheetStore } from "src/stores/timesheet-store"
+import { ref } from "vue";
+import { timesheetTempService } from "../services/timesheet-services";
+
+
+export const useTimesheetApi = () => {
+    const timesheet_store = useTimesheetStore();
+    const auth_store = useAuthStore();
+    const week_offset = ref(0);
+
+    const fetch_week = async (offset = week_offset.value) => {
+        const email = auth_store.user?.email;
+        if(!email) return;
+        try{
+            timesheet_store.is_loading = true;
+            const timesheet = await timesheetTempService.getTimesheetsByEmail(email, offset);
+            timesheet_store.current_timesheet = timesheet;
+            week_offset.value = offset;
+        }catch (err) {
+            console.error('fetch week error', err);
+            timesheet_store.current_timesheet = { ...timesheet_store.current_timesheet, shifts: [], expenses: [] };
+        } finally {
+            timesheet_store.is_loading = false;
+        }
+    };
+
+    const this_week     = async () => fetch_week(0);
+    const next_week     = async () => fetch_week(week_offset.value + 1);
+    const previous_week = async () => fetch_week(week_offset.value - 1);
+
+    return { week_offset, this_week, next_week, previous_week, fetch_week};
+}
\ No newline at end of file
diff --git a/src/modules/timesheets/pages/timesheet-temp-page.vue b/src/modules/timesheets/pages/timesheet-temp-page.vue
index d030193..1b5d365 100644
--- a/src/modules/timesheets/pages/timesheet-temp-page.vue
+++ b/src/modules/timesheets/pages/timesheet-temp-page.vue
@@ -1,20 +1,28 @@
 <script setup lang="ts">
 import { date } from 'quasar';
 import { useTimesheetStore } from 'src/stores/timesheet-store';
-import { computed } from 'vue';
+import { useTimesheetApi } from '../composables/use-timesheet-api';
+import { computed, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 
-    const {locale} = useI18n();
-    const timeSheet_store = useTimesheetStore();
+    const { locale } = useI18n();
+    const timesheet_store = useTimesheetStore();
+    const { this_week } = useTimesheetApi();
+
+    onMounted(async () => {
+        await this_week();
+    });
+
     const date_options: Intl.DateTimeFormatOptions = {
-        day: 'numeric',
+        day:   'numeric',
         month: 'long',
-        year: 'numeric',
+        year:  'numeric',
     };
 
     const timesheet_label = computed(() => {
-        const dates = timeSheet_store.current_timesheet.label.split('.');
+        const dates = timesheet_store.current_timesheet.label.split('.');
+        console.log(dates);
         const start_date = new Intl.DateTimeFormat(locale.value, date_options).format(date.extractDate(dates[0] as string, 'YYYY-MM-DD'));
         const end_date = new Intl.DateTimeFormat(locale.value, date_options).format(date.extractDate(dates[1] as string, 'YYYY-MM-DD'));
        
@@ -34,14 +42,14 @@ import { useI18n } from 'vue-i18n';
         padding
         class="q-pa-md bg secondary"
     >
-        <div class="text-h4 row justify-center q-mt-lg text-uppercase text-weight-bolder text-gray-8">
+        <div class="text-h4 row justify-center q-mt-lg text-uppercase text-weight-bolder text-grey-8">
             {{ $t('pageTitles.timeSheets') }}
         </div>
             <div class="row items-center justify-center q-py-none q-my-none">
                 <div class="text-primary text-h6 text-uppercase">
                     {{ timesheet_label.start_date }}
                 </div>
-                <div class="text-primary text-h6 text-uppercase">
+                <div class="text-grey-8 text-weight-bold text-uppercase q-mx-md">
                     {{ $t('timeSheet.dateRangesTo') }}
                 </div>
                 <div class="text-primary text-h6 text-uppercase">
diff --git a/src/modules/timesheets/services/timesheet-services.ts b/src/modules/timesheets/services/timesheet-services.ts
index c660cbc..1b5803b 100644
--- a/src/modules/timesheets/services/timesheet-services.ts
+++ b/src/modules/timesheets/services/timesheet-services.ts
@@ -2,8 +2,8 @@ import { api } from "src/boot/axios";
 import type  {Timesheet}  from "src/modules/timesheets/types/timesheet-interface";
 
 export const timesheetTempService = {
-    getTimesheetsByNumberAndEmail: async ( timesheet_id: number, email: string): Promise<Timesheet> => {
-        const response = await api.get(`timesheet/id/${timesheet_id}/email/${email}`);
-        return response.data;
+    getTimesheetsByEmail: async ( email: string, offset = 0): Promise<Timesheet> => {
+        const response = await api.get(`/timesheets/${encodeURIComponent(email)}`, {params: offset ? { offset } : undefined});
+        return response.data as Timesheet;
     },
 };
\ No newline at end of file
diff --git a/src/modules/timesheets/types/timesheet-interface.ts b/src/modules/timesheets/types/timesheet-interface.ts
index 66157f0..9986fbd 100644
--- a/src/modules/timesheets/types/timesheet-interface.ts
+++ b/src/modules/timesheets/types/timesheet-interface.ts
@@ -1,9 +1,28 @@
 export interface Timesheet {
-    timesheet_id: number;
     is_approved: boolean;
     start_day: string;
     end_day: string;
     label: string;
     shifts: Shifts[];
-    expenses: Expenses;
+    expenses: Expenses[];
+}
+
+type Shifts = {
+    bank_type: string;
+    date: string;
+    start_time: string;
+    end_time: string;
+    description: string;
+    is_approved: boolean;
+}
+
+
+type Expenses = { 
+    bank_type: string;
+    date: string;
+    amount: number;
+    km: number;
+    description: string;
+    supervisor_comment: string;
+    is_approved: boolean;
 }
\ No newline at end of file
diff --git a/src/stores/timesheet-store.ts b/src/stores/timesheet-store.ts
index da76327..1ef2b28 100644
--- a/src/stores/timesheet-store.ts
+++ b/src/stores/timesheet-store.ts
@@ -7,7 +7,6 @@ import type { PayPeriodEmployeeDetails } from 'src/modules/timesheet-approval/ty
 import type { PayPeriodReportFilters } from 'src/modules/timesheet-approval/types/timesheet-approval-pay-period-report-interface';
 import type { Timesheet } from 'src/modules/timesheets/types/timesheet-interface';
 import { timesheetTempService } from 'src/modules/timesheets/services/timesheet-services';
-import type { EmployeeTimesheetDetailsWeek } from 'src/modules/timesheets/types/timesheet-details-interface';
 
 const default_pay_period: PayPeriod = { 
     pay_period_no: -1,
@@ -18,11 +17,14 @@ const default_pay_period: PayPeriod = {
     label: ''
  };
 
+ //employee timesheet
  const default_timesheet: Timesheet = {
-    timesheet_id: -1,
     start_day: '',
     end_day: '',
     label: '',
+    is_approved: false,
+    shifts: [],
+    expenses: [],
  };
 
 export const useTimesheetStore = defineStore('timesheet', () => {
@@ -35,7 +37,6 @@ export const useTimesheetStore = defineStore('timesheet', () => {
 
     //employee timesheet
     const current_timesheet = ref<Timesheet>(default_timesheet);
-    const timesheet_employee_details = ref<EmployeeTimesheetDetailsWeek | undefined>();
 
     const getPayPeriodByDate = async (date_string: string): Promise<boolean> => {
         is_loading.value = true;
@@ -99,19 +100,18 @@ export const useTimesheetStore = defineStore('timesheet', () => {
         is_loading.value = false;
     };
 
-    const getTimesheetByNumberAndEmail = async (employee_email: string) => {
+    //employee timesheet
+    const getTimesheetByEmail = async (employee_email: string) => {
         is_loading.value = true;
-
         try{
-            const response = await timesheetTempService.getTimesheetsByNumberAndEmail(
-                current_timesheet.value.timesheet_id,
-                employee_email
-            );
-            timesheet_employee_details.value = response;
+            const response = await timesheetTempService.getTimesheetsByEmail(employee_email);
+            current_timesheet.value = response;
         }catch (error) {
             console.error('There was an error retrieving timesheet details for this employee: ', error);
+            current_timesheet.value = { ...default_timesheet }
+        } finally {
+            is_loading.value = false;
         }
-        is_loading.value = false;
     }
 
     const getTimesheetsByPayPeriodAndEmail = async (employee_email: string) => {
@@ -158,7 +158,7 @@ export const useTimesheetStore = defineStore('timesheet', () => {
         current_timesheet,
         is_loading,
         getPayPeriodByDate,
-        getTimesheetByNumberAndEmail,
+        getTimesheetByEmail,
         getPayPeriodByYearAndPeriodNumber,
         getTimesheetApprovalPayPeriodEmployeeOverviews,
         getTimesheetsByPayPeriodAndEmail,