diff --git a/src/components/home/PersonCard.vue b/src/components/home/PersonCard.vue
index c2891c7b..9f5841a7 100644
--- a/src/components/home/PersonCard.vue
+++ b/src/components/home/PersonCard.vue
@@ -25,6 +25,7 @@ defineProps<{
 defineEmits<{
   (e: 'deleteCard', id: string): void;
   (e: 'updateCard', id: string): void;
+  (e: 'enterCard', id: string): void;
 }>();
 
 const status = ref(false);
@@ -53,6 +54,7 @@ const status = ref(false);
       style="padding: 0"
       v-for="(v, i) in list"
       :key="i"
+      @click="$emit('enterCard', v.id)"
     >
       <div class="q-pa-sm column items-center">
         <!-- kebab menu -->
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index d9b21845..91995805 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue';
 import { api } from 'src/boot/axios';
+import { useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import useUserStore from 'stores/user';
 import useBranchStore from 'src/stores/branch';
@@ -23,6 +24,7 @@ import TooltipComponent from 'components/TooltipComponent.vue';
 import FormDialog from 'src/components/FormDialog.vue';
 import { dateFormat } from 'src/utils/datetime';
 
+const router = useRouter();
 const userStore = useUserStore();
 const branchStore = useBranchStore();
 const { data: userData } = storeToRefs(userStore);
@@ -319,6 +321,10 @@ async function onDelete(id: string) {
   });
 }
 
+function cardClick(id: string) {
+  router.push({ name: 'PersonnelInfo', params: { id } });
+}
+
 function mapUserType(label: string) {
   if (label === 'personnelSelector1') {
     formData.value.userType = 'USER';
@@ -339,8 +345,8 @@ function calculateAge(birthDate: Date | null): string {
 
   const ageDate = new Date(diff);
   const years = ageDate.getUTCFullYear() - 1970;
-  const months = ageDate.getUTCMonth();
-  const days = ageDate.getUTCDate() - 1;
+  // const months = ageDate.getUTCMonth();
+  // const days = ageDate.getUTCDate() - 1;
 
   age.value = `${years} ปี`;
   return `${years} ปี`;
@@ -452,6 +458,7 @@ watch(
         "
         @updateCard="openDialog"
         @deleteCard="onDelete"
+        @enterCard="cardClick"
       />
       <div
         class="column"
@@ -721,7 +728,9 @@ watch(
               dense
               outlined
               label="วันที่เริ่มงาน"
-              :model-value="dateFormat(formData.startDate)"
+              :model-value="
+                formData.startDate ? dateFormat(formData.startDate) : ''
+              "
             >
               <template v-slot:prepend>
                 <q-icon
@@ -760,7 +769,9 @@ watch(
               dense
               outlined
               label="วันที่พ้นสภาพพนักงาน"
-              :model-value="dateFormat(formData.retireDate)"
+              :model-value="
+                formData.retireDate ? dateFormat(formData.retireDate) : ''
+              "
             >
               <template v-slot:prepend>
                 <q-icon
@@ -799,7 +810,9 @@ watch(
               dense
               outlined
               label="วันเดือนปีเกิด"
-              :model-value="dateFormat(formData.birthDate)"
+              :model-value="
+                formData.birthDate ? dateFormat(formData.birthDate) : ''
+              "
             >
               <template v-slot:prepend>
                 <q-icon