diff --git a/src/components/03_customer-management/CustomerInfoComponent.vue b/src/components/03_customer-management/CustomerInfoComponent.vue
index 37833050..cd6c19c4 100644
--- a/src/components/03_customer-management/CustomerInfoComponent.vue
+++ b/src/components/03_customer-management/CustomerInfoComponent.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue';
 
-import { Status } from 'src/stores/types';
 import useCustomerStore from 'src/stores/customer';
+import useFlowStore from 'src/stores/flow';
+
+import { Status } from 'src/stores/types';
 import { CustomerBranch, CustomerType } from 'src/stores/customer/types';
 
 import AppBox from 'components/app/AppBox.vue';
@@ -10,8 +12,10 @@ import BranchCardCustomer from 'components/03_customer-management/BranchCardCust
 import PaginationComponent from 'src/components/PaginationComponent.vue';
 import NoData from 'components/NoData.vue';
 
+const flowStore = useFlowStore();
+
 const userCustomer = useCustomerStore();
-const { fetchListBranch } = userCustomer;
+const { fetchListCustomeBranch } = userCustomer;
 
 const inputSearch = ref<string>('');
 
@@ -52,7 +56,7 @@ onMounted(async () => {
 });
 
 async function fetchList() {
-  const result = await fetchListBranch({
+  const result = await fetchListCustomeBranch({
     customerId: prop.customerId,
     query: !!inputSearch.value ? inputSearch.value : undefined,
     page: currentPageBranch.value,
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index fda0d9f4..84911886 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -4,6 +4,7 @@ import { computed, ref, watch, toRaw } from 'vue';
 import useCustomerStore from 'src/stores/customer';
 import useEmployeeStore from 'src/stores/employee';
 import useOptionStore from 'src/stores/options';
+import useBranchStore from 'src/stores/branch';
 
 import { Status } from 'src/stores/types';
 
@@ -62,6 +63,10 @@ import useFlowStore from 'src/stores/flow';
 const { t, locale } = useI18n();
 const utilsStore = useUtilsStore();
 const userCustomer = useCustomerStore();
+const userBranch = useBranchStore();
+
+const { fetchList: fetchListBranch } = userBranch;
+
 const {
   create,
   getStatsCustomer,
@@ -70,8 +75,8 @@ const {
   fetchListById,
   createBranch,
   editBranchById,
-  fetchListBranch,
-  fetchListBranchById,
+  fetchListCustomeBranch,
+  fetchListCustomeBranchById,
 } = userCustomer;
 const flowStore = useFlowStore();
 const employeeStore = useEmployeeStore();
@@ -83,8 +88,11 @@ const formData = ref<CustomerCreate>({
   customerName: '',
   customerNameEN: '',
   taxNo: '',
+  registeredBranchId: '',
   customerBranch: [
     {
+      code: '',
+      branchNo: 1,
       address: '',
       addressEN: '',
       provinceId: '',
@@ -234,6 +242,7 @@ const formDataEmployee = ref<EmployeeCreate>({
   },
 });
 
+const allBranch = ref<{ id: string; name: string }[]>();
 const indexTab = ref<number>(0);
 const statusToggle = ref<boolean>(false);
 const profileSubmit = ref<boolean>(false);
@@ -379,8 +388,9 @@ const customerType = ref<CustomerType>('CORP');
 const employeeHistoryDialog = ref(false);
 const employeeHistory = ref<EmployeeHistory[]>();
 
-function triggerCreate(type: CustomerType) {
+async function triggerCreate(type: CustomerType) {
   customerType.value = type;
+  await fetchListOfBranch();
   openDialogInputForm();
   dialogCustomerType.value = false;
 }
@@ -402,7 +412,10 @@ async function openDialogInputForm(
 ) {
   if (action === 'INFO') {
     if (!id) return;
-    if (selectorLabel.value === 'EMPLOYER') infoDrawer.value = true;
+    if (selectorLabel.value === 'EMPLOYER') {
+      await fetchListOfBranch();
+      infoDrawer.value = true;
+    }
     if (selectorLabel.value === 'EMPLOYEE') {
       await assignFormDataEmployee(id);
       infoDrawerEmployee.value = true;
@@ -426,7 +439,7 @@ async function openDialogInputForm(
         : [];
 
       const code = currentEmployee.value?.code.split('-')[0];
-      const result = await fetchListBranch({
+      const result = await fetchListCustomeBranch({
         includeCustomer: true,
         query: code,
         pageSize: 30,
@@ -434,13 +447,16 @@ async function openDialogInputForm(
       if (result) employeeStore.ownerOption = result.result;
     }
   } else {
-    if (selectorLabel.value === 'EMPLOYER') dialogInputForm.value = true;
+    if (selectorLabel.value === 'EMPLOYER') {
+      await fetchListOfBranch();
+      dialogInputForm.value = true;
+    }
     if (selectorLabel.value === 'EMPLOYEE') {
       if (!id) return;
       await assignFormDataEmployee(id);
       const code = currentEmployee.value?.code.split('-')[0];
 
-      const result = await fetchListBranch({
+      const result = await fetchListCustomeBranch({
         includeCustomer: true,
         query: code,
         pageSize: 30,
@@ -476,8 +492,11 @@ function clearForm() {
     customerNameEN: '',
     personName: '',
     taxNo: '',
+    registeredBranchId: '',
     customerBranch: [
       {
+        code: '',
+        branchNo: 1,
         address: '',
         addressEN: '',
         provinceId: '',
@@ -692,6 +711,14 @@ async function onSubmitCustomerBranch() {
   flowStore.rotate();
 }
 
+async function fetchListOfBranch() {
+  const res = await fetchListBranch({ pageSize: 999 });
+
+  if (res) allBranch.value = res.result;
+
+  console.log(allBranch.value);
+}
+
 async function fetchListCustomer() {
   const resultList = await fetchList({
     includeBranch: true,
@@ -754,6 +781,7 @@ async function onSubmitEdit(id: string) {
     if (!formData.value) return;
 
     const tempValue: CustomerUpdate = {
+      registeredBranchId: formData.value.registeredBranchId,
       status: formData.value.status,
       customerType: formData.value.customerType,
       customerName: formData.value.customerName,
@@ -855,7 +883,7 @@ async function employeeFilterOwnerBranch(
   update: (...args: unknown[]) => void,
 ) {
   update(async () => {
-    const result = await fetchListBranch({
+    const result = await fetchListCustomeBranch({
       includeCustomer: true,
       query: val,
       pageSize: 30,
@@ -873,11 +901,21 @@ const prevCustomer = ref<CustomerCreate>({
   taxNo: '',
   customerBranch: [],
   image: null,
+  registeredBranchId: '',
 });
 
-async function assignFormData(data: Customer & { branch: CustomerBranch[] }) {
+async function assignFormData(customerId: string) {
+  let data;
+  const res = await fetchListById(customerId);
+  if (res) {
+    data = res;
+  }
+
+  if (!data) return;
+
   prevCustomer.value = {
-    status: 'CREATED',
+    registeredBranchId: data.registeredBranchId,
+    status: data.status,
     customerType: data.customerType,
     customerName: data.customerName,
     customerNameEN: data.customerNameEN,
@@ -889,6 +927,8 @@ async function assignFormData(data: Customer & { branch: CustomerBranch[] }) {
 
   data.branch.forEach((v) => {
     prevCustomer.value.customerBranch?.push({
+      code: v.code,
+      branchNo: v.branchNo,
       id: v.id,
       address: v.address,
       addressEN: v.addressEN,
@@ -926,6 +966,8 @@ function cloneData() {
     ...prevCustomer.value,
     customerBranch: structuredClone(toRaw(prevCustomer.value.customerBranch)),
   };
+
+  console.log(formData.value);
 }
 
 async function assignFormDataEmployee(id: string) {
@@ -989,7 +1031,7 @@ async function assignFormDataEmployee(id: string) {
       : (profileSubmit.value = false);
     isEmployeeEdit.value = true;
 
-    const foundBranch = await fetchListBranchById(
+    const foundBranch = await fetchListCustomeBranchById(
       foundEmployee.customerBranchId,
     );
     formDataEmployeeOwner.value = {
@@ -1543,7 +1585,7 @@ watch([inputSearch, currentStatus], async () => {
 
                   currentCustomerId = i.id;
 
-                  assignFormData(i);
+                  assignFormData(i.id);
 
                   infoDrawerEdit = true;
                   openDialogInputForm('INFO', i.id);
@@ -1556,7 +1598,7 @@ watch([inputSearch, currentStatus], async () => {
 
                   currentCustomerId = i.id;
                   customerType = i.customerType;
-                  assignFormData(i);
+                  assignFormData(i.id);
                   openDialogInputForm('INFO', i.id);
                 }
               "
@@ -1725,9 +1767,8 @@ watch([inputSearch, currentStatus], async () => {
               code: v[0].code,
             };
 
-            if (!!currentCustomer && !!v) {
-              assignFormData({ ...currentCustomer, branch: v });
-            }
+            if (currentCustomer) assignFormData(currentCustomer.id);
+
             infoDrawerBranch = true;
           }
         "
@@ -1795,6 +1836,8 @@ watch([inputSearch, currentStatus], async () => {
         outlined
         separator
         :type-customer="customerType"
+        :options-branch="allBranch"
+        v-model:registered-branch-id="formData.registeredBranchId"
         v-model:customer-name="formData.customerName"
         v-model:customer-name-en="formData.customerNameEN"
         v-model:person-name="formData.personName"
@@ -1873,6 +1916,7 @@ watch([inputSearch, currentStatus], async () => {
                 indexTab !== undefined && formData.customerBranch?.[indexTab]
               "
               :type-customer="customerType"
+              v-model:branch-no="formData.customerBranch[indexTab].branchNo"
               v-model:tax-no="formData.customerBranch[indexTab].taxNo"
               v-model:customer-name="formData.customerBranch[indexTab].name"
               v-model:customer-english-name="
@@ -2391,6 +2435,8 @@ watch([inputSearch, currentStatus], async () => {
             separator
             :readonly="!infoDrawerEdit"
             :type-customer="customerType"
+            :options-branch="allBranch"
+            v-model:registered-branch-id="formData.registeredBranchId"
             v-model:customer-name="formData.customerName"
             v-model:customer-name-en="formData.customerNameEN"
             v-model:person-name="formData.personName"
@@ -2479,6 +2525,8 @@ watch([inputSearch, currentStatus], async () => {
                     formData.customerBranch?.[indexTab]
                   "
                   :type-customer="customerType"
+                  v-model:branch-code="formData.customerBranch[indexTab].code"
+                  v-model:branch-no="formData.customerBranch[indexTab].branchNo"
                   v-model:customer-name="formData.customerBranch[indexTab].name"
                   v-model:customer-english-name="
                     formData.customerBranch[indexTab].nameEN