diff --git a/src/pages/03_customer-management/components/FormBranch.vue b/src/pages/03_customer-management/components/FormBranch.vue
index fade940c..9d784a8b 100644
--- a/src/pages/03_customer-management/components/FormBranch.vue
+++ b/src/pages/03_customer-management/components/FormBranch.vue
@@ -1,12 +1,41 @@
 <script setup lang="ts">
+import FormAddress from 'src/components/02_personnel-management/FormAddress.vue';
 import { CustomerCreate } from 'src/stores/customer/types';
+import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
+import { ref, watch } from 'vue';
 
 const branch = defineModel<CustomerCreate['customerBranch']>('customerBranch', {
   default: [],
 });
 
+const tab = ref<
+  {
+    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)?.tab || 'main',
+      })) || [];
+  },
+  { deep: true },
+);
+
+defineEmits<{
+  (e: 'addBranch'): void;
+  (e: 'saveBranch', v: (typeof tab.value)[number]['branch']): void;
+  (e: 'deleteBranch', v: (typeof tab.value)[number]['branch']): void;
+}>();
 defineProps<{
   editable?: boolean;
+  prefixId?: string;
+  customerType?: 'CORP' | 'PERS';
 }>();
 </script>
 
@@ -36,13 +65,234 @@ defineProps<{
       />
     </div>
 
-    <template v-for="item in branch">
+    <template v-for="(item, idx) in branch">
       <span
-        class="col-12 text-weight-bold"
+        class="col-12 text-weight-bold row items-center"
         :id="`form-branch-customer-no-${item.branchNo}`"
       >
         {{ $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', 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', 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-tabs>
+          <q-tab-panels v-model="tab[idx].tab">
+            <q-tab-panel name="main">
+              <div class="row q-col-gutter-md">
+                <q-input
+                  lazy-rules="ondemand"
+                  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 (v && v.toString().length === 10) {
+                            const _date = parseAndFormatDate(v, $i18n.locale);
+                            if (_date !== undefined) {
+                              if (_date === null)
+                                return (item.registerDate = null);
+                              const isoDateOld =
+                                item.registerDate?.toISOString() ||
+                                new Date().toISOString();
+                              const isoDateNew = _date?.toISOString();
+                              console.log(isoDateOld, isoDateNew);
+
+                              item.registerDate = new Date(
+                                isoDateNew.split('T')[0] +
+                                  'T' +
+                                  isoDateOld.split('T')[1],
+                              );
+                            }
+                          }
+                        }
+                      "
+                    >
+                      <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>
+                </VueDatePicker>
+              </div>
+            </q-tab-panel>
+            <q-tab-panel name="address">
+              <FormAddress
+                :prefix-id="prefixId || 'employer'"
+                dense
+                outlined
+                :title="$t('form.address')"
+                v-model:address="item.address"
+                v-model:addressEN="item.addressEN"
+                v-model:provinceId="item.provinceId"
+                v-model:districtId="item.districtId"
+                v-model:subDistrictId="item.subDistrictId"
+                :addressTitle="$t('form.address')"
+                :addressTitleEN="$t('form.address', { suffix: '(EN)' })"
+              />
+              {{ $t('form.address', { suffix: '(EN)' }) }}
+            </q-tab-panel>
+          </q-tab-panels>
+        </div>
+      </div>
     </template>
   </div>
 </template>