diff --git a/src/modules/timesheet-approval/components/options-dialog-csv-download.vue b/src/modules/timesheet-approval/components/options-dialog-csv-download.vue
deleted file mode 100644
index d1e41a9..0000000
--- a/src/modules/timesheet-approval/components/options-dialog-csv-download.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<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/components/overview-list.vue b/src/modules/timesheet-approval/components/overview-list.vue
index 46153d8..14671d9 100644
--- a/src/modules/timesheet-approval/components/overview-list.vue
+++ b/src/modules/timesheet-approval/components/overview-list.vue
@@ -1,42 +1,37 @@
-<script
-    setup
-    lang="ts"
->
-    /* eslint-disable */
-    import { computed, ref } from 'vue';
-    import OverviewListItem from 'src/modules/timesheet-approval/components/overview-list-item.vue';
-    import LoadingOverlay from 'src/modules/shared/components/loading-overlay.vue';
-    import { useExpensesStore } from 'src/stores/expense-store';
-    import { useTimesheetStore } from 'src/stores/timesheet-store';
-    import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
-    import { overview_column_names, pay_period_overview_columns, type TimesheetOverview } from 'src/modules/timesheet-approval/models/timesheet-overview.models';
+<script setup lang="ts">
+/* eslint-disable */
+import { computed, ref } from 'vue';
+import OverviewListItem from 'src/modules/timesheet-approval/components/overview-list-item.vue';
+import LoadingOverlay from 'src/modules/shared/components/loading-overlay.vue';
+import { useTimesheetStore } from 'src/stores/timesheet-store';
+import { overview_column_names, pay_period_overview_columns, type TimesheetOverview } from 'src/modules/timesheet-approval/models/timesheet-overview.models';
 
-    const expenses_store = useExpensesStore();
-    const timesheet_store = useTimesheetStore();
-    const timesheet_approval_api = useTimesheetApprovalApi();
+const timesheet_store = useTimesheetStore();
 
-    const visible_columns = ref<string[]>([
-        overview_column_names.REGULAR,
-        overview_column_names.EVENING,
-        overview_column_names.EMERGENCY,
-        overview_column_names.SICK,
-        overview_column_names.VACATION,
-        overview_column_names.HOLIDAY,
-        overview_column_names.OVERTIME,
-        overview_column_names.IS_APPROVED,
-    ]);
+const visible_columns = ref<string[]>([
+    overview_column_names.REGULAR,
+    overview_column_names.EVENING,
+    overview_column_names.EMERGENCY,
+    overview_column_names.SICK,
+    overview_column_names.VACATION,
+    overview_column_names.HOLIDAY,
+    overview_column_names.OVERTIME,
+    overview_column_names.IS_APPROVED,
+]);
+
+const overview_rows = computed(() => timesheet_store.pay_period_overviews[0]?.regular_hours === -1 ?
+    [] :
+    timesheet_store.pay_period_overviews
+)
+
+const onClickedDetails = async (row: TimesheetOverview) => {
+    timesheet_store.current_pay_period_overview = row;
+    await timesheet_store.getTimesheetsByOptionalEmployeeEmail(row.email);
+
+    timesheet_store.is_details_dialog_open = true;
+};
 
-    const overview_rows = computed(() => timesheet_store.pay_period_overviews[0]?.regular_hours === -1 ?
-        [] :
-        timesheet_store.pay_period_overviews
-    )
 
-    const onClickedDetails = async (row: TimesheetOverview) => {
-        timesheet_store.current_pay_period_overview = row;
-        await timesheet_store.getTimesheetsByOptionalEmployeeEmail(row.email);
-        
-        timesheet_store.is_details_dialog_open = true;
-    };
 </script>
 
 <template>
diff --git a/src/modules/timesheet-approval/components/overview-report.vue b/src/modules/timesheet-approval/components/overview-report.vue
index 417f2b4..2813411 100644
--- a/src/modules/timesheet-approval/components/overview-report.vue
+++ b/src/modules/timesheet-approval/components/overview-report.vue
@@ -1,93 +1,92 @@
-<script
-    setup
-    lang="ts"
->
-    import { default_timesheet_approval_cvs_report_filters, type TimesheetApprovalCSVReportFilters } from 'src/modules/timesheet-approval/models/timesheet-approval-csv-report.models';
-    import { ref, computed } from 'vue';
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useTimesheetStore } from 'src/stores/timesheet-store';
+import { TimesheetApprovalCSVReportFilters } from 'src/modules/timesheet-approval/models/timesheet-approval-csv-report.models';
 
-    const report_filter_options = ref<TimesheetApprovalCSVReportFilters>(default_timesheet_approval_cvs_report_filters);
+const report_filter_options = ref<TimesheetApprovalCSVReportFilters>(new TimesheetApprovalCSVReportFilters);
 
-    const company_options = [
-        { label: 'Targo', value: report_filter_options.value.companies.targo },
-        { label: 'Solucom', value: report_filter_options.value.companies.solucom },
-    ];
+const selected_report_filters = ref<(keyof TimesheetApprovalCSVReportFilters)[]>(
+    Object.entries(report_filter_options.value).filter(([_key, value]) => value).map(([key]) => key as keyof TimesheetApprovalCSVReportFilters)
+);
 
-    const type_options = [
-        { label: 'timesheet_approvals.print_report.shifts', value: report_filter_options.value.types.shifts },
-        { label: 'timesheet_approvals.print_report.expenses', value: report_filter_options.value.types.expenses },
-        { label: 'shared.shift_type.holiday', value: report_filter_options.value.types.holiday },
-        { label: 'shared.shift_type.vacation', value: report_filter_options.value.types.vacation },
-    ];
+interface ReportOptions {
+    label: string;
+    value: keyof TimesheetApprovalCSVReportFilters;
+};
 
-    const is_download_button_disabled = computed(() => {
-        return company_options.map(option => option.value).filter(value => value === true).length > 0 ||
-            type_options.map(option => option.value).filter(value => value === true).length > 0;
-    });
+const timesheet_store = useTimesheetStore();
+
+const company_options: ReportOptions[] = [
+    { label: 'Targo', value: 'targo' },
+    { label: 'Solucom', value: 'solucom' },
+];
+
+const type_options: ReportOptions[] = [
+    { label: 'timesheet_approvals.print_report.shifts', value: 'shifts' },
+    { label: 'timesheet_approvals.print_report.expenses', value: 'expenses' },
+    { label: 'shared.shift_type.holiday', value: 'holiday' },
+    { label: 'shared.shift_type.vacation', value: 'vacation' },
+];
+
+const is_download_button_enable = computed(() =>
+    company_options.map(option => option.value).some(option => selected_report_filters.value.includes(option)) &&
+    type_options.map(option => option.value).some(option => selected_report_filters.value.includes(option))
+);
+
+const onClickedDownload = async () => {
+    await timesheet_store.getPayPeriodReport(report_filter_options.value);
+}
 </script>
 
 <template>
-    <q-btn-group
-        rounded
-        push
-    >
-        <q-btn
-            rounded
-            push
-            color="primary"
-            icon="print"
-            :disable="is_download_button_disabled"
-        />
-
-        <q-btn-dropdown
-            rounded
-            push
-            color="white"
-            text-color="primary"
-            icon="checklist"
-        >
-            <q-list class="row">
-                <q-item class="col">
-                    <q-item-label class="text-weight-bolder text-primary q-ma-none q-pa-none text-uppercase">
-                        {{ $t('timesheet_approvals.print_report.company') }}
-                    </q-item-label>
-
-                    <q-item-section
-                        row
-                        no-wrap
-                    >
-                        <q-checkbox
-                            v-for="option, index in company_options"
-                            :key="index"
-                            v-model="option.value"
-                            :val="option.label"
-                            :label="option.label"
-                        />
-                    </q-item-section>
-                </q-item>
-
-                <q-separator
-                    spaced
-                    vertical
-                    color="primary"
+    <q-dialog v-model="timesheet_store.is_report_dialog_open">
+        <div class="bg-dark column full-width">
+            <div class="row col-auto q-py-md q-px-sm">
+                <q-checkbox
+                    v-for="company, index in company_options"
+                    :key="index"
+                    v-model="selected_report_filters"
+                    left-label
+                    :label="$t(company.label)"
+                    :val="company.value"
+                    class="col-auto q-px-md q-mx-xs shadow-1 rounded-25"
+                    dense
+                    :class="selected_report_filters.includes(company.value) ? 'bg-accent text-white' : ''"
+                    color="white"
+                    checked-icon="download"
+                    unchecked-icon="highlight_off"
                 />
+            </div>
 
-                <q-item class="col">
-                    <q-item-section
-                        row
-                        no-wrap
-                    >
-                        <p class="text-weight-bolder text-primary q-ma-none q-pa-none text-uppercase">
-                            {{ $t('timesheet_approvals.print_report.type') }}</p>
-                        <q-checkbox
-                            v-for="option, index in type_options"
-                            :key="index"
-                            v-model="option.value"
-                            :val="option.label"
-                            :label="option.label"
-                        />
-                    </q-item-section>
-                </q-item>
-            </q-list>
-        </q-btn-dropdown>
-    </q-btn-group>
+            <div class="row col-auto q-py-md q-px-sm">
+                <q-checkbox
+                    v-for="type, index in type_options"
+                    :key="index"
+                    v-model="selected_report_filters"
+                    left-label
+                    color="white"
+                    class="col-auto q-px-md q-mx-xs shadow-1 rounded-25"
+                    dense
+                    :class="selected_report_filters.includes(type.value) ? 'bg-accent text-white' : ''"
+                    :label="$t(type.label)"
+                    :val="type.value"
+                    checked-icon="download"
+                    unchecked-icon="highlight_off"
+                />
+            </div>
+            <div>
+                <q-btn
+                    :disable="!is_download_button_enable"
+                    dense
+                    push
+                    size="md"
+                    icon="download"
+                    class=""
+                    :color="is_download_button_enable ? 'accent' : 'grey-5'"
+                    :label="$t('shared.label.download')"
+                    @click="onClickedDownload()"
+                />
+            </div>
+        </div>
+    </q-dialog>
 </template>
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts b/src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts
index 39bb247..ffb74a9 100644
--- a/src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts
+++ b/src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts
@@ -26,21 +26,16 @@ export const useTimesheetApprovalApi = () => {
         timesheet_store.is_loading = false;
     };
 
-    const getTimesheetApprovalCSVReport = async (report_filter_company: boolean[], report_filter_type: boolean[], year?: number, period_number?: number) => {
+    const getTimesheetApprovalCSVReport = async (report_filter_company: boolean[], report_filter_type: boolean[]) => {
         if (timesheet_store.pay_period === undefined) return;
 
         const [targo, solucom] = report_filter_company;
         const [shifts, expenses, holiday, vacation] = report_filter_type;
         const options = {
-            types: { shifts, expenses, holiday, vacation },
-            companies: { targo, solucom },
+             shifts, expenses, holiday, vacation, targo, solucom 
         } as TimesheetApprovalCSVReportFilters;
 
-        await timesheet_store.getPayPeriodReportByYearAndPeriodNumber(
-            year ?? timesheet_store.pay_period.pay_year,
-            period_number ?? timesheet_store.pay_period.pay_period_no,
-            options
-        );
+        await timesheet_store.getPayPeriodReport(options);
     };
 
     return {
diff --git a/src/modules/timesheet-approval/models/timesheet-approval-csv-report.models.ts b/src/modules/timesheet-approval/models/timesheet-approval-csv-report.models.ts
index 3633813..572e1a6 100644
--- a/src/modules/timesheet-approval/models/timesheet-approval-csv-report.models.ts
+++ b/src/modules/timesheet-approval/models/timesheet-approval-csv-report.models.ts
@@ -1,25 +1,18 @@
-export interface TimesheetApprovalCSVReportFilters {
-    types: {
-        shifts: boolean;
-        expenses: boolean;
-        holiday: boolean;
-        vacation: boolean;
-    };
-    companies: {
-        targo: boolean;
-        solucom: boolean;
+export class TimesheetApprovalCSVReportFilters {
+    shifts: boolean;
+    expenses: boolean;
+    holiday: boolean;
+    vacation: boolean;
+    targo: boolean;
+    solucom: boolean;
+
+    constructor() {
+        this.shifts = true;
+        this.expenses = true;
+        this.holiday = false;
+        this.vacation = false;
+        this.targo = true;
+        this.solucom = true;
     };
 }
 
-export const default_timesheet_approval_cvs_report_filters: TimesheetApprovalCSVReportFilters = {
-    types: {
-        shifts: true,
-        expenses: true,
-        holiday: true,
-        vacation: true,
-    },
-    companies: {
-        targo: true,
-        solucom: true,
-    },
-};
\ No newline at end of file
diff --git a/src/pages/timesheet-approval-page.vue b/src/pages/timesheet-approval-page.vue
index d9201cb..f0d3834 100644
--- a/src/pages/timesheet-approval-page.vue
+++ b/src/pages/timesheet-approval-page.vue
@@ -9,6 +9,7 @@ import OverviewList from 'src/modules/timesheet-approval/components/overview-lis
 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';
+import OverviewReport from 'src/modules/timesheet-approval/components/overview-report.vue';
 
 const timesheet_approval_api = useTimesheetApprovalApi();
 const timesheet_store = useTimesheetStore();
@@ -74,12 +75,12 @@ onMounted(async () => {
                     color="accent"
                     :label="$q.screen.lt.md ? '' : $t('shared.label.download')"
                     class="col-auto q-mr-sm"
+                    @click="timesheet_store.is_report_dialog_open = true"
                 />
-
                 <QTableFilters v-model:search="timesheet_store.search_filter" />
             </div>
         </div>
-
+        <OverviewReport />
         <OverviewList class="col" />
     </q-page>
 </template>
\ No newline at end of file
diff --git a/src/stores/timesheet-store.ts b/src/stores/timesheet-store.ts
index 22b9f56..e749d4f 100644
--- a/src/stores/timesheet-store.ts
+++ b/src/stores/timesheet-store.ts
@@ -3,7 +3,7 @@ import { defineStore } from 'pinia';
 import { unwrapAndClone } from 'src/utils/unwrap-and-clone';
 import { timesheetApprovalService } from 'src/modules/timesheet-approval/services/timesheet-approval-service';
 import { timesheetService } from 'src/modules/timesheets/services/timesheet-service';
-import type { TimesheetOverview } from "src/modules/timesheet-approval/models/timesheet-overview.models";
+import type { PayPeriodOverviewResponse, TimesheetOverview } from "src/modules/timesheet-approval/models/timesheet-overview.models";
 import type { PayPeriod } from 'src/modules/shared/models/pay-period.models';
 import type { Timesheet } from 'src/modules/timesheets/models/timesheet.models';
 import type { TimesheetApprovalCSVReportFilters } from 'src/modules/timesheet-approval/models/timesheet-approval-csv-report.models';
@@ -17,7 +17,8 @@ export const useTimesheetStore = defineStore('timesheet', () => {
     const initial_timesheets = ref<Timesheet[]>([]);
     
     const pay_period_overviews = ref<TimesheetOverview[]>([]);
-    const is_csv_dialog_open = ref(false);
+    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>();
@@ -94,9 +95,10 @@ export const useTimesheetStore = defineStore('timesheet', () => {
         }
     };
 
-    const getPayPeriodReportByYearAndPeriodNumber = async (year: number, period_number: number, report_filters?: TimesheetApprovalCSVReportFilters) => {
+    const getPayPeriodReport = async ( report_filters?: TimesheetApprovalCSVReportFilters) => {
         try {
-            const response = await timesheetApprovalService.getPayPeriodReportByYearAndPeriodNumber(year, period_number, report_filters);
+            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;
         } catch (error) {
@@ -107,15 +109,28 @@ export const useTimesheetStore = defineStore('timesheet', () => {
         return false;
     };
 
+    const openReportDialog = () => {
+        is_report_dialog_open.value = true;
+        is_loading.value = true;
+        
+
+        is_loading.value = false;
+    };
+
+    const closeReportDialog = () => {
+        is_report_dialog_open.value = false;
+    };
+
     return {
         is_loading,
-        is_csv_dialog_open,
+        is_report_dialog_open,
         is_approval_grid_mode,
         is_details_dialog_open,
         search_filter,
         pay_period,
         pay_period_overviews,
         current_pay_period_overview,
+        pay_period_infos,
         selected_employee_name,
         timesheets,
         all_current_shifts,
@@ -123,6 +138,8 @@ export const useTimesheetStore = defineStore('timesheet', () => {
         getPayPeriodByDateOrYearAndNumber,
         getTimesheetOverviews,
         getTimesheetsByOptionalEmployeeEmail,
-        getPayPeriodReportByYearAndPeriodNumber,
+        getPayPeriodReport,
+        openReportDialog,
+        closeReportDialog,
     };
 });
\ No newline at end of file