diff --git a/src/components/02_personnel-management/FormAddress.vue b/src/components/02_personnel-management/FormAddress.vue
index fc86f14a..7b2091eb 100644
--- a/src/components/02_personnel-management/FormAddress.vue
+++ b/src/components/02_personnel-management/FormAddress.vue
@@ -82,7 +82,7 @@ watch(districtId, fetchSubDistrict);
     </div>
     <div class="col-9 row q-col-gutter-md">
       <q-input
-        id="input-address"
+        for="input-address"
         :dense="dense"
         :outlined="readonly ? false : outlined"
         :readonly="readonly"
@@ -167,7 +167,7 @@ watch(districtId, fetchSubDistrict);
         @update:model-value="(v: string) => selectSubDistrict(v)"
       />
       <q-input
-        id="input-zip-code"
+        for="input-zip-code"
         :dense="dense"
         :outlined="readonly ? false : outlined"
         :borderless="readonly"
@@ -182,7 +182,7 @@ watch(districtId, fetchSubDistrict);
     </div>
     <div class="col-9 row q-col-gutter-md">
       <q-input
-        id="input-address-en"
+        for="input-address-en"
         :dense="dense"
         :readonly="readonly"
         :outlined="readonly ? false : outlined"
@@ -264,7 +264,7 @@ watch(districtId, fetchSubDistrict);
         @update:model-value="(v: string) => selectSubDistrict(v)"
       />
       <q-input
-        id="input-zip-code"
+        for="input-zip-code"
         :dense="dense"
         :outlined="readonly ? false : outlined"
         :borderless="readonly"
diff --git a/src/components/02_personnel-management/FormByType.vue b/src/components/02_personnel-management/FormByType.vue
index 4db2767a..40af6ca0 100644
--- a/src/components/02_personnel-management/FormByType.vue
+++ b/src/components/02_personnel-management/FormByType.vue
@@ -73,7 +73,7 @@ function deleteFile(name: string) {
       style="margin-left: 0px; padding-left: 0px"
     >
       <q-input
-        id="input-regis-no"
+        for="input-regis-no"
         :dense="dense"
         :outlined="readonly ? false : outlined"
         :readonly="readonly"
@@ -86,6 +86,7 @@ function deleteFile(name: string) {
         utc
         autoApply
         v-model="startDate"
+        :teleport="true"
         :locale="'th'"
         :enableTimePicker="false"
         :disabled="readonly"
@@ -96,7 +97,7 @@ function deleteFile(name: string) {
         </template>
         <template #trigger>
           <q-input
-            id="input-start-date"
+            for="input-start-date"
             :label="$t('formDialogInputStartDate')"
             :dense="dense"
             :outlined="readonly ? false : outlined"
@@ -129,6 +130,7 @@ function deleteFile(name: string) {
         utc
         autoApply
         v-model="retireDate"
+        :teleport="true"
         :locale="'th'"
         :enableTimePicker="false"
         :disabled="readonly"
@@ -139,7 +141,7 @@ function deleteFile(name: string) {
         </template>
         <template #trigger>
           <q-input
-            id="input-retire-date"
+            for="input-retire-date"
             :label="$t('formDialogInputRetireDate')"
             :dense="dense"
             :outlined="readonly ? false : outlined"
@@ -192,7 +194,7 @@ function deleteFile(name: string) {
       style="row-gap: 16px"
     >
       <q-input
-        id="input-discount-condition"
+        for="input-discount-condition"
         :dense="dense"
         :outlined="readonly ? false : outlined"
         :readonly="readonly"
@@ -260,7 +262,7 @@ function deleteFile(name: string) {
         :options="userStore.userOption.trainingPlaceOpts"
       />
       <q-input
-        id="input-checkpoint"
+        for="input-checkpoint"
         :dense="dense"
         :outlined="readonly ? false : outlined"
         :readonly="readonly"
@@ -270,7 +272,7 @@ function deleteFile(name: string) {
         v-model="checkpoint"
       />
       <q-input
-        id="input-checkpoint-en"
+        for="input-checkpoint-en"
         :dense="dense"
         :outlined="readonly ? false : outlined"
         :readonly="readonly"
@@ -280,7 +282,7 @@ function deleteFile(name: string) {
         v-model="checkpointEN"
       />
       <q-file
-        id="input-attchment"
+        for="input-attchment"
         :dense="dense"
         :outlined="readonly ? false : outlined"
         :readonly="readonly"
diff --git a/src/components/02_personnel-management/FormInformation.vue b/src/components/02_personnel-management/FormInformation.vue
index be5764cc..446f89b6 100644
--- a/src/components/02_personnel-management/FormInformation.vue
+++ b/src/components/02_personnel-management/FormInformation.vue
@@ -73,7 +73,7 @@ async function selectHq(id: string) {
       :options="userStore.userOption.brOpts"
     />
     <q-input
-      id="input-username"
+      for="input-username"
       :dense="dense"
       :outlined="readonly ? false : outlined"
       :borderless="readonly"
diff --git a/src/components/02_personnel-management/FormPerson.vue b/src/components/02_personnel-management/FormPerson.vue
index 815daa65..39dc419a 100644
--- a/src/components/02_personnel-management/FormPerson.vue
+++ b/src/components/02_personnel-management/FormPerson.vue
@@ -24,7 +24,7 @@ defineProps<{
   <div class="col-3 app-text-muted">• {{ $t('formDialogTitlePersonnel') }}</div>
   <div class="col-9 row q-col-gutter-md">
     <q-input
-      id="input-first-name"
+      for="input-first-name"
       :dense="dense"
       :outlined="readonly ? false : outlined"
       :readonly="readonly"
@@ -38,7 +38,7 @@ defineProps<{
       ]"
     />
     <q-input
-      id="input-last-name"
+      for="input-last-name"
       :dense="dense"
       :outlined="readonly ? false : outlined"
       :readonly="readonly"
@@ -50,7 +50,7 @@ defineProps<{
       :rules="[(val: string) => !!val || $t('formDialogInputLastNameValidate')]"
     />
     <q-input
-      id="input-first-name-en"
+      for="input-first-name-en"
       :dense="dense"
       :outlined="readonly ? false : outlined"
       :readonly="readonly"
@@ -64,7 +64,7 @@ defineProps<{
       ]"
     />
     <q-input
-      id="input-last-name-en"
+      for="input-last-name-en"
       :dense="dense"
       :outlined="readonly ? false : outlined"
       :readonly="readonly"
@@ -78,7 +78,7 @@ defineProps<{
       ]"
     />
     <q-input
-      id="input-telephone"
+      for="input-telephone"
       :dense="dense"
       :outlined="readonly ? false : outlined"
       :readonly="readonly"
@@ -89,7 +89,7 @@ defineProps<{
       mask="##########"
     />
     <q-input
-      id="input-email"
+      for="input-email"
       :dense="dense"
       :outlined="readonly ? false : outlined"
       :readonly="readonly"
@@ -158,7 +158,7 @@ defineProps<{
       </template>
     </VueDatePicker>
     <q-input
-      id="input-age"
+      for="input-age"
       :dense="dense"
       :outlined="readonly ? false : outlined"
       :borderless="readonly"
diff --git a/src/components/UsersDetailCardComponent.vue b/src/components/UsersDetailCardComponent.vue
index 59080320..b1da0c78 100644
--- a/src/components/UsersDetailCardComponent.vue
+++ b/src/components/UsersDetailCardComponent.vue
@@ -37,7 +37,7 @@ defineEmits<{
 <template>
   <div v-if="metadata">
     <div
-      :style="`${noBg ? 'aspect-ratio: 1.91/2' : 'aspect-ratio: 9/16'}`"
+      :style="`${noBg ? 'height: 228px' : 'aspect-ratio: 9/16'}`"
       class="flip"
       :class="{
         'person-box__no-hover': noHover,
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 684126ce..d8e1d62c 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -72,7 +72,7 @@ const defaultFormData = {
 
 const userCode = ref<string>();
 const currentUser = ref<User>();
-const infoPersonCardEdit = ref(false);
+const infoDrawerEdit = ref(false);
 const infoPersonId = ref<string>('');
 const infoPersonCard = ref();
 const infoDrawer = ref(false);
@@ -185,7 +185,7 @@ async function openDialog(action?: 'FORM' | 'INFO', idEdit?: string) {
   } else if (action === 'INFO') {
     if (!userData.value) return;
     infoDrawer.value = true;
-    infoPersonCardEdit.value = false;
+    infoDrawerEdit.value = false;
     const user = userData.value.result.find((x) => x.id === idEdit);
     infoPersonCard.value = user
       ? [
@@ -212,7 +212,7 @@ async function openDialog(action?: 'FORM' | 'INFO', idEdit?: string) {
 
 function undo() {
   if (!infoPersonId.value) return;
-  infoPersonCardEdit.value = false;
+  infoDrawerEdit.value = false;
   assignFormData(infoPersonId.value);
 }
 
@@ -710,7 +710,7 @@ watch(
     bg-on
     :badgeClass="formData.gender === 'male' ? 'app-bg-male' : 'app-bg-female'"
     :badgeLabel="userCode"
-    :isEdit="infoPersonCardEdit"
+    :isEdit="infoDrawerEdit"
     :title="
       $i18n.locale === 'en-US'
         ? `${currentUser.firstNameEN} ${currentUser.lastNameEN}`
@@ -721,13 +721,13 @@ watch(
     :submit="() => onSubmit()"
     :close="() => onClose()"
     :undo="() => undo()"
-    :editData="() => (infoPersonCardEdit = true)"
+    :editData="() => (infoDrawerEdit = true)"
   >
     <template #info>
       <InfoForm
         :addressTitle="$t('formDialogTitleAddressPure')"
         :addressTitleEN="$t('formDialogTitleAddressPure') + ' ENG'"
-        :readonly="!infoPersonCardEdit"
+        :readonly="!infoDrawerEdit"
         v-model:address="formData.address"
         v-model:addressEN="formData.addressEN"
         v-model:provinceId="formData.provinceId"
@@ -754,7 +754,7 @@ watch(
             dense
             outlined
             separator
-            :readonly="!infoPersonCardEdit"
+            :readonly="!infoDrawerEdit"
             :usernameReadonly="isEdit"
             v-model:hqId="hqId"
             v-model:brId="brId"
@@ -769,7 +769,7 @@ watch(
             dense
             outlined
             separator
-            :readonly="!infoPersonCardEdit"
+            :readonly="!infoDrawerEdit"
             v-model:firstName="formData.firstName"
             v-model:lastName="formData.lastName"
             v-model:firstNameEN="formData.firstNameEN"
@@ -785,7 +785,7 @@ watch(
             dense
             outlined
             separator
-            :readonly="!infoPersonCardEdit"
+            :readonly="!infoDrawerEdit"
             v-model:userType="formData.userType"
             v-model:registrationNo="formData.registrationNo"
             v-model:startDate="formData.startDate"