diff --git a/src/components/button/SaveButton.vue b/src/components/button/SaveButton.vue
index d7325a45..10f42a9a 100644
--- a/src/components/button/SaveButton.vue
+++ b/src/components/button/SaveButton.vue
@@ -10,6 +10,7 @@ defineProps<{
   outlined?: boolean;
   disabled?: boolean;
   dark?: boolean;
+  color?: string;
 
   label?: string;
   icon?: string;
@@ -23,7 +24,7 @@ defineProps<{
     @click="(e) => $emit('click', e)"
     v-bind="{ ...$props, ...$attrs }"
     :icon="icon || 'mdi-content-save-outline'"
-    color="207 96% 32%"
+    :color="color || '207 96% 32%'"
     :title="iconOnly ? $t('general.save') : undefined"
   >
     {{ label || $t('general.save') }}
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 442401f1..092566cd 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -102,6 +102,8 @@ const {
   deleteWork,
 
   importProduct,
+
+  productExport,
 } = productServiceStore;
 
 const { workNameItems } = storeToRefs(productServiceStore);
@@ -1896,6 +1898,25 @@ async function submitWorkName(
   else await editWork(workId, data);
 }
 
+async function triggerExport() {
+  productExport({
+    pageSize: 100_000,
+    productGroupId: currentIdGroup.value,
+    query: !!inputSearchProductAndService.value
+      ? inputSearchProductAndService.value
+      : undefined,
+    status:
+      currentStatus.value === 'INACTIVE'
+        ? 'INACTIVE'
+        : currentStatus.value === 'ACTIVE'
+          ? 'ACTIVE'
+          : undefined,
+
+    startDate: new Date(searchDate.value[0]),
+    endDate: new Date(searchDate.value[1]),
+  });
+}
+
 watch(
   () => formService.value.attributes.workflowId,
   async (a, b) => {
@@ -2229,7 +2250,6 @@ watch(
                     </AdvanceSearch>
                   </template>
                 </q-input>
-
                 <div class="row col-md-6" style="white-space: nowrap">
                   <q-select
                     v-show="$q.screen.gt.sm"
@@ -2780,6 +2800,13 @@ watch(
                       }
                     "
                   />
+
+                  <SaveButton
+                    icon-only
+                    :icon="'material-symbols:download'"
+                    color="var(--info-bg)"
+                    @click.stop="triggerExport()"
+                  />
                 </div>
 
                 <div class="row col-md-6" style="white-space: nowrap">
@@ -3632,7 +3659,7 @@ watch(
     :delete-data="() => deleteGroupById()"
     :close="
       () => {
-        (drawerInfo = false), (currentIdGroupType = '');
+        ((drawerInfo = false), (currentIdGroupType = ''));
       }
     "
     hide-action
diff --git a/src/stores/product-service/index.ts b/src/stores/product-service/index.ts
index 80e32627..db178b43 100644
--- a/src/stores/product-service/index.ts
+++ b/src/stores/product-service/index.ts
@@ -2,6 +2,7 @@ import { defineStore } from 'pinia';
 import { api } from 'src/boot/axios';
 
 import { Pagination } from 'stores/types';
+import { getToken } from 'src/services/keycloak';
 
 import {
   ProductGroup,
@@ -19,6 +20,7 @@ import {
 import { ref } from 'vue';
 
 const useProductServiceStore = defineStore('api-product-service', () => {
+  const baseUrl = import.meta.env.VITE_API_BASE_URL;
   const splitPay = ref<number>(0);
   const workNameItems = ref<
     {
@@ -528,6 +530,53 @@ const useProductServiceStore = defineStore('api-product-service', () => {
     if (!res) return false;
   }
 
+  async function productExport(params: {
+    status?: 'CREATED' | 'ACTIVE' | 'INACTIVE';
+    shared?: boolean;
+    productGroupId?: string;
+    query?: string;
+    page?: number;
+    pageSize?: number;
+    orderField?: string;
+    orderBy?: string;
+    activeOnly?: boolean;
+    startDate?: Date;
+    endDate?: Date;
+  }) {
+    let url = baseUrl + '/' + 'product-export';
+
+    const queryParams = new URLSearchParams(
+      Object.keys(params).reduce((acc: Record<string, string>, key) => {
+        const value = params[key as keyof typeof params];
+        if (value !== undefined && value !== null && value !== '') {
+          const stringValue =
+            typeof value === 'boolean' || typeof value === 'number'
+              ? String(value)
+              : value instanceof Date
+                ? value.toISOString()
+                : String(value);
+          acc[key] = stringValue;
+        }
+        return acc;
+      }, {}),
+    );
+
+    url += '?' + queryParams.toString();
+
+    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 = 'customer-report' + '.csv';
+      a.href = window.URL.createObjectURL(blob);
+      a.click();
+      a.remove();
+    }
+  }
+
   return {
     workNameItems,
     splitPay,
@@ -568,6 +617,8 @@ const useProductServiceStore = defineStore('api-product-service', () => {
     deleteImageByName,
 
     importProduct,
+
+    productExport,
   };
 });