diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index a6099b5d..93136b98 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -24,13 +24,19 @@ import FormBusiness from 'src/components/03_customer-management/FormBusiness.vue
 import DrawerInfo from 'src/components/DrawerInfo.vue';
 import InfoForm from 'src/components/02_personnel-management/InfoForm.vue';
 import CustomerInfoComponent from 'src/components/03_customer-management/CustomerInfoComponent.vue';
-import { CustomerCreate, CustomerStats, Customer } from 'stores/customer/types';
+import {
+  CustomerCreate,
+  CustomerStats,
+  Customer,
+  CustomerUpdate,
+  CustomerBranch,
+} from 'stores/customer/types';
 import { onMounted } from 'vue';
 
 import { dialog } from 'src/stores/utils';
 
 const userCustomer = useCustomerStore();
-const { create, getStatsCustomer, fetchList } = userCustomer;
+const { create, getStatsCustomer, fetchList, editById } = userCustomer;
 const formData = ref<CustomerCreate>({
   status: 'CREATED',
   customerType: 'CORP',
@@ -80,6 +86,8 @@ const isMainPage = ref<boolean>(true);
 const statsCustomerType = ref<CustomerStats>();
 const currentCustomerId = ref<string>('');
 
+const currentCustomer = ref<Customer>();
+
 const inputFile = (() => {
   const element = document.createElement('input');
   element.type = 'file';
@@ -100,7 +108,7 @@ const inputFile = (() => {
   return element;
 })();
 
-const listCustomer = ref<Pagination<Customer[]>>();
+const listCustomer = ref<(Customer & { branch: CustomerBranch[] })[]>();
 
 const itemCard = [
   {
@@ -169,6 +177,7 @@ function openDialogInputForm(action: 'FORM' | 'INFO' = 'FORM', id?: string) {
 function onClose() {
   infoDrawer.value = false;
   dialogInputForm.value = false;
+  clearForm();
 }
 
 function clearForm() {
@@ -223,20 +232,78 @@ async function onSubmit() {
   clearForm();
 }
 
+async function onSubmitEdit(id: string) {
+  if (!formData.value) return;
+
+  const tempValue: CustomerUpdate = {
+    status: 'ACTIVE',
+    customerType: formData.value.customerType,
+    customerName: formData.value.customerName,
+    customerNameEN: formData.value.customerNameEN,
+    customerBranch: formData.value.customerBranch,
+    taxNo: formData.value.taxNo,
+  };
+
+  await editById(id, tempValue);
+  clearForm();
+}
+
 function undo() {
   infoDrawerEdit.value = false;
 }
 
+async function assignFormData(data: Customer & { branch: CustomerBranch[] }) {
+  formData.value = {
+    status: 'CREATED',
+    customerType: data.customerType,
+    customerName: data.customerName,
+    customerNameEN: data.customerNameEN,
+    taxNo: data.taxNo,
+    customerBranch: [],
+    image: new File([''], 'dummy.jpg'),
+  };
+
+  data.branch.forEach((v) => {
+    formData.value.customerBranch?.push({
+      address: v.address,
+      addressEN: v.addressEN,
+      provinceId: v.province.id,
+      districtId: v.district.id,
+      subDistrictId: v.subDistrict.id,
+      zipCode: v.zipCode,
+      email: v.email,
+      telephoneNo: v.telephoneNo,
+      name: v.name,
+      status: undefined,
+      taxNo: v.taxNo,
+      nameEN: v.nameEN,
+      legalPersonNo: v.legalPersonNo,
+      registerName: v.registerName,
+      registerDate: new Date(v.registerDate),
+      authorizedCapital: v.authorizedCapital,
+      employmentOffice: v.employmentOffice,
+      bussinessType: v.bussinessType,
+      bussinessTypeEN: v.bussinessTypeEN,
+      jobPosition: v.jobPosition,
+      jobPositionEN: v.jobPositionEN,
+      jobDescription: v.jobDescription,
+      saleEmployee: v.saleEmployee,
+      payDate: new Date(v.payDate),
+      wageRate: v.wageRate,
+    });
+  });
+}
+
 onMounted(async () => {
   const resultStats = await getStatsCustomer();
 
-  const resultList = await fetchList();
+  const resultList = await fetchList({ includeBranch: true });
 
   if (resultStats) statsCustomerType.value = resultStats;
 
-  if (resultList) listCustomer.value = resultList;
+  console.log(resultList);
 
-  console.log(listCustomer.value);
+  if (resultList) listCustomer.value = resultList.result;
 });
 </script>
 
@@ -322,10 +389,11 @@ onMounted(async () => {
           :style="`grid-template-columns: repeat(${$q.screen.lt.sm ? '1' : '4'}, 1fr)`"
         >
           <UsersDetailCardComponent
-            v-for="i in listCustomer?.result"
+            v-for="i in listCustomer"
             :key="i.id"
             :color="i.customerType === 'CORP' ? 'purple' : 'green'"
             :metadata="{ id: '1', disabled: false }"
+            :badge="i.branch"
             :list="{
               id: i.id,
               imageUrl: i.imageUrl,
@@ -353,7 +421,23 @@ onMounted(async () => {
                 isMainPage = false;
               }
             "
-            @view-card="openDialogInputForm"
+            @update-card="
+              () => {
+                if (!listCustomer) return;
+
+                currentCustomerId = i.id;
+
+                assignFormData(i);
+                infoDrawerEdit = true;
+                openDialogInputForm('INFO', i.id);
+              }
+            "
+            @view-card="
+              () => {
+                assignFormData(i);
+                openDialogInputForm('INFO', i.id);
+              }
+            "
             @delete-card="
               dialog({
                 color: 'negative',
@@ -365,9 +449,9 @@ onMounted(async () => {
                 action: async () => {
                   await userCustomer.deleteById(i.id);
 
-                  const resultList = await fetchList();
+                  const resultList = await fetchList({ includeBranch: true });
 
-                  if (resultList) listCustomer = resultList;
+                  if (resultList) listCustomer = resultList.result;
                 },
                 cancel: () => {},
               })
@@ -568,6 +652,8 @@ onMounted(async () => {
     :isEdit="infoDrawerEdit"
     :close="() => onClose()"
     :editData="() => (infoDrawerEdit = true)"
+    :data="currentCustomer"
+    :submit="() => onSubmitEdit(currentCustomerId)"
   >
     <template #info>
       <InfoForm>
@@ -607,6 +693,10 @@ onMounted(async () => {
             outlined
             separator
             :readonly="!infoDrawerEdit"
+            :type-customer="customerType"
+            v-model:customer-name="formData.customerName"
+            v-model:customer-name-en="formData.customerNameEN"
+            v-model:tax-no="formData.taxNo"
           />
         </template>
 
@@ -654,6 +744,29 @@ onMounted(async () => {
                     indexTab !== undefined &&
                     formData.customerBranch?.[indexTab]
                   "
+                  v-model:employment-office="
+                    formData.customerBranch[indexTab].employmentOffice
+                  "
+                  v-model:bussiness-type="
+                    formData.customerBranch[indexTab].bussinessType
+                  "
+                  v-model:bussiness-type-en="
+                    formData.customerBranch[indexTab].bussinessTypeEN
+                  "
+                  v-model:job-position="
+                    formData.customerBranch[indexTab].jobPosition
+                  "
+                  v-model:job-position-en="
+                    formData.customerBranch[indexTab].jobPositionEN
+                  "
+                  v-model:job-description="
+                    formData.customerBranch[indexTab].jobDescription
+                  "
+                  v-model:sale-employee="
+                    formData.customerBranch[indexTab].saleEmployee
+                  "
+                  v-model:pay-date="formData.customerBranch[indexTab].payDate"
+                  v-model:wage-rate="formData.customerBranch[indexTab].wageRate"
                   separator
                   dense
                   outlined