diff --git a/src/components/03_customer-management/employee/BasicInformation.vue b/src/components/03_customer-management/employee/BasicInformation.vue
index 0a80fe58..e913a92b 100644
--- a/src/components/03_customer-management/employee/BasicInformation.vue
+++ b/src/components/03_customer-management/employee/BasicInformation.vue
@@ -34,7 +34,7 @@ const props = withDefaults(
     employee?: boolean;
     employeeOwnerOption?: CustomerBranch[];
     prefixId: string;
-    showBtnSave: boolean;
+    showBtnSave?: boolean;
   }>(),
   {
     showBtnSave: false,
diff --git a/src/components/DialogForm.vue b/src/components/DialogForm.vue
index 6fde55fe..cbeae771 100644
--- a/src/components/DialogForm.vue
+++ b/src/components/DialogForm.vue
@@ -29,13 +29,18 @@ defineProps<{
   submit?: (...args: unknown[]) => void;
   close?: (...args: unknown[]) => void;
   undo?: (...args: unknown[]) => void;
+  beforeClose?: (...args: unknown[]) => boolean;
 }>();
 
 const modal = defineModel('modal', { default: false });
 const currentTab = defineModel<string>('currentTab');
 </script>
 <template>
-  <q-dialog v-model="modal" @hide="close" @before-show="show">
+  <q-dialog
+    :model-value="modal"
+    @update:model-value="(v) => (modal = beforeClose ? beforeClose() : v)"
+    @before-show="show"
+  >
     <div
       class="surface-1"
       style="padding: 0; border-radius: var(--radius-2); height: 100%"
@@ -129,7 +134,12 @@ const currentTab = defineModel<string>('currentTab');
               padding="xs"
               class="close-btn"
               :class="{ dark: $q.dark.isActive }"
-              @click="close"
+              @click="
+                () => {
+                  modal = beforeClose ? beforeClose() : !modal;
+                  close?.();
+                }
+              "
             />
           </div>
         </div>
diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
index b3c75579..6039010f 100644
--- a/src/i18n/en-US/index.ts
+++ b/src/i18n/en-US/index.ts
@@ -99,11 +99,17 @@ export default {
       invalid: 'Invalid value.',
       invalidCustomeMessage: 'Invalid value. {msg}',
     },
+    warning: {
+      title: 'Warning {msg}',
+      unsave:
+        'You have unsaved changes. Are you sure you want to close this window?',
+    },
   },
   customer: {
     form: {
       group: {
         basicInfo: 'Basic Information',
+        branch: 'Branch',
       },
       registeredBranch: 'Registered Branch',
       customerName: 'Company Name',
diff --git a/src/i18n/th-th/index.ts b/src/i18n/th-th/index.ts
index 672d1eae..70781721 100644
--- a/src/i18n/th-th/index.ts
+++ b/src/i18n/th-th/index.ts
@@ -100,17 +100,26 @@ export default {
       invalid: 'ค่าที่ไม่ถูกต้อง',
       invalidCustomeMessage: 'ค่าที่ไม่ถูกต้อง {msg}',
     },
+    warning: {
+      title: 'แจ้งเตือน {msg}',
+      unsave:
+        'คุณมีการเปลี่ยนแปลงที่ยังไม่ได้บันทึก คุณต้องการปิดหน้าต่างนี้หรือไม่',
+    },
   },
   customer: {
     form: {
       group: {
         basicInfo: 'ข้อมูลพื้นฐาน',
+        branch: 'ข้อมูลสาขา',
       },
       registeredBranch: 'สาขาที่ลงทะเบียน',
       customerName: 'ชื่อบริษัท',
       customerNameEN: 'ชื่อบริษัท (EN)',
       personName: 'ชื่อลูกค้า',
       taxIdentificationNumber: 'หมายเลขประจำตัวผู้เสียภาษี',
+      branch: {
+        title: 'สาขาที่ {name}',
+      },
     },
   },
 };
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 570db397..84f38ef8 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -281,9 +281,11 @@ onMounted(async () => {
                 >
                   {{
                     item.text
-                      ? $t(item.text, {
-                          ...(item.argsi18n || {}),
-                        })
+                      ? item.i18n
+                        ? $t(item.text, {
+                            ...(item.argsi18n || {}),
+                          })
+                        : item.text
                       : ''
                   }}
                 </span>
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 5ba31959..20a7755d 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -29,6 +29,7 @@ import SideMenu from 'src/components/SideMenu.vue';
 import BasicInformation from 'src/components/03_customer-management/employee/BasicInformation.vue';
 import FormPerson from 'src/components/02_personnel-management/FormPerson.vue';
 import FormBasicInfo from './components/FormBasicInfo.vue';
+import FormBranch from './components/FormBranch.vue';
 import CustomerInfoComponent from './components/CustomerBranch.vue';
 import FormAddress from 'src/components/02_personnel-management/FormAddress.vue';
 
@@ -82,6 +83,7 @@ async function init() {
       currentCustomer.value = _data;
       utilsStore.currentTitle.path.push({
         text: currentCustomer.value.customerName,
+        i18n: false,
       });
     } else {
       router.push('/customer-management');
@@ -398,6 +400,30 @@ async function editCustomerForm(id: string) {
   customerFormState.value.editCustomerId = id;
 }
 
+function customerConfirmUnsave() {
+  dialog({
+    color: 'warning',
+    icon: 'mdi-alert',
+    title: t('form.warning.title'),
+    actionText: t('ok'),
+    persistent: true,
+    message: t('form.warning.unsave'),
+    action: () => {
+      customerFormStore.resetForm();
+      customerFormState.value.editReadonly = true;
+    },
+    cancel: () => {},
+  });
+}
+
+function customerFormUndo() {
+  if (customerFormStore.isFormDataDifferent()) {
+    return customerConfirmUnsave();
+  }
+  customerFormStore.resetForm();
+  customerFormState.value.editReadonly = true;
+}
+
 function createCustomerForm(customerType: 'CORP' | 'PERS') {
   customerFormState.value.dialogModal = true;
   customerFormState.value.dialogType = 'create';
@@ -1657,11 +1683,7 @@ function createCustomerForm(customerType: 'CORP' | 'PERS') {
     :title="$t('form.title.create', { name: 'Employer' })"
     :edit="customerFormState.dialogType === 'edit'"
     :isEdit="customerFormState.editReadonly === false"
-    :undo="
-      () => (
-        customerFormStore.resetForm(), (customerFormState.editReadonly = true)
-      )
-    "
+    :undo="() => customerFormUndo()"
     :deleteData="
       () =>
         customerFormState.editCustomerId &&
@@ -1669,8 +1691,8 @@ function createCustomerForm(customerType: 'CORP' | 'PERS') {
     "
     :editData="() => (customerFormState.editReadonly = false)"
     :show="
-      async () =>
-        await fetchListOfOptionBranch().then(() => {
+      () =>
+        fetchListOfOptionBranch().then(() => {
           customerFormStore.resetForm(
             customerFormState.dialogType === 'create',
           );
@@ -1682,7 +1704,15 @@ function createCustomerForm(customerType: 'CORP' | 'PERS') {
         await fetchListCustomer();
       }
     "
-    :close="() => (customerFormState.dialogModal = false)"
+    :before-close="
+      () => {
+        if (customerFormStore.isFormDataDifferent()) {
+          customerConfirmUnsave();
+          return true;
+        }
+        return false; // close
+      }
+    "
     no-footer
   >
     <div class="q-mx-lg q-mt-lg">
@@ -1713,13 +1743,19 @@ function createCustomerForm(customerType: 'CORP' | 'PERS') {
         style="height: 100%; max-height: 100; overflow-y: auto"
         v-if="$q.screen.gt.sm"
       >
-        <div class="q-py-md q-pl-md">
+        <div class="q-py-md q-pl-md q-pr-sm">
           <SideMenu
             :menu="[
               {
                 name: $t('customer.form.group.basicInfo'),
                 anchor: 'form-basic-info-customer',
               },
+              ...(customerFormData.customerBranch?.map((v) => ({
+                name: $t('customer.form.branch.title', {
+                  name: v.branchNo || 0,
+                }),
+                anchor: `form-branch-customer-no-${v.branchNo}`,
+              })) || []),
             ]"
             background="transparent"
             :active="{
@@ -1731,11 +1767,12 @@ function createCustomerForm(customerType: 'CORP' | 'PERS') {
         </div>
       </div>
       <div
-        class="col-12 col-md-10 q-pa-md"
+        class="col-12 col-md-10 q-py-md q-pr-md q-pl-sm"
         id="customer-form-content"
         style="height: 100%; max-height: 100%; overflow-y: auto"
       >
         <FormBasicInfo
+          class="q-mb-xl"
           :readonly="
             customerFormState.dialogType === 'edit' &&
             customerFormState.editReadonly === true
@@ -1750,6 +1787,15 @@ function createCustomerForm(customerType: 'CORP' | 'PERS') {
           v-model:registered-branch-id="customerFormData.registeredBranchId"
           v-model:branch-options="registerAbleBranchOption"
         />
+        <FormBranch
+          id="form-branch-customer"
+          :editable="
+            customerFormState.dialogType === 'create' ||
+            customerFormState.editReadonly === false
+          "
+          @add-branch="customerFormStore.addCurrentCustomerBranch()"
+          v-model:customer-branch="customerFormData.customerBranch"
+        />
       </div>
     </div>
 
@@ -1791,18 +1837,26 @@ function createCustomerForm(customerType: 'CORP' | 'PERS') {
           : `${employeeFormState.currentEmployee.firstName} ${employeeFormState.currentEmployee.lastName}`
         : '-'
     "
+    :badgeClass="
+      currentFromDataEmployee.gender === 'male'
+        ? 'app-bg-male text-white'
+        : currentFromDataEmployee.gender === 'female'
+          ? 'app-bg-female text-white'
+          : ''
+    "
   >
-    <div class="q-mx-lg q-mt-lg">
-      <ProfileBanner
-        active
-        hideFade
-        :img="employeeFormState.profileUrl"
-        :menu="formMenuIconEmployee"
-      />
-
+    <div class="full-height full-width column">
+      <div class="q-mx-lg q-mt-lg">
+        <ProfileBanner
+          active
+          hideFade
+          :img="employeeFormState.profileUrl"
+          :menu="formMenuIconEmployee"
+        />
+      </div>
       <div
-        class="col surface-1 q-mt-lg rounded bordered scroll row"
-        id="personnel-form"
+        class="col surface-1 q-ma-lg rounded bordered scroll row"
+        id="employee-form"
       >
         <div class="col">
           <div style="position: sticky; top: 0" class="q-pa-sm">
@@ -1834,13 +1888,13 @@ function createCustomerForm(customerType: 'CORP' | 'PERS') {
                 background: 'hsla(var(--blue-6-hsl) / .2)',
                 foreground: 'var(--blue-6)',
               }"
-              scroll-element="#personnel-form"
+              scroll-element="#employee-form"
             />
           </div>
         </div>
-
         <div class="col-10 q-pa-md q-gutter-y-xl">
           <BasicInformation
+            id="form-information"
             prefix-id="drawer-info-employee"
             employee
             dense
@@ -1855,8 +1909,8 @@ function createCustomerForm(customerType: 'CORP' | 'PERS') {
             v-model:code="currentFromDataEmployee.code"
             @filter-owner-branch="employeeFormStore.employeeFilterOwnerBranch"
           />
-
           <FormPerson
+            id="form-personal"
             prefix-id="drawer-info-employee"
             dense
             outlined
@@ -1872,6 +1926,18 @@ function createCustomerForm(customerType: 'CORP' | 'PERS') {
             v-model:birthDate="currentFromDataEmployee.dateOfBirth"
             v-model:nationality="currentFromDataEmployee.nationality"
           />
+          <FormAddress
+            id="form-personal-address"
+            v-model:address="currentFromDataEmployee.address"
+            v-model:addressEN="currentFromDataEmployee.addressEN"
+            v-model:provinceId="currentFromDataEmployee.provinceId"
+            v-model:districtId="currentFromDataEmployee.districtId"
+            v-model:subDistrictId="currentFromDataEmployee.subDistrictId"
+            v-model:zipCode="currentFromDataEmployee.zipCode"
+            :readonly="!employeeFormState.isEmployeeEdit"
+            prefix-id="drawer-info-personnel"
+            dense
+          />
         </div>
       </div>
     </div>
diff --git a/src/pages/03_customer-management/components/FormBasicInfo.vue b/src/pages/03_customer-management/components/FormBasicInfo.vue
index f8cf0670..8313443b 100644
--- a/src/pages/03_customer-management/components/FormBasicInfo.vue
+++ b/src/pages/03_customer-management/components/FormBasicInfo.vue
@@ -54,7 +54,7 @@ watch(
 </script>
 
 <template>
-  <div class="row q-col-gutter-md">
+  <div class="row q-col-gutter-sm">
     <div class="col-12 text-weight-bold text-body1 row items-center">
       <q-icon
         flat
diff --git a/src/pages/03_customer-management/components/FormBranch.vue b/src/pages/03_customer-management/components/FormBranch.vue
new file mode 100644
index 00000000..fade940c
--- /dev/null
+++ b/src/pages/03_customer-management/components/FormBranch.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { CustomerCreate } from 'src/stores/customer/types';
+
+const branch = defineModel<CustomerCreate['customerBranch']>('customerBranch', {
+  default: [],
+});
+
+defineProps<{
+  editable?: boolean;
+}>();
+</script>
+
+<template>
+  <div class="row q-col-gutter-md">
+    <div class="col-12 text-weight-bold text-body1 row items-center">
+      <q-icon
+        flat
+        size="xs"
+        class="q-pa-sm rounded q-mr-xs"
+        color="info"
+        name="mdi-briefcase"
+        style="background-color: var(--surface-3)"
+      />
+      <span>{{ $t('customer.form.group.branch') }}</span>
+      <q-btn
+        type="button"
+        rounded
+        flat
+        dense
+        unelevated
+        color="primary"
+        @click="$emit('addBranch')"
+        v-if="editable"
+        icon="mdi-plus"
+        class="q-ml-md"
+      />
+    </div>
+
+    <template v-for="item in branch">
+      <span
+        class="col-12 text-weight-bold"
+        :id="`form-branch-customer-no-${item.branchNo}`"
+      >
+        {{ $t('customer.form.branch.title', { name: item.branchNo || 0 }) }}
+      </span>
+    </template>
+  </div>
+</template>
diff --git a/src/pages/03_customer-management/form.ts b/src/pages/03_customer-management/form.ts
index e39c5723..036f34c5 100644
--- a/src/pages/03_customer-management/form.ts
+++ b/src/pages/03_customer-management/form.ts
@@ -139,7 +139,8 @@ export const useCustomerForm = defineStore('form-customer', () => {
     currentFormData.value.customerBranch?.push({
       id: '',
       code: '',
-      branchNo: 1,
+      branchNo:
+        (currentFormData.value.customerBranch?.at(-1)?.branchNo || 0) + 1,
       address: '',
       addressEN: '',
       provinceId: '',
diff --git a/src/stores/utils/index.ts b/src/stores/utils/index.ts
index 2b006e89..b289f934 100644
--- a/src/stores/utils/index.ts
+++ b/src/stores/utils/index.ts
@@ -167,6 +167,7 @@ const useUtilsStore = defineStore('utilsStore', () => {
     title: string;
     path: {
       text: string;
+      i18n?: boolean;
       argsi18n?: Record<string, string>;
       handler?: () => unknown;
     }[];