diff --git a/src/components/01_branch-management/StatCardComponet.vue b/src/components/01_branch-management/StatCardComponet.vue
new file mode 100644
index 00000000..7f2c63ae
--- /dev/null
+++ b/src/components/01_branch-management/StatCardComponet.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import AppBox from 'components/app/AppBox.vue';
+
+defineProps<{
+  amount: string;
+  label: string;
+}>();
+</script>
+
+<template>
+  <app-box class="bordered" style="width: 15%; min-width: 150px">
+    <div class="column">
+      <div class="col-4 text-h6 text-weight-bold">{{ amount }}</div>
+      <div class="col-4 text-weight-bold">{{ label }}</div>
+    </div>
+  </app-box>
+</template>
+
+<style scoped></style>
diff --git a/src/components/TooltipComponet.vue b/src/components/TooltipComponet.vue
new file mode 100644
index 00000000..595774dd
--- /dev/null
+++ b/src/components/TooltipComponet.vue
@@ -0,0 +1,136 @@
+<script setup lang="ts">
+defineProps<{
+  imgSrc: string;
+}>();
+</script>
+
+<template>
+  <div class="tooltip" :class="{ 'dark-tooltip': $q.dark.isActive }">
+    <q-btn
+      unelevated
+      class="color-btn-icon"
+      size="10px"
+      round
+      icon="mdi-exclamation"
+      :class="{ 'dark-btn-icon': $q.dark.isActive }"
+    ></q-btn>
+
+    <div
+      class="tooltip-text"
+      :class="{ 'dark-tooltip-text': $q.dark.isActive }"
+    >
+      <q-img
+        class="q-mt-md"
+        :src="`/${imgSrc}${$q.dark.isActive ? 'dark' : 'light'}.png`"
+        width="60%"
+      />
+      <div
+        class="box-content"
+        :class="{ 'dack-box-content': $q.dark.isActive }"
+      >
+        <div class="column justify-center" style="height: 100%">
+          <div class="col-4">{{ $t('branchNoMainOfficeYet') }}</div>
+          <div class="col-4 q-mb-md q-px-md">
+            <div
+              class="content-text q-pa-sm"
+              :class="{ 'dack-content-text': $q.dark.isActive }"
+            >
+              {{ $t('branchClickToCreateMainOffice') }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.box-content {
+  position: absolute;
+  width: 100%;
+  height: 45%;
+  background: var(--_bg-box-content);
+  bottom: 0;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+
+  .content-text {
+    color: var(--_color-box-content-text);
+    background: var(--_bg-box-content-text);
+    border-radius: 6px;
+
+    &.dack-content-text {
+      border: 1px solid var(--brand-1);
+    }
+  }
+
+  &.dack-box-content {
+    border: 1px solid var(--gray-7);
+  }
+}
+
+.tooltip {
+  position: relative;
+  display: inline-block;
+
+  &.dark-tooltip {
+    --_bg-box-content: var(--gray-9);
+    --_bg-tooltip-branch: var(--gray-11);
+    --_bg-tooltip-branch-arrow: var(--_bg-box-content);
+    --_bg-box-content-text: var(--gray-11);
+    --_color-box-content-text: var(--gray-0);
+    --_main-page-branch-tooltip: 100.5%;
+  }
+}
+
+.tooltip-text {
+  &.dark-tooltip-text {
+    border: 1px solid var(--gray-7);
+  }
+}
+
+.tooltip .tooltip-text {
+  visibility: hidden;
+  width: 250px;
+  height: 200px;
+  background-color: var(--_bg-tooltip-branch);
+  color: white;
+  text-align: center;
+  border-radius: 10px;
+  padding: 5px 0;
+  position: absolute;
+  z-index: 1;
+  bottom: -165px;
+  left: -265px;
+}
+
+.tooltip .tooltip-text::after {
+  content: '';
+  z-index: -99;
+  position: absolute;
+  top: 7%;
+  left: var(--_main-page-branch-tooltip);
+  border-width: 8px;
+  border-style: solid;
+  border-color: var(--_bg-tooltip-branch-arrow) transparent transparent
+    transparent;
+  transform: rotate(270deg);
+}
+
+.tooltip:hover .tooltip-text {
+  visibility: visible;
+}
+
+.color-btn-icon {
+  --_bg-color-btn-icon: var(--blue-5-hsl);
+  transform: rotate(180deg);
+  color: var(--gray-0);
+  background: hsl(var(--_bg-color-btn-icon));
+
+  &.dark-btn-icon {
+    --_bg-color-btn-icon: var(--surface-0);
+    border: 2px solid;
+    border-color: var(--brand-1);
+  }
+}
+</style>
diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index d2dc2166..42c3f939 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
-import BtnAddComponet from 'components/01_branch-management/BtnAddComponet.vue';
 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 TooltipComponet from 'src/components/TooltipComponet.vue';
 </script>
 <template>
   <div class="column">
@@ -8,47 +10,15 @@ import AppBox from 'components/app/AppBox.vue';
       {{ $t('branchManagement') }}
     </div>
 
+    <app-box>
+      <stat-card-componet amount="10" label="สาขาใหญ่" />
+    </app-box>
+
     <app-box bordered style="width: 100%; height: 500px">
       <div class="column" style="height: 100%">
         <div class="col-1 self-end">
           <div class="row">
-            <div class="tooltip" :class="{ 'dark-tooltip': $q.dark.isActive }">
-              <q-btn
-                unelevated
-                class="color-btn-icon"
-                size="10px"
-                round
-                icon="mdi-exclamation"
-                :class="{ 'dark-btn-icon': $q.dark.isActive }"
-              ></q-btn>
-
-              <div
-                class="tooltip-text"
-                :class="{ 'dark-tooltip-text': $q.dark.isActive }"
-              >
-                <q-img
-                  class="q-mt-md"
-                  :src="`/img-table-${$q.dark.isActive ? 'dark' : 'light'}.png`"
-                  width="60%"
-                />
-                <div
-                  class="box-content"
-                  :class="{ 'dack-box-content': $q.dark.isActive }"
-                >
-                  <div class="column justify-center" style="height: 100%">
-                    <div class="col-4">{{ $t('branchNoMainOfficeYet') }}</div>
-                    <div class="col-4 q-mb-md q-px-md">
-                      <div
-                        class="content-text q-pa-sm"
-                        :class="{ 'dack-content-text': $q.dark.isActive }"
-                      >
-                        {{ $t('branchClickToCreateMainOffice') }}
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
+            <tooltip-componet imgSrc="img-table-" />
           </div>
         </div>
 
@@ -70,93 +40,4 @@ import AppBox from 'components/app/AppBox.vue';
   </div>
 </template>
 
-<style scoped>
-.box-content {
-  position: absolute;
-  width: 100%;
-  height: 45%;
-  background: var(--_bg-box-content);
-  bottom: 0;
-  border-bottom-left-radius: 10px;
-  border-bottom-right-radius: 10px;
-
-  .content-text {
-    color: var(--_color-box-content-text);
-    background: var(--_bg-box-content-text);
-    border-radius: 6px;
-
-    &.dack-content-text {
-      border: 1px solid var(--brand-1);
-    }
-  }
-
-  &.dack-box-content {
-    border: 1px solid var(--gray-7);
-  }
-}
-
-.tooltip {
-  position: relative;
-  display: inline-block;
-
-  &.dark-tooltip {
-    --_bg-box-content: var(--gray-9);
-    --_bg-tooltip-branch: var(--gray-11);
-    --_bg-tooltip-branch-arrow: var(--_bg-box-content);
-    --_bg-box-content-text: var(--gray-11);
-    --_color-box-content-text: var(--gray-0);
-    --_main-page-branch-tooltip: 100.5%;
-  }
-}
-
-.tooltip-text {
-  &.dark-tooltip-text {
-    border: 1px solid var(--gray-7);
-  }
-}
-
-.tooltip .tooltip-text {
-  visibility: hidden;
-  width: 250px;
-  height: 200px;
-  background-color: var(--_bg-tooltip-branch);
-  color: white;
-  text-align: center;
-  border-radius: 10px;
-  padding: 5px 0;
-  position: absolute;
-  z-index: 1;
-  bottom: -165px;
-  left: -265px;
-}
-
-.tooltip .tooltip-text::after {
-  content: '';
-  z-index: -99;
-  position: absolute;
-  top: 7%;
-  left: var(--_main-page-branch-tooltip);
-  border-width: 8px;
-  border-style: solid;
-  border-color: var(--_bg-tooltip-branch-arrow) transparent transparent
-    transparent;
-  transform: rotate(270deg);
-}
-
-.tooltip:hover .tooltip-text {
-  visibility: visible;
-}
-
-.color-btn-icon {
-  --_bg-color-btn-icon: var(--blue-5-hsl);
-  transform: rotate(180deg);
-  color: var(--gray-0);
-  background: hsl(var(--_bg-color-btn-icon));
-
-  &.dark-btn-icon {
-    --_bg-color-btn-icon: var(--surface-0);
-    border: 2px solid;
-    border-color: var(--brand-1);
-  }
-}
-</style>
+<style scoped></style>