diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index ae84d5b0..837adea0 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -123,6 +123,7 @@ const infoDrawerEmployee = ref(false);
 const infoDrawerEmployeeEdit = ref(false);
 const infoEmployeePersonCard = ref();
 const statsEmployee = ref(0);
+const statsEmployeeGender = ref<{ male: number; female: number }>();
 const formDataEmployeeOwner = ref<{
   id: string;
   address: string;
@@ -689,8 +690,8 @@ async function fetchListCustomer() {
   }
 }
 
-async function fetchListEmployee() {
-  const resultListEmployee = await employeeStore.fetchList();
+async function fetchListEmployee(param?: { gender: string }) {
+  const resultListEmployee = await employeeStore.fetchList(param);
   if (resultListEmployee) {
     currentPageEmployee.value = resultListEmployee.page;
     maxPageEmployee.value = Math.ceil(
@@ -1029,6 +1030,11 @@ onMounted(async () => {
   const resultStatsEmployee = await employeeStore.getStatsEmployee();
   if (resultStatsEmployee) statsEmployee.value = resultStatsEmployee;
 
+  const resultStatsEmployeeGender =
+    await employeeStore.getStatsEmployeeGender();
+  if (resultStatsEmployeeGender)
+    statsEmployeeGender.value = resultStatsEmployeeGender;
+
   const resultListEmployee = await employeeStore.fetchList({
     page: 1,
     pageSize: pageSizeEmployee.value,
@@ -1121,6 +1127,10 @@ watch(
     formDataEmployee.value.customerBranchId = formDataEmployeeOwner.value.id;
   },
 );
+
+watch(genderselector, async (gender) => {
+  await fetchListEmployee({ gender: gender });
+});
 </script>
 
 <template>
@@ -1238,9 +1248,9 @@ watch(
               v-else
               v-model="genderselector"
               id="btn-mode"
-              dense
-              class="no-shadow bordered"
-              toggle-color="grey-4"
+              class="no-shadow"
+              padding="0px"
+              toggle-color="grey-3"
               size="xs"
               :options="[
                 { value: 'female', slot: 'female' },
@@ -1249,22 +1259,43 @@ watch(
             >
               <template v-slot:female>
                 <div
-                  class="q-px-sm q-py-xs app-text-female text-weight-medium text-body2 row items-center"
+                  class="bordered-t bordered-l bordered-b q-px-md q-py-sm app-text-female text-weight-medium text-body2 row items-center"
+                  @click="
+                    async () => {
+                      if (genderselector === 'female') {
+                        await fetchListEmployee();
+                        genderselector = '';
+                      }
+                    }
+                  "
                 >
                   <q-icon
                     name="mdi-gender-female"
                     class="q-mr-sm"
                     size="18px"
                   />
-                  5 คน
+                  <div v-if="statsEmployeeGender">
+                    {{ statsEmployeeGender.female }} คน
+                  </div>
                 </div>
               </template>
+
               <template v-slot:male>
                 <div
-                  class="q-px-sm q-py-xs app-text-male text-weight-medium text-body2 row items-center"
+                  class="bordered q-px-md q-py-sm app-text-male text-weight-medium text-body2 row items-center"
+                  @click="
+                    async () => {
+                      if (genderselector === 'male') {
+                        await fetchListEmployee();
+                        genderselector = '';
+                      }
+                    }
+                  "
                 >
                   <q-icon name="mdi-gender-male" class="q-mr-sm" size="18px" />
-                  5 คน
+                  <div v-if="statsEmployeeGender">
+                    {{ statsEmployeeGender.male }} คน
+                  </div>
                 </div>
               </template>
             </q-btn-toggle>
diff --git a/src/stores/employee/index.ts b/src/stores/employee/index.ts
index 4749f007..26af0850 100644
--- a/src/stores/employee/index.ts
+++ b/src/stores/employee/index.ts
@@ -22,6 +22,7 @@ const useEmployeeStore = defineStore('api-employee', () => {
       page?: number;
       pageSize?: number;
       query?: string;
+      gender?: string;
     },
     flow?: {
       sessionId: string;
@@ -36,6 +37,7 @@ const useEmployeeStore = defineStore('api-employee', () => {
     }
     if (opts?.page && opts.page > 0) params.append('page', `${opts.page}`);
     if (opts?.query) params.append('query', opts.query);
+    if (opts?.gender) params.append('gender', opts.gender);
 
     const query = params.toString();
 
@@ -227,6 +229,29 @@ const useEmployeeStore = defineStore('api-employee', () => {
     }
   }
 
+  async function getStatsEmployeeGender(
+    customerBranchId?: string,
+    flow?: {
+      sessionId: string;
+      refTransactionId: string;
+      transactionId: string;
+    },
+  ) {
+    const res = await api.get(
+      `/employee/stats/gender${customerBranchId ? '?customerBranchId=' + customerBranchId : ''}/`,
+      {
+        headers: {
+          'X-Session-Id': flow?.sessionId,
+          'X-Rtid': flow?.refTransactionId,
+          'X-Tid': flow?.transactionId,
+        },
+      },
+    );
+    if (res && res.status === 200) {
+      return res.data;
+    }
+  }
+
   return {
     data,
     globalOption,
@@ -240,6 +265,7 @@ const useEmployeeStore = defineStore('api-employee', () => {
     fetchWork,
     fetchOther,
     getStatsEmployee,
+    getStatsEmployeeGender,
   };
 });