diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 79dd80b7..38471bcf 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -462,7 +462,7 @@ async function openHistory(id: string) {
 async function editCustomerForm(id: string) {
   await customerFormStore.assignFormData(id);
   customerFormState.value.dialogType = 'edit';
-  customerFormState.value.dialogModal = true;
+  customerFormState.value.drawerModal = true;
   customerFormState.value.editCustomerId = id;
 }
 
@@ -510,6 +510,8 @@ function customerConfirmUnsave(close = true) {
     action: () => {
       customerFormStore.resetForm();
       customerFormState.value.readonly = true;
+
+      customerFormState.value.drawerModal = !close;
       customerFormState.value.dialogModal = !close;
     },
     cancel: () => {},
@@ -2447,6 +2449,276 @@ const emptyCreateDialog = ref(false);
       </div>
     </template>
   </ImageUploadDialog>
+  <!-- นายจ้าง -->
+  <DrawerInfo
+    hide-action
+    v-model:drawer-open="customerFormState.drawerModal"
+    :title="
+      $t(`form.title.${customerFormState.dialogType}`, {
+        name: $t('customer.employer'),
+      })
+    "
+    :badgeClass="
+      customerFormData.gender === 'male'
+        ? 'app-bg-male text-white'
+        : customerFormData.gender === 'female'
+          ? 'app-bg-female text-white'
+          : ''
+    "
+    :submit="
+      async () => {
+        await customerFormStore.submitFormCustomer();
+        customerFormState.readonly = true;
+        notify('create', $t('success'));
+        await fetchListCustomer();
+      }
+    "
+    :show="
+      async () => {
+        await fetchListOfOptionBranch();
+        customerFormStore.resetForm(customerFormState.dialogType === 'create');
+      }
+    "
+    :before-close="
+      () => {
+        if (customerFormStore.isFormDataDifferent()) {
+          customerConfirmUnsave();
+          return false;
+        } else {
+          fetchListCustomer();
+          customerFormState.branchIndex = -1;
+        }
+        return false;
+      }
+    "
+  >
+    <div class="column full-height">
+      <div class="q-px-lg q-pt-lg surface-2">
+        <ProfileBanner
+          active
+          hide-fade
+          :fallback-cover="`/images/customer-${customerFormData.customerType}-banner-bg.jpg`"
+          :img="
+            customerFormState.customerImageUrl ||
+            `/images/customer-${customerFormData.customerType}-avartar.png`
+          "
+          color="hsla(var(--pink-6-hsl)/1)"
+          bg-color="hsla(var(--pink-6-hsl)/0.15)"
+          @view="customerFormState.imageDialog = true"
+          @edit="dialogCustomerImageUpload?.browse()"
+        />
+      </div>
+
+      <div
+        style="flex: 1; width: 100%; overflow-y: auto"
+        class="surface-2 q-pa-lg column"
+        id="customer-form"
+      >
+        <div class="col bg-red surface-1 rounded bordered row">
+          <div class="col full-height scroll" v-if="$q.screen.gt.sm">
+            <div class="q-py-md q-pl-md q-pr-sm">
+              <SideMenu
+                :menu="[
+                  {
+                    name: $t('customer.form.group.basicInfo'),
+                    anchor: 'form-basic-info-customer',
+                  },
+                  {
+                    name: $t('customer.form.group.branch'),
+                    anchor: 'form-branch-customer-branch',
+                  },
+                  ...(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"
+              />
+            </div>
+          </div>
+
+          <div
+            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"
+          >
+            <EmployerFormBasicInfo
+              class="q-mb-xl"
+              :readonly="
+                (customerFormState.dialogType === 'edit' &&
+                  customerFormState.readonly === true) ||
+                customerFormState.dialogType === 'info'
+              "
+              :action-disabled="customerFormState.branchIndex !== -1"
+              id="form-basic-info-customer"
+              :create="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:code="customerFormData.code"
+              v-model:registered-branch-id="customerFormData.registeredBranchId"
+              v-model:branch-options="registerAbleBranchOption"
+              v-model:first-name="customerFormData.firstName"
+              v-model:last-name="customerFormData.lastName"
+              v-model:first-name-en="customerFormData.firstNameEN"
+              v-model:last-name-en="customerFormData.lastNameEN"
+              v-model:name-prefix="customerFormData.namePrefix"
+              v-model:gender="customerFormData.gender"
+              v-model:birth-date="customerFormData.birthDate"
+            />
+
+            <div class="row q-col-gutter-sm" id="form-branch-customer-branch">
+              <div
+                class="col-12 text-weight-bold text-body1 row items-center"
+                :style="{
+                  opacity:
+                    customerFormState.branchIndex !== -1 ? '0.5' : undefined,
+                }"
+              >
+                <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>
+                <AddButton
+                  type="button"
+                  class="q-ml-sm"
+                  @click="customerFormStore.addCurrentCustomerBranch()"
+                  v-if="
+                    customerFormState.branchIndex === -1 &&
+                    !!customerFormState.editCustomerId
+                  "
+                  :disabled="!customerFormState.readonly"
+                />
+              </div>
+
+              <template
+                v-for="(_, idx) in customerFormData.customerBranch"
+                :key="idx"
+              >
+                <q-form
+                  class="full-width"
+                  v-if="customerFormData.customerBranch"
+                  greedy
+                  @submit.prevent="
+                    async () => {
+                      if (!customerFormData.customerBranch) return;
+                      if (!customerFormState.editCustomerId) return;
+
+                      if (customerFormData.customerType === 'CORP') {
+                        filtdRequire.main = ['legalPersonNo', 'registerName'];
+                      }
+                      if (customerFormData.customerType === 'PERS') {
+                        filtdRequire.main = ['citizenId'];
+                      }
+
+                      let tapIsUndefined = validateFiltdRequire(
+                        customerFormData.customerBranch?.[idx],
+                        filtdRequire,
+                      );
+
+                      if (tapIsUndefined.length > 0) {
+                        dialog({
+                          color: 'warning',
+                          icon: 'mdi-alert',
+                          title: t('dialog.title.incompleteDataEntry'),
+                          actionText: t('ok'),
+                          persistent: true,
+                          message: t('dialog.message.incompleteDataEntry', {
+                            tap: `${tapIsUndefined.map((v: string) => t(`customerBranch.tab.${v}`)).join(', ')}`,
+                          }),
+                          action: async () => {
+                            return;
+                          },
+                        });
+                      } else {
+                        if (!customerFormData.customerBranch[idx].id) {
+                          await customerStore.createBranch({
+                            ...customerFormData.customerBranch[idx],
+                            customerId: customerFormState.editCustomerId,
+                            id: undefined,
+                          });
+                        } else {
+                          await customerStore.editBranchById(
+                            customerFormData.customerBranch[idx].id || '',
+                            {
+                              ...customerFormData.customerBranch[idx],
+                              id: undefined,
+                            },
+                          );
+                        }
+
+                        await customerFormStore.assignFormData(
+                          customerFormState.editCustomerId,
+                        );
+                        customerFormStore.resetForm();
+                      }
+                    }
+                  "
+                >
+                  <EmployerFormBranch
+                    v-if="!!customerFormState.editCustomerId"
+                    :index="idx"
+                    v-model:customer-branch="
+                      customerFormData.customerBranch[idx]
+                    "
+                    :customer-type="customerFormData.customerType"
+                    :customer-name="`${customerFormData.firstName} ${customerFormData.lastName}`"
+                    :action-disabled="
+                      !customerFormState.readonly ||
+                      (customerFormState.branchIndex !== -1 &&
+                        customerFormState.branchIndex !== idx)
+                    "
+                    :readonly="customerFormState.branchIndex !== idx"
+                    @edit="() => (customerFormState.branchIndex = idx)"
+                    @cancel="() => customerFormUndo(false)"
+                    @delete="
+                      async () => {
+                        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>
+          </div>
+        </div>
+      </div>
+    </div>
+  </DrawerInfo>
 
   <!-- ลูกจ้าง edit employee -->
   <DrawerInfo