diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 31d220b8..21dc4e74 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -94,6 +94,9 @@ const defaultFormData = {
   status: 'CREATED',
   checkpoint: null,
   checkpointEN: null,
+  namePrefix: null,
+  middleNameEN: '',
+  middleName: '',
 };
 
 const modeView = ref(false);
@@ -1896,22 +1899,22 @@ watch(
         <div
           class="full-height full-width flex justify-center items-center"
           :style="`background: ${
-            modal || !formData.gender
-              ? 'linear-gradient(135deg,rgba(43, 137, 223, 1) 0%,rgba(230, 51, 81, 1) 100%)'
-              : formData.gender === 'male'
+            formData.gender
+              ? formData.gender === 'male'
                 ? '#78afb0'
                 : '#c0bfe2'
+              : 'linear-gradient(135deg,rgba(43, 137, 223, 1) 0%,rgba(230, 51, 81, 1) 100%)'
           }`"
         >
           <q-img
-            v-if="infoDrawer && formData.gender"
+            v-if="formData.gender"
             fit="contain"
             :src="`/no-img-${formData.gender === 'male' ? 'man' : 'female'}.png`"
             style="height: 100%"
           />
           <q-icon
             v-else
-            size="15rem"
+            size="7vw"
             :name="
               infoDrawer ? 'mdi-account-outline' : 'mdi-account-plus-outline'
             "