diff --git a/src/components/DrawerInfo.vue b/src/components/DrawerInfo.vue
index 4db7cc8a..6a286b04 100644
--- a/src/components/DrawerInfo.vue
+++ b/src/components/DrawerInfo.vue
@@ -254,7 +254,7 @@ function reset() {
 .badge {
   display: inline-block;
   border-radius: var(--radius-6);
-  background-color: var(--surface-2);
+  background-color: var(--surface-tab);
   text-wrap: nowrap;
 }
 </style>
diff --git a/src/components/home/PersonCard.vue b/src/components/home/PersonCard.vue
index 5bcb79b9..df3e3813 100644
--- a/src/components/home/PersonCard.vue
+++ b/src/components/home/PersonCard.vue
@@ -220,6 +220,7 @@ defineEmits<{
             'bg-gender__male': !v.disabled && v.male,
             'bg-gender__female': !v.disabled && v.female,
             'bg-gender__disable': v.disabled,
+            empty: !v.male && !v.female,
           }"
         >
           {{ v.badge }}
@@ -381,6 +382,10 @@ defineEmits<{
   border-radius: var(--radius-6);
   background-color: var(--surface-2);
   text-wrap: nowrap;
+
+  &.empty {
+    background-color: var(--surface-tab);
+  }
 }
 
 .edit-profile {
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index cfbb3ca2..8e221d00 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -749,7 +749,9 @@ watch(inputSearch, async () => await fetchUserList());
     :badgeClass="
       formData.gender === 'male'
         ? 'app-bg-male text-white'
-        : 'app-bg-female text-white'
+        : formData.gender === 'female'
+          ? 'app-bg-female text-white'
+          : ''
     "
     :badgeLabel="userCode"
     :isEdit="infoDrawerEdit"