diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 08e1dda7..c8139188 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -1684,9 +1684,12 @@ watch(currentHq, () => {
       }
     "
   >
-    <div class="q-mx-lg q-mt-lg">
-      <!-- title="บริษัทจ๊อบส์ เวิร์คเกอร์ เซอร์วิส จำกัด"
-      caption="Jobs Worker Service Co., Ltd." -->
+    <div
+      :class="{
+        'q-mx-lg q-my-md': $q.screen.gt.sm,
+        'q-mx-md q-my-sm': !$q.screen.gt.sm,
+      }"
+    >
       <ProfileBanner
         active
         useToggle
@@ -1739,14 +1742,23 @@ watch(currentHq, () => {
         "
       />
     </div>
-    <div class="col q-pa-lg">
+    <div
+      class="col"
+      :class="{
+        'q-px-lg q-pb-lg': $q.screen.gt.sm,
+        'q-px-md q-pb-sm': !$q.screen.gt.sm,
+      }"
+    >
       <div
         style="overflow-y: auto"
-        class="row full-width full-height surface-1 rounded relative-position"
+        class="row full-width full-height surface-1 rounded bordered relative-position"
       >
         <div
           v-if="currentTab === 'main'"
-          class="q-py-md q-px-lg"
+          :class="{
+            'q-py-md q-px-lg': $q.screen.gt.sm,
+            'q-py-sm q-px-lg': !$q.screen.gt.sm,
+          }"
           style="position: absolute; z-index: 99999; top: 0; right: 0"
         >
           <div
@@ -1840,8 +1852,11 @@ watch(currentHq, () => {
         </div>
 
         <div
-          class="col-12 col-md-10 q-py-md q-pr-md full-height q-gutter-y-xl"
-          :class="$q.screen.xs ? 'q-pl-md' : 'q-pl-sm'"
+          class="col-12 col-md-10 full-height"
+          :class="{
+            'q-py-md q-pr-md ': $q.screen.gt.sm,
+            'q-py-md q-px-lg': !$q.screen.gt.sm,
+          }"
           id="branch-form"
           style="overflow-y: auto"
         >
@@ -1865,6 +1880,7 @@ watch(currentHq, () => {
             title="form.field.basicInformation"
             :view="isSubCreate || !!currentId"
             onCreate
+            class="q-mb-xl"
           />
           <FormBranchContact
             id="form-contact"
@@ -1880,6 +1896,7 @@ watch(currentHq, () => {
             title="branch.form.group.contact"
             :dense="true"
             :outlined="true"
+            class="q-mb-xl"
           />
 
           <AddressForm
@@ -1901,6 +1918,7 @@ watch(currentHq, () => {
             v-model:street="formData.street"
             v-model:streetEN="formData.streetEN"
             :readonly="formType === 'view'"
+            class="q-mb-xl"
           />
           <FormLocation
             id="form-location"
@@ -1911,6 +1929,7 @@ watch(currentHq, () => {
             outlined
             dense
             title="branch.form.group.location"
+            class="q-mb-xl"
           />
           <FormQr
             id="form-qr"
@@ -1924,6 +1943,7 @@ watch(currentHq, () => {
               }
             "
             @edit-qr="() => refQrCodeUpload && refQrCodeUpload.browse()"
+            class="q-mb-xl"
           />
           <FormBank
             id="form-bank"
@@ -1943,6 +1963,7 @@ watch(currentHq, () => {
                 refQrCodeUpload && refQrCodeUpload.browse();
               }
             "
+            class="q-mb-xl"
           />
 
           <FormBranchAdmin
@@ -2017,7 +2038,12 @@ watch(currentHq, () => {
     hide-action
   >
     <InfoForm>
-      <div class="q-mx-lg q-mt-lg">
+      <div
+        :class="{
+          'q-mx-lg q-my-md': $q.screen.gt.sm,
+          'q-mx-md q-my-sm': !$q.screen.gt.sm,
+        }"
+      >
         <ProfileBanner
           :active="formData.status !== 'INACTIVE'"
           useToggle
@@ -2077,13 +2103,22 @@ watch(currentHq, () => {
         />
       </div>
 
-      <div class="col q-pa-lg">
+      <div
+        class="col"
+        :class="{
+          'q-px-lg q-pb-lg': $q.screen.gt.sm,
+          'q-px-md q-pb-sm': !$q.screen.gt.sm,
+        }"
+      >
         <div
           style="overflow-y: auto"
-          class="row full-width full-height surface-1 rounded relative-position"
+          class="row full-width full-height surface-1 rounded bordered relative-position"
         >
           <div
-            class="q-py-md q-px-lg"
+            :class="{
+              'q-py-md q-px-lg': $q.screen.gt.sm,
+              'q-py-sm q-px-lg': !$q.screen.gt.sm,
+            }"
             style="position: absolute; z-index: 99999; top: 0; right: 0"
           >
             <div
@@ -2170,8 +2205,11 @@ watch(currentHq, () => {
             />
           </div>
           <div
-            class="col-12 col-md-10 q-py-md q-pr-md full-height"
-            :class="$q.screen.xs ? 'q-pl-md' : 'q-pl-sm'"
+            class="col-12 col-md-10 full-height"
+            :class="{
+              'q-py-md q-pr-md ': $q.screen.gt.sm,
+              'q-py-md q-px-lg': !$q.screen.gt.sm,
+            }"
             id="branch-info"
             style="overflow-y: auto"
           >