diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 220b41ac..42ad0978 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -1,2 +1,59 @@
-<script setup lang="ts"></script>
-<template>Branch Management</template>
+<script setup lang="ts">
+import BtnAddComponet from 'components/01_branch-management/BtnAddComponet.vue';
+import AppBox from 'components/app/AppBox.vue';
+</script>
+<template>
+  <div class="column">
+    <div class="row text-h6 text-weight-bold q-mb-md">จัดการสาขา</div>
+
+    <app-box bordered style="width: 100%; height: 500px">
+      <div class="column" style="height: 100%">
+        <div class="col-1 self-end">
+          <q-btn
+            unelevated
+            class="color-btn-icon"
+            size="10px"
+            round
+            icon="mdi-exclamation"
+            :class="{ dark: $q.dark.isActive }"
+          >
+            <q-tooltip>test</q-tooltip>
+          </q-btn>
+        </div>
+        <div
+          class="col test self-center"
+          style="display: flex; align-items: center"
+        >
+          <btn-add-componet
+            :label="'สร้างสำนักงานใหญ่'"
+            @trigger="
+              () => {
+                console.log('test');
+              }
+            "
+          />
+        </div>
+      </div>
+    </app-box>
+  </div>
+</template>
+
+<style scoped>
+/* .test {
+  display: flex;
+  align-items: center;
+} */
+
+.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 {
+    --_bg-color-btn-icon: var(--surface-0);
+    border: 2px solid;
+    border-color: var(--brand-1);
+  }
+}
+</style>