diff --git a/src/components/02_personnel-management/FormPerson.vue b/src/components/02_personnel-management/FormPerson.vue
index c66b0f07..1ed3544a 100644
--- a/src/components/02_personnel-management/FormPerson.vue
+++ b/src/components/02_personnel-management/FormPerson.vue
@@ -87,6 +87,14 @@ watch(
     );
   },
 );
+
+watch(
+  () => prefixName.value,
+  (v) => {
+    if (v === 'mr') gender.value = 'male';
+    else gender.value = 'female';
+  },
+);
 </script>
 <template>
   <div class="row col-12">
diff --git a/src/pages/03_customer-management/components/employer/EmployerFormBasicInfo.vue b/src/pages/03_customer-management/components/employer/EmployerFormBasicInfo.vue
index a59d6ad8..9f902170 100644
--- a/src/pages/03_customer-management/components/employer/EmployerFormBasicInfo.vue
+++ b/src/pages/03_customer-management/components/employer/EmployerFormBasicInfo.vue
@@ -128,6 +128,14 @@ watch(
   },
 );
 
+watch(
+  () => namePrefix.value,
+  (v) => {
+    if (v === 'mr') gender.value = 'male';
+    else gender.value = 'female';
+  },
+);
+
 function formatCode(input: string | undefined, type: 'code' | 'number') {
   if (!input) return;
   return input.slice(...(type === 'code' ? [0, -6] : [-6]));