diff --git a/src/components/home/PersonCard.vue b/src/components/home/PersonCard.vue
index 9f5841a7..d590e29e 100644
--- a/src/components/home/PersonCard.vue
+++ b/src/components/home/PersonCard.vue
@@ -51,15 +51,22 @@ const status = ref(false);
         'person-box__disabled': v.disabled,
         'person-box__no-hover': noHover,
       }"
+      @click="$emit('enterCard', v.id)"
       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 -->
         <div class="full-width text-right" v-if="!noAction">
-          <q-btn flat round padding="sm" icon="mdi-dots-vertical" size="sm">
+          <q-btn
+            flat
+            round
+            padding="sm"
+            icon="mdi-dots-vertical"
+            size="sm"
+            @click.stop=""
+          >
             <q-menu :offset="[0, 10]" style="width: 130px">
               <q-list>
                 <q-item
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 91995805..4a1b991e 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -153,8 +153,14 @@ async function createKeycloak() {
 async function fetchRoleOption() {
   const res = await api.get<RoleData[]>('/keycloak/role');
   res.data.map((item) => {
+    const formattedName = item.name
+      .replace(/_/g, ' ')
+      .toLowerCase()
+      .split(' ')
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(' ');
     userOption.value.roleOpts.push({
-      label: item.name,
+      label: formattedName,
       value: item.id,
     });
   });
@@ -508,6 +514,7 @@ watch(
         emit-value
         map-options
         options-dense
+        hide-bottom-space
         class="col-6"
         bg-color="white"
         option-label="label"
@@ -524,6 +531,7 @@ watch(
         emit-value
         map-options
         options-dense
+        hide-bottom-space
         class="col-6"
         label="รหัสสาขา"
         bg-color="white"
@@ -539,6 +547,7 @@ watch(
         emit-value
         map-options
         options-dense
+        hide-bottom-space
         class="col-3"
         bg-color="white"
         option-value="value"
@@ -554,6 +563,7 @@ watch(
         emit-value
         map-options
         options-dense
+        hide-bottom-space
         class="col-3"
         bg-color="white"
         label="สิทธิ์ผู้ใช้งาน"
@@ -566,6 +576,7 @@ watch(
       <q-input
         dense
         outlined
+        hide-bottom-space
         class="col-3"
         bg-color="white"
         label="ชื่อผู้ใช้งาน (Username)"
@@ -576,6 +587,7 @@ watch(
         dense
         outlined
         readonly
+        hide-bottom-space
         class="col-3"
         bg-color="white"
         label="รหัสพนักงาน"
@@ -640,6 +652,7 @@ watch(
       <q-input
         dense
         outlined
+        hide-bottom-space
         class="col-3"
         label="ชื่อ ภาษาไทย"
         v-model="formData.firstName"
@@ -648,6 +661,7 @@ watch(
       <q-input
         dense
         outlined
+        hide-bottom-space
         class="col-3"
         label="นามสกุล ภาษาไทย"
         v-model="formData.lastName"
@@ -656,6 +670,7 @@ watch(
       <q-input
         dense
         outlined
+        hide-bottom-space
         class="col-3"
         label="ชื่อ ภาษาอังกฤษ"
         v-model="formData.firstNameEN"
@@ -664,6 +679,7 @@ watch(
       <q-input
         dense
         outlined
+        hide-bottom-space
         class="col-3"
         label="นามสกุล ภาษาอังกฤษ"
         v-model="formData.lastNameEN"