diff --git a/src/i18n/en-ca/index.ts b/src/i18n/en-ca/index.ts
index e9e1b3d..5e4d1d1 100644
--- a/src/i18n/en-ca/index.ts
+++ b/src/i18n/en-ca/index.ts
@@ -123,6 +123,7 @@ export default {
             update: "update",
             modify: "modify",
             close: "close",
+            download: "download",
         },
         misc: {
             or: "or",
diff --git a/src/i18n/fr-ca/index.ts b/src/i18n/fr-ca/index.ts
index 48e3201..173d4b2 100644
--- a/src/i18n/fr-ca/index.ts
+++ b/src/i18n/fr-ca/index.ts
@@ -124,6 +124,7 @@ export default {
             update: "mettre à jour",
             modify: "modifier",
             close: "fermer",
+            download: "téléchargement",
         },
         misc: {
             or: "ou",
diff --git a/src/modules/timesheet-approval/components/options-dialog-csv-download.vue b/src/modules/timesheet-approval/components/options-dialog-csv-download.vue
new file mode 100644
index 0000000..d1e41a9
--- /dev/null
+++ b/src/modules/timesheet-approval/components/options-dialog-csv-download.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { useTimesheetStore } from 'src/stores/timesheet-store';
+
+const timesheet_store = useTimesheetStore();
+
+</script>
+
+<template>
+    <q-dialog
+        v-model="timesheet_store.is_csv_dialog_open"
+        persistent
+        transition-show="jump-down"
+        transition-hide="jump-down"
+    >
+        <q-card
+            class="q-pa-none rounded-10 shadow-10"
+            :class="$q.screen.lt.md ? ' bg-primary' : 'bg-secondary'"
+            style=" min-width: 70vw;"
+            :style="$q.dark.isActive ? 'border: solid 2px var(--q-accent);' : ''"
+        >
+            <q-inner-loading :showing="timesheet_store.is_loading">
+                <q-spinner size="32px" />
+            </q-inner-loading>
+
+            <q-card-section class="q-pa-none">
+                <q-separator
+                    v-if="$q.screen.lt.md"
+                    spaced
+                    color="accent"
+                    size="2px"
+                    class="q-mx-md"
+                />
+            </q-card-section>
+        </q-card>
+
+    </q-dialog>
+
+</template>
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/services/timesheet-approval-service.ts b/src/modules/timesheet-approval/services/timesheet-approval-service.ts
index 46b13e0..7689075 100644
--- a/src/modules/timesheet-approval/services/timesheet-approval-service.ts
+++ b/src/modules/timesheet-approval/services/timesheet-approval-service.ts
@@ -9,7 +9,7 @@ export const timesheetApprovalService = {
     },
 
     getPayPeriodReportByYearAndPeriodNumber: async (year: number, period_number: number, report_filters?: TimesheetApprovalCSVReportFilters) => {
-        const response = await api.get(`csv/${year}/${period_number}`, { params: { report_filters, }});
+        const response = await api.get(`exports/csv/${year}/${period_number}`, { params: { report_filters, }});
         return response.data;
     },
 };
\ No newline at end of file
diff --git a/src/pages/timesheet-approval-page.vue b/src/pages/timesheet-approval-page.vue
index 562a618..d9201cb 100644
--- a/src/pages/timesheet-approval-page.vue
+++ b/src/pages/timesheet-approval-page.vue
@@ -1,24 +1,21 @@
-<script
-    setup
-    lang="ts"
->
-    /* eslint-disable */
-    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 DetailsDialog from 'src/modules/timesheet-approval/components/details-dialog.vue';
-    import QTableFilters from 'src/modules/shared/components/q-table-filters.vue';
-    import PayPeriodNavigator from 'src/modules/shared/components/pay-period-navigator.vue';
+<script setup lang="ts">
+/* eslint-disable */
+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 DetailsDialog from 'src/modules/timesheet-approval/components/details-dialog.vue';
+import QTableFilters from 'src/modules/shared/components/q-table-filters.vue';
+import PayPeriodNavigator from 'src/modules/shared/components/pay-period-navigator.vue';
 
-    const timesheet_approval_api = useTimesheetApprovalApi();
-    const timesheet_store = useTimesheetStore();
+const timesheet_approval_api = useTimesheetApprovalApi();
+const timesheet_store = useTimesheetStore();
 
-    onMounted(async () => {
-        await timesheet_approval_api.getTimesheetOverviewsByDate(date.formatDate(new Date(), 'YYYY-MM-DD'));
-    });
+onMounted(async () => {
+    await timesheet_approval_api.getTimesheetOverviewsByDate(date.formatDate(new Date(), 'YYYY-MM-DD'));
+});
 </script>
 
 <template>
@@ -66,13 +63,16 @@
                 ]"
             />
 
-            <div class="col-auto row no-wrap flex-center" :class="$q.screen.lt.md  ? 'q-mb-md' : ''">
-                <q-btn-dropdown
+            <div
+                class="col-auto row no-wrap flex-center"
+                :class="$q.screen.lt.md ? 'q-mb-md' : ''"
+            >
+                <q-btn
                     push
                     rounded
-                    icon="filter_alt"
+                    icon="download"
                     color="accent"
-                    :label="$q.screen.lt.md ? '' : $t('shared.label.filter')"
+                    :label="$q.screen.lt.md ? '' : $t('shared.label.download')"
                     class="col-auto q-mr-sm"
                 />
 
diff --git a/src/stores/timesheet-store.ts b/src/stores/timesheet-store.ts
index 3eae467..22b9f56 100644
--- a/src/stores/timesheet-store.ts
+++ b/src/stores/timesheet-store.ts
@@ -17,6 +17,7 @@ export const useTimesheetStore = defineStore('timesheet', () => {
     const initial_timesheets = ref<Timesheet[]>([]);
     
     const pay_period_overviews = ref<TimesheetOverview[]>([]);
+    const is_csv_dialog_open = ref(false);
     
     const is_details_dialog_open = ref(false);
     const selected_employee_name = ref<string>();
@@ -95,11 +96,7 @@ export const useTimesheetStore = defineStore('timesheet', () => {
 
     const getPayPeriodReportByYearAndPeriodNumber = async (year: number, period_number: number, report_filters?: TimesheetApprovalCSVReportFilters) => {
         try {
-            const response = await timesheetApprovalService.getPayPeriodReportByYearAndPeriodNumber(
-                year,
-                period_number,
-                report_filters
-            );
+            const response = await timesheetApprovalService.getPayPeriodReportByYearAndPeriodNumber(year, period_number, report_filters);
             pay_period_report.value = response;
             return true;
         } catch (error) {
@@ -112,6 +109,7 @@ export const useTimesheetStore = defineStore('timesheet', () => {
 
     return {
         is_loading,
+        is_csv_dialog_open,
         is_approval_grid_mode,
         is_details_dialog_open,
         search_filter,