diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 35d2441f..b6747d83 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -2051,6 +2051,11 @@ const emptyCreateDialog = ref(false);
                     anchor: 'form-visa',
                     tab: 'personalInfo',
                   },
+                  {
+                    name: $t('general.uploadFile'),
+                    anchor: 'drawer-info-file-upload',
+                    tab: 'personalInfo',
+                  },
                   ...(currentFromDataEmployee.employeeCheckup?.map((v, i) => ({
                     name: $t('general.times', { number: i + 1 }),
                     anchor: `form-employee-checkup-${i}`,
@@ -2162,6 +2167,7 @@ const emptyCreateDialog = ref(false);
               employee
               separator
               title="customerEmployee.form.group.personalInfo"
+              :readonly="!employeeFormState.isEmployeeEdit"
               v-model:open="employeeFormState.dialogModal"
               v-model:prefixName="currentFromDataEmployee.namePrefix"
               v-model:firstName="currentFromDataEmployee.firstName"
@@ -2178,6 +2184,7 @@ const emptyCreateDialog = ref(false);
             <AddressForm
               id="form-personal-address"
               prefix-id="form-employee"
+              :readonly="!employeeFormState.isEmployeeEdit"
               v-model:same-with-employer="
                 employeeFormState.formDataEmployeeSameAddr
               "
@@ -2199,6 +2206,7 @@ const emptyCreateDialog = ref(false);
               outlined
               separator
               :title="$t('customerEmployee.form.group.passport')"
+              :readonly="!employeeFormState.isEmployeeEdit"
               v-model:passport-type="currentFromDataEmployee.passportType"
               v-model:passport-number="currentFromDataEmployee.passportNumber"
               v-model:passport-issue-date="
@@ -2225,6 +2233,7 @@ const emptyCreateDialog = ref(false);
               dense
               outlined
               title="customerEmployee.form.group.visa"
+              :readonly="!employeeFormState.isEmployeeEdit"
               v-model:visa-type="currentFromDataEmployee.visaType"
               v-model:visa-number="currentFromDataEmployee.visaNumber"
               v-model:visa-issue-date="currentFromDataEmployee.visaIssueDate"
@@ -2239,6 +2248,66 @@ const emptyCreateDialog = ref(false);
               v-model:entry-date="currentFromDataEmployee.entryDate"
               class="q-mb-xl"
             />
+
+            <div class="row" id="drawer-info-file-upload">
+              <div class="col-12 q-pb-sm text-weight-bold text-body1">
+                <q-icon
+                  flat
+                  size="xs"
+                  class="q-pa-sm rounded q-mr-xs"
+                  color="info"
+                  name="mdi-upload"
+                  style="background-color: var(--surface-3)"
+                />
+                {{ $t(`general.uploadFile`) }}
+              </div>
+              <UploadFile
+                :tree-file="
+                  Object.values(
+                    currentFromDataEmployee.file?.reduce<
+                      Record<
+                        string,
+                        { label: string; file: { label: string }[] }
+                      >
+                    >((a, c) => {
+                      const _group = c.group || 'other';
+                      if (!a[_group]) {
+                        a[_group] = {
+                          label: $t(
+                            uploadFileListEmployee.find(
+                              (v) => v.value === _group,
+                            )?.label || _group,
+                          ),
+                          file: [
+                            {
+                              label:
+                                c.name ||
+                                `${c.group}-${c.file?.name || Date.now()}`,
+                            },
+                          ],
+                        };
+                      } else {
+                        a[_group].file.push({
+                          label:
+                            c.name ||
+                            `${c.group}-${c.file?.name || Date.now()}`,
+                        });
+                      }
+                      return a;
+                    }, {}) || {},
+                  )
+                "
+                v-model:file="currentFromDataEmployee.file"
+                hide-action
+                :readonly="!employeeFormState.isEmployeeEdit"
+                :dropdown-list="uploadFileListEmployee"
+                @send-ocr="
+                  async (_, file) => {
+                    if (file) await ocrStore.sendOcr({ file });
+                  }
+                "
+              />
+            </div>
           </template>
 
           <template v-if="employeeFormState.currentTab === 'healthCheck'">
@@ -2340,6 +2409,7 @@ const emptyCreateDialog = ref(false);
                 }
               "
             />
+            a
           </template>
 
           <template v-if="employeeFormState.currentTab === 'other'">
@@ -2915,7 +2985,7 @@ const emptyCreateDialog = ref(false);
                     },
 
                     {
-                      name: $t('อัปโหลดไฟล์'),
+                      name: $t('general.uploadFile'),
                       anchor: 'drawer-upload-file',
                       tab: 'personalInfo',
                     },
@@ -3108,52 +3178,65 @@ const emptyCreateDialog = ref(false);
                 class="q-mb-xl"
               />
 
-              <UploadFile
-                :tree-file="
-                  Object.values(
-                    currentFromDataEmployee.file?.reduce<
-                      Record<
-                        string,
-                        { label: string; file: { label: string }[] }
-                      >
-                    >((a, c) => {
-                      const _group = c.group || 'other';
-                      if (!a[_group]) {
-                        a[_group] = {
-                          label: $t(
-                            uploadFileListEmployee.find(
-                              (v) => v.value === _group,
-                            )?.label || _group,
-                          ),
-                          file: [
-                            {
-                              label:
-                                c.name ||
-                                `${c.group}-${c.file?.name || Date.now()}`,
-                            },
-                          ],
-                        };
-                      } else {
-                        a[_group].file.push({
-                          label:
-                            c.name ||
-                            `${c.group}-${c.file?.name || Date.now()}`,
-                        });
-                      }
-                      return a;
-                    }, {}) || {},
-                  )
-                "
-                v-model:file="currentFromDataEmployee.file"
-                hide-action
-                :readonly="!employeeFormState.isEmployeeEdit"
-                :dropdown-list="uploadFileListEmployee"
-                @send-ocr="
-                  async (_, file) => {
-                    if (file) await ocrStore.sendOcr({ file });
-                  }
-                "
-              />
+              <div class="row" id="drawer-upload-file">
+                <div class="col-12 q-pb-sm text-weight-bold text-body1">
+                  <q-icon
+                    flat
+                    size="xs"
+                    class="q-pa-sm rounded q-mr-xs"
+                    color="info"
+                    name="mdi-upload"
+                    style="background-color: var(--surface-3)"
+                  />
+                  {{ $t(`general.uploadFile`) }}
+                </div>
+                <UploadFile
+                  :tree-file="
+                    Object.values(
+                      currentFromDataEmployee.file?.reduce<
+                        Record<
+                          string,
+                          { label: string; file: { label: string }[] }
+                        >
+                      >((a, c) => {
+                        const _group = c.group || 'other';
+                        if (!a[_group]) {
+                          a[_group] = {
+                            label: $t(
+                              uploadFileListEmployee.find(
+                                (v) => v.value === _group,
+                              )?.label || _group,
+                            ),
+                            file: [
+                              {
+                                label:
+                                  c.name ||
+                                  `${c.group}-${c.file?.name || Date.now()}`,
+                              },
+                            ],
+                          };
+                        } else {
+                          a[_group].file.push({
+                            label:
+                              c.name ||
+                              `${c.group}-${c.file?.name || Date.now()}`,
+                          });
+                        }
+                        return a;
+                      }, {}) || {},
+                    )
+                  "
+                  v-model:file="currentFromDataEmployee.file"
+                  hide-action
+                  :readonly="!employeeFormState.isEmployeeEdit"
+                  :dropdown-list="uploadFileListEmployee"
+                  @send-ocr="
+                    async (_, file) => {
+                      if (file) await ocrStore.sendOcr({ file });
+                    }
+                  "
+                />
+              </div>
             </template>
             <template v-if="employeeFormState.currentTab === 'healthCheck'">
               <FormEmployeeHealthCheck