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"