diff --git a/src/modules/14_KPI/components/results/tableResults.vue b/src/modules/14_KPI/components/results/tableResults.vue
index 1f3be2d71..e9996e8dc 100644
--- a/src/modules/14_KPI/components/results/tableResults.vue
+++ b/src/modules/14_KPI/components/results/tableResults.vue
@@ -37,6 +37,8 @@ const pageSize = defineModel<number>("pageSize", { required: true });
 const maxPage = defineModel<number>("maxPage", { required: true });
 const total = defineModel<number>("total", { required: true });
 const keyword = defineModel<string>("keyword", { required: true });
+const result = defineModel<string>("result", { required: true });
+
 const porps = defineProps({
   fetchData: { type: Function, required: true }, // function เรีนกข้อมูลประกาศผล
 });
@@ -167,6 +169,7 @@ const pagination = ref({
 /** ตัวแปร*/
 const year = ref<number | null>(new Date().getFullYear()); //ปีงบประมาณ
 const roundOp = ref<DataOption[]>([]); // รายการรอบการประเมิน
+const resultOp = ref<DataOption[]>(store.resultsOptions);
 
 /** function บันทึกการประกาศผล*/
 function onAnnounce() {
@@ -246,6 +249,27 @@ function onSearchData() {
   porps.fetchData();
 }
 
+/**
+ * ฟังก์ชันค้นหาข้อมูลในรายการตัวเลือก
+ * @param val คำค้นหา
+ * @param update ฟังก์ชัน
+ * @param refData ประเภทของตัวเลือก
+ */
+function filterSelector(val: string, update: Function, refData: string) {
+  switch (refData) {
+    case "result":
+      update(() => {
+        resultOp.value = store.resultsOptions.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
+}
+
 /** ทำงานเมื่อมีการเปลี่ยนแถวต่อหน้า*/
 watch(pagination, () => {
   page.value = 1;
@@ -261,8 +285,8 @@ onMounted(async () => {
 
 <template>
   <q-card-section>
-    <div class="items-center col-12 row q-gutter-x-sm q-mb-sm">
-      <div class="row q-gutter-sm">
+    <div class="row q-col-gutter-sm">
+      <div class="row col-12">
         <datepicker
           menu-class-name="modalfix"
           v-model="year"
@@ -297,111 +321,158 @@ onMounted(async () => {
           </template>
         </datepicker>
 
-        <q-select
-          v-model="store.formQuery.round"
-          outlined
-          label="รอบการประเมิน"
+        <q-space />
+
+        <q-input
+          borderless
           dense
-          option-label="name"
-          option-value="id"
-          :options="roundOp"
-          style="min-width: 150px"
+          outlined
+          v-model="keyword"
+          placeholder="ค้นหา"
+          @keydown.enter="onSearchData"
+        >
+          <template v-slot:append>
+            <q-icon v-if="keyword === ''" name="search" />
+            <q-icon
+              v-else
+              name="clear"
+              class="cursor-pointer"
+              @click="(keyword = ''), onSearchData()"
+            />
+          </template>
+        </q-input>
+        <q-select
+          class="q-ml-sm"
+          v-model="visibleColumns"
+          multiple
+          outlined
+          dense
+          options-dense
+          :display-value="$q.lang.table.columns"
           emit-value
           map-options
-          @update:model-value="changRound"
+          :options="columns"
+          option-value="name"
+          style="min-width: 140px"
         />
       </div>
 
-      <q-space />
+      <div class="col-12">
+        <q-card bordered class="col-12 filter-card q-pa-sm">
+          <div class="items-center col-12 row q-gutter-x-sm">
+            <div class="row q-gutter-sm">
+              <q-select
+                v-model="store.formQuery.round"
+                outlined
+                label="รอบการประเมิน"
+                dense
+                option-label="name"
+                option-value="id"
+                :options="roundOp"
+                style="min-width: 150px"
+                emit-value
+                map-options
+                @update:model-value="changRound"
+              />
+            </div>
 
-      <q-input
-        borderless
-        dense
-        outlined
-        v-model="keyword"
-        placeholder="ค้นหา"
-        @keydown.enter="onSearchData"
-      >
-        <template v-slot:append>
-          <q-icon v-if="keyword === ''" name="search" />
-          <q-icon
-            v-else
-            name="clear"
-            class="cursor-pointer"
-            @click="(keyword = ''), onSearchData()"
-          />
-        </template>
-      </q-input>
-      <q-select
-        v-model="visibleColumns"
-        multiple
-        outlined
-        dense
-        options-dense
-        :display-value="$q.lang.table.columns"
-        emit-value
-        map-options
-        :options="columns"
-        option-value="name"
-        style="min-width: 140px"
-      />
-    </div>
-    <d-table
-      :columns="columns"
-      :rows="rows"
-      row-key="id"
-      :selection="tab === 'COMPLETE' ? 'multiple' : null"
-      v-model:selected="selected"
-      :rows-per-page-options="[10, 25, 50, 100]"
-      v-model:pagination="pagination"
-      :paging="true"
-      :visible-columns="visibleColumns"
-    >
-      <template v-slot:header-selection="scope" v-if="tab === 'COMPLETE'">
-        <q-checkbox
-          v-if="tab === 'COMPLETE' && checkPermission($route)?.attrIsUpdate"
-          keep-color
-          color="primary"
-          dense
-          v-model="scope.selected"
-        />
-      </template>
-      <template v-slot:body="props">
-        <q-tr :props="props">
-          <q-td v-if="tab === 'COMPLETE'">
+            <q-select
+              v-model="result"
+              label="ผลการประเมิน"
+              class="select_ellipsis3"
+              dense
+              emit-value
+              map-options
+              :options="resultOp"
+              option-value="id"
+              option-label="name"
+              lazy-rules
+              hide-bottom-space
+              outlined
+              @clear="(result = ''), (resultOp = store.resultsOptions)"
+              use-input
+              :clearable="result !== ''"
+              @update:model-value="onSearchData()"
+              input-debounce="0"
+              style="width: 250px"
+              @filter="(inputValue: string,
+          doneFn: Function) => filterSelector(inputValue, doneFn, 'result'
+          )"
+              ><template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
+            </q-select>
+
+            <q-space />
+          </div>
+        </q-card>
+      </div>
+
+      <div class="col-12">
+        <d-table
+          :columns="columns"
+          :rows="rows"
+          row-key="id"
+          :selection="tab === 'COMPLETE' ? 'multiple' : null"
+          v-model:selected="selected"
+          :rows-per-page-options="[10, 25, 50, 100]"
+          v-model:pagination="pagination"
+          :paging="true"
+          :visible-columns="visibleColumns"
+        >
+          <template v-slot:header-selection="scope" v-if="tab === 'COMPLETE'">
             <q-checkbox
               v-if="tab === 'COMPLETE' && checkPermission($route)?.attrIsUpdate"
               keep-color
               color="primary"
               dense
-              v-model="props.selected"
+              v-model="scope.selected"
             />
-          </q-td>
-          <q-td v-for="col in props.cols" :key="col.name" :props="props">
-            <div v-if="col.name == 'no'">
-              {{ (page - 1) * pageSize + props.rowIndex + 1 }}
-            </div>
-            <div v-else class="table_ellipsis2">
-              {{ col.value ?? "-" }}
-            </div>
-          </q-td>
-        </q-tr>
-      </template>
-      <template v-slot:pagination="scope">
-        ทั้งหมด {{ total }} รายการ
-        <q-pagination
-          v-model="page"
-          active-color="primary"
-          color="dark"
-          :max="Number(maxPage)"
-          size="sm"
-          boundary-links
-          direction-links
-          :max-pages="5"
-          @update:model-value="porps.fetchData()"
-        ></q-pagination>
-      </template>
-    </d-table>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props">
+              <q-td v-if="tab === 'COMPLETE'">
+                <q-checkbox
+                  v-if="
+                    tab === 'COMPLETE' && checkPermission($route)?.attrIsUpdate
+                  "
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="props.selected"
+                />
+              </q-td>
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <div v-if="col.name == 'no'">
+                  {{ (page - 1) * pageSize + props.rowIndex + 1 }}
+                </div>
+                <div v-else class="table_ellipsis2">
+                  {{ col.value ?? "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+          <template v-slot:pagination="scope">
+            ทั้งหมด {{ total }} รายการ
+            <q-pagination
+              v-model="page"
+              active-color="primary"
+              color="dark"
+              :max="Number(maxPage)"
+              size="sm"
+              boundary-links
+              direction-links
+              :max-pages="5"
+              @update:model-value="porps.fetchData()"
+            ></q-pagination>
+          </template>
+        </d-table>
+      </div>
+    </div>
   </q-card-section>
   <q-separator
     v-if="tab === 'COMPLETE' && checkPermission($route)?.attrIsUpdate"
diff --git a/src/modules/14_KPI/views/02_kpiLists.vue b/src/modules/14_KPI/views/02_kpiLists.vue
index abc0edc84..736d34ff0 100644
--- a/src/modules/14_KPI/views/02_kpiLists.vue
+++ b/src/modules/14_KPI/views/02_kpiLists.vue
@@ -433,6 +433,7 @@ onMounted(async () => {
             </div>
           </q-card>
         </div>
+
         <div class="col-12">
           <d-table
             ref="table"
diff --git a/src/modules/14_KPI/views/03_results.vue b/src/modules/14_KPI/views/03_results.vue
index d69651bd6..bdf1245f1 100644
--- a/src/modules/14_KPI/views/03_results.vue
+++ b/src/modules/14_KPI/views/03_results.vue
@@ -32,6 +32,7 @@ const pageSize = ref<number>(10);
 const maxPage = ref<number>(1);
 const total = ref<number>(1);
 const keyword = ref<string>("");
+const result = ref<string>("");
 
 /** function fetch รายการประกาศผล*/
 async function fetcDataList() {
@@ -43,6 +44,7 @@ async function fetcDataList() {
       pageSize: pageSize.value,
       keyword: keyword.value,
       kpiPeriodId: store.formQuery.round ? store.formQuery.round : "",
+      results: result.value === "" ? undefined : result.value,
     })
     .then(async (res) => {
       const data = await res.data.result;
@@ -61,6 +63,7 @@ async function fetcDataList() {
 /** ทำงานเมื่อมีการเปลี่ยน Tab */
 watch(tab, () => {
   page.value = 1;
+  result.value = "";
   keyword.value = "";
   dataList.value = [];
 });
@@ -99,6 +102,7 @@ watch(pageSize, () => {
           v-model:maxPage="maxPage"
           v-model:total="total"
           v-model:keyword="keyword"
+          v-model:result="result"
           :fetchData="fetcDataList"
         />
       </q-tab-panel>
@@ -112,6 +116,7 @@ watch(pageSize, () => {
           v-model:maxPage="maxPage"
           v-model:total="total"
           v-model:keyword="keyword"
+          v-model:result="result"
           :fetchData="fetcDataList"
         />
       </q-tab-panel>