diff --git a/src/components/02_personnel-management/FormPerson.vue b/src/components/02_personnel-management/FormPerson.vue
index a7759872..8fa73a46 100644
--- a/src/components/02_personnel-management/FormPerson.vue
+++ b/src/components/02_personnel-management/FormPerson.vue
@@ -371,6 +371,7 @@ watch(
                   const today = new Date();
                   const date = parseAndFormatDate(v, locale);
                   birthDate = date && date > today ? today : date;
+                  console.log(today);
                 }
               }
             "
diff --git a/src/components/03_customer-management/FormEmployeePassport.vue b/src/components/03_customer-management/FormEmployeePassport.vue
index 02c02bf6..22fe8747 100644
--- a/src/components/03_customer-management/FormEmployeePassport.vue
+++ b/src/components/03_customer-management/FormEmployeePassport.vue
@@ -153,7 +153,14 @@ watch(
         hide-bottom-space
         class="col-6"
         :label="$t('formDialogInputPassportRef')"
-        v-model="previousPassportReference"
+        :model-value="
+          readonly
+            ? previousPassportReference || '-'
+            : previousPassportReference
+        "
+        @update:model-value="
+          (v) => (typeof v === 'string' ? (previousPassportReference = v) : '')
+        "
       />
       <q-input
         lazy-rules="ondemand"
diff --git a/src/components/03_customer-management/FormEmployeeVisa.vue b/src/components/03_customer-management/FormEmployeeVisa.vue
index 98ae149b..da375238 100644
--- a/src/components/03_customer-management/FormEmployeeVisa.vue
+++ b/src/components/03_customer-management/FormEmployeeVisa.vue
@@ -91,7 +91,7 @@ watch(
         size="xs"
         class="q-pa-sm rounded q-mr-xs"
         color="info"
-        name="mdi-notebook"
+        name="mdi-notebook-outline"
         style="background-color: var(--surface-3)"
       />
       {{ $t(`${title}`) }}
@@ -107,7 +107,6 @@ watch(
         hide-selected
         hide-bottom-space
         input-debounce="0"
-        v-model="visaType"
         option-value="value"
         option-label="label"
         lazy-rules="ondemand"
@@ -119,6 +118,11 @@ watch(
         :for="`${prefixId}-select-visa-type`"
         :label="$t('formDialogInputVisaType')"
         @filter="visaTypeFilter"
+        :model-value="readonly ? visaType || '-' : visaType"
+        @update:model-value="
+          (v) => (typeof v === 'string' ? (visaType = v) : '')
+        "
+        @clear="visaType = ''"
       >
         <template v-slot:no-option>
           <q-item>
@@ -141,7 +145,10 @@ watch(
         hide-bottom-space
         class="col-4"
         :label="$t('formDialogInputVisaNo')"
-        v-model="visaNumber"
+        :model-value="readonly ? visaNumber || '-' : visaNumber"
+        @update:model-value="
+          (v) => (typeof v === 'string' ? (visaNumber = v) : '')
+        "
       />
       <!-- :rules="[
         (val: string) =>
@@ -181,7 +188,9 @@ watch(
                 ? readonly
                   ? dateFormat(visaIssueDate)
                   : dateFormat(visaIssueDate, false, false, true)
-                : undefined
+                : readonly
+                  ? '-'
+                  : undefined
             "
             @update:model-value="
               (v) => {
@@ -249,7 +258,9 @@ watch(
                 ? readonly
                   ? dateFormat(visaExpiryDate)
                   : dateFormat(visaExpiryDate, false, false, true)
-                : undefined
+                : readonly
+                  ? '-'
+                  : undefined
             "
             @update:model-value="
               (v) => {
@@ -293,7 +304,10 @@ watch(
         hide-bottom-space
         class="col-5"
         :label="$t('formDialogInputVisaPlace')"
-        v-model="visaIssuingPlace"
+        :model-value="readonly ? visaIssuingPlace || '-' : visaIssuingPlace"
+        @update:model-value="
+          (v) => (typeof v === 'string' ? (visaIssuingPlace = v) : '')
+        "
       />
       <!-- :rules="[
         (val: string) =>
@@ -333,7 +347,9 @@ watch(
                 ? readonly
                   ? dateFormat(visaStayUntilDate)
                   : dateFormat(visaStayUntilDate, false, false, true)
-                : undefined
+                : readonly
+                  ? '-'
+                  : undefined
             "
             @update:model-value="
               (v) => {
@@ -378,7 +394,11 @@ watch(
         hide-bottom-space
         class="col-5"
         :label="$t('formDialogInputVisaTM6')"
-        v-model="tm6Number"
+        :model-value="readonly ? tm6Number || '-' : tm6Number"
+        @update:model-value="
+          (v) => (typeof v === 'string' ? (tm6Number = v) : '')
+        "
+        @clear="tm6Number = ''"
       />
       <!-- :rules="[
         (val: string) =>
@@ -417,7 +437,9 @@ watch(
                 ? readonly
                   ? dateFormat(entryDate)
                   : dateFormat(entryDate, false, false, true)
-                : undefined
+                : readonly
+                  ? '-'
+                  : undefined
             "
             @update:model-value="
               (v) => {
diff --git a/src/components/03_customer-management/employee/BasicInformation.vue b/src/components/03_customer-management/employee/BasicInformation.vue
index 0e76d3b3..2f7f1853 100644
--- a/src/components/03_customer-management/employee/BasicInformation.vue
+++ b/src/components/03_customer-management/employee/BasicInformation.vue
@@ -349,7 +349,7 @@ onMounted(() => {
 
       <q-input
         lazy-rules="ondemand"
-        mask="## #### ###### #"
+        :mask="readonly ? '' : '## #### ###### #'"
         :for="`${prefixId}-input-nrc-no`"
         :dense="dense"
         outlined
@@ -357,7 +357,8 @@ onMounted(() => {
         :readonly="readonly"
         class="col-6"
         :label="$t('formDialogEmployeeNRCNo')"
-        v-model="nrcNo"
+        :model-value="readonly ? nrcNo || '-' : nrcNo"
+        @update:model-value="(v) => (typeof v === 'string' ? (nrcNo = v) : '')"
       />
     </div>
   </div>
diff --git a/src/components/DrawerInfo.vue b/src/components/DrawerInfo.vue
index a2742c9f..124f47f7 100644
--- a/src/components/DrawerInfo.vue
+++ b/src/components/DrawerInfo.vue
@@ -82,7 +82,10 @@ function reset() {
           </div>
           <div v-else style="width: 38.8px"></div>
 
-          <div class="col text-weight-bold text-center">
+          <div
+            class="col text-weight-bold text-center ellipsis"
+            style="width: 0px"
+          >
             <text
               v-if="badgeLabel"
               class="badge-label badge text-caption q-px-sm q-mr-sm"
@@ -93,7 +96,9 @@ function reset() {
             <text v-if="category" class="app-text-muted q-mr-sm">
               {{ category }}
             </text>
-            {{ title }}
+            <span>
+              {{ title }}
+            </span>
 
             <text
               v-if="!!statusBranch"
diff --git a/src/components/shared/PersonCard.vue b/src/components/shared/PersonCard.vue
index 4d50e97d..5ccda543 100644
--- a/src/components/shared/PersonCard.vue
+++ b/src/components/shared/PersonCard.vue
@@ -171,6 +171,7 @@ defineEmits<{
         @click="$emit('editProfile')"
       >
         <q-img
+          v-if="!$slots.img"
           :src="data.img ?? '/no-profile.png'"
           style="
             object-fit: cover;
@@ -188,6 +189,7 @@ defineEmits<{
             </div>
           </template>
         </q-img>
+        <slot name="img"></slot>
         <q-badge
           class="absolute-bottom-right"
           style="
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 0d9962a9..ac7250b0 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -19,6 +19,7 @@ import useMyBranchStore from 'stores/my-branch';
 
 const useMyBranch = useMyBranchStore();
 const { fetchListMyBranch } = useMyBranch;
+const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;
 
 interface NotificationButton {
   item: string;
@@ -52,6 +53,7 @@ const filterUnread = ref(false);
 const unread = ref<number>(1);
 // const filterRole = ref<string[]>();
 const userImage = ref<string>();
+const userGender = ref('');
 const canvasRef = ref();
 const currentLanguage = ref<string>('ไทย');
 const language: {
@@ -169,9 +171,12 @@ onMounted(async () => {
 
   if (user === 'admin') return;
   if (uid) {
-    const res = await userStore.fetchById(uid);
+    userImage.value = `${apiBaseUrl}/user/${uid}/image`;
 
-    if (res && res.profileImageUrl) userImage.value = res.profileImageUrl;
+    const res = await userStore.fetchById(uid);
+    if (res && res.gender) {
+      userGender.value = res.gender;
+    }
   }
 });
 </script>
@@ -455,8 +460,9 @@ onMounted(async () => {
                 }
               "
               :user-image="
-                getRole()?.includes('system') ? '/img-admin.png' : ' '
+                getRole()?.includes('system') ? '/img-admin.png' : userImage
               "
+              :gender="userGender"
             />
           </div>
         </div>
diff --git a/src/layouts/ProfileMenu.vue b/src/layouts/ProfileMenu.vue
index 24871a5f..7e8802e1 100644
--- a/src/layouts/ProfileMenu.vue
+++ b/src/layouts/ProfileMenu.vue
@@ -12,6 +12,7 @@ const filterRole = ref<string[]>();
 
 defineProps<{
   userImage?: string;
+  gender?: string;
 }>();
 
 const inputFile = document.createElement('input');
@@ -166,10 +167,40 @@ onMounted(async () => {
             class="surface-1 bordered"
             :size="$q.screen.lt.sm ? '30px' : '40px'"
           >
-            <img :src="userImage" v-if="userImage" />
+            <q-img
+              :ratio="1"
+              class="text-center"
+              :src="userImage"
+              v-if="userImage"
+            >
+              <template #error>
+                <div
+                  class="no-padding full-width full-height flex items-center justify-center"
+                  style="
+                    background: linear-gradient(
+                      135deg,
+                      rgba(43, 137, 223, 1) 0%,
+                      rgba(230, 51, 81, 1) 100%
+                    );
+                  "
+                >
+                  <q-img
+                    v-if="gender"
+                    :ratio="1"
+                    :src="`/no-img-${gender === 'female' ? 'female' : 'man'}.png`"
+                  ></q-img>
+                  <q-icon
+                    v-else
+                    name="mdi-account-outline"
+                    color="white"
+                    :size="$q.screen.lt.sm ? 'xs' : 'sm'"
+                  />
+                </div>
+              </template>
+            </q-img>
             <q-icon
-              name="mdi-account"
               v-else
+              name="mdi-account-outline"
               :size="$q.screen.lt.sm ? 'xs' : 'sm'"
             />
           </q-avatar>
@@ -213,7 +244,7 @@ onMounted(async () => {
         </div>
       </div>
 
-      <q-menu :offset="[5, 10]">
+      <q-menu :offset="[5, 10]" max-width="300px">
         <div
           no-padding
           class="row justify-center bordered rounded"
@@ -240,20 +271,55 @@ onMounted(async () => {
                     }
                   "
                 >
-                  <img :src="userImage" v-if="userImage" />
-                  <q-icon name="mdi-account" v-else />
+                  <q-img
+                    :ratio="1"
+                    class="text-center"
+                    :src="userImage"
+                    v-if="userImage"
+                  >
+                    <template #error>
+                      <div
+                        class="no-padding full-width full-height flex items-center justify-center"
+                        style="
+                          background: linear-gradient(
+                            135deg,
+                            rgba(43, 137, 223, 1) 0%,
+                            rgba(230, 51, 81, 1) 100%
+                          );
+                        "
+                      >
+                        <q-img
+                          v-if="gender"
+                          :ratio="1"
+                          :src="`/no-img-${gender === 'female' ? 'female' : 'man'}.png`"
+                        ></q-img>
+                        <q-icon
+                          v-else
+                          name="mdi-account-outline"
+                          color="white"
+                        />
+                      </div>
+                    </template>
+                  </q-img>
+                  <q-icon name="mdi-account-outline" v-else />
                 </q-avatar>
               </div>
             </div>
 
             <div
-              class="text-subtitle2 q-mb-xs text-center"
+              class="text-subtitle2 q-mb-xs text-center full-width ellipsis q-px-md"
               style="margin-top: 58px"
             >
               <span v-if="isLoggedIn()">
                 {{ getName() }}
               </span>
               <span v-else>{{ 'Guest' }}</span>
+              <q-tooltip>
+                <span v-if="isLoggedIn()">
+                  {{ getName() }}
+                </span>
+                <span v-else>{{ 'Guest' }}</span>
+              </q-tooltip>
             </div>
             <div
               class="badge q-px-sm q-mb-md text-caption"
@@ -368,7 +434,7 @@ onMounted(async () => {
 </template>
 <style scoped lang="scss">
 .account-menu-down {
-  & ::before {
+  & ::before:not(.q-icon) {
     color: var(--foreground);
   }
 }
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 7aa585ee..72695ec4 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -55,6 +55,7 @@ const userStore = useUserStore();
 const branchStore = useBranchStore();
 const adrressStore = useAddressStore();
 const { data: userData } = storeToRefs(userStore);
+const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;
 
 const defaultFormData = {
   provinceId: null,
@@ -656,7 +657,7 @@ async function assignFormData(idEdit: string) {
     }
 
     userCode.value = foundUser.code;
-    urlProfile.value = foundUser.profileImageUrl;
+    urlProfile.value = `${apiBaseUrl}/user/${foundUser.id}/image`;
 
     isEdit.value = true;
     profileSubmit.value = true;
@@ -1166,50 +1167,35 @@ watch(
                   <div class="row items-center" style="flex-wrap: nowrap">
                     <div style="display: flex">
                       <div class="q-mr-md">
-                        <q-avatar
-                          size="md"
-                          style="
-                            background: linear-gradient(
-                              135deg,
-                              rgba(43, 137, 223, 1) 0%,
-                              rgba(230, 51, 81, 1) 100%
-                            );
-                          "
-                        >
+                        <q-avatar size="md">
                           <q-img
-                            v-if="props.row.gender !== ''"
                             class="text-center"
                             :ratio="1"
-                            :src="
-                              props.row.profileImageUrl
-                                ? props.row.profileImageUrl
-                                : props.row.userRole.includes('system')
-                                  ? '/img-admin.png'
-                                  : props.row.gender === 'male'
-                                    ? '/no-img-man.png'
-                                    : '/no-img-female.png'
-                            "
+                            :src="`${apiBaseUrl}/user/${props.row.id}/image`"
                           >
                             <template #error>
-                              <q-img
-                                v-if="
-                                  props.row.gender === 'male' ||
-                                  props.row.gender === 'female'
-                                "
-                                :src="
-                                  props.row.gender === 'male'
-                                    ? '/no-img-man.png'
-                                    : '/no-img-female.png'
-                                "
-                              />
+                              <div
+                                class="no-padding full-width full-height flex items-center justify-center"
+                                :style="`${props.row.gender ? 'background: white' : 'background: linear-gradient(135deg,rgba(43, 137, 223, 1) 0%, rgba(230, 51, 81, 1) 100%);'}`"
+                              >
+                                <q-img
+                                  v-if="props.row.gender"
+                                  :src="
+                                    props.row.gender === 'male'
+                                      ? '/no-img-man.png'
+                                      : '/no-img-female.png'
+                                  "
+                                />
+                                <q-icon
+                                  v-else
+                                  size="sm"
+                                  name="mdi-account-outline"
+                                  style="color: white"
+                                />
+                              </div>
                             </template>
                           </q-img>
-                          <q-icon
-                            v-else
-                            size="sm"
-                            name="mdi-account-outline"
-                            style="color: white"
-                          />
+
                           <q-badge
                             class="absolute-bottom-right no-padding"
                             style="
@@ -1496,7 +1482,49 @@ watch(
                   @toggle-status="
                     triggerChangeStatus(props.row.id, props.row.status)
                   "
-                />
+                >
+                  <template #img>
+                    <q-img
+                      class="text-center"
+                      :ratio="1"
+                      :src="`${apiBaseUrl}/user/${props.row.id}/image`"
+                      style="
+                        object-fit: cover;
+                        width: 100%;
+                        height: 100%;
+                        border-radius: 50%;
+                      "
+                    >
+                      <template #error>
+                        <div
+                          class="no-padding full-width full-height flex items-center justify-center"
+                          style="
+                            background: linear-gradient(
+                              135deg,
+                              rgba(43, 137, 223, 1) 0%,
+                              rgba(230, 51, 81, 1) 100%
+                            );
+                          "
+                        >
+                          <q-img
+                            v-if="props.row.gender"
+                            :src="
+                              props.row.gender === 'male'
+                                ? '/no-img-man.png'
+                                : '/no-img-female.png'
+                            "
+                          />
+                          <q-icon
+                            v-else
+                            size="lg"
+                            name="mdi-account-outline"
+                            style="color: white"
+                          />
+                        </div>
+                      </template>
+                    </q-img>
+                  </template>
+                </PersonCard>
               </div>
             </template>
           </q-table>
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 53abe278..e393581d 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -680,8 +680,8 @@ const emptyCreateDialog = ref(false);
                     ? customerStats.map((v) => ({
                         count:
                           v.name === 'CORP'
-                            ? statsCustomerType?.CORP ?? 0
-                            : statsCustomerType?.PERS ?? 0,
+                            ? (statsCustomerType?.CORP ?? 0)
+                            : (statsCustomerType?.PERS ?? 0),
                         label:
                           v.name === 'CORP'
                             ? 'customerLegalEntity'
@@ -2352,7 +2352,7 @@ const emptyCreateDialog = ref(false);
     </template>
   </ImageUploadDialog>
 
-  <!-- ลูกจ้าง -->
+  <!-- ลูกจ้าง edit employee -->
   <DrawerInfo
     hide-action
     v-model:drawer-open="employeeFormState.drawerModal"
@@ -2425,13 +2425,21 @@ const emptyCreateDialog = ref(false);
           active
           use-toggle
           color="white"
-          icon="mdi-account-plus-outline"
+          icon="mdi-account-outline"
           bg-color="linear-gradient(135deg, rgba(43,137,223,1) 0%, rgba(230,51,81,1) 100%)"
           v-model:current-tab="employeeFormState.currentTab"
           v-model:toggle-status="currentFromDataEmployee.status"
           v-model:cover-url="employeeFormState.profileUrl"
           fallback-cover="/images/employee-banner.png"
-          :img="employeeFormState.profileUrl"
+          :title="
+            employeeFormState.currentEmployee
+              ? $i18n.locale === 'en-US'
+                ? `${employeeFormState.currentEmployee.firstNameEN} ${employeeFormState.currentEmployee.lastNameEN}`
+                : `${employeeFormState.currentEmployee.firstName} ${employeeFormState.currentEmployee.lastName}`
+              : '-'
+          "
+          :caption="currentFromDataEmployee.code"
+          :img="employeeFormState.profileUrl || '/images/employee-avatar.png'"
           :tabs-list="[
             { name: 'personalInfo', label: 'personalInfo' },
             { name: 'healthCheck', label: 'healthCheck' },