diff --git a/src/components/03_customer-management/CustomerInfoComponent.vue b/src/components/03_customer-management/CustomerInfoComponent.vue
index f8adc363..286d56f7 100644
--- a/src/components/03_customer-management/CustomerInfoComponent.vue
+++ b/src/components/03_customer-management/CustomerInfoComponent.vue
@@ -6,6 +6,7 @@ import { onMounted } from 'vue';
 import useCustomerStore from 'src/stores/customer';
 import { CustomerBranch, CustomerType } from 'src/stores/customer/types';
 import { watch } from 'vue';
+import { Status } from 'src/stores/types';
 
 const userCustomer = useCustomerStore();
 const { fetchListBranch } = userCustomer;
@@ -19,6 +20,8 @@ const currentCustomerUrlImage = defineModel<string | null>(
   'currentCustomerUrlImage',
 );
 
+const currentStatus = ref<Status | 'All'>('All');
+
 const currentPageBranch = ref<number>(1);
 const maxPageBranch = ref<number>(1);
 const pageSizeBranch = ref<number>(30);
@@ -52,18 +55,28 @@ async function searchBranch() {
 }
 
 onMounted(async () => {
+  await fetchList();
+});
+
+async function fetchList() {
   const result = await fetchListBranch({
     customerId: prop.customerId,
     page: 1,
     pageSize: pageSizeBranch.value,
     includeCustomer: true,
+    status:
+      currentStatus.value === 'All'
+        ? undefined
+        : currentStatus.value === 'ACTIVE'
+          ? 'ACTIVE'
+          : 'INACTIVE',
   });
   if (result) {
-    currentCustomerName.value = result.result[0].customer?.customerName;
+    currentCustomerName.value = result.result[0].customer?.customerName ?? '';
     maxPageBranch.value = Math.ceil(result.total / pageSizeBranch.value);
     branch.value = result.result;
   }
-});
+}
 
 watch(currentPageBranch, async () => {
   const resultList = await fetchListBranch({
@@ -79,6 +92,10 @@ watch(currentPageBranch, async () => {
     branch.value = resultList.result;
   }
 });
+
+watch(currentStatus, async () => {
+  await fetchList();
+});
 </script>
 
 <template>
@@ -158,21 +175,21 @@ watch(currentPageBranch, async () => {
               <q-item
                 clickable
                 class="flex items-center"
-                @click="console.log('test')"
+                @click="currentStatus = 'All'"
               >
                 {{ $t('all') }}
               </q-item>
               <q-item
                 clickable
                 class="flex items-center"
-                @click="console.log('test')"
+                @click="currentStatus = 'ACTIVE'"
               >
                 {{ $t('statusACTIVE') }}
               </q-item>
               <q-item
                 clickable
                 class="flex items-center"
-                @click="console.log('test')"
+                @click="currentStatus = 'INACTIVE'"
               >
                 {{ $t('statusINACTIVE') }}
               </q-item>
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 2f57e603..e5738644 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -249,6 +249,8 @@ const currentCustomerName = ref<string>('');
 const currentCustomerUrlImage = ref<string | null>(null);
 const genderselector = ref<string>('');
 
+const currentStatus = ref<Status | 'All'>('All');
+
 const inputFile = (() => {
   const element = document.createElement('input');
   element.type = 'file';
@@ -680,6 +682,12 @@ async function fetchListCustomer() {
     includeBranch: true,
     page: currentPageCustomer.value,
     pageSize: pageSizeCustomer.value,
+    status:
+      currentStatus.value === 'All'
+        ? undefined
+        : currentStatus.value === 'ACTIVE'
+          ? 'ACTIVE'
+          : 'INACTIVE',
   });
 
   if (resultList) {
@@ -1133,6 +1141,12 @@ watch(
 watch(genderselector, async (gender) => {
   await fetchListEmployee({ gender: gender });
 });
+
+watch(currentStatus, async () => {
+  if (selectorLabel.value === 'EMPLOYER') {
+    await fetchListCustomer();
+  }
+});
 </script>
 
 <template>
@@ -1329,21 +1343,21 @@ watch(genderselector, async (gender) => {
                 <q-item
                   clickable
                   class="flex items-center"
-                  @click="console.log('test')"
+                  @click="currentStatus = 'All'"
                 >
                   {{ $t('all') }}
                 </q-item>
                 <q-item
                   clickable
                   class="flex items-center"
-                  @click="console.log('test')"
+                  @click="currentStatus = 'ACTIVE'"
                 >
                   {{ $t('statusACTIVE') }}
                 </q-item>
                 <q-item
                   clickable
                   class="flex items-center"
-                  @click="console.log('test')"
+                  @click="currentStatus = 'INACTIVE'"
                 >
                   {{ $t('statusINACTIVE') }}
                 </q-item>