diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 95be57d3..25ac0aa4 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -186,12 +186,8 @@ onMounted(async () => {
       <StatCardComponent :branch="branchStat" />
     </AppBox>
 
-    <AppBox
-      bordered
-      style="width: 100%; height: 500px"
-      v-if="!branchData?.total"
-    >
-      <div class="column" style="height: 100%">
+    <AppBox bordered style="width: 100%" v-if="!branchData?.total">
+      <div class="column">
         <div class="col-1 self-end">
           <TooltipComponent
             title="branchNoMainOfficeYet"
@@ -209,17 +205,16 @@ onMounted(async () => {
     </AppBox>
 
     <AppBox
-      class="bordered branch-container"
+      class="bordered branch-container no-padding"
       :class="{ dark: $q.dark.isActive }"
-      style="width: 100%; height: 500px; padding: 0"
     >
       <AppBox class="bg-card-branch-title" style="border-radius: 0">
         <div class="row items-center">
-          <div
+          <span
             class="col q-pl-md text-h6 text-weight-bold color-card-branch-title"
           >
             {{ $t('headQuarters') }}
-          </div>
+          </span>
           <div class="col-3">
             <q-input
               class="bordered rounded q-px-md"
@@ -236,10 +231,7 @@ onMounted(async () => {
         </div>
       </AppBox>
 
-      <AppBox
-        class="no-padding row bordered-t"
-        style="height: 423px; border-radius: 0"
-      >
+      <AppBox class="no-padding row bordered-t" style="border-radius: 0">
         <div class="q-pa-md bg-branch-tree-box bordered-r" style="width: 21%">
           <div
             @click="() => console.log('test')"
@@ -306,41 +298,35 @@ onMounted(async () => {
                   >
                     <Icon icon="ri:more-2-fill" />
                     <q-menu class="bordered" style="width: 150px">
-                      <q-list class="q-pa-sm">
-                        <q-item clickable v-close-popup class="no-padding">
-                          <q-item-section avatar>
+                      <q-list>
+                        <q-item clickable v-close-popup dense>
+                          <q-item-section avatar class="q-py-sm">
                             <q-icon
-                              style="color: hsla(var(--cyan-6-hsl) / 1)"
-                              ize="22px"
+                              style="color: hsl(var(--cyan-6-hsl))"
+                              size="22px"
                               name="mdi-pencil-outline"
                             />
                           </q-item-section>
-
-                          <q-item-section>
-                            {{ $t('edit') }}
-                          </q-item-section>
+                          <q-item-section>{{ $t('edit') }}</q-item-section>
                         </q-item>
 
-                        <q-item clickable v-close-popup class="no-padding">
-                          <q-item-section avatar>
+                        <q-item clickable v-close-popup dense>
+                          <q-item-section avatar class="q-py-sm">
                             <q-icon
-                              style="color: hsla(var(--red-6-hsl) / 1)"
+                              style="color: hsl(var(--red-6-hsl))"
                               size="22px"
                               name="mdi-trash-can-outline"
                             />
                           </q-item-section>
-
                           <q-item-section>{{ $t('delete') }}</q-item-section>
                         </q-item>
 
-                        <q-item clickable v-close-popup class="q-px-sm">
-                          <q-item-section>
+                        <q-item v-close-popup dense>
+                          <q-item-section class="q-py-sm">
                             <div
                               class="bg-branch-tree-toggle q-pa-sm"
                               style="border-radius: 6px"
-                              :class="{
-                                'dark-toggle': $q.dark.isActive,
-                              }"
+                              :class="{ 'dark-toggle': $q.dark.isActive }"
                             >
                               <q-toggle
                                 dense
@@ -361,7 +347,7 @@ onMounted(async () => {
           </q-scroll-area>
         </div>
 
-        <div class="col full-height" style="overflow-y: auto">
+        <div class="col" style="overflow-y: auto">
           <AppBox class="q-pb-none">
             <div class="row">
               <div class="col">
@@ -394,15 +380,11 @@ onMounted(async () => {
           </AppBox>
 
           <AppBox>
-            <TableCardComponent :subBranch="true" :rows="rows" />
+            <TableCardComponent :sub-branch="true" :rows="rows" />
           </AppBox>
         </div>
 
-        <div
-          v-if="false"
-          class="col bordered full-height"
-          style="overflow-y: auto"
-        >
+        <div v-if="false" class="col bordered" style="overflow-y: auto">
           <CardDetailsComponent
             :data="showCurrentBranch as Branch"
             class="q-pa-sm"