diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/ProcessStep.vue b/src/modules/13_salary/components/SalaryEmployeeLists/ProcessStep.vue
index c6248112e..9e42eb3d1 100644
--- a/src/modules/13_salary/components/SalaryEmployeeLists/ProcessStep.vue
+++ b/src/modules/13_salary/components/SalaryEmployeeLists/ProcessStep.vue
@@ -238,7 +238,9 @@ function downloadFile(fileName: string) {
     });
 }
 onMounted(() => {
-  fetchListFile();
+  if (props.rootId) {
+    fetchListFile();
+  }
 });
 </script>
 
diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue b/src/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue
index 5dc803417..f7a4daa02 100644
--- a/src/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue
+++ b/src/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue
@@ -355,9 +355,11 @@ function onClickDownload(data: DataOption) {
 
 const modalDialogInfoCriteria = ref<boolean>(false);
 onMounted(() => {
-  fetchDataQuota(store.groupId);
-  fetchDataPeriod(store.groupId);
-  splitterModel.value = store.roundMainCode === "APR" ? 13 : 16;
+  if (props.rootId) {
+    fetchDataQuota(store.groupId);
+    fetchDataPeriod(store.groupId);
+    splitterModel.value = store.roundMainCode === "APR" ? 13 : 16;
+  }
 });
 
 const isRetire = ref<boolean | string>(false);
diff --git a/src/modules/13_salary/components/SalaryLists/ProcessStep.vue b/src/modules/13_salary/components/SalaryLists/ProcessStep.vue
index cdf5bf79e..0b86e29a2 100644
--- a/src/modules/13_salary/components/SalaryLists/ProcessStep.vue
+++ b/src/modules/13_salary/components/SalaryLists/ProcessStep.vue
@@ -253,7 +253,9 @@ function sendAndRecommend(title: string, typeOrder: string) {
 }
 
 onMounted(() => {
-  getListFile();
+  if (props.rootId) {
+    getListFile();
+  }
 });
 </script>
 
diff --git a/src/modules/13_salary/components/SalaryLists/TabMain.vue b/src/modules/13_salary/components/SalaryLists/TabMain.vue
index 6b7aa1dc7..a73bdf12b 100644
--- a/src/modules/13_salary/components/SalaryLists/TabMain.vue
+++ b/src/modules/13_salary/components/SalaryLists/TabMain.vue
@@ -356,9 +356,12 @@ function onClickDownload(data: DataOption) {
 
 const modalDialogInfoCriteria = ref<boolean>(false);
 onMounted(() => {
-  fetchDataQuota(store.groupId);
-  fetchDataPeriod(store.groupId);
-  splitterModel.value = store.roundMainCode === "APR" ? 13 : 16;
+  console.log(props.rootId);
+  if (props.rootId) {
+    fetchDataQuota(store.groupId);
+    fetchDataPeriod(store.groupId);
+    splitterModel.value = store.roundMainCode === "APR" ? 13 : 16;
+  }
 });
 
 const isRetire = ref<boolean>(false);
diff --git a/src/modules/13_salary/views/salaryEmployeeLists.vue b/src/modules/13_salary/views/salaryEmployeeLists.vue
index 5f9bdb519..c39079c4a 100644
--- a/src/modules/13_salary/views/salaryEmployeeLists.vue
+++ b/src/modules/13_salary/views/salaryEmployeeLists.vue
@@ -34,9 +34,11 @@ const year = ref<number>(new Date().getFullYear());
 const roundFilter = ref<any>();
 const roundOptions = ref<DataOptionShort[]>([]);
 const agencyFilter = ref<string>("");
-const agencyOptions = ref<DataOption[]>();
+const agencyOptions = ref<DataOption[]>([]);
+const agencyOptionsMain = ref<DataOption[]>([]);
+
 const snapFilter = ref<string>("");
-const snapOptions = ref<DataOption[]>();
+const snapOptions = ref<DataOption[]>([]);
 const periodLatest = ref<DataPeriodLatest>();
 
 const isLoad = ref<boolean>(false);
@@ -153,7 +155,7 @@ async function getAgency(id: string) {
       .get(config.API.activeOrganizationRootById(id))
       .then(async (res) => {
         const data = res.data.result;
-        agencyOptions.value = await [
+        agencyOptionsMain.value = await [
           {
             id: "ALL",
             name: "ทั้งหมด",
@@ -164,7 +166,7 @@ async function getAgency(id: string) {
             name: x.orgRootName,
           }))
         );
-        // agencyFilter.value = store.rootId;
+        agencyOptions.value = agencyOptionsMain.value;
       })
       .catch((err) => {
         messageError($q, err);
@@ -210,7 +212,7 @@ async function getAgencyPosition(id: string) {
  * @param snap id รอบ
  */
 function fetchSalalyPeriod(rootId: string, periodId: string, snap: string) {
-  if (rootId !== "ALL") {
+  if (rootId) {
     showLoader();
     isLoad.value = false;
     const body = {
@@ -314,6 +316,20 @@ function getQuota() {
   fetchSalalyPeriod(agencyFilter.value, roundFilter.value.id, snapFilter.value);
 }
 
+function filterSelector(val: any, update: Function, refData: string) {
+  switch (refData) {
+    case "agencyFilter":
+      update(() => {
+        agencyOptions.value = agencyOptionsMain.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+
+    default:
+      break;
+  }
+}
+
 onMounted(() => {
   getRound();
 });
@@ -419,7 +435,18 @@ onMounted(() => {
       bg-color="white"
       @update:model-value="onChangeAgency"
       :disable="!isDisable"
-    />
+      use-input
+      @filter="(inputValue:string,
+      doneFn:Function) => filterSelector(inputValue, doneFn,'agencyFilter'
+      ) "
+    >
+      <template v-if="agencyFilter !== 'ALL'" v-slot:append>
+        <q-icon
+          name="cancel"
+          @click.stop.prevent="agencyFilter = 'ALL'"
+          class="cursor-pointer"
+        /> </template
+    ></q-select>
   </div>
 
   <q-card flat bordered>
diff --git a/src/modules/13_salary/views/salaryLists.vue b/src/modules/13_salary/views/salaryLists.vue
index 154001d45..5b5d9411d 100644
--- a/src/modules/13_salary/views/salaryLists.vue
+++ b/src/modules/13_salary/views/salaryLists.vue
@@ -34,9 +34,10 @@ const year = ref<number>(new Date().getFullYear());
 const roundFilter = ref<any>();
 const roundOptions = ref<DataOptionShort[]>([]);
 const agencyFilter = ref<string>("");
-const agencyOptions = ref<DataOption[]>();
+const agencyOptionsMain = ref<DataOption[]>([]);
+const agencyOptions = ref<DataOption[]>([]);
 const snapFilter = ref<string>("");
-const snapOptions = ref<DataOption[]>();
+const snapOptions = ref<DataOption[]>([]);
 const periodLatest = ref<DataPeriodLatest>();
 
 const isLoad = ref<boolean>(false);
@@ -154,7 +155,7 @@ async function getAgency(id: string) {
       .get(config.API.activeOrganizationRootById(id))
       .then(async (res) => {
         const data = res.data.result;
-        agencyOptions.value = await [
+        agencyOptionsMain.value = await [
           {
             id: "ALL",
             name: "ทั้งหมด",
@@ -165,6 +166,7 @@ async function getAgency(id: string) {
             name: x.orgRootName,
           }))
         );
+        agencyOptions.value = agencyOptionsMain.value;
       })
       .catch((err) => {
         messageError($q, err);
@@ -210,7 +212,7 @@ async function getAgencyPosition(id: string) {
  * @param snap id รอบ
  */
 function fetchSalalyPeriod(rootId: string, periodId: string, snap: string) {
-  if (rootId !== "ALL") {
+  if (rootId) {
     showLoader();
     isLoad.value = false;
     const body = {
@@ -335,6 +337,21 @@ function getQuota() {
     })
     .finally(() => {});
 }
+
+function filterSelector(val: any, update: Function, refData: string) {
+  switch (refData) {
+    case "agencyFilter":
+      update(() => {
+        agencyOptions.value = agencyOptionsMain.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+
+    default:
+      break;
+  }
+}
+
 onMounted(() => {
   getRound();
 });
@@ -439,7 +456,18 @@ onMounted(() => {
       bg-color="white"
       @update:model-value="onChangeAgency"
       :disable="!isDisable"
-    />
+      use-input
+      @filter="(inputValue:string,
+      doneFn:Function) => filterSelector(inputValue, doneFn,'agencyFilter'
+      ) "
+    >
+      <template v-if="agencyFilter !== 'ALL'" v-slot:append>
+        <q-icon
+          name="cancel"
+          @click.stop.prevent="agencyFilter = 'ALL'"
+          class="cursor-pointer"
+        /> </template
+    ></q-select>
   </div>
 
   <q-card flat bordered>