diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 5f6e9bc7..fef5d773 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -140,7 +140,10 @@ const infoEmployeePersonCard = ref<
   }[]
 >();
 const statsEmployee = ref(0);
-const statsEmployeeGender = ref<{ male: number; female: number }>();
+const statsEmployeeGender = ref<{ male: number; female: number }>({
+  male: 0,
+  female: 0,
+});
 const formDataEmployeeOwner = ref<{
   id: string;
   address: string;
@@ -1090,6 +1093,30 @@ async function openHistory(id: string) {
   employeeHistoryDialog.value = true;
 }
 
+async function fetchListStatsEmployeeGender() {
+  const resultStatsEmployeeGender = await employeeStore.getStatsEmployeeGender({
+    query: inputSearch.value,
+    status:
+      currentStatus.value === 'All'
+        ? undefined
+        : currentStatus.value === 'ACTIVE'
+          ? 'ACTIVE'
+          : 'INACTIVE',
+  });
+
+  if (resultStatsEmployeeGender) {
+    if (genderSelector.value === 'male') {
+      statsEmployeeGender.value.male = resultStatsEmployeeGender.male;
+      return;
+    }
+    if (genderSelector.value === 'female') {
+      statsEmployeeGender.value.female = resultStatsEmployeeGender.female;
+      return;
+    }
+    statsEmployeeGender.value = resultStatsEmployeeGender;
+  }
+}
+
 onMounted(async () => {
   utilsStore.currentTitle.title = 'customerManagement';
   utilsStore.currentTitle.caption = 'customerManagementCaption';
@@ -1125,10 +1152,7 @@ onMounted(async () => {
   const resultStatsEmployee = await employeeStore.getStatsEmployee();
   if (resultStatsEmployee) statsEmployee.value = resultStatsEmployee;
 
-  const resultStatsEmployeeGender =
-    await employeeStore.getStatsEmployeeGender();
-  if (resultStatsEmployeeGender)
-    statsEmployeeGender.value = resultStatsEmployeeGender;
+  await fetchListStatsEmployeeGender();
 
   const resultListEmployee = await employeeStore.fetchList({
     page: 1,
@@ -1209,6 +1233,7 @@ watch(
 
 watch(genderSelector, async () => {
   await fetchListEmployee();
+  await fetchListStatsEmployeeGender();
   flowStore.rotate();
 });
 
@@ -1220,6 +1245,7 @@ watch([inputSearch, currentStatus], async () => {
   if (selectorLabel.value === 'EMPLOYEE') {
     currentPageEmployee.value = 1;
     await fetchListEmployee();
+    await fetchListStatsEmployeeGender();
   } else {
     currentPageCustomer.value = 1;
     await fetchListCustomer();