diff --git a/src/components/01_branch-management/BtnAddComponet.vue b/src/components/01_branch-management/BtnAddComponet.vue
new file mode 100644
index 00000000..c4f4e699
--- /dev/null
+++ b/src/components/01_branch-management/BtnAddComponet.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+defineProps<{
+  label?: string;
+}>();
+</script>
+
+<template>
+  <div class="column items-center box" :class="{ dark: $q.dark.isActive }">
+    <div class="row">
+      <q-btn
+        @click="$emit('trigger')"
+        size="lg"
+        class="color-btn"
+        icon="mdi-plus"
+        round
+      />
+    </div>
+    <div class="row q-mt-sm color-text">{{ label }}</div>
+  </div>
+</template>
+
+<style scoped>
+.box {
+  --_btn-add-color: var(--cyan-6-hsl);
+
+  .color-btn {
+    color: hsl(var(--_btn-add-color));
+    background: hsla(var(--_btn-add-color) / 0.1) !important;
+  }
+
+  .color-text {
+    color: var(--stone-6);
+  }
+
+  &.dark {
+    --_btn-add-color: var(--cyan-5-hsl);
+  }
+}
+</style>
diff --git a/src/components/DrawerComponent.vue b/src/components/DrawerComponent.vue
index 14caee4d..7806ab15 100644
--- a/src/components/DrawerComponent.vue
+++ b/src/components/DrawerComponent.vue
@@ -15,7 +15,11 @@ const labelMenu: {
     icon: 'mdi-sitemap-outline',
     route: '/branch-management',
   },
-  { label: 'จัดการบุคลากร', icon: 'mdi-account-settings-outline', route: '' },
+  {
+    label: 'จัดการบุคลากร',
+    icon: 'mdi-account-settings-outline',
+    route: '/personnel-management',
+  },
   { label: 'จัดการลูกค้า', icon: 'mdi-account-settings-outline', route: '' },
   { label: 'สินค้าและบริการ', icon: 'mdi-package-variant', route: '' },
   { label: 'ใบเสนอราคา', icon: 'mdi-package-variant', route: '' },
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>