diff --git a/src/modules/14_KPI/components/indicatorByPlan/IndicatorByPlan.vue b/src/modules/14_KPI/components/indicatorByPlan/IndicatorByPlan.vue
index ba8d2222f..eff09a1f2 100644
--- a/src/modules/14_KPI/components/indicatorByPlan/IndicatorByPlan.vue
+++ b/src/modules/14_KPI/components/indicatorByPlan/IndicatorByPlan.vue
@@ -121,7 +121,7 @@ function fetchDataById(id: string) {
     .get(config.API.kpiPlanById(id))
     .then((res) => {
       const data = res.data.result;
-      year.value = data.year;
+      year.value = Number(data.year);
       planData.period = data.round;
       planData.including = data.including;
       planData.includingName = data.includingName;
@@ -140,6 +140,7 @@ function fetchDataById(id: string) {
       planData.orgRevisionId = data.orgRevisionId;
       planData.strategy = data.strategy;
       planData.strategyId = data.strategyId;
+      planData.documentInfoEvidence = data.documentInfoEvidence;
 
       // หน่วยงาน/ส่วนราชการ
       const arrayexpandedAgency = [
diff --git a/src/modules/14_KPI/views/indicatorByPlan.vue b/src/modules/14_KPI/views/indicatorByPlan.vue
index 3bfc6252b..5041d8666 100644
--- a/src/modules/14_KPI/views/indicatorByPlan.vue
+++ b/src/modules/14_KPI/views/indicatorByPlan.vue
@@ -4,7 +4,7 @@ import { useQuasar, type QTableProps } from "quasar";
 import { useRouter } from "vue-router";
 
 import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
-import DialogHistory from '@/modules/14_KPI/components/DialogHistory.vue'
+import DialogHistory from "@/modules/14_KPI/components/DialogHistory.vue";
 
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
@@ -12,7 +12,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 /** use*/
-const modalHistory = ref<boolean>(false)
+const modalHistory = ref<boolean>(false);
 const isAll = ref<boolean>(false);
 const $q = useQuasar();
 const router = useRouter();
@@ -53,7 +53,7 @@ const roundOp = ref<DataOption[]>([
 
 const totalList = ref<number>(1);
 
-const year = ref<number|null>(new Date().getFullYear());
+const year = ref<number | null>(new Date().getFullYear());
 const nodeData = reactive<any>({
   page: 1,
   pageSize: 10,
@@ -66,10 +66,16 @@ const nodeData = reactive<any>({
 function fetchList() {
   showLoader();
   http
-    .get(
-      config.API.kpiPlan +
-        `?page=${nodeData.page}&pageSize=${nodeData.pageSize}&period=${nodeData.round}&nodeId=${nodeData.nodeId}&node=${nodeData.node}&keyword=${nodeData.keyword}&year=${year.value}&isAll=${isAll.value}`
-    )
+    .post(config.API.kpiPlan + `/search`, {
+      isAll: isAll.value,
+      keyword: nodeData.keyword,
+      node: nodeData.node ? nodeData.node : 0,
+      nodeId: nodeData.nodeId,
+      period: nodeData.round,
+      year: year.value?.toString(),
+      pageSize: nodeData.pageSize,
+      page: nodeData.page,
+    })
     .then((res) => {
       const data = res.data.result.data;
       totalList.value = Math.ceil(res.data.result.total / nodeData.pageSize);
@@ -160,10 +166,10 @@ function clearFilter() {
 
 /**
  * เปิด dialog history
- * @param id 
+ * @param id
  */
-function onClickHistory(id:string){
-  modalHistory.value = true
+function onClickHistory(id: string) {
+  modalHistory.value = true;
 }
 
 onMounted(async () => {
@@ -245,8 +251,24 @@ onMounted(async () => {
     </div>
     <div class="col-xs-12 col-sm-9 q-pa-md row">
       <div class="col-12">
-        <q-toolbar style="padding: 0">
-          <div class="row q-gutter-sm">
+        <div class="row q-col-gutter-sm items-center q-mb-sm">
+          <div
+            :class="`${
+              $q.screen.gt.md ? '' : 'col-12'
+            } row q-gutter-sm no-wrap`"
+          >
+            <q-btn
+              flat
+              round
+              dense
+              icon="add"
+              color="primary"
+              @click="onClickAddOrView()"
+              v-if="!$q.screen.gt.md"
+            >
+              <q-tooltip>เพิ่ม</q-tooltip>
+            </q-btn>
+            <q-space v-if="!$q.screen.gt.md" />
             <datepicker
               menu-class-name="modalfix"
               v-model="year"
@@ -281,7 +303,9 @@ onMounted(async () => {
                     <q-icon
                       name="cancel"
                       @click.stop.prevent="
-                        (year = null), (nodeData.page = 1), fetchListProjectNew()
+                        (year = null),
+                          (nodeData.page = 1),
+                          fetchListProjectNew()
                       "
                       class="cursor-pointer"
                     />
@@ -294,6 +318,7 @@ onMounted(async () => {
               dense
               outlined
               v-model="nodeData.round"
+              :model-value="nodeData.round === '' ? 'ทั้งหมด' : nodeData.round"
               :options="roundOp"
               label="รอบการประเมิน"
               option-label="name"
@@ -301,27 +326,42 @@ onMounted(async () => {
               emit-value
               map-options
               @update:model-value="fetchListProjectNew"
-              style="min-width: 150px"
-            />
-            <q-toolbar-title>
-              <q-btn
-                flat
-                round
-                dense
-                icon="add"
-                color="primary"
-                @click="onClickAddOrView()"
-              >
-                <q-tooltip>เพิ่ม</q-tooltip>
-              </q-btn>
-            </q-toolbar-title>
-          </div>
-          <q-space />
+              style="min-width: 120px"
+            >
+              <template v-if="nodeData.round" v-slot:append>
+                <q-icon
+                  name="cancel"
+                  @click.stop.prevent="
+                    (nodeData.round = ''), fetchListProjectNew()
+                  "
+                  class="cursor-pointer"
+                />
+              </template>
+            </q-select>
 
-          <div class="row q-gutter-sm">
+            <q-btn
+              flat
+              round
+              dense
+              icon="add"
+              color="primary"
+              @click="onClickAddOrView()"
+              v-if="$q.screen.gt.md"
+            >
+              <q-tooltip>เพิ่ม</q-tooltip>
+            </q-btn>
+          </div>
+
+          <q-space />
+          <div
+            :class="`${
+              $q.screen.gt.md ? '' : 'col-12'
+            } row q-gutter-sm no-wrap`"
+          >
             <q-checkbox
               keep-color
               v-model="isAll"
+
               label="แสดงตำแหน่งทั้งหมด"
               color="primary"
               @update:model-value="fetchListProjectNew"
@@ -330,7 +370,7 @@ onMounted(async () => {
                 >แสดงตำแหน่งทั้งหมดภายใต้หน่วยงาน/ส่วนราชการที่เลือก</q-tooltip
               >
             </q-checkbox>
-
+            <q-space v-if="!$q.screen.gt.md" />
             <q-input
               class="inputgreen"
               standout
@@ -338,6 +378,7 @@ onMounted(async () => {
               v-model="nodeData.keyword"
               ref="filterRef"
               outlined
+              style="width:150px"
               placeholder="ค้นหา"
               @keydown.enter.prevent="fetchListProjectNew"
             >
@@ -364,10 +405,11 @@ onMounted(async () => {
               :options="columns"
               option-value="name"
               options-cover
-              style="min-width: 150px"
+              style="min-width: 120px"
             />
           </div>
-        </q-toolbar>
+        </div>
+
         <div class="col-12">
           <d-table
             for="table"
@@ -419,7 +461,11 @@ onMounted(async () => {
                             class="q-py-sm"
                           >
                             <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-                            <q-icon color="primary" size="xs" name="mdi-pencil-outline" />
+                            <q-icon
+                              color="primary"
+                              size="xs"
+                              name="mdi-pencil-outline"
+                            />
                           </q-item-section>
                           <q-item-section>แก้ไขข้อมูล</q-item-section>
                         </q-item>
@@ -456,7 +502,6 @@ onMounted(async () => {
                       </q-list>
                     </q-menu>
                   </q-btn>
-
                 </q-td>
               </q-tr>
             </template>
@@ -466,10 +511,7 @@ onMounted(async () => {
     </div>
   </q-card>
 
-
-  <DialogHistory
-  v-model:modal="modalHistory"
-  />
+  <DialogHistory v-model:modal="modalHistory" />
 </template>
 
 <style lang="scss" scoped>