diff --git a/src/pages/03_customer-management/CustomerDialog.vue b/src/pages/03_customer-management/CustomerDialog.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 4c4c5344..79095e9a 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -9,7 +9,7 @@ import { calculateAge, dateFormat } from 'src/utils/datetime';
 import useCustomerStore from 'stores/customer';
 import useEmployeeStore from 'stores/employee';
 import useMyBranchStore from 'stores/my-branch';
-import useUtilsStore, { dialog } from 'stores/utils';
+import useUtilsStore, { dialog, notify } from 'stores/utils';
 import useFlowStore from 'stores/flow';
 import { Status } from 'stores/types';
 import { CustomerStats, Customer, CustomerBranch } from 'stores/customer/types';
@@ -20,7 +20,7 @@ import ButtonAddComponent from 'components/ButtonAddCompoent.vue';
 import PersonCard from 'components/home/PersonCard.vue';
 import StatCardComponent from 'components/StatCardComponent.vue';
 import TooltipComponent from 'components/TooltipComponent.vue';
-import AddButton from 'components/AddButton.vue';
+import EmptyAddButton from 'components/AddButton.vue';
 import NoData from 'components/NoData.vue';
 import PaginationComponent from 'components/PaginationComponent.vue';
 import DialogForm from 'components/DialogForm.vue';
@@ -33,6 +33,7 @@ import CustomerInfoComponent from './components/CustomerBranch.vue';
 import FormAddress from 'src/components/02_personnel-management/FormAddress.vue';
 import FormEmployeePassport from 'src/components/03_customer-management/FormEmployeePassport.vue';
 import FormEmployeeVisa from 'src/components/03_customer-management/FormEmployeeVisa.vue';
+import { AddButton } from 'src/components/button';
 
 import {
   columnsCustomer,
@@ -47,6 +48,7 @@ import FormEmployeeHealthCheck from 'src/components/03_customer-management/FormE
 import FormEmployeeWorkHistory from 'src/components/03_customer-management/FormEmployeeWorkHistory.vue';
 import FormEmployeeOther from 'src/components/03_customer-management/FormEmployeeOther.vue';
 import useOptionStore from 'src/stores/options';
+import { DialogContainer, DialogHeader } from 'src/components/dialog';
 
 const { t, locale } = useI18n();
 const $q = useQuasar();
@@ -449,7 +451,7 @@ function customerConfirmUnsave(close = true) {
     message: t('form.warning.unsave'),
     action: () => {
       customerFormStore.resetForm();
-      customerFormState.value.editReadonly = true;
+      customerFormState.value.readonly = true;
       customerFormState.value.dialogModal = !close;
     },
     cancel: () => {},
@@ -461,7 +463,7 @@ function customerFormUndo(close = true) {
     return customerConfirmUnsave(close);
   }
   customerFormStore.resetForm();
-  customerFormState.value.editReadonly = true;
+  customerFormState.value.readonly = true;
 }
 
 function createCustomerForm(customerType: 'CORP' | 'PERS') {
@@ -1734,7 +1736,7 @@ watch(
                   class="row items-center justify-center"
                   style="flex-grow: 1"
                 >
-                  <AddButton
+                  <EmptyAddButton
                     :label="
                       currentTab === 'employer'
                         ? 'customerEmployerAdd'
@@ -1770,49 +1772,25 @@ watch(
     </div>
   </div>
 
-  <DialogForm
-    v-model:modal="customerFormState.dialogModal"
-    :title="
-      $t(`form.title.${customerFormState.dialogType}`, {
-        name: $t('customer.employer'),
-      })
-    "
-    :edit="customerFormState.dialogType === 'edit'"
-    :isEdit="customerFormState.editReadonly === false"
-    :undo="() => customerFormUndo(false)"
-    :delete-data="
-      () =>
-        customerFormState.editCustomerId &&
-        deleteCustomerById(customerFormState.editCustomerId)
-    "
-    :editData="() => (customerFormState.editReadonly = false)"
-    :show="
-      () =>
-        fetchListOfOptionBranch().then(() => {
-          customerFormStore.resetForm(
-            customerFormState.dialogType === 'create',
-          );
-        })
-    "
-    :submit="
+  <DialogContainer
+    :model-value="customerFormState.dialogModal"
+    :onOpen="
       async () => {
-        await customerFormStore.submitForm();
-        await fetchListCustomer();
+        await fetchListOfOptionBranch();
+        customerFormStore.resetForm(customerFormState.dialogType === 'create');
       }
     "
-    :close="() => (customerFormState.editReadonly = true)"
-    :before-close="
-      () => {
-        if (customerFormStore.isFormDataDifferent()) {
-          customerConfirmUnsave();
-          return true;
-        }
-        return false; // close
-      }
-    "
-    no-footer
+    :onClose="() => (customerFormState.dialogModal = false)"
   >
-    <div class="q-mx-lg q-mt-lg">
+    <template #header>
+      <DialogHeader
+        :title="$t(`form.title.create`, { name: $t('customer.employer') })"
+      >
+        <!-- <template #title-after>{{ customerFormState.editCustomerId }}</template> -->
+      </DialogHeader>
+    </template>
+
+    <div class="q-px-lg q-pt-lg surface-2">
       <ProfileBanner
         active
         v-model:cover-url="customerFormState.customerImageUrl"
@@ -1832,93 +1810,136 @@ watch(
       />
     </div>
     <div
-      class="col surface-1 q-ma-lg rounded bordered scroll row relative-position"
+      style="flex: 1; width: 100%; overflow-y: auto"
+      class="surface-2 q-pa-lg"
       id="customer-form"
     >
-      <div
-        class="col"
-        style="height: 100%; max-height: 100; overflow-y: auto"
-        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) => ({
-                name: $t('customer.form.branch.title', {
-                  name: v.branchNo || 0,
-                }),
-                anchor: `form-branch-customer-no-${v.branchNo}`,
-              })) || []),
-            ]"
-            background="transparent"
-            :active="{
-              background: 'hsla(var(--blue-6-hsl) / .2)',
-              foreground: 'var(--blue-6)',
+      <div class="col surface-1 full-height rounded bordered scroll row">
+        <div
+          class="col"
+          style="height: 100%; max-height: 100; overflow-y: auto"
+          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) => ({
+                  name: $t('customer.form.branch.title', {
+                    name: v.branchNo || 0,
+                  }),
+                  anchor: `form-branch-customer-no-${v.branchNo}`,
+                })) || []),
+              ]"
+              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"
+        >
+          <q-form
+            @submit.prevent="
+              async () => {
+                await customerFormStore.submitFormCustomer();
+                customerFormState.readonly = true;
+                notify('create', $t('success'));
+              }
+            "
+            :style="{
+              opacity: customerFormState.branchIndex !== -1 ? '0.5' : undefined,
             }"
-            scroll-element="#customer-form-content"
-          />
+          >
+            <FormBasicInfo
+              class="q-mb-xl"
+              :readonly="
+                customerFormState.dialogType === 'edit' &&
+                customerFormState.readonly === true
+              "
+              :action-disabled="customerFormState.branchIndex !== -1"
+              id="form-basic-info-customer"
+              :create="customerFormState.dialogType === 'create'"
+              @edit="customerFormState.readonly = false"
+              @cancel="() => customerFormUndo(false)"
+              @delete="
+                customerFormState.editCustomerId &&
+                  deleteCustomerById(customerFormState.editCustomerId)
+              "
+              :customer-type="customerFormData.customerType"
+              v-model:tax-no="customerFormData.taxNo"
+              v-model:customer-name="customerFormData.customerName"
+              v-model:customer-name-en="customerFormData.customerNameEN"
+              v-model:person-name="customerFormData.personName"
+              v-model:registered-branch-id="customerFormData.registeredBranchId"
+              v-model:branch-options="registerAbleBranchOption"
+            />
+          </q-form>
+          <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"
+                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"
+                :disabled="!customerFormState.readonly"
+              />
+            </div>
+            <q-form
+              @submit.prevent
+              class="full-width"
+              v-if="customerFormData.customerBranch"
+              v-for="(_, idx) in customerFormData.customerBranch"
+            >
+              <FormBranch
+                v-if="!!customerFormState.editCustomerId"
+                v-model:customer-branch="customerFormData.customerBranch[idx]"
+                :customer-type="customerFormData.customerType"
+                :action-disabled="
+                  !customerFormState.readonly ||
+                  (customerFormState.branchIndex !== -1 &&
+                    customerFormState.branchIndex !== idx)
+                "
+                :readonly="customerFormState.branchIndex !== idx"
+                @edit="() => (customerFormState.branchIndex = idx)"
+                @cancel="() => customerFormUndo(false)"
+                @delete="() => {}"
+                @save="() => {}"
+              />
+            </q-form>
+          </div>
         </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"
-      >
-        <FormBasicInfo
-          class="q-mb-xl"
-          :readonly="
-            customerFormState.dialogType === 'edit' &&
-            customerFormState.editReadonly === true
-          "
-          id="form-basic-info-customer"
-          @save="customerFormState.saveMode = 'customer'"
-          :customer-type="customerFormData.customerType"
-          v-model:tax-no="customerFormData.taxNo"
-          v-model:customer-name="customerFormData.customerName"
-          v-model:customer-name-en="customerFormData.customerNameEN"
-          v-model:person-name="customerFormData.personName"
-          v-model:registered-branch-id="customerFormData.registeredBranchId"
-          v-model:branch-options="registerAbleBranchOption"
-        />
-        <FormBranch
-          v-if="!!customerFormState.editCustomerId"
-          id="form-branch-customer-branch"
-          :customer-type="customerFormData.customerType"
-          :editable="
-            customerFormState.dialogType === 'create' ||
-            customerFormState.editReadonly === false
-          "
-          @add-branch="customerFormStore.addCurrentCustomerBranch()"
-          @save-branch="
-            (idx) => {
-              customerFormState.saveMode = 'branch';
-              customerFormState.branchIndex = idx;
-            }
-          "
-          v-model:customer-branch="customerFormData.customerBranch"
-        />
-      </div>
     </div>
-
-    <!-- <q-btn -->
-    <!--   @click="customerFormState.saveMode = 'customer'" -->
-    <!--   type="submit" -->
-    <!--   label="Save" -->
-    <!-- /> -->
-    <!-- <q-btn -->
-    <!--   @click="customerFormState.saveMode = 'branch'" -->
-    <!--   type="submit" -->
-    <!--   label="Save" -->
-    <!-- /> -->
-  </DialogForm>
+  </DialogContainer>
 
   <DialogForm
     :title="$t('form.title.create', { name: 'Employee' })"
diff --git a/src/pages/03_customer-management/components/FormBasicInfo.vue b/src/pages/03_customer-management/components/FormBasicInfo.vue
index 8313443b..0939b542 100644
--- a/src/pages/03_customer-management/components/FormBasicInfo.vue
+++ b/src/pages/03_customer-management/components/FormBasicInfo.vue
@@ -4,13 +4,27 @@ import { QSelect } from 'quasar';
 import { selectFilterOptionRefMod } from 'stores/utils';
 import { getRole } from 'src/services/keycloak';
 import { onMounted } from 'vue';
+import {
+  SaveButton,
+  EditButton,
+  CancelButton,
+  DeleteButton,
+} from 'src/components/button';
 
 defineProps<{
   prefixId?: string;
   outlined?: boolean;
   readonly?: boolean;
+  create?: boolean;
+  actionDisabled?: boolean;
   customerType?: 'CORP' | 'PERS';
 }>();
+defineEmits<{
+  (e: 'save'): void;
+  (e: 'edit'): void;
+  (e: 'delete'): void;
+  (e: 'cancel'): void;
+}>();
 
 const personName = defineModel<string>('personName', { required: true });
 const customerName = defineModel<string>('customerName', { required: true });
@@ -65,15 +79,32 @@ watch(
         style="background-color: var(--surface-3)"
       />
       <span>{{ $t('customer.form.group.basicInfo') }}</span>
-      <q-btn
+      <EditButton
+        v-if="readonly && !create"
+        type="button"
+        @click="$emit('edit')"
+        class="q-ml-auto"
+        :disabled="actionDisabled"
+      />
+      <DeleteButton
+        v-if="readonly && !create"
+        @click="$emit('delete')"
+        type="button"
+        class="q-ml-sm"
+        :disabled="actionDisabled"
+      />
+      <SaveButton
         v-if="!readonly"
-        type="submit"
-        dense
-        unelevated
-        color="primary"
-        :label="$t('save')"
         @click="$emit('save')"
-        class="q-px-md q-ml-auto rounded"
+        class="q-ml-auto"
+        :disabled="actionDisabled"
+      />
+      <CancelButton
+        v-if="!readonly && !create"
+        type="button"
+        class="q-ml-sm"
+        :disabled="actionDisabled"
+        @click="$emit('cancel')"
       />
     </div>
     <q-select
diff --git a/src/pages/03_customer-management/components/FormBranch.vue b/src/pages/03_customer-management/components/FormBranch.vue
index 238093af..160b8c17 100644
--- a/src/pages/03_customer-management/components/FormBranch.vue
+++ b/src/pages/03_customer-management/components/FormBranch.vue
@@ -1,314 +1,291 @@
 <script setup lang="ts">
+import { ref } from 'vue';
 import FormAddress from 'src/components/02_personnel-management/FormAddress.vue';
 import FormBusiness from './FormBusiness.vue';
 import { CustomerCreate } from 'src/stores/customer/types';
 import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
-import { ref, watch } from 'vue';
+import FormContact from './FormContact.vue';
+import { EditButton } from 'src/components/button';
+import DeleteButton from 'src/components/button/DeleteButton.vue';
+import SaveButton from 'src/components/button/SaveButton.vue';
+import CancelButton from 'src/components/button/CancelButton.vue';
 
-const branch = defineModel<CustomerCreate['customerBranch']>('customerBranch', {
-  default: [],
-});
-
-const tab = ref<
+const item = defineModel<NonNullable<CustomerCreate['customerBranch']>[number]>(
+  'customerBranch',
   {
-    branch: NonNullable<CustomerCreate['customerBranch']>[number];
-    tab: string;
-  }[]
->([]);
-
-watch(
-  branch,
-  () => {
-    tab.value =
-      branch.value?.map((a) => ({
-        branch: a,
-        tab:
-          tab.value.find((b) => (b.branch === a ? true : b.branch.id === a.id))
-            ?.tab || 'main',
-      })) || [];
+    required: true,
+    default: [],
   },
-  { deep: true },
 );
+const tab = ref('main');
 
 defineEmits<{
-  (e: 'addBranch'): void;
-  (e: 'saveBranch', i: number, v: (typeof tab.value)[number]['branch']): void;
-  (e: 'deleteBranch', i: number, v: (typeof tab.value)[number]['branch']): void;
+  (e: 'edit'): void;
+  (e: 'save'): void;
+  (e: 'cancel'): void;
+  (e: 'delete'): void;
 }>();
+
 defineProps<{
-  editable?: boolean;
+  readonly?: boolean;
   prefixId?: string;
+  actionDisabled?: boolean;
   customerType?: 'CORP' | 'PERS';
 }>();
 </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
+  <span
+    class="col-12 text-weight-bold row items-center q-mb-sm"
+    :style="{ opacity: actionDisabled ? '.5' : undefined }"
+    :id="`form-branch-customer-no-${item.branchNo}`"
+  >
+    {{ $t('customer.form.branch.title', { name: item.branchNo || 0 }) }}
+    <EditButton
+      v-if="readonly"
+      @click="$emit('edit')"
+      class="q-ml-auto"
+      type="button"
+      :disabled="actionDisabled"
+    />
+    <DeleteButton
+      v-if="readonly"
+      @click="$emit('delete')"
+      class="q-ml-sm"
+      type="button"
+      :disabled="actionDisabled"
+    />
+    <SaveButton
+      v-if="!readonly"
+      @click="$emit('save')"
+      class="q-ml-auto"
+      type="submit"
+      :disabled="actionDisabled"
+    />
+    <CancelButton
+      v-if="!readonly"
+      @click="$emit('cancel')"
+      class="q-ml-sm"
+      type="button"
+      :disabled="actionDisabled"
+    />
+  </span>
+
+  <div class="col-12" :style="{ opacity: actionDisabled ? '.5' : undefined }">
+    <div class="rounded bordered">
+      <q-tabs
+        v-model="tab"
         dense
-        unelevated
-        color="primary"
-        @click="$emit('addBranch')"
-        v-if="editable"
-        icon="mdi-plus"
-        class="q-ml-md"
-      />
-    </div>
-
-    <template v-for="(item, idx) in branch">
-      <span
-        class="col-12 text-weight-bold row items-center"
-        :id="`form-branch-customer-no-${item.branchNo}`"
+        align="left"
+        class="bordered-b"
+        active-color="primary"
+        no-caps
       >
-        {{ $t('customer.form.branch.title', { name: item.branchNo || 0 }) }}
-        <q-btn
-          v-if="editable"
-          type="button"
-          dense
-          unelevated
-          text-color="red-9"
-          color="red-2"
-          :label="$t('delete')"
-          @click="$emit('deleteBranch', idx, item)"
-          class="q-px-md q-ml-auto rounded"
-        />
-        <q-btn
-          v-if="editable"
-          type="submit"
-          dense
-          unelevated
-          color="primary"
-          :label="$t('save')"
-          @click="$emit('saveBranch', idx, item)"
-          class="q-px-md q-ml-sm rounded"
-        />
-      </span>
-
-      <div class="col-12" v-if="tab[idx]">
-        <div class="rounded bordered">
-          <q-tabs
-            v-model="tab[idx].tab"
-            dense
-            align="left"
-            class="bordered-b"
-            active-color="primary"
-            no-caps
-          >
-            <q-tab name="main" label="Main"></q-tab>
-            <q-tab name="address" label="Address"></q-tab>
-            <q-tab name="business" label="Business"></q-tab>
-          </q-tabs>
-          <q-tab-panels v-model="tab[idx].tab">
-            <q-tab-panel name="main">
-              <div class="row q-col-gutter-md">
+        <q-tab name="main" label="Main"></q-tab>
+        <q-tab name="address" label="Address"></q-tab>
+        <q-tab name="business" label="Business"></q-tab>
+        <q-tab name="contact" label="Contact"></q-tab>
+      </q-tabs>
+      <q-tab-panels v-model="tab">
+        <q-tab-panel name="main">
+          <div class="row q-col-gutter-md">
+            <q-input
+              lazy-rules="ondemand"
+              dense
+              outlined
+              :readonly="readonly"
+              hide-bottom-space
+              :label="$t('customerBranch.form.no')"
+              v-model="item.branchNo"
+              :for="`${prefixId}-input-branch-branch-no`"
+              type="number"
+              class="col-12 col-md-2"
+            />
+            <q-input
+              lazy-rules="ondemand"
+              dense
+              outlined
+              readonly
+              hide-bottom-space
+              :label="$t('customerBranch.form.code')"
+              :model-value="item.code || '-'"
+              :for="`${prefixId}-input-branch-branch-code`"
+              class="col-12 col-md-4"
+            />
+            <q-input
+              lazy-rules="ondemand"
+              dense
+              outlined
+              :readonly="readonly"
+              hide-bottom-space
+              :label="$t('customerBranch.form.taxNo')"
+              v-model="item.taxNo"
+              :for="`${prefixId}-input-branch-tax-no`"
+              type="number"
+              class="col-12 col-md-4"
+            />
+            <q-input
+              lazy-rules="ondemand"
+              dense
+              outlined
+              :readonly="readonly"
+              hide-bottom-space
+              :label="$t('customerBranch.form.name')"
+              v-model="item.name"
+              :for="`${prefixId}-input-branch-tax-no`"
+              class="col-12 col-md-6"
+            />
+            <q-input
+              lazy-rules="ondemand"
+              dense
+              outlined
+              :readonly="readonly"
+              hide-bottom-space
+              :label="$t('customerBranch.form.nameEN')"
+              v-model="item.nameEN"
+              :for="`${prefixId}-input-branch-tax-no`"
+              class="col-12 col-md-6"
+            />
+            <q-input
+              lazy-rules="ondemand"
+              dense
+              outlined
+              v-if="customerType === 'CORP'"
+              :readonly="readonly"
+              hide-bottom-space
+              :label="$t('customerBranch.form.registerName')"
+              v-model="item.registerName"
+              :for="`${prefixId}-input-branch-register-name`"
+              class="col-12 col-md-4"
+            />
+            <q-input
+              lazy-rules="ondemand"
+              dense
+              outlined
+              :readonly="readonly"
+              hide-bottom-space
+              v-if="customerType === 'CORP'"
+              :label="$t('customerBranch.form.authorizedCapital')"
+              v-model="item.authorizedCapital"
+              :for="`${prefixId}-input-branch-authorized-capital`"
+              class="col-12 col-md-4"
+            />
+            <VueDatePicker
+              :id="`${prefixId}-picker-date-register-date`"
+              :teleport="true"
+              utc
+              v-if="customerType === 'CORP'"
+              auto-apply
+              v-model="item.registerDate"
+              :dark="$q.dark.isActive"
+              :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
+              :enableTimePicker="false"
+              :disabled="readonly"
+              class="col-md-4 col-12"
+            >
+              <template #year="{ value }">
+                {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+              </template>
+              <template #trigger>
                 <q-input
                   lazy-rules="ondemand"
+                  :for="`${prefixId}-input-start-date`"
+                  :id="`${prefixId}-input-start-date`"
+                  :label="$t('customerBranch.form.registerDate')"
                   dense
                   outlined
-                  :readonly="!editable"
-                  hide-bottom-space
-                  :label="$t('customerBranch.form.no')"
-                  v-model="item.branchNo"
-                  :for="`${prefixId}-input-branch-${idx}-branch-no`"
-                  type="number"
-                  class="col-12 col-md-2"
-                />
-                <q-input
-                  lazy-rules="ondemand"
-                  dense
-                  outlined
-                  readonly
-                  :disable="editable"
-                  hide-bottom-space
-                  :label="$t('customerBranch.form.code')"
-                  :model-value="item.code || '-'"
-                  :for="`${prefixId}-input-branch-${idx}-branch-code`"
-                  class="col-12 col-md-4"
-                />
-                <q-input
-                  lazy-rules="ondemand"
-                  dense
-                  outlined
-                  :readonly="!editable"
-                  hide-bottom-space
-                  :label="$t('customerBranch.form.taxNo')"
-                  v-model="item.taxNo"
-                  :for="`${prefixId}-input-branch-${idx}-tax-no`"
-                  type="number"
-                  class="col-12 col-md-4"
-                />
-                <q-input
-                  lazy-rules="ondemand"
-                  dense
-                  outlined
-                  :readonly="!editable"
-                  hide-bottom-space
-                  :label="$t('customerBranch.form.name')"
-                  v-model="item.name"
-                  :for="`${prefixId}-input-branch-${idx}-tax-no`"
-                  class="col-12 col-md-6"
-                />
-                <q-input
-                  lazy-rules="ondemand"
-                  dense
-                  outlined
-                  :readonly="!editable"
-                  hide-bottom-space
-                  :label="$t('customerBranch.form.nameEN')"
-                  v-model="item.nameEN"
-                  :for="`${prefixId}-input-branch-${idx}-tax-no`"
-                  class="col-12 col-md-6"
-                />
-                <q-input
-                  lazy-rules="ondemand"
-                  dense
-                  outlined
-                  v-if="customerType === 'CORP'"
-                  :readonly="!editable"
-                  hide-bottom-space
-                  :label="$t('customerBranch.form.registerName')"
-                  v-model="item.registerName"
-                  :for="`${prefixId}-input-branch-${idx}-register-name`"
-                  class="col-12 col-md-4"
-                />
-                <q-input
-                  lazy-rules="ondemand"
-                  dense
-                  outlined
-                  :readonly="!editable"
-                  hide-bottom-space
-                  v-if="customerType === 'CORP'"
-                  :label="$t('customerBranch.form.authorizedCapital')"
-                  v-model="item.authorizedCapital"
-                  :for="`${prefixId}-input-branch-${idx}-authorized-capital`"
-                  class="col-12 col-md-4"
-                />
-                <VueDatePicker
-                  :id="`${prefixId}-picker-date-register-date`"
-                  :teleport="true"
-                  utc
-                  v-if="customerType === 'CORP'"
-                  auto-apply
-                  v-model="item.registerDate"
-                  :dark="$q.dark.isActive"
-                  :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
-                  :enableTimePicker="false"
-                  :disabled="!editable"
-                  class="col-md-4 col-12"
-                >
-                  <template #year="{ value }">
-                    {{ $i18n.locale === 'th-th' ? value + 543 : value }}
-                  </template>
-                  <template #year-overlay-value="{ value }">
-                    {{ $i18n.locale === 'th-th' ? value + 543 : value }}
-                  </template>
-                  <template #trigger>
-                    <q-input
-                      lazy-rules="ondemand"
-                      :for="`${prefixId}-input-start-date`"
-                      :id="`${prefixId}-input-start-date`"
-                      :label="$t('customerBranch.form.registerDate')"
-                      dense
-                      outlined
-                      :readonly="!editable"
-                      placeholder="DD/MM/YYYY"
-                      :mask="!editable ? '' : '##/##/####'"
-                      :model-value="
-                        item.registerDate
-                          ? !editable
-                            ? dateFormat(item.registerDate)
-                            : dateFormat(item.registerDate, false, false, true)
-                          : undefined
-                      "
-                      @update:model-value="
-                        (v) => {
-                          if (editable && v && v.toString().length === 10) {
-                            const _date = parseAndFormatDate(v, $i18n.locale);
-                            if (_date) {
-                              item.registerDate?.setDate(_date.getDate());
-                              item.registerDate?.setMonth(_date.getMonth());
-                              item.registerDate?.setFullYear(
-                                _date.getFullYear(),
-                              );
-                            } else {
-                              item.registerDate = null;
-                            }
-                          }
+                  :readonly="readonly"
+                  placeholder="DD/MM/YYYY"
+                  :mask="readonly ? '' : '##/##/####'"
+                  :model-value="
+                    item.registerDate
+                      ? readonly
+                        ? dateFormat(item.registerDate)
+                        : dateFormat(item.registerDate, false, false, true)
+                      : undefined
+                  "
+                  @update:model-value="
+                    (v) => {
+                      if (readonly && v && v.toString().length === 10) {
+                        const _date = parseAndFormatDate(v, $i18n.locale);
+                        if (_date) {
+                          item.registerDate?.setDate(_date.getDate());
+                          item.registerDate?.setMonth(_date.getMonth());
+                          item.registerDate?.setFullYear(_date.getFullYear());
+                        } else {
+                          item.registerDate = null;
                         }
-                      "
-                    >
-                      <template v-slot:prepend>
-                        <q-icon
-                          size="xs"
-                          name="mdi-calendar-blank-outline"
-                          class="cursor-pointer"
-                          color="primary"
-                        />
-                      </template>
-                      <template v-slot:append>
-                        <q-icon
-                          v-if="!item.registerDate && editable"
-                          name="mdi-close-circle"
-                          class="cursor-pointer app-text-muted"
-                          size="sm"
-                          @click="item.registerDate = null"
-                        />
-                      </template>
-                    </q-input>
+                      }
+                    }
+                  "
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      size="xs"
+                      name="mdi-calendar-blank-outline"
+                      class="cursor-pointer"
+                      color="primary"
+                    />
                   </template>
-                </VueDatePicker>
-              </div>
-            </q-tab-panel>
-            <q-tab-panel name="address">
-              <FormAddress
-                :prefix-id="prefixId || 'employer'"
-                hide-title
-                dense
-                :readonly="!editable"
-                outlined
-                :title="$t('form.address')"
-                v-model:address="item.address"
-                v-model:addressEN="item.addressEN"
-                v-model:province-id="item.provinceId"
-                v-model:district-id="item.districtId"
-                v-model:sub-district-id="item.subDistrictId"
-                :addressTitle="$t('form.address')"
-                :addressTitleEN="$t('form.address', { suffix: '(EN)' })"
-              />
-            </q-tab-panel>
-            <q-tab-panel name="business">
-              <FormBusiness
-                dense
-                outlined
-                :prefix-id="prefixId || 'employer'"
-                :readonly="!editable"
-                v-model:employment-office="item.employmentOffice"
-                v-model:bussiness-type="item.bussinessType"
-                v-model:bussiness-type-en="item.bussinessTypeEN"
-                v-model:job-position="item.jobPosition"
-                v-model:job-position-en="item.jobPositionEN"
-                v-model:job-description="item.jobDescription"
-                v-model:sale-employee="item.saleEmployee"
-                v-model:pay-date="item.payDate"
-                v-model:wage-rate="item.wageRate"
-              />
-            </q-tab-panel>
-          </q-tab-panels>
-        </div>
-      </div>
-    </template>
+                  <template v-slot:append>
+                    <q-icon
+                      v-if="!item.registerDate && readonly"
+                      name="mdi-close-circle"
+                      class="cursor-pointer app-text-muted"
+                      size="sm"
+                      @click="item.registerDate = null"
+                    />
+                  </template>
+                </q-input>
+              </template>
+            </VueDatePicker>
+          </div>
+        </q-tab-panel>
+        <q-tab-panel name="address">
+          <FormAddress
+            :prefix-id="prefixId || 'employer'"
+            hide-title
+            dense
+            :readonly="readonly"
+            outlined
+            :title="$t('form.address')"
+            v-model:address="item.address"
+            v-model:addressEN="item.addressEN"
+            v-model:province-id="item.provinceId"
+            v-model:district-id="item.districtId"
+            v-model:sub-district-id="item.subDistrictId"
+            :addressTitle="$t('form.address')"
+            :addressTitleEN="$t('form.address', { suffix: '(EN)' })"
+          />
+        </q-tab-panel>
+        <q-tab-panel name="business">
+          <FormBusiness
+            dense
+            outlined
+            :prefix-id="prefixId || 'employer'"
+            :readonly="readonly"
+            v-model:employment-office="item.employmentOffice"
+            v-model:bussiness-type="item.bussinessType"
+            v-model:bussiness-type-en="item.bussinessTypeEN"
+            v-model:job-position="item.jobPosition"
+            v-model:job-position-en="item.jobPositionEN"
+            v-model:job-description="item.jobDescription"
+            v-model:sale-employee="item.saleEmployee"
+            v-model:pay-date="item.payDate"
+            v-model:wage-rate="item.wageRate"
+          />
+        </q-tab-panel>
+        <q-tab-panel name="contact">
+          <FormContact
+            :readonly="readonly"
+            v-model:email="item.email"
+            v-model:telephone="item.telephoneNo"
+          />
+        </q-tab-panel>
+      </q-tab-panels>
+    </div>
   </div>
 </template>
diff --git a/src/pages/03_customer-management/components/FormContact.vue b/src/pages/03_customer-management/components/FormContact.vue
new file mode 100644
index 00000000..9d73b08c
--- /dev/null
+++ b/src/pages/03_customer-management/components/FormContact.vue
@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+defineProps<{
+  readonly?: boolean;
+  prefixId?: string;
+}>();
+const mail = defineModel<string>('mail');
+const telephone = defineModel<string>('telephone');
+</script>
+
+<template>
+  <div class="col-md-9 col-12 row q-col-gutter-md">
+    <q-input
+      lazy-rules="ondemand"
+      :for="`${prefixId}-input-mail`"
+      :id="`${prefixId}-input-mail`"
+      dense
+      outlined
+      :readonly="readonly"
+      hide-bottom-space
+      class="col-md-6 col-12"
+      :label="$t('formDialogInputEmail')"
+      v-model="mail"
+    />
+    <q-input
+      lazy-rules="ondemand"
+      :for="`${prefixId}-input-telephone`"
+      :id="`${prefixId}-input-telephone`"
+      dense
+      outlined
+      :readonly="readonly"
+      hide-bottom-space
+      class="col-md-6 col-12"
+      :label="$t('formDialogInputTelephone')"
+      v-model="telephone"
+    />
+  </div>
+</template>
diff --git a/src/pages/03_customer-management/form.ts b/src/pages/03_customer-management/form.ts
index 53a64d87..c3ea5e05 100644
--- a/src/pages/03_customer-management/form.ts
+++ b/src/pages/03_customer-management/form.ts
@@ -33,11 +33,10 @@ export const useCustomerForm = defineStore('form-customer', () => {
     dialogOpen: boolean;
     dialogModal: boolean;
     branchIndex: number;
-    saveMode: 'customer' | 'branch';
     customerImageUrl: string;
     imageDialog: boolean;
     imageEdit: boolean;
-    editReadonly: boolean;
+    readonly: boolean;
     editCustomerId?: string;
     editCustomerBranchId?: string;
   }>({
@@ -45,10 +44,9 @@ export const useCustomerForm = defineStore('form-customer', () => {
     dialogOpen: false,
     dialogModal: false,
     imageDialog: false,
-    branchIndex: 0,
-    editReadonly: true,
+    branchIndex: -1,
+    readonly: true,
     imageEdit: false,
-    saveMode: 'customer',
     customerImageUrl: '',
     editCustomerId: '',
     editCustomerBranchId: '',
@@ -60,12 +58,14 @@ export const useCustomerForm = defineStore('form-customer', () => {
   );
 
   function isFormDataDifferent() {
+    console.log(resetFormData, currentFormData.value);
     return (
       JSON.stringify(resetFormData) !== JSON.stringify(currentFormData.value)
     );
   }
 
   function resetForm(clean = false) {
+    state.value.branchIndex = -1;
     if (clean) {
       defaultFormData.customerType = currentFormData.value.customerType;
       currentFormData.value = structuredClone(defaultFormData);
@@ -177,143 +177,8 @@ export const useCustomerForm = defineStore('form-customer', () => {
       payDate: new Date(),
       wageRate: 0,
     });
-  }
-
-  async function submitForm() {
-    if (state.value.saveMode === 'customer') {
-      const _data = await submitFormCustomer();
-      if (_data) {
-        await assignFormData(_data.id);
-        state.value.dialogType = 'edit';
-        state.value.editReadonly = true;
-        state.value.editCustomerId = _data.id;
-      }
-    }
-    if (state.value.saveMode === 'branch') {
-      const _form = currentFormData.value.customerBranch?.at(
-        state.value.branchIndex,
-      );
-      if (_form) {
-        if (_form.id) {
-          const _data = await customerStore.editBranchById(_form.id, {
-            ..._form,
-            id: undefined,
-          });
-          if (
-            _data &&
-            currentFormData.value.customerBranch?.[state.value.branchIndex]
-          ) {
-            currentFormData.value.customerBranch[state.value.branchIndex] = {
-              id: _data.id,
-              code: _data.code,
-              branchNo: _data.branchNo,
-              address: _data.address,
-              addressEN: _data.addressEN,
-              provinceId: _data.provinceId,
-              districtId: _data.districtId,
-              subDistrictId: _data.subDistrictId,
-              zipCode: _data.zipCode,
-              email: _data.email,
-              telephoneNo: _data.telephoneNo,
-              name: _data.name,
-              status: undefined,
-              taxNo: _data.taxNo,
-              nameEN: _data.nameEN,
-              legalPersonNo: _data.legalPersonNo,
-              registerName: _data.registerName,
-              registerDate: new Date(_data.registerDate),
-              authorizedCapital: _data.authorizedCapital,
-              employmentOffice: _data.employmentOffice,
-              bussinessType: _data.bussinessType,
-              bussinessTypeEN: _data.bussinessTypeEN,
-              jobPosition: _data.jobPosition,
-              jobPositionEN: _data.jobPositionEN,
-              jobDescription: _data.jobDescription,
-              saleEmployee: _data.saleEmployee,
-              payDate: new Date(_data.payDate),
-              wageRate: _data.wageRate,
-            };
-            if (resetFormData.customerBranch?.[state.value.branchIndex]) {
-              resetFormData.customerBranch[state.value.branchIndex] =
-                structuredClone(
-                  toRaw(
-                    currentFormData.value.customerBranch[
-                      state.value.branchIndex
-                    ],
-                  ),
-                );
-            } else {
-              resetFormData.customerBranch?.push(
-                structuredClone(
-                  toRaw(
-                    currentFormData.value.customerBranch[
-                      state.value.branchIndex
-                    ],
-                  ),
-                ),
-              );
-            }
-            return;
-          }
-        }
-
-        if (!state.value.editCustomerId) {
-          throw new Error(
-            'Form mode is set to edit but no ID is provided. Make sure to set customer ID.',
-          );
-        }
-
-        const _data = await customerStore.createBranch({
-          ..._form,
-          customerId: state.value.editCustomerId,
-          id: undefined,
-        });
-
-        if (
-          _data &&
-          currentFormData.value.customerBranch?.[state.value.branchIndex]
-        ) {
-          currentFormData.value.customerBranch[state.value.branchIndex] = {
-            id: _data.id,
-            code: _data.code,
-            branchNo: _data.branchNo,
-            address: _data.address,
-            addressEN: _data.addressEN,
-            provinceId: _data.provinceId,
-            districtId: _data.districtId,
-            subDistrictId: _data.subDistrictId,
-            zipCode: _data.zipCode,
-            email: _data.email,
-            telephoneNo: _data.telephoneNo,
-            name: _data.name,
-            status: undefined,
-            taxNo: _data.taxNo,
-            nameEN: _data.nameEN,
-            legalPersonNo: _data.legalPersonNo,
-            registerName: _data.registerName,
-            registerDate: new Date(_data.registerDate),
-            authorizedCapital: _data.authorizedCapital,
-            employmentOffice: _data.employmentOffice,
-            bussinessType: _data.bussinessType,
-            bussinessTypeEN: _data.bussinessTypeEN,
-            jobPosition: _data.jobPosition,
-            jobPositionEN: _data.jobPositionEN,
-            jobDescription: _data.jobDescription,
-            saleEmployee: _data.saleEmployee,
-            payDate: new Date(_data.payDate),
-            wageRate: _data.wageRate,
-          };
-          if (resetFormData.customerBranch?.[state.value.branchIndex]) {
-            resetFormData.customerBranch[state.value.branchIndex] =
-              structuredClone(
-                toRaw(
-                  currentFormData.value.customerBranch[state.value.branchIndex],
-                ),
-              );
-          }
-        }
-      }
-    }
+    state.value.branchIndex =
+      (currentFormData.value.customerBranch?.length || 0) - 1;
   }
 
   async function submitFormCustomer() {
@@ -329,7 +194,7 @@ export const useCustomerForm = defineStore('form-customer', () => {
       );
     }
 
-    await customerStore.editById(state.value.editCustomerId, {
+    const _data = await customerStore.editById(state.value.editCustomerId, {
       ...currentFormData.value,
       status:
         currentFormData.value.status !== 'CREATED'
@@ -338,6 +203,13 @@ export const useCustomerForm = defineStore('form-customer', () => {
       image: currentFormData.value.image || undefined,
       customerBranch: undefined,
     });
+
+    if (_data) {
+      await assignFormData(_data.id);
+      state.value.dialogType = 'edit';
+      state.value.readonly = true;
+      state.value.editCustomerId = _data.id;
+    }
   }
 
   return {
@@ -347,7 +219,7 @@ export const useCustomerForm = defineStore('form-customer', () => {
     isFormDataDifferent,
     resetForm,
     assignFormData,
-    submitForm,
+    submitFormCustomer,
     addCurrentCustomerBranch,
   };
 });