diff --git a/src/modules/timesheet-approval/components/overview-report.vue b/src/modules/timesheet-approval/components/overview-report.vue
index 1fd78bc..9ea7a91 100644
--- a/src/modules/timesheet-approval/components/overview-report.vue
+++ b/src/modules/timesheet-approval/components/overview-report.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useTimesheetStore } from 'src/stores/timesheet-store';
 import { TimesheetApprovalCSVReportFilters } from 'src/modules/timesheet-approval/models/timesheet-approval-csv-report.models';
 
@@ -33,8 +33,39 @@ const is_download_button_enable = computed(() =>
 );
 
 const onClickedDownload = async () => {
-    await timesheet_store.getPayPeriodReport(report_filter_options.value);
+    try {
+        const data = await timesheet_store.getPayPeriodReport(report_filter_options.value);
+
+        const companies = Object.entries(report_filter_options.value)
+            .filter(([key, value]) => value && (key === 'targo' || key === 'solucom')).map(([key]) => key).join('-');
+
+        const types = Object.entries(report_filter_options.value)
+            .filter(([key, value]) => value && ['shifts', 'expenses', 'holiday', 'vacation'].includes(key)).map(([key]) => key).join('-');
+
+        const file_name = `Desjardins_${companies}_${types}_${new Date().toISOString().split('T')[0]}.csv`;
+
+        const blob = new Blob([data], { type: 'text/csv;charset=utf-8;' });
+        const url = window.URL.createObjectURL(blob);
+        const link = document.createElement('a');
+
+        link.href = url;
+        link.setAttribute('download', file_name);
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        window.URL.revokeObjectURL(url);
+        console.log('CSV preview:', data);
+    } catch (error) {
+        console.error(`An error occured during the CSV download: `, error)
+    }
 }
+
+watch(selected_report_filters, (new_values) => {
+    Object.keys(report_filter_options.value).forEach(key => {
+        const typed_key = key as keyof TimesheetApprovalCSVReportFilters;
+        report_filter_options.value[typed_key] = new_values.includes(key as keyof TimesheetApprovalCSVReportFilters);
+    });
+});
 </script>
 
 <template>
@@ -66,9 +97,7 @@ const onClickedDownload = async () => {
                                 checked-icon="download"
                                 unchecked-icon="highlight_off"
                             />
-
                         </div>
-
                     </div>
                 </div>
                 <div class="row q-py-md">
@@ -94,7 +123,6 @@ const onClickedDownload = async () => {
                                     checked-icon="download"
                                     unchecked-icon="highlight_off"
                                 />
-
                             </div>
                         </div>
                     </div>
diff --git a/src/modules/timesheet-approval/services/timesheet-approval-service.ts b/src/modules/timesheet-approval/services/timesheet-approval-service.ts
index 7689075..a72c561 100644
--- a/src/modules/timesheet-approval/services/timesheet-approval-service.ts
+++ b/src/modules/timesheet-approval/services/timesheet-approval-service.ts
@@ -4,12 +4,12 @@ import type { PayPeriodOverviewResponse } from "src/modules/timesheet-approval/m
 
 export const timesheetApprovalService = {
     getPayPeriodOverviews: async (year: number, period_number: number): Promise<PayPeriodOverviewResponse> => {
-        const response = await api.get<{success: boolean, data: PayPeriodOverviewResponse, error? : string}>(`pay-periods/overview/${year}/${period_number}`);
+        const response = await api.get<{ success: boolean, data: PayPeriodOverviewResponse, error?: string }>(`pay-periods/overview/${year}/${period_number}`);
         return response.data.data;
     },
 
-    getPayPeriodReportByYearAndPeriodNumber: async (year: number, period_number: number, report_filters?: TimesheetApprovalCSVReportFilters) => {
-        const response = await api.get(`exports/csv/${year}/${period_number}`, { params: { report_filters, }});
-        return response.data;
+    getPayPeriodReportByYearAndPeriodNumber: async (year: number, period_number: number, filters?: TimesheetApprovalCSVReportFilters) => {
+        const response = await api.get(`exports/csv/${year}/${period_number}`, { params: filters, responseType: 'arraybuffer' });
+        return response;
     },
 };
\ No newline at end of file
diff --git a/src/stores/timesheet-store.ts b/src/stores/timesheet-store.ts
index e749d4f..d3b5d3d 100644
--- a/src/stores/timesheet-store.ts
+++ b/src/stores/timesheet-store.ts
@@ -15,11 +15,11 @@ export const useTimesheetStore = defineStore('timesheet', () => {
     const timesheets = ref<Timesheet[]>([]);
     const all_current_shifts = computed(() => timesheets.value.flatMap(week => week.days.flatMap(day => day.shifts)) ?? []);
     const initial_timesheets = ref<Timesheet[]>([]);
-    
+
     const pay_period_overviews = ref<TimesheetOverview[]>([]);
     const pay_period_infos = ref<PayPeriodOverviewResponse>();
     const is_report_dialog_open = ref(false);
-    
+
     const is_details_dialog_open = ref(false);
     const selected_employee_name = ref<string>();
     const current_pay_period_overview = ref<TimesheetOverview>();
@@ -95,12 +95,12 @@ export const useTimesheetStore = defineStore('timesheet', () => {
         }
     };
 
-    const getPayPeriodReport = async ( report_filters?: TimesheetApprovalCSVReportFilters) => {
+    const getPayPeriodReport = async (report_filters: TimesheetApprovalCSVReportFilters) => {
         try {
-            if(!pay_period.value) return false;
+            if (!pay_period.value) return false;
             const response = await timesheetApprovalService.getPayPeriodReportByYearAndPeriodNumber(pay_period.value.pay_year, pay_period.value.pay_period_no, report_filters);
             pay_period_report.value = response;
-            return true;
+            return response.data;
         } catch (error) {
             console.error('There was an error retrieving the report CSV: ', error);
             // TODO: More in-depth error-handling here
@@ -112,7 +112,7 @@ export const useTimesheetStore = defineStore('timesheet', () => {
     const openReportDialog = () => {
         is_report_dialog_open.value = true;
         is_loading.value = true;
-        
+
 
         is_loading.value = false;
     };
diff --git a/src/utils/boolean-utils.ts b/src/utils/boolean-utils.ts
new file mode 100644
index 0000000..8335e2c
--- /dev/null
+++ b/src/utils/boolean-utils.ts
@@ -0,0 +1,25 @@
+// export const createDefaultBooleanValue = <T extends PropertyKey>(keys_list: PropertyKey[]): Record<T, boolean> =>
+//     keys_list.reduce((acc, mod) => {
+//         acc[mod] = false;
+//         return acc;
+//     }, {} as Record<T, boolean>);
+
+
+// export const toBooleanFromKeys = <T extends PropertyKey>(keys_list: PropertyKey[], arr?: readonly PropertyKey[] | null): Record<T, boolean> => {
+//     const result = createDefaultBooleanValue(keys_list);
+//     if (!arr || !Array.isArray(arr)) return result;
+//     for (const item of arr) {
+//         if (typeof item !== 'string') continue;
+//         const trimmed = item.trim();
+//         if ((keys_list as readonly PropertyKey[]).includes(trimmed)) {
+//             result[trimmed as T] = true;
+//         }
+//     }
+//     return result;
+// }
+
+export const toKeysFromBoolean = <T extends PropertyKey>(boolean_values: Record<T, boolean>): T[] => {
+    const values_array = Object.entries(boolean_values);
+    const values = values_array.filter(([_key, value]) => value === true);
+    return values.map(([key]) => key as T);
+} 
\ No newline at end of file