diff --git a/src/components/14_report/Expansion.vue b/src/components/14_report/Expansion.vue
index 581c677b..9f119bbf 100644
--- a/src/components/14_report/Expansion.vue
+++ b/src/components/14_report/Expansion.vue
@@ -15,9 +15,7 @@ defineProps<{
     :default-opened="defaultOpened"
   >
     <template #header>
-      <span>
-        <slot name="header" />
-      </span>
+      <slot name="header" />
     </template>
 
     <main class="surface-1 q-pa-md full-width">
diff --git a/src/pages/14_report/MainPage.vue b/src/pages/14_report/MainPage.vue
index e59a3f55..c96fbe2d 100644
--- a/src/pages/14_report/MainPage.vue
+++ b/src/pages/14_report/MainPage.vue
@@ -24,6 +24,7 @@ import useFlowStore from 'src/stores/flow';
 import { useReportStore } from 'src/stores/report';
 import BadgeComponent from 'src/components/BadgeComponent.vue';
 import Expansion from 'src/components/14_report/Expansion.vue';
+import { SaveButton } from 'src/components/button';
 
 // NOTE: Variable
 const navigatorStore = useNavigator();
@@ -166,7 +167,17 @@ watch([() => pageState.currentTab], async () => {
               <!-- Quotatio -->
 
               <Expansion default-opened>
-                <template #header>{{ $t('quotation.title') }}</template>
+                <template #header>
+                  <div class="flex full-width items-center">
+                    {{ $t('quotation.title') }}
+                    <SaveButton
+                      style="margin-left: auto"
+                      :icon="'material-symbols:download'"
+                      :label="$t('general.download')"
+                      @click.stop="reportStore.downloadReportQuotation()"
+                    />
+                  </div>
+                </template>
 
                 <template #main>
                   <TableReport
@@ -185,7 +196,17 @@ watch([() => pageState.currentTab], async () => {
 
               <!-- Invoice -->
               <Expansion default-opened>
-                <template #header>{{ $t('invoice.title') }}</template>
+                <template #header>
+                  <div class="flex full-width items-center">
+                    {{ $t('invoice.title') }}
+                    <SaveButton
+                      style="margin-left: auto"
+                      :icon="'material-symbols:download'"
+                      :label="$t('general.download')"
+                      @click.stop="reportStore.downloadReportInvoice()"
+                    />
+                  </div>
+                </template>
                 <template #main>
                   <TableReport :row="dataReportInvoice" :columns="colReport">
                     <template #status="{ item }">
@@ -200,7 +221,17 @@ watch([() => pageState.currentTab], async () => {
 
               <!-- Receipt -->
               <Expansion default-opened>
-                <template #header>{{ $t('receipt.title') }}</template>
+                <template #header>
+                  <div class="flex full-width items-center">
+                    {{ $t('receipt.title') }}
+                    <SaveButton
+                      style="margin-left: auto"
+                      :icon="'material-symbols:download'"
+                      :label="$t('general.download')"
+                      @click.stop="reportStore.downloadReportReceipt()"
+                    />
+                  </div>
+                </template>
                 <template #main>
                   <TableReport :row="dataReportReceipt" :columns="colReport">
                     <template #status="{ item }">
@@ -217,7 +248,17 @@ watch([() => pageState.currentTab], async () => {
 
           <template v-if="pageState.currentTab === ViewMode.Invoice">
             <Expansion default-opened>
-              <template #header>{{ $t('invoice.title') }}</template>
+              <template #header>
+                <div class="flex full-width items-center">
+                  {{ $t('invoice.title') }}
+                  <SaveButton
+                    style="margin-left: auto"
+                    :icon="'material-symbols:download'"
+                    :label="$t('general.download')"
+                    @click.stop="reportStore.downloadReportInvoice()"
+                  />
+                </div>
+              </template>
               <template #main>
                 <TableReport :row="dataReportInvoice" :columns="colReport">
                   <template #status="{ item }">
@@ -233,7 +274,17 @@ watch([() => pageState.currentTab], async () => {
 
           <template v-if="pageState.currentTab === ViewMode.Product">
             <Expansion default-opened>
-              <template #header>{{ $t('productService.title') }}</template>
+              <template #header>
+                <div class="flex full-width items-center">
+                  {{ $t('productService.title') }}
+                  <SaveButton
+                    style="margin-left: auto"
+                    :icon="'material-symbols:download'"
+                    :label="$t('general.download')"
+                    @click.stop="reportStore.downloadReportInvoice()"
+                  />
+                </div>
+              </template>
               <template #main>
                 <TableReport
                   :row="dataReportProduct"
diff --git a/src/stores/report/index.ts b/src/stores/report/index.ts
index 6ba9ce2f..aae45d32 100644
--- a/src/stores/report/index.ts
+++ b/src/stores/report/index.ts
@@ -1,6 +1,5 @@
 import { ref } from 'vue';
 import { defineStore } from 'pinia';
-import { Pagination, Status } from '../types';
 import { api } from 'src/boot/axios';
 import {
   Report,
@@ -9,9 +8,33 @@ import {
   ReportQuotation,
   ReportSale,
 } from './types';
+import { baseUrl } from '../utils';
+import { getToken } from 'src/services/keycloak';
 
 const ENDPOINT = 'report';
 
+async function _download(url: string, filename?: string) {
+  const res = await fetch(url, {
+    headers: { ['Authorization']: 'Bearer ' + (await getToken()) },
+  });
+  const text = await res.json();
+  const blob = new Blob([text], { type: 'text/csv' });
+  if (res.ok && blob) {
+    const a = document.createElement('a');
+    a.download = (filename || 'report') + '.csv';
+    a.href = window.URL.createObjectURL(blob);
+    a.click();
+    a.remove();
+  }
+}
+
+export async function downloadReportQuotation() {
+  await _download(
+    baseUrl + '/' + ENDPOINT + '/quotation/download',
+    'quotation-report',
+  );
+}
+
 export async function getReportQuotation() {
   const res = await api.get<ReportQuotation[]>(`/${ENDPOINT}/quotation`);
   if (res.status < 400) {
@@ -21,6 +44,13 @@ export async function getReportQuotation() {
   return null;
 }
 
+export async function downloadReportInvoice() {
+  await _download(
+    baseUrl + '/' + ENDPOINT + '/invoice/download',
+    'invoice-report',
+  );
+}
+
 export async function getReportInvoice() {
   const res = await api.get<Report[]>(`/${ENDPOINT}/invoice`);
   if (res.status < 400) {
@@ -29,6 +59,13 @@ export async function getReportInvoice() {
   return null;
 }
 
+export async function downloadReportReceipt() {
+  await _download(
+    baseUrl + '/' + ENDPOINT + '/receipt/download',
+    'receipt-report',
+  );
+}
+
 export async function getReportReceipt() {
   const res = await api.get<Report[]>(`/${ENDPOINT}/receipt`);
   if (res.status < 400) {
@@ -46,6 +83,13 @@ export async function getReportSale() {
   return null;
 }
 
+export async function downloadReportProduct() {
+  await _download(
+    baseUrl + '/' + ENDPOINT + '/receipt/download',
+    'product-report',
+  );
+}
+
 export async function getReportProduct() {
   const res = await api.get<ReportProduct[]>(`/${ENDPOINT}/product`);
   if (res.status < 400) {
@@ -78,10 +122,14 @@ export const useReportStore = defineStore('report-store', () => {
     dataReportProduct,
     dataReportPayment,
 
+    downloadReportQuotation,
     getReportQuotation,
+    downloadReportInvoice,
     getReportInvoice,
+    downloadReportReceipt,
     getReportReceipt,
     getReportSale,
+    downloadReportProduct,
     getReportProduct,
     getReportPayment,
   };