diff --git a/src/boot/i18n.ts b/src/boot/i18n.ts
index 9430c38a..9e2cda0d 100644
--- a/src/boot/i18n.ts
+++ b/src/boot/i18n.ts
@@ -27,7 +27,7 @@ export const i18n = createI18n<
   MessageLanguages,
   false
 >({
-  locale: 'tha',
+  locale: Lang.Thai,
   legacy: false,
   messages,
 });
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index e5103c0b..45482ec4 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -104,22 +104,23 @@ const ocrStore = useOcrStore();
 const refFilter = ref<InstanceType<typeof QSelect>>();
 const statusEmployeeCreate = ref<boolean>(false);
 const mrz = ref<Awaited<ReturnType<typeof parseResultMRZ>>>();
+const tabFieldRequired = ref<{ [key: string]: (keyof CustomerBranchCreate)[] }>(
+  {
+    main: [],
+    business: ['businessType', 'jobPosition'],
+    address: [
+      'address',
+      'addressEN',
+      'provinceId',
+      'districtId',
+      'subDistrictId',
+    ],
+    contact: [],
+  },
+);
 
-const {
-  fetchListOfOptionBranch,
-  customerFormUndo,
-  customerConfirmUnsave,
-  deleteCustomerById,
-  validateTabField,
-  deleteCustomerBranchById,
-} = customerFormStore;
-
-const {
-  state: customerFormState,
-  currentFormData: customerFormData,
-  registerAbleBranchOption,
-  tabFieldRequired,
-} = storeToRefs(customerFormStore);
+const { state: customerFormState, currentFormData: customerFormData } =
+  storeToRefs(customerFormStore);
 const { state: employeeFormState, currentFromDataEmployee } =
   storeToRefs(employeeFormStore);
 
@@ -275,6 +276,8 @@ const fieldSelected = ref<string[]>(
   ].filter((v, index, self) => self.indexOf(v) === index),
 );
 
+const registerAbleBranchOption = ref<{ id: string; name: string }[]>();
+
 const branch = ref<CustomerBranch[]>();
 
 const customerStats = [
@@ -291,6 +294,81 @@ const fieldCustomer = [
 const employeeHistoryDialog = ref(false);
 const employeeHistory = ref<EmployeeHistory[]>();
 
+function validateTabField<T = CustomerBranchCreate>(
+  value: T,
+  fieldRequired: { [key: string]: (keyof T)[] },
+) {
+  const list: string[] = [];
+
+  for (const tab in fieldRequired) {
+    for (const field of fieldRequired[tab]) {
+      if (!value[field] && !list.includes(tab)) list.push(tab);
+    }
+  }
+
+  return list;
+}
+
+function deleteCustomerById(id: string) {
+  dialog({
+    color: 'negative',
+    icon: 'mdi-alert',
+    title: t('dialog.title.confirmDelete'),
+    actionText: t('general.delete'),
+    persistent: true,
+    message: t('dialog.message.confirmDelete'),
+    action: async () => {
+      await customerStore.deleteById(id);
+
+      await fetchListCustomer(true, $q.screen.xs);
+      customerFormState.value.dialogModal = false;
+      flowStore.rotate();
+    },
+    cancel: () => {},
+  });
+}
+
+async function deleteCustomerBranchById(id: string) {
+  return await new Promise((resolve) => {
+    dialog({
+      color: 'negative',
+      icon: 'mdi-alert',
+      title: t('dialog.title.confirmDelete'),
+      actionText: t('general.delete'),
+      persistent: true,
+      message: t('dialog.message.confirmDelete'),
+      action: async () => {
+        await customerStore.deleteBranchById(id);
+        flowStore.rotate();
+        resolve(true);
+      },
+      cancel: () => {
+        resolve(false);
+      },
+    });
+  });
+}
+async function fetchListOfOptionBranch() {
+  if (registerAbleBranchOption.value) return;
+
+  const uid = getUserId();
+  const role = getRole();
+
+  if (!uid) return; // should not possible as the system require login to be able to access resource.
+
+  if (role?.includes('system')) {
+    const result = await userBranchStore.fetchListOptionBranch();
+    if (result && result.total > 0)
+      registerAbleBranchOption.value = result.result;
+  } else {
+    const result = await userBranchStore.fetchListMyBranch(uid);
+    if (result && result.total > 0)
+      registerAbleBranchOption.value = result.result;
+  }
+
+  // TODO: Assign (first) branch of the user as register branch of the data
+}
+
 async function fetchListCustomer(fetchStats = false, mobileFetch?: boolean) {
   const total = statsCustomerType.value.PERS + statsCustomerType.value.CORP;
 
@@ -543,6 +621,37 @@ function employeeFormUndo(close = true) {
   employeeFormState.value.editReadonly = true;
 }
 
+function customerConfirmUnsave(close = true) {
+  dialog({
+    color: 'warning',
+    icon: 'mdi-alert',
+    title: t('form.warning.title'),
+    actionText: t('general.ok'),
+    persistent: true,
+    message: t('form.warning.unsave'),
+
+    action: () => {
+      customerFormStore.resetForm();
+      customerFormState.value.readonly = true;
+
+      if (!customerFormState.value.drawerModal) {
+        customerFormState.value.dialogModal = !close;
+      } else {
+        customerFormState.value.drawerModal = !close;
+      }
+    },
+    cancel: () => {},
+  });
+}
+
+function customerFormUndo(close = true) {
+  if (customerFormStore.isFormDataDifferent()) {
+    return customerConfirmUnsave(close);
+  }
+  customerFormStore.resetForm();
+  customerFormState.value.readonly = true;
+}
+
 async function createCustomerForm(customerType: 'CORP' | 'PERS') {
   customerFormState.value.dialogModal = true;
   customerFormState.value.dialogType = 'create';
@@ -1431,13 +1540,7 @@ const emptyCreateDialog = ref(false);
                                   customerFormState.branchIndex = 0;
                                 }
                               "
-                              @delete="
-                                deleteCustomerById(
-                                  props.row.id,
-                                  async () =>
-                                    await fetchListCustomer(true, $q.screen.xs),
-                                )
-                              "
+                              @delete="deleteCustomerById(props.row.id)"
                               @change-status="
                                 async () => {
                                   triggerChangeStatus(
@@ -1660,16 +1763,7 @@ const emptyCreateDialog = ref(false);
                                     customerFormState.branchIndex = 0;
                                   }
                                 "
-                                @delete="
-                                  deleteCustomerById(
-                                    props.row.id,
-                                    async () =>
-                                      await fetchListCustomer(
-                                        true,
-                                        $q.screen.xs,
-                                      ),
-                                  )
-                                "
+                                @delete="deleteCustomerById(props.row.id)"
                                 @change-status="
                                   triggerChangeStatus(
                                     props.row.id,
@@ -2171,10 +2265,7 @@ const emptyCreateDialog = ref(false);
             @cancel="() => customerFormUndo(false)"
             @delete="
               customerFormState.editCustomerId &&
-                deleteCustomerById(
-                  customerFormState.editCustomerId,
-                  async () => await fetchListCustomer(true, $q.screen.xs),
-                )
+                deleteCustomerById(customerFormState.editCustomerId)
             "
             :customer-type="customerFormData.customerType"
             v-model:registered-branch-id="customerFormData.registeredBranchId"
@@ -2344,11 +2435,7 @@ const emptyCreateDialog = ref(false);
                       if (!customerFormState.editCustomerId) return;
 
                       if (idx === 0) {
-                        deleteCustomerById(
-                          customerFormState.editCustomerId,
-                          async () =>
-                            await fetchListCustomer(true, $q.screen.xs),
-                        );
+                        deleteCustomerById(customerFormState.editCustomerId);
                         return;
                       }
                       if (!!customerFormData.customerBranch?.[idx].id) {
@@ -4138,10 +4225,7 @@ const emptyCreateDialog = ref(false);
               @cancel="() => customerFormUndo(false)"
               @delete="
                 customerFormState.editCustomerId &&
-                  deleteCustomerById(
-                    customerFormState.editCustomerId,
-                    async () => await fetchListCustomer(true, $q.screen.xs),
-                  )
+                  deleteCustomerById(customerFormState.editCustomerId)
               "
               :customer-type="customerFormData.customerType"
               v-model:registered-branch-id="customerFormData.registeredBranchId"
diff --git a/src/pages/03_customer-management/form.ts b/src/pages/03_customer-management/form.ts
index 125388cc..b2ae9499 100644
--- a/src/pages/03_customer-management/form.ts
+++ b/src/pages/03_customer-management/form.ts
@@ -1,6 +1,5 @@
 import { ref, watch } from 'vue';
 import { defineStore } from 'pinia';
-import { useI18n } from 'vue-i18n';
 import {
   CustomerBranchCreate,
   CustomerCreate,
@@ -8,41 +7,16 @@ import {
 } from 'stores/customer/types';
 import { Employee, EmployeeCreate } from 'stores/employee/types';
 
-import { dialog } from 'stores/utils';
 import useMyBranch from 'stores/my-branch';
 import useCustomerStore from 'stores/customer';
 import useEmployeeStore from 'stores/employee';
 import useFlowStore from 'stores/flow';
-import useMyBranchStore from 'stores/my-branch';
 
 import { baseUrl } from 'src/stores/utils';
-import { getRole, getUserId } from 'src/services/keycloak';
 
 export const useCustomerForm = defineStore('form-customer', () => {
   const customerStore = useCustomerStore();
 
-  const { t } = useI18n();
-  const flowStore = useFlowStore();
-
-  const userBranchStore = useMyBranchStore();
-
-  const registerAbleBranchOption = ref<{ id: string; name: string }[]>();
-
-  const tabFieldRequired = ref<{
-    [key: string]: (keyof CustomerBranchCreate)[];
-  }>({
-    main: [],
-    business: ['businessType', 'jobPosition'],
-    address: [
-      'address',
-      'addressEN',
-      'provinceId',
-      'districtId',
-      'subDistrictId',
-    ],
-    contact: [],
-  });
-
   const defaultFormData: CustomerCreate = {
     // code: '',
     // namePrefix: '',
@@ -386,118 +360,7 @@ export const useCustomerForm = defineStore('form-customer', () => {
     }
   }
 
-  async function fetchListOfOptionBranch() {
-    if (registerAbleBranchOption.value) return;
-
-    const uid = getUserId();
-    const role = getRole();
-
-    if (!uid) return; // should not possible as the system require login to be able to access resource.
-
-    if (role?.includes('system')) {
-      const result = await userBranchStore.fetchListOptionBranch();
-      if (result && result.total > 0)
-        registerAbleBranchOption.value = result.result;
-    } else {
-      const result = await userBranchStore.fetchListMyBranch(uid);
-      if (result && result.total > 0)
-        registerAbleBranchOption.value = result.result;
-    }
-
-    // TODO: Assign (first) branch of the user as register branch of the data
-  }
-
-  function customerFormUndo(close = true) {
-    if (isFormDataDifferent()) {
-      return customerConfirmUnsave(close);
-    }
-    resetForm();
-    state.value.readonly = true;
-  }
-
-  function customerConfirmUnsave(close = true) {
-    dialog({
-      color: 'warning',
-      icon: 'mdi-alert',
-      title: t('form.warning.title'),
-      actionText: t('general.ok'),
-      persistent: true,
-      message: t('form.warning.unsave'),
-
-      action: () => {
-        resetForm();
-        state.value.readonly = true;
-
-        if (!state.value.drawerModal) {
-          state.value.dialogModal = !close;
-        } else {
-          state.value.drawerModal = !close;
-        }
-      },
-      cancel: () => {},
-    });
-  }
-
-  function deleteCustomerById(
-    id: string,
-    fetch?: (...args: unknown[]) => unknown,
-  ) {
-    dialog({
-      color: 'negative',
-      icon: 'mdi-alert',
-      title: t('dialog.title.confirmDelete'),
-      actionText: t('general.delete'),
-      persistent: true,
-      message: t('dialog.message.confirmDelete'),
-      action: async () => {
-        await customerStore.deleteById(id);
-        await fetch();
-        state.value.dialogModal = false;
-        flowStore.rotate();
-      },
-      cancel: () => {},
-    });
-  }
-
-  function validateTabField<T = CustomerBranchCreate>(
-    value: T,
-    fieldRequired: { [key: string]: (keyof T)[] },
-  ) {
-    const list: string[] = [];
-
-    for (const tab in fieldRequired) {
-      for (const field of fieldRequired[tab]) {
-        if (!value[field] && !list.includes(tab)) list.push(tab);
-      }
-    }
-
-    return list;
-  }
-
-  async function deleteCustomerBranchById(id: string) {
-    return await new Promise((resolve) => {
-      dialog({
-        color: 'negative',
-        icon: 'mdi-alert',
-        title: t('dialog.title.confirmDelete'),
-        actionText: t('general.delete'),
-        persistent: true,
-        message: t('dialog.message.confirmDelete'),
-        action: async () => {
-          await customerStore.deleteBranchById(id);
-          flowStore.rotate();
-          resolve(true);
-        },
-        cancel: () => {
-          resolve(false);
-        },
-      });
-    });
-  }
-
   return {
-    tabFieldRequired,
-    registerAbleBranchOption,
     state,
     resetFormData,
     currentFormData,
@@ -507,18 +370,13 @@ export const useCustomerForm = defineStore('form-customer', () => {
     submitFormCustomer,
     addCurrentCustomerBranch,
     deleteAttachment,
-    fetchListOfOptionBranch,
-    customerFormUndo,
-    customerConfirmUnsave,
-    deleteCustomerById,
-    validateTabField,
-    deleteCustomerBranchById,
   };
 });
 
 export const useCustomerBranchForm = defineStore('form-customer-branch', () => {
   const customerStore = useCustomerStore();
   const customerFormStore = useCustomerForm();
+
   const defaultFormData: CustomerBranchCreate & {
     id?: string;
     codeCustomer?: string;
diff --git a/src/pages/05_quotation/MainPage.vue b/src/pages/05_quotation/MainPage.vue
index c525f856..13a58c60 100644
--- a/src/pages/05_quotation/MainPage.vue
+++ b/src/pages/05_quotation/MainPage.vue
@@ -2,12 +2,10 @@
 import { onMounted, reactive, ref, watch, computed } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useQuasar } from 'quasar';
-import { useI18n } from 'vue-i18n';
 
 // NOTE: Import stores
-import useCustomerStore from 'stores/customer';
 import { useQuotationStore } from 'src/stores/quotations';
-import { dialog, isRoleInclude, notify } from 'stores/utils';
+import { isRoleInclude } from 'stores/utils';
 import { useNavigator } from 'src/stores/navigator';
 import useFlowStore from 'src/stores/flow';
 import useMyBranch from 'stores/my-branch';
@@ -40,43 +38,26 @@ import { AddressForm } from 'components/form';
 import {
   EmployerFormBusiness,
   EmployerFormAbout,
-  EmployerFormBasicInfo,
-  EmployerFormBranch,
 } from 'src/pages/03_customer-management/components';
 
 import { useCustomerForm } from 'src/pages/03_customer-management/form';
 import { Quotation } from 'src/stores/quotations/types';
 import TableQuotation from 'src/components/05_quotation/TableQuotation.vue';
 import PaginationPageSize from 'src/components/PaginationPageSize.vue';
-import { DialogContainer, DialogHeader } from 'src/components/dialog';
 
-const { t, locale } = useI18n();
 const $q = useQuasar();
 const quotationFormStore = useQuotationForm();
 const customerFormStore = useCustomerForm();
 const flowStore = useFlowStore();
 const userBranch = useMyBranch();
 const navigatorStore = useNavigator();
-const customerStore = useCustomerStore();
-
-const {
-  fetchListOfOptionBranch,
-  customerFormUndo,
-  deleteCustomerById,
-  validateTabField,
-  deleteCustomerBranchById,
-} = customerFormStore;
 
 const {
   currentFormData: quotationFormData,
   currentFormState: quotationFormState,
 } = storeToRefs(quotationFormStore);
-const {
-  state: customerFormState,
-  currentFormData: customerFormData,
-  registerAbleBranchOption,
-  tabFieldRequired,
-} = storeToRefs(customerFormStore);
+const { state: customerFormState, currentFormData: customerFormData } =
+  storeToRefs(customerFormStore);
 const { currentMyBranch } = storeToRefs(userBranch);
 
 const fieldSelectedOption = computed(() => {
@@ -189,7 +170,8 @@ async function submitCustomer() {
   customerFormData.value.registeredBranchId = isRoleInclude(['system'])
     ? branchId.value
     : currentMyBranch.value.id;
-  await customerFormStore.addCurrentCustomerBranch();
+  await customerFormStore.submitFormCustomer();
+
   customerFormState.value.dialogModal = false;
   // customerFormState.value.dialogType = 'info';
 }
@@ -259,16 +241,6 @@ const {
   stats: quotationStats,
 } = storeToRefs(quotationStore);
 
-const customerNameInfo = computed(() => {
-  if (customerFormData.value.customerBranch === undefined) return;
-
-  const name =
-    locale.value === 'eng'
-      ? `${customerFormData.value.customerBranch[0]?.firstNameEN} ${customerFormData.value.customerBranch[0]?.lastNameEN}`
-      : `${customerFormData.value.customerBranch[0]?.firstName} ${customerFormData.value.customerBranch[0]?.lastName}`;
-  return name || '-';
-});
-
 onMounted(async () => {
   pageState.gridView = $q.screen.lt.md ? true : false;
   navigatorStore.current.title = 'quotation.title';
@@ -939,49 +911,30 @@ async function storeDataLocal(id: string) {
 
   <!-- NOTE: START - Customer / Employer Form -->
 
-  <DialogContainer
-    :model-value="customerFormState.dialogModal"
-    :on-open="
-      async () => {
-        customerFormStore.resetForm(customerFormState.dialogType === 'create');
-        onCreateImageList = { selectedImage: '', list: [] };
-        customerFormState.customerImageUrl = '';
-        await fetchListOfOptionBranch();
-        await customerFormStore.addCurrentCustomerBranch();
+  <DialogForm
+    hide-footer
+    ref="formDialogRef"
+    v-model:modal="customerFormState.dialogModal"
+    :title="
+      customerFormState.dialogType === 'create'
+        ? $t(`general.add`, {
+            text: `${$t('customer.employer')} `,
+          })
+        : `${$t('customer.employer')} `
+    "
+    :submit="
+      () => {
+        submitCustomer();
       }
     "
-    :on-close="
+    :close="
       () => {
         customerFormState.dialogModal = false;
-        onCreateImageList = { selectedImage: '', list: [] };
+        customerFormStore.resetForm(true);
+        setDefaultCustomer();
       }
     "
   >
-    <template #header>
-      <DialogHeader
-        :title="
-          customerFormState.dialogType === 'create'
-            ? $t(`general.add`, {
-                text: `${$t('customer.employer')} `,
-              })
-            : `${$t('customer.employer')} `
-        "
-      >
-        <template #title-after>
-          <span
-            :style="`color: hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/1)`"
-          >
-            :
-            {{
-              customerFormData.customerType === 'CORP'
-                ? $t('customer.employerLegalEntity')
-                : $t('customer.employerNaturalPerson')
-            }}
-          </span>
-        </template>
-      </DialogHeader>
-    </template>
-
     <div
       :class="{
         'q-mx-lg q-my-md': $q.screen.gt.sm,
@@ -989,10 +942,10 @@ async function storeDataLocal(id: string) {
       }"
     >
       <ProfileBanner
+        prefix="dialog"
         v-if="customerFormData.customerBranch !== undefined"
         active
         hide-fade
-        prefix="dialog"
         :fallback-cover="`/images/customer-${customerFormData.customerType}-banner-bg.jpg`"
         :img="
           customerFormState.customerImageUrl ||
@@ -1008,13 +961,13 @@ async function storeDataLocal(id: string) {
         "
         :title="
           customerFormData.customerType === 'PERS'
-            ? `${customerFormData.customerBranch[0]?.firstName} ${customerFormData.customerBranch[0]?.lastName}`
-            : customerFormData.customerBranch[0]?.registerName
+            ? `${customerFormData.customerBranch[0]?.firstName || ''} ${customerFormData.customerBranch[0]?.lastName || ''}`
+            : customerFormData.customerBranch[0]?.registerName || ''
         "
         :caption="
           customerFormData.customerType === 'PERS'
-            ? `${customerFormData.customerBranch[0]?.firstNameEN} ${customerFormData.customerBranch[0]?.lastNameEN}`
-            : customerFormData.customerBranch[0]?.registerNameEN
+            ? `${customerFormData.customerBranch[0]?.firstNameEN || ''} ${customerFormData.customerBranch[0]?.lastNameEN || ''}`
+            : customerFormData.customerBranch[0]?.registerNameEN || ''
         "
         @view="
           () => {
@@ -1028,295 +981,143 @@ async function storeDataLocal(id: string) {
       />
     </div>
     <div
-      style="flex: 1; width: 100%; overflow-y: auto"
-      id="customer-form"
+      class="col"
       :class="{
         'q-px-lg q-pb-lg': $q.screen.gt.sm,
         'q-px-md q-pb-sm': !$q.screen.gt.sm,
       }"
     >
-      <div class="col surface-1 full-height rounded bordered scroll row">
+      <div
+        style="overflow-y: auto"
+        class="row full-width full-height surface-1 rounded bordered relative-position"
+      >
         <div
-          class="col"
-          style="height: 100%; max-height: 100; overflow-y: auto"
-          v-if="$q.screen.gt.sm"
+          :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 class="q-py-md q-pl-md q-pr-sm">
-            <SideMenu
-              :menu="[
-                {
-                  name: $t('form.field.basicInformation'),
-                  anchor: 'form-basic-info-customer',
-                },
-                {
-                  name: $t('customer.form.group.branch'),
-                  anchor: 'form-branch-customer-branch',
-                  useBtn: true,
-                },
-                ...(customerFormData.customerBranch?.map((v, i) => ({
-                  name:
-                    i === 0
-                      ? $t('customer.form.headQuarters.title')
-                      : $t('customer.form.branch.title', {
-                          name: i,
-                        }),
-                  anchor: `form-branch-customer-no-${i}`,
-                  sub: true,
-                })) || []),
-              ]"
-              background="transparent"
-              :active="{
-                background: 'hsla(var(--blue-6-hsl) / .2)',
-                foreground: 'var(--blue-6)',
-              }"
-              scroll-element="#customer-form-content"
-            >
-              <template v-slot:btn-form-branch-customer-branch>
-                <q-btn
-                  dense
-                  flat
-                  icon="mdi-plus"
-                  size="sm"
-                  rounded
-                  padding="0px 0px"
-                  style="color: var(--stone-9)"
-                  @click.stop="submitCustomer()"
-                  v-if="
-                    customerFormState.branchIndex === -1 &&
-                    !!customerFormState.editCustomerId &&
-                    customerFormState.dialogType !== 'create'
-                  "
-                  :disabled="!customerFormState.readonly"
-                />
-              </template>
-            </SideMenu>
+          <div
+            v-if="customerFormData.status !== 'INACTIVE'"
+            class="surface-1 row rounded"
+          >
+            <SaveButton
+              v-if="
+                customerFormState.dialogType === 'edit' ||
+                customerFormState.dialogType === 'create'
+              "
+              id="btn-info-basic-save"
+              icon-only
+              type="submit"
+            />
           </div>
         </div>
         <div
-          class="col-12 col-md-10"
+          class="col full-height rounded scroll row q-py-md q-pl-md q-pr-sm"
+          v-if="$q.screen.gt.sm"
+        >
+          <SideMenu
+            :menu="[
+              {
+                name: $t('form.customerInformation'),
+                anchor: 'form-information',
+              },
+              {
+                name: $t('customerBranch.tab.business'),
+                anchor: 'form-business',
+              },
+              {
+                name: $t('form.address'),
+                anchor: 'form-address',
+              },
+            ]"
+            background="transparent"
+            :active="{
+              background: 'hsla(var(--blue-6-hsl) / .2)',
+              foreground: 'var(--blue-6)',
+            }"
+            scroll-element="#branch-form"
+          />
+        </div>
+
+        <div
+          class="col-12 col-md-10 full-height q-col-gutter-sm"
           :class="{
             'q-py-md q-pr-md ': $q.screen.gt.sm,
-            'q-pa-sm': !$q.screen.gt.sm,
+            'q-py-md q-px-lg': !$q.screen.gt.sm,
           }"
-          id="customer-form-content"
-          style="height: 100%; max-height: 100%; overflow-y: auto"
+          id="branch-form"
+          style="overflow-y: auto"
         >
-          <EmployerFormBasicInfo
-            prefixId="form"
-            v-if="
-              customerFormData.customerBranch !== undefined &&
-              customerFormData.customerBranch.length > 0
+          <EmployerFormAbout
+            id="form-information"
+            show-title
+            :index="'0'"
+            :customerType="customerFormData.customerType"
+            :readonly="customerFormState.dialogType === 'info'"
+            v-model:citizen-id="formDataCustomerBranch.citizenId"
+            v-model:prefix-name="formDataCustomerBranch.namePrefix"
+            v-model:first-name="formDataCustomerBranch.firstName"
+            v-model:last-name="formDataCustomerBranch.lastName"
+            v-model:first-name-en="formDataCustomerBranch.firstNameEN"
+            v-model:last-name-en="formDataCustomerBranch.lastNameEN"
+            v-model:gender="formDataCustomerBranch.gender"
+            v-model:birth-date="formDataCustomerBranch.birthDate"
+            v-model:customer-name="formDataCustomerBranch.customerName"
+            v-model:legal-person-no="formDataCustomerBranch.legalPersonNo"
+            v-model:register-name="formDataCustomerBranch.registerName"
+            v-model:register-name-en="formDataCustomerBranch.registerNameEN"
+            v-model:register-date="formDataCustomerBranch.registerDate"
+            v-model:authorized-capital="
+              formDataCustomerBranch.authorizedCapital
             "
-            class="q-mb-xl"
-            :readonly="
-              (customerFormState.dialogType === 'edit' &&
-                customerFormState.readonly === true) ||
-              customerFormState.dialogType === 'info'
-            "
-            :action-disabled="customerFormState.branchIndex !== -1"
-            id="form-basic-info-customer"
-            :onCreate="customerFormState.dialogType === 'create'"
-            @edit="
-              (customerFormState.dialogType = 'edit'),
-                (customerFormState.readonly = false)
-            "
-            @cancel="() => customerFormUndo(false)"
-            @delete="
-              customerFormState.editCustomerId &&
-                deleteCustomerById(customerFormState.editCustomerId)
-            "
-            :customer-type="customerFormData.customerType"
-            v-model:registered-branch-id="customerFormData.registeredBranchId"
-            v-model:customer-name="customerNameInfo"
-            v-model:register-name="
-              customerFormData.customerBranch[0].registerName
-            "
-            v-model:citizen-id="customerFormData.customerBranch[0].citizenId"
-            v-model:legal-person-no="
-              customerFormData.customerBranch[0].legalPersonNo
-            "
-            v-model:business-type="
-              customerFormData.customerBranch[0].businessType
-            "
-            v-model:job-position="
-              customerFormData.customerBranch[0].jobPosition
-            "
-            v-model:telephone-no="
-              customerFormData.customerBranch[0].telephoneNo
-            "
-            v-model:branch-options="registerAbleBranchOption"
+            v-model:telephone-no="formDataCustomerBranch.telephoneNo"
           />
-          <div class="row q-col-gutter-sm" id="form-branch-customer-branch">
-            <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-outline"
-                style="background-color: var(--surface-3)"
-              />
-              <span>{{ $t('customer.form.group.branch') }}</span>
-            </div>
 
-            <template
-              v-for="(_, idx) in customerFormData.customerBranch"
-              :key="idx"
-            >
-              <!-- v-if="customerFormData.customerBranch" -->
-              <q-form
-                class="full-width"
-                greedy
-                @submit.prevent="
-                  async () => {
-                    if (!customerFormData.customerBranch) return;
-
-                    if (customerFormData.customerType === 'PERS') {
-                      tabFieldRequired.main = [
-                        'citizenId',
-                        'namePrefix',
-                        'firstName',
-                        'firstNameEN',
-                        'lastName',
-                        'lastNameEN',
-                        'gender',
-                        'birthDate',
-                      ];
-                    }
-                    if (customerFormData.customerType === 'CORP') {
-                      tabFieldRequired.main = ['legalPersonNo', 'registerName'];
-                    }
-                    let tapIsUndefined = validateTabField(
-                      customerFormData.customerBranch?.[idx],
-                      tabFieldRequired,
-                    );
-
-                    if (tapIsUndefined.length > 0) {
-                      return dialog({
-                        color: 'warning',
-                        icon: 'mdi-alert',
-                        title: t('dialog.title.incompleteDataEntry'),
-                        actionText: t('general.ok'),
-                        persistent: true,
-                        message: t('dialog.message.incompleteDataEntry', {
-                          tap: `${tapIsUndefined.map((v: string) => t(`customerBranch.tab.${v}`)).join(', ')}`,
-                        }),
-                        action: async () => {
-                          return;
-                        },
-                      });
-                    }
-                    if (!customerFormData.customerBranch[idx].id) {
-                      let res: any;
-                      if (idx === 0) {
-                        res =
-                          await customerFormStore.submitFormCustomer(
-                            onCreateImageList,
-                          );
-                      } else {
-                        res = await customerStore.createBranch({
-                          ...customerFormData.customerBranch[idx],
-                          customerId: customerFormState.editCustomerId || '',
-                          id: undefined,
-                        });
-                      }
-                      if (res) {
-                        customerFormState.readonly = true;
-                        notify('create', $t('general.success'));
-                      }
-                    } else {
-                      if (!customerFormState.editCustomerId) return;
-                      await customerStore.editBranchById(
-                        customerFormData.customerBranch[idx].id || '',
-                        {
-                          ...customerFormData.customerBranch[idx],
-                          id: undefined,
-                        },
-                      );
-                    }
-
-                    const uploadResult =
-                      customerFormData.customerBranch[idx].file?.map(
-                        async (v) => {
-                          if (!v.file) return;
-
-                          const ext = v.file.name.split('.').at(-1);
-                          let filename = v.group + '-' + new Date().getTime();
-                          if (ext) filename += `.${ext}`;
-
-                          const res = await customerStore.putAttachment({
-                            branchId:
-                              customerFormData.customerBranch?.[idx].id || '',
-                            file: v.file,
-                            filename,
-                          });
-
-                          if (res) {
-                            await customerFormStore.assignFormData(
-                              customerFormState.editCustomerId,
-                            );
-                          }
-                        },
-                      ) || [];
-
-                    for (const r of uploadResult) await r;
-
-                    await customerFormStore.assignFormData(
-                      customerFormState.editCustomerId,
-                    );
-
-                    customerFormStore.resetForm();
-                  }
-                "
-              >
-                <!-- v-if="!!customerFormState.editCustomerId" -->
-
-                <EmployerFormBranch
-                  :index="idx"
-                  prefixId="form"
-                  v-if="customerFormData.customerBranch"
-                  v-model:customer="customerFormData"
-                  v-model:customer-branch="customerFormData.customerBranch[idx]"
-                  :onCreate="customerFormState.dialogType === 'create'"
-                  :customer-type="customerFormData.customerType"
-                  :readonly="customerFormState.branchIndex !== idx"
-                  :action-disabled="
-                    !customerFormState.readonly ||
-                    (customerFormState.branchIndex !== -1 &&
-                      customerFormState.branchIndex !== idx)
-                  "
-                  @edit="() => (customerFormState.branchIndex = idx)"
-                  @cancel="() => customerFormUndo(false)"
-                  @delete="
-                    async () => {
-                      if (!customerFormState.editCustomerId) return;
-
-                      if (idx === 0) {
-                        deleteCustomerById(customerFormState.editCustomerId);
-                        return;
-                      }
-                      if (!!customerFormData.customerBranch?.[idx].id) {
-                        const action = await deleteCustomerBranchById(
-                          customerFormData.customerBranch[idx].id || '',
-                        );
-                        if (action) {
-                          await customerFormStore.assignFormData(
-                            customerFormState.editCustomerId,
-                          );
-                        }
-                        customerFormStore.resetForm();
-                      }
-                    }
-                  "
-                  @save="() => {}"
-                />
-              </q-form>
-            </template>
-          </div>
+          <EmployerFormBusiness
+            id="form-business"
+            show-title
+            prefix-id="dialog"
+            dense
+            outlined
+            :readonly="customerFormState.dialogType === 'info'"
+            v-model:bussiness-type="formDataCustomerBranch.businessType"
+            v-model:job-position="formDataCustomerBranch.jobPosition"
+            v-model:job-description="formDataCustomerBranch.jobDescription"
+            v-model:pay-date="formDataCustomerBranch.payDate"
+            v-model:pay-date-en="formDataCustomerBranch.payDateEN"
+            v-model:wage-rate="formDataCustomerBranch.wageRate"
+            v-model:wage-rate-text="formDataCustomerBranch.wageRateText"
+          />
+          <AddressForm
+            id="form-address"
+            prefix-id="employer"
+            dense
+            outlined
+            use-employment
+            :title="$t('form.address')"
+            :addressTitle="$t('form.address')"
+            :addressTitleEN="$t('form.address', { suffix: '(EN)' })"
+            :readonly="customerFormState.dialogType === 'info'"
+            v-model:bussiness-type="formDataCustomerBranch.businessType"
+            v-model:address="formDataCustomerBranch.address"
+            v-model:address-en="formDataCustomerBranch.addressEN"
+            v-model:street="formDataCustomerBranch.street"
+            v-model:street-en="formDataCustomerBranch.streetEN"
+            v-model:moo="formDataCustomerBranch.moo"
+            v-model:moo-en="formDataCustomerBranch.mooEN"
+            v-model:soi="formDataCustomerBranch.soi"
+            v-model:soi-en="formDataCustomerBranch.soiEN"
+            v-model:province-id="formDataCustomerBranch.provinceId"
+            v-model:district-id="formDataCustomerBranch.districtId"
+            v-model:sub-district-id="formDataCustomerBranch.subDistrictId"
+            v-model:home-code="formDataCustomerBranch.homeCode"
+          />
         </div>
       </div>
     </div>
-  </DialogContainer>
+  </DialogForm>
 </template>
 
 <style scoped></style>
diff --git a/src/pages/05_quotation/QuotationFormWorkerSelect.vue b/src/pages/05_quotation/QuotationFormWorkerSelect.vue
index 4ef1a9cb..a3010e53 100644
--- a/src/pages/05_quotation/QuotationFormWorkerSelect.vue
+++ b/src/pages/05_quotation/QuotationFormWorkerSelect.vue
@@ -444,7 +444,10 @@ watch(
                     class="full-width"
                     :prefix-id="'employee-' + index"
                     :data="{
-                      name: `${emp.firstName} ${emp.lastName}`,
+                      name:
+                        locale === Lang.English
+                          ? `${emp.firstNameEN} ${emp.lastNameEN}`
+                          : `${emp.firstName} ${emp.lastName}`,
                       female: emp.gender === 'female',
                       male: emp.gender === 'male',
                       img: `/images/employee-avatar-${emp.gender}.png`,