diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index f90aa693..e89e10f6 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -70,6 +70,7 @@ const profileSubmit = ref<boolean>(false);
 const profileFile = ref<File | undefined>(undefined);
 const profileUrl = ref<string | null>('');
 const infoDrawer = ref(false);
+const infoDrawerEdit = ref(false);
 
 const inputFile = (() => {
   const element = document.createElement('input');
@@ -206,6 +207,10 @@ async function onSubmit() {
   });
   clearForm();
 }
+
+function undo() {
+  infoDrawerEdit.value = false;
+}
 </script>
 
 <template>
@@ -507,14 +512,17 @@ async function onSubmit() {
   </FormDialog>
 
   <DrawerInfo
-    :close="() => onClose()"
-    title="test"
+    title="บริษัททดสอบ"
     v-model:drawer-open="infoDrawer"
     badgeLabel="HQ006"
     badgeClass="app-bg-pers"
+    :undo="() => undo()"
+    :isEdit="infoDrawerEdit"
+    :close="() => onClose()"
+    :editData="() => (infoDrawerEdit = true)"
   >
     <template #info>
-      <InfoForm no-address>
+      <InfoForm>
         <template #person-card>
           <div class="q-ma-md">
             <AppBox class="surface-1" style="padding: 0">
@@ -545,6 +553,123 @@ async function onSubmit() {
             </AppBox>
           </div>
         </template>
+        <template #information>
+          <BasicInformation
+            dense
+            outlined
+            separator
+            :readonly="!infoDrawerEdit"
+          />
+        </template>
+
+        <template #address>
+          <!-- <FormCustomerBranch separator dense outlined /> -->
+
+          <div class="col-3 app-text-muted">
+            • {{ $t('formDialogCustomerBranch') }}
+          </div>
+
+          <div class="col-12 row bordered q-pt-none rounded">
+            <TabComponent
+              :readonly="!infoDrawerEdit"
+              v-model:customer-branch="formData.customerBranch"
+              v-model:tab-index="indexTab"
+            >
+              <template #address>
+                <FormAddress
+                  v-if="
+                    indexTab !== undefined &&
+                    formData.customerBranch?.[indexTab]
+                  "
+                  v-model:address="formData.customerBranch[indexTab].address"
+                  v-model:address-e-n="
+                    formData.customerBranch[indexTab].addressEN
+                  "
+                  v-model:province-id="
+                    formData.customerBranch[indexTab].provinceId
+                  "
+                  v-model:district-id="
+                    formData.customerBranch[indexTab].districtId
+                  "
+                  v-model:sub-district-id="
+                    formData.customerBranch[indexTab].subDistrictId
+                  "
+                  v-model:zip-code="formData.customerBranch[indexTab].zipCode"
+                  separator
+                  dense
+                  outlined
+                  :readonly="!infoDrawerEdit"
+                />
+              </template>
+
+              <template #businessInformation>
+                <FormBusiness
+                  v-if="
+                    indexTab !== undefined &&
+                    formData.customerBranch?.[indexTab]
+                  "
+                  separator
+                  dense
+                  outlined
+                  :readonly="!infoDrawerEdit"
+                />
+              </template>
+              <template #about>
+                <AboutComponent
+                  v-if="
+                    indexTab !== undefined &&
+                    formData.customerBranch?.[indexTab]
+                  "
+                  v-model:customer-name="formData.customerBranch[indexTab].name"
+                  v-model:customer-english-name="
+                    formData.customerBranch[indexTab].nameEN
+                  "
+                  v-model:authorized-capital="
+                    formData.customerBranch[indexTab].authorizedCapital
+                  "
+                  v-model:register-name="
+                    formData.customerBranch[indexTab].registerName
+                  "
+                  v-model:register-date="
+                    formData.customerBranch[indexTab].registerDate
+                  "
+                  dense
+                  outlined
+                  bordered
+                  separator
+                  :readonly="!infoDrawerEdit"
+                />
+              </template>
+              <template #contactInformation>
+                <ContactComponent
+                  v-if="
+                    indexTab !== undefined &&
+                    formData.customerBranch?.[indexTab]
+                  "
+                  v-model:mail="formData.customerBranch[indexTab].email"
+                  v-model:telephone="
+                    formData.customerBranch[indexTab].telephoneNo
+                  "
+                  dense
+                  outlined
+                  separator
+                  :readonly="!infoDrawerEdit"
+                />
+              </template>
+              <template #otherDocuments>
+                <OtherInformation
+                  v-if="
+                    indexTab !== undefined &&
+                    formData.customerBranch?.[indexTab]
+                  "
+                  dense
+                  outlined
+                  :readonly="!infoDrawerEdit"
+                />
+              </template>
+            </TabComponent>
+          </div>
+        </template>
       </InfoForm>
     </template>
   </DrawerInfo>