diff --git a/src/pages/15_dash-board/MainPage.vue b/src/pages/15_dash-board/MainPage.vue
index 0a82c3a7..58ca2bd4 100644
--- a/src/pages/15_dash-board/MainPage.vue
+++ b/src/pages/15_dash-board/MainPage.vue
@@ -12,9 +12,13 @@ import ChartSales from './chart/ChartSales.vue';
 
 // NOTE: Stores & Type
 import { useNavigator } from 'src/stores/navigator';
+import { useQuotationStore } from 'src/stores/quotations';
+import { storeToRefs } from 'pinia';
 
 // NOTE: Variable
 const navigatorStore = useNavigator();
+const quotationStore = useQuotationStore();
+const { stats: quotationStats } = storeToRefs(quotationStore);
 
 const state = reactive({
   role: 'admin',
@@ -36,6 +40,12 @@ const option = reactive({
 onMounted(async () => {
   navigatorStore.current.title = 'dashboard.title';
   navigatorStore.current.path = [{ text: '' }];
+
+  const ret = await quotationStore.getQuotationStats();
+  if (ret) {
+    quotationStats.value = Object.assign(quotationStats.value, ret);
+    console.log(quotationStats.value);
+  }
 });
 </script>
 <template>
@@ -95,7 +105,7 @@ onMounted(async () => {
     <section class="col q-mt-md">
       <div class="full-height scroll">
         <article class="row q-col-gutter-sm">
-          <div class="col-md-8 col-12">
+          <div class="col-sm-8 col-12">
             <ChartReceipt
               class="full-height"
               :summary="[45, 30, 10, 5]"
@@ -119,15 +129,16 @@ onMounted(async () => {
               ]"
             />
           </div>
-          <div class="col-md-4 col-12">
+          <div class="col-sm-4 col-12">
             <ChartOpportunity
               class="full-height"
               :labels="['1', '2', '3', '4', '5', '6', '7', '8']"
               :series="[581, 389, 609, 581, 603, 600, 699, 347]"
             />
           </div>
-          <div class="col-md-4 col-12">
+          <div class="col-sm-4 col-12">
             <ChartQuotationStatus
+              v-if="quotationStats"
               class="full-height"
               :labels="[
                 $t('dashboard.quotation.waitCustomer'),
@@ -135,10 +146,23 @@ onMounted(async () => {
                 $t('dashboard.quotation.complete'),
                 $t('dashboard.quotation.cancel'),
               ]"
-              :series="[{ data: [1, 2, 3, 4] }]"
+              :series="[
+                {
+                  data: true
+                    ? []
+                    : [
+                        quotationStats.issued || 0,
+                        quotationStats.accepted +
+                          quotationStats.paymentInProcess +
+                          quotationStats.paymentSuccess || 1,
+                        quotationStats.processComplete || 1,
+                        quotationStats.canceled || 1,
+                      ],
+                },
+              ]"
             />
           </div>
-          <div class="col-md-8 col-12">
+          <div class="col-sm-8 col-12">
             <ChartSales class="full-height" />
           </div>
         </article>