diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 42c3f939..3d8b3706 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -1,8 +1,38 @@
 <script setup lang="ts">
 import AppBox from 'components/app/AppBox.vue';
 import BtnAddComponet from 'components/01_branch-management/BtnAddComponet.vue';
-import StatCardComponet from 'components/01_branch-management/StatCardComponet.vue';
+import StatCardComponet from 'components/StatCardComponet.vue';
 import TooltipComponet from 'src/components/TooltipComponet.vue';
+import { ref } from 'vue';
+
+const branchStat = ref<
+  {
+    amount: string;
+    label: string;
+  }[]
+>([
+  {
+    amount: '1',
+    label: 'สำนักงานใหญ่ 1',
+  },
+
+  {
+    amount: '2',
+    label: 'สำนักงานใหญ่ 2',
+  },
+  {
+    amount: '3',
+    label: 'สำนักงานใหญ่ 3',
+  },
+  {
+    amount: '4',
+    label: 'สำนักงานใหญ่ 4',
+  },
+  {
+    amount: '5',
+    label: 'สำนักงานใหญ่ 5',
+  },
+]);
 </script>
 <template>
   <div class="column">
@@ -10,8 +40,8 @@ import TooltipComponet from 'src/components/TooltipComponet.vue';
       {{ $t('branchManagement') }}
     </div>
 
-    <app-box>
-      <stat-card-componet amount="10" label="สาขาใหญ่" />
+    <app-box bordered class="q-mb-md">
+      <stat-card-componet :branch="branchStat" />
     </app-box>
 
     <app-box bordered style="width: 100%; height: 500px">