diff --git a/src/i18n/en-US/branch.ts b/src/i18n/en-US/branch.ts
index 5befcafa..09fd132b 100644
--- a/src/i18n/en-US/branch.ts
+++ b/src/i18n/en-US/branch.ts
@@ -1,4 +1,5 @@
 export default {
+  branchManagementCaption: 'Manage All Branch',
   branchInHQ: 'Branch within the main office',
 
   branchLabel: 'Branch',
diff --git a/src/i18n/th-th/branch.ts b/src/i18n/th-th/branch.ts
index 8fa2e513..2506a04a 100644
--- a/src/i18n/th-th/branch.ts
+++ b/src/i18n/th-th/branch.ts
@@ -1,4 +1,5 @@
 export default {
+  branchManagementCaption: 'จัดการสาขาทั้งหมด',
   branchInHQ: 'สาขาภายในสำนักงานใหญ่',
 
   branchLabel: 'สาขา',
diff --git a/src/i18n/th-th/drawer-component.ts b/src/i18n/th-th/drawer-component.ts
index 80cb7c46..c1d1d9a3 100644
--- a/src/i18n/th-th/drawer-component.ts
+++ b/src/i18n/th-th/drawer-component.ts
@@ -1,6 +1,6 @@
 export default {
   drawerDashboard: 'Dashboard',
-  drawerBranchManagement: 'การจัดการสาขา',
+  drawerBranchManagement: 'จัดการสาขา',
   drawerPersonnelManagement: 'จัดการบุคลากร',
   drawerCustomerManagement: 'จัดการลูกค้า',
   drawerProductsAndServices: 'สินค้าและบริการ',
diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 3e519fbe..72dd2e2f 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -5,7 +5,7 @@ import { Icon } from '@iconify/vue';
 
 import useBranchStore from 'stores/branch';
 
-import { dialog } from 'src/stores/utils';
+import useUtilsStore, { dialog } from 'src/stores/utils';
 import AppBox from 'components/app/AppBox.vue';
 import AddButton from 'components/AddButton.vue';
 import TooltipComponent from 'components/TooltipComponent.vue';
@@ -26,6 +26,7 @@ import { useI18n } from 'vue-i18n';
 import useFlowStore from 'src/stores/flow';
 
 const { t } = useI18n();
+const utilsStore = useUtilsStore();
 
 const modal = ref<boolean>(false);
 
@@ -105,6 +106,9 @@ async function calculateStats() {
 }
 
 onMounted(async () => {
+  utilsStore.currentTitle.title = 'branchManagement';
+  utilsStore.currentTitle.caption = 'branchManagementCaption';
+
   await branchStore.fetchList({ pageSize: 99999 });
   await calculateStats();
 
@@ -419,20 +423,14 @@ watch(locale, () => {
 </script>
 
 <template>
-  <div class="column">
-    <div class="row text-h6 text-weight-bold q-mb-md">
-      {{ $t('branchManagement') }}
+  <div class="column full-height no-wrap">
+    <div class="surface-1 bordered rounded q-pa-md q-mb-md">
+      <StatCard label-i18n :branch="stats" :dark="$q.dark.isActive" />
     </div>
 
-    <AppBox bordered class="q-mb-md">
-      <StatCard label-i18n :branch="stats" :dark="$q.dark.isActive" />
-    </AppBox>
-
-    <AppBox
-      class="column"
+    <div
+      class="column col surface-1 bordered rounded scroll"
       :no-padding="!!branchData.total"
-      bordered
-      style="min-height: 70vh"
     >
       <template v-if="!branchData.total">
         <TooltipComponent
@@ -895,7 +893,7 @@ watch(locale, () => {
           </div>
         </div>
       </template>
-    </AppBox>
+    </div>
   </div>
 
   <FormDialog