diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 0ea34bc6..69f1726f 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -18,7 +18,7 @@ import {
 import { Status } from 'stores/types';
 
 import useUtilsStore, { dialog, baseUrl } from 'stores/utils';
-import AddButton from 'components/AddButton.vue';
+import EmptyAddButton from 'components/AddButton.vue';
 import TooltipComponent from 'components/TooltipComponent.vue';
 import StatCard from 'components/StatCardComponent.vue';
 import BranchCard from 'components/01_branch-management/BranchCard.vue';
@@ -38,6 +38,12 @@ import FormBank from 'components/01_branch-management/FormBank.vue';
 import ToggleButton from 'src/components/button/ToggleButton.vue';
 import FormBranchAdmin from 'src/components/01_branch-management/FormBranchAdmin.vue';
 import { User } from 'src/stores/user/types';
+import {
+  EditButton,
+  DeleteButton,
+  SaveButton,
+  UndoButton,
+} from 'components/button';
 
 const $q = useQuasar();
 const { t } = useI18n();
@@ -754,7 +760,7 @@ watch(currentHq, () => {
           </div>
 
           <div class="col flex items-center justify-center">
-            <AddButton
+            <EmptyAddButton
               label="branchAdd"
               @trigger="() => triggerCreate('headOffice')"
             />
@@ -1769,6 +1775,7 @@ watch(currentHq, () => {
       () => ((modalDrawer = false), flowStore.rotate(), (isImageEdit = false))
     "
     :statusBranch="formData.status"
+    hide-action
   >
     <InfoForm>
       <div class="q-mx-lg q-mt-lg">
@@ -1811,12 +1818,47 @@ watch(currentHq, () => {
         />
       </div>
 
-      <div
-        class="col surface-1 q-ma-lg rounded bordered scroll row"
-        id="branch-info"
-      >
-        <div class="col">
-          <div style="position: sticky; top: 0" class="q-pa-sm">
+      <div class="col q-pa-lg">
+        <div
+          style="overflow-y: auto"
+          class="row full-width full-height surface-1 rounded relative-position"
+        >
+          <div
+            class="q-py-md q-px-lg"
+            style="position: absolute; z-index: 99999; top: 0; right: 0"
+          >
+            <div class="surface-1 row rounded">
+              <UndoButton
+                v-if="formType === 'edit'"
+                icon-only
+                @click="undo()"
+                type="button"
+              />
+              <SaveButton
+                v-if="formType === 'edit'"
+                id="btn-info-basic-save"
+                icon-only
+                type="submit"
+              />
+              <EditButton
+                v-if="formType !== 'edit'"
+                id="btn-info-basic-edit"
+                icon-only
+                @click="drawerEdit()"
+                type="button"
+              />
+              <DeleteButton
+                v-if="formType !== 'edit'"
+                id="btn-info-basic-delete"
+                icon-only
+                @click="triggerDelete(currentEdit.id)"
+                type="button"
+              />
+            </div>
+          </div>
+          <div
+            class="col full-height rounded scroll row q-py-md q-pl-md q-pr-sm"
+          >
             <SideMenu
               :menu="[
                 {
@@ -1852,99 +1894,92 @@ watch(currentHq, () => {
               scroll-element="#branch-info"
             />
           </div>
-        </div>
-
-        <div class="col-10 q-pa-md q-gutter-y-xl">
-          <FormBranchInformation
-            id="info-information"
-            v-model:abbreviation="formData.code"
-            v-model:code="formData.codeHeadOffice"
-            v-model:code-sub-branch="currentEdit.code"
-            v-model:taxNo="formData.taxNo"
-            v-model:name="formData.name"
-            v-model:nameEN="formData.nameEN"
-            v-model:type-branch="formTypeBranch"
-            :separator="true"
-            :dense="true"
-            :outlined="true"
-            :readonly="formType === 'view'"
-            view
-            title="formDialogTitleInformation"
-          />
-          <FormBranchContact
-            id="info-contact"
-            title="formDialogTitleContact"
-            v-model:telephone-no="formData.telephoneNo"
-            v-model:contact="formData.contact"
-            v-model:email="formData.email"
-            v-model:contact-name="formData.contactName"
-            v-model:line-id="formData.lineId"
-            :readonly="formType === 'view'"
-            :view="formType === 'view'"
-            :separator="true"
-            :dense="true"
-            :outlined="true"
-          />
-          <AddressForm
-            id="info-address"
-            dense
-            outlined
-            separator
-            prefix-id="default"
-            :title="
-              $t(
-                `${!formData.headOfficeId ? 'formDialogTitleAddress' : 'branchLabelAddress'}`,
-              )
-            "
-            :readonly="formType === 'view'"
-            v-model:address="formData.address"
-            v-model:addressEN="formData.addressEN"
-            v-model:province-id="formData.provinceId"
-            v-model:district-id="formData.districtId"
-            v-model:sub-district-id="formData.subDistrictId"
-            v-model:zip-code="formData.zipCode"
-          />
-          <FormLocation
-            id="info-location"
-            title="formDialogTitleLocation"
-            v-model:latitude="formData.latitude"
-            v-model:longitude="formData.longitude"
-            :readonly="formType === 'view'"
-            :separator="true"
-          />
-          <FormQr
-            id="info-qr"
-            :readonly="formType === 'view'"
-            title="QR Code"
-            :separator="true"
-            :qr="qrCodeimageUrl"
-            @upload="
-              () => {
-                inputFile.click();
-              }
-            "
-          />
-          <FormBank
-            id="info-bank"
-            :readonly="formType === 'view'"
-            title="bankBook"
-            dense
-            v-model:bank-book-list="formBankBook"
-          />
-          <FormBranchAdmin
-            id="info-branch-admin-view"
-            :admin="currentBranchAdmin"
-          />
-          <!-- <FormImage
-            @upload="
-              () => {
-                inputFileImg.click();
-              }
-            "
-            v-model:image="imageUrl"
-            :title="$t('formDialogTitleImg')"
-            :readonly="formType === 'view'"
-          /> -->
+          <div
+            class="col-12 col-md-10 q-py-md q-pr-md q-pl-sm full-height q-gutter-y-xl"
+            id="branch-info"
+            style="overflow-y: auto"
+          >
+            <FormBranchInformation
+              id="info-information"
+              v-model:abbreviation="formData.code"
+              v-model:code="formData.codeHeadOffice"
+              v-model:code-sub-branch="currentEdit.code"
+              v-model:taxNo="formData.taxNo"
+              v-model:name="formData.name"
+              v-model:nameEN="formData.nameEN"
+              v-model:type-branch="formTypeBranch"
+              :separator="true"
+              :dense="true"
+              :outlined="true"
+              :readonly="formType === 'view'"
+              view
+              title="formDialogTitleInformation"
+            />
+            <FormBranchContact
+              id="info-contact"
+              title="formDialogTitleContact"
+              v-model:telephone-no="formData.telephoneNo"
+              v-model:contact="formData.contact"
+              v-model:email="formData.email"
+              v-model:contact-name="formData.contactName"
+              v-model:line-id="formData.lineId"
+              :readonly="formType === 'view'"
+              :view="formType === 'view'"
+              :separator="true"
+              :dense="true"
+              :outlined="true"
+            />
+            <AddressForm
+              id="info-address"
+              dense
+              outlined
+              separator
+              prefix-id="default"
+              :title="
+                $t(
+                  `${!formData.headOfficeId ? 'formDialogTitleAddress' : 'branchLabelAddress'}`,
+                )
+              "
+              :readonly="formType === 'view'"
+              v-model:address="formData.address"
+              v-model:addressEN="formData.addressEN"
+              v-model:province-id="formData.provinceId"
+              v-model:district-id="formData.districtId"
+              v-model:sub-district-id="formData.subDistrictId"
+              v-model:zip-code="formData.zipCode"
+            />
+            <FormLocation
+              id="info-location"
+              title="formDialogTitleLocation"
+              v-model:latitude="formData.latitude"
+              v-model:longitude="formData.longitude"
+              :readonly="formType === 'view'"
+              :separator="true"
+            />
+            <FormQr
+              id="info-qr"
+              :readonly="formType === 'view'"
+              title="QR Code"
+              :separator="true"
+              :qr="qrCodeimageUrl"
+              @upload="
+                () => {
+                  inputFile.click();
+                }
+              "
+            />
+            <FormBank
+              id="info-bank"
+              :readonly="formType === 'view'"
+              title="bankBook"
+              dense
+              v-model:bank-book-list="formBankBook"
+            />
+            <FormBranchAdmin
+              id="info-branch-admin-view"
+              :admin="currentBranchAdmin"
+            />
+          </div>
         </div>
       </div>
     </InfoForm>