diff --git a/src/api/12_evaluatePersonal/api.evaluate.ts b/src/api/12_evaluatePersonal/api.evaluate.ts
index 934fe3195..62bd3c98d 100644
--- a/src/api/12_evaluatePersonal/api.evaluate.ts
+++ b/src/api/12_evaluatePersonal/api.evaluate.ts
@@ -12,6 +12,7 @@ export default {
   evaluateGetReport: (id: string) => `${evaluation}/report/check-spec-report/${id}`,
   evaluateGetStep: (id: string) => `${evaluation}/check/admin/${id}`,
 
+  
   meeting: () => `${evaluation}/meeting`,
   meetingById: (id: string) => `${evaluation}/meeting/${id}`,
   meetingFilebyId: (volume: string, id: string) =>
diff --git a/src/modules/12_evaluatePersonal/components/Detail/viewstep/tableStep1.vue b/src/modules/12_evaluatePersonal/components/Detail/viewstep/tableStep1.vue
index 04c6edd19..04a135fa1 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/viewstep/tableStep1.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/viewstep/tableStep1.vue
@@ -1,5 +1,9 @@
 <script setup lang="ts">
 import { ref, computed } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+
+const { findOrgNameHtml } = useCounterMixin();
+
 const props = defineProps({
   columns: {
     type: Array as () => any[],
@@ -47,7 +51,20 @@ const pagination = ref({
     <template v-slot:body="props">
       <q-tr :props="props">
         <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div>
+          <div v-if="col.name == 'organization'" class="text-html">
+            {{
+              props.row
+                ? findOrgNameHtml({
+                    root: props.row.orgRoot,
+                    child1: props.row.orgChild1,
+                    child2: props.row.orgChild2,
+                    child3: props.row.orgChild3,
+                    child4: props.row.orgChild4,
+                  })
+                : "-"
+            }}
+          </div>
+          <div v-else>
             {{ !col.value ? "-" : col.value }}
           </div>
         </q-td>
diff --git a/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep1.vue b/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep1.vue
index 664b1e02f..5770f2253 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep1.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep1.vue
@@ -84,33 +84,7 @@ onMounted(() => {
         }))
       : [];
 
-    formDetail.salaries = props.data.salaries
-      ? props.data.salaries.map((e: any) => ({
-          amount: e.amount,
-          date: date2Thai(e.date),
-          mouthSalaryAmount: e.mouthSalaryAmount ? e.mouthSalaryAmount : 0,
-          posNo: e.posNo,
-          position: e.position,
-          positionSalaryAmount: e.positionSalaryAmount
-            ? e.positionSalaryAmount
-            : 0,
-          refCommandDate: e.refCommandDate ? e.refCommandDate : "",
-
-          refCommandNo: e.refCommandNo ? e.refCommandNo : "",
-          salaryClass: e.salaryClass ? e.salaryClass : "",
-          salaryRef: e.salaryRef ? e.salaryRef : "",
-          salaryStatus: e.salaryStatus ? e.salariesStatus : "",
-          //
-          oc: "-",
-          lineWork: "-",
-          side: "-",
-          positionType: "-",
-          level: "-",
-          positionsAdministrative: "-",
-          aspectAdministrative: "-",
-        }))
-      : [];
-
+    formDetail.salaries = props.data.salaries;
     formDetail.trainings = props.data.trainings
       ? props.data.trainings.map((e: any) => ({
           dateOrder: date2Thai(e.dateOrder),
@@ -319,7 +293,7 @@ onMounted(() => {
               <q-input
                 borderless
                 readonly
-                :model-value="education.degree ? education.degree:'-'"
+                :model-value="education.degree ? education.degree : '-'"
                 label="วุฒิการศึกษา"
               />
             </div>
@@ -336,7 +310,7 @@ onMounted(() => {
               <q-input
                 borderless
                 readonly
-                :model-value="education.fundName? education.fundName:'-'"
+                :model-value="education.fundName ? education.fundName : '-'"
                 label="ทุน"
               />
             </div>
@@ -345,7 +319,7 @@ onMounted(() => {
               <q-input
                 borderless
                 readonly
-                :model-value="education.gpa ? education.gpa :'-'"
+                :model-value="education.gpa ? education.gpa : '-'"
                 label="เกรดเฉลี่ย"
               />
             </div>
@@ -416,12 +390,13 @@ onMounted(() => {
           <span class="q-ml-lg q-my-sm">ผลงานที่เคยเสนอขอประเมิน (ถ้ามี)</span>
         </div>
         <div class="col-12"><q-separator /></div>
-        <div class="col-10">
+        <div class="col-12 q-pa-sm">-</div>
+        <!-- <div class="col-10">
           <TableData
             :columns="columnAssessments"
             :row="formDetail.assessments"
           />
-        </div>
+        </div> -->
       </q-card>
     </div>
   </q-card>
diff --git a/src/modules/12_evaluatePersonal/router.ts b/src/modules/12_evaluatePersonal/router.ts
index 7a9cb27f0..8f715d83c 100644
--- a/src/modules/12_evaluatePersonal/router.ts
+++ b/src/modules/12_evaluatePersonal/router.ts
@@ -2,13 +2,14 @@ const mainPage = () =>
   import("@/modules/12_evaluatePersonal/views/MainPage.vue");
 const detailPage = () =>
   import("@/modules/12_evaluatePersonal/views/DetailPage.vue");
+const DetailExpertPage = () =>
+  import("@/modules/12_evaluatePersonal/views/DetailExpertPage.vue");
 
 const directorPage = () =>
   import("@/modules/12_evaluatePersonal/components/Director/MainPage.vue");
 const directorAddPage = () =>
   import("@/modules/12_evaluatePersonal/components/Director/AddPage.vue");
 
-
 const meetingPage = () =>
   import("@/modules/12_evaluatePersonal/components/Meeting/MainPage.vue");
 const meetingAddPage = () =>
@@ -37,6 +38,16 @@ export default [
       Role: "STAFF",
     },
   },
+  {
+    path: "/evaluate/detail-expertise/:id",
+    name: "evaluateDetailExpertise",
+    component: DetailExpertPage,
+    meta: {
+      Auth: true,
+      Key: "SYS_EVA_REQ",
+      Role: "STAFF",
+    },
+  },
   {
     path: "/evaluate/director",
     name: "evaluateDirector",
diff --git a/src/modules/12_evaluatePersonal/store/Evaluate.ts b/src/modules/12_evaluatePersonal/store/Evaluate.ts
index 97a32cde2..33bc33c40 100644
--- a/src/modules/12_evaluatePersonal/store/Evaluate.ts
+++ b/src/modules/12_evaluatePersonal/store/Evaluate.ts
@@ -66,6 +66,7 @@ export const useEvalutuonStore = defineStore("EvalutuonStore", () => {
           positionNumber: data.posNo,
           agency: data.oc,
           status: convertStatus(data.step),
+          type: data.type,
         } as EvaluateList)
     );
     rows.value = dataList;
diff --git a/src/modules/12_evaluatePersonal/store/EvaluateDetail.ts b/src/modules/12_evaluatePersonal/store/EvaluateDetail.ts
index f4bcb2fad..ef98b0c4e 100644
--- a/src/modules/12_evaluatePersonal/store/EvaluateDetail.ts
+++ b/src/modules/12_evaluatePersonal/store/EvaluateDetail.ts
@@ -6,7 +6,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import type { QTableProps } from "quasar";
 
 const mixin = useCounterMixin();
-const { date2Thai } = mixin;
+const { date2Thai, findOrgName } = mixin;
 
 export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
   const tabMenu = ref<string>("1");
@@ -83,31 +83,40 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
   /** คอลัมน์ ประวัติการรับราชการ*/
   const columnSalaries = ref<QTableProps["columns"]>([
     {
-      name: "date",
+      name: "commandDateAffect",
       align: "left",
-      label: "วัน เดือน ปี",
+      label: "วันที่คำสั่งมีผล",
+      sortable: true,
+      field: "commandDateAffect",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      format: (v) => date2Thai(v),
+    },
+    {
+      name: "commandDateSign",
+      align: "left",
+      label: "วันที่ลงนาม",
+      sortable: true,
+      field: "commandDateSign",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      format: (v) => date2Thai(v),
+    },
+    {
+      name: "posNumCodeSit",
+      align: "left",
+      label: "หน่วยงานที่ออกคำสั่ง",
       sortable: false,
-      field: "date",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "oc",
-      align: "left",
-      label: "สังกัด",
-      sortable: true,
-      field: "oc",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "position",
-      align: "left",
-      label: "ตำแหน่ง",
-      sortable: true,
-      field: "position",
+      field: "posNumCodeSit",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
+      format(val, row) {
+        return row.posNumCodeSitAbb && row.posNumCodeSit
+          ? `${row.posNumCodeSit} (${row.posNumCodeSitAbb})`
+          : row.posNumCodeSit
+          ? row.posNumCodeSit
+          : "-";
+      },
     },
     {
       name: "posNo",
@@ -117,24 +126,30 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
       field: "posNo",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
+      format(val, row) {
+        return row.posNoAbb && row.posNo
+          ? `${row.posNoAbb} ${row.posNo}`
+          : row.posNo
+          ? row.posNo
+          : "-";
+      },
+      sort: (a: string, b: string) =>
+        a
+          .toString()
+          .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
     {
-      name: "lineWork",
+      name: "positionName",
       align: "left",
-      label: "สายงาน",
+      label: "ตำแหน่งในสายงาน",
       sortable: true,
-      field: "lineWork",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "side",
-      align: "left",
-      label: "ด้าน/สาขา",
-      sortable: true,
-      field: "side",
+      field: "positionName",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a
+          .toString()
+          .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
     {
       name: "positionType",
@@ -146,29 +161,101 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
       style: "font-size: 14px",
     },
     {
-      name: "level",
+      name: "positionLevel",
       align: "left",
-      label: "ระดับตำแหน่ง",
+      label: "ระดับ",
       sortable: true,
-      field: "level",
+      field: "positionLevel",
+      format(val, row) {
+        return `${
+          row.positionLevel
+            ? row.positionLevel
+            : row.positionCee
+            ? row.positionCee
+            : "-"
+        }`;
+      },
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
     },
     {
-      name: "positionsAdministrative ",
+      name: "positionExecutive",
       align: "left",
       label: "ตำแหน่งทางการบริหาร",
       sortable: true,
-      field: "positionsAdministrative",
+      field: "positionExecutive",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
     },
     {
-      name: "aspectAdministrative",
+      name: "commandNo",
       align: "left",
-      label: "ด้านทางการบริหาร",
+      label: "เลขที่คำสั่ง",
       sortable: true,
-      field: "aspectAdministrative",
+      field: "commandNo",
+      format(val, row) {
+        return row.commandNo && row.commandYear
+          ? `${row.commandNo}/${Number(row.commandYear) + 543}`
+          : "";
+      },
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "commandCode",
+      align: "left",
+      label: "ประเภทคำสั่ง",
+      sortable: true,
+      field: "commandCode",
+      format(val, row) {
+        return row.commandName;
+      },
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "organization",
+      align: "left",
+      label: "สังกัด",
+      sortable: true,
+      field: "organization",
+      headerStyle: "font-size: 14px;min-width:280px",
+      style: "font-size: 14px",
+
+      format(val, row) {
+        return findOrgName({
+          root: row.orgRoot,
+          child1: row.orgChild1,
+          child2: row.orgChild2,
+          child3: row.orgChild3,
+          child4: row.orgChild4,
+        });
+      },
+    },
+    {
+      name: "amount",
+      align: "left",
+      label: "เงินเดือน",
+      sortable: true,
+      field: "amount",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      format(v, row) {
+        return row.amount
+          ? `${row.amount.toLocaleString()}${
+              row.amountSpecial !== 0 && row.amountSpecial
+                ? ` (${row.amountSpecial.toLocaleString()})`
+                : ""
+            }`
+          : "-";
+      },
+    },
+    {
+      name: "remark",
+      align: "left",
+      label: "หมายเหตุ",
+      sortable: true,
+      field: "remark",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
     },
diff --git a/src/modules/12_evaluatePersonal/views/DetailExpertPage.vue b/src/modules/12_evaluatePersonal/views/DetailExpertPage.vue
new file mode 100644
index 000000000..459fb0769
--- /dev/null
+++ b/src/modules/12_evaluatePersonal/views/DetailExpertPage.vue
@@ -0,0 +1,437 @@
+divdivdiv
+<script setup lang="ts">
+import { ref, reactive, onMounted } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const router = useRouter();
+const route = useRoute();
+const { messageError, showLoader, hideLoader } = useCounterMixin();
+
+const evaluateId = ref<string>(route.params.id as string);
+
+const formData = reactive<any>({
+  id: "",
+  subject: "", // ชื่อผลงาน
+  author: "", //เจ้าของผลงาน
+  commanderFullname: "", //ผู้บังคับบัญชาชั้นต้น
+  commanderPosition: "", //ตำแหน่ง ผู้บังคับบัญชาชั้นต้น
+  commanderAboveFullname: "", //ผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
+  commanderAbovePosition: "", //ตำแหน่ง ผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
+});
+
+const downloadFile1 = ref<string>("");
+const downloadFile2 = ref<string>("");
+const downloadFile3 = ref<string>("");
+const downloadFile4 = ref<string>("");
+const downloadFile5 = ref<string>("");
+const downloadFile6 = ref<string>("");
+
+const subjectRef = ref<Object | null>(null);
+const authorRef = ref<Object | null>(null);
+const commanderFullnameRef = ref<Object | null>(null);
+const commanderPositionRef = ref<Object | null>(null);
+const commanderAboveFullnameRef = ref<Object | null>(null);
+const commanderAbovePositionRef = ref<Object | null>(null);
+
+/**
+ * function ดาวน์โหลดไฟล์
+ * @param fileName ชื่อไฟล์
+ */
+async function downloadFile(fileName: string) {
+  await http
+    .get(
+      config.API.meetingFileDowloadbyId(
+        "ประเมินเชี่ยวชาญ",
+        evaluateId.value,
+        fileName
+      )
+    )
+    .then((res) => {
+      if (fileName === "1-แบบพิจารณาคุณสมบัติบุคคล") {
+        downloadFile1.value = res.data.downloadUrl;
+      } else if (fileName === "2-แบบแสดงรายละเอียดการเสนอผลงาน") {
+        downloadFile2.value = res.data.downloadUrl;
+      } else if (
+        fileName ===
+        "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)"
+      ) {
+        downloadFile3.value = res.data.downloadUrl;
+      } else if (fileName === "4-แบบประเมินคุณลักษณะบุคคล") {
+        downloadFile4.value = res.data.downloadUrl;
+      } else if (
+        fileName === "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)"
+      ) {
+        downloadFile5.value = res.data.downloadUrl;
+      } else if (fileName === "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)") {
+        downloadFile6.value = res.data.downloadUrl;
+      }
+    });
+}
+
+async function fetchData() {
+  await http
+    .get(config.API.evaluationSigner(evaluateId.value, 1))
+    .then((res) => {
+      const data = res.data.result;
+      formData.id = data.id;
+      formData.commanderFullname = data.commanderFullname;
+      formData.commanderPosition = data.commanderPosition;
+      formData.commanderAboveFullname = data.commanderAboveFullname;
+      formData.commanderAbovePosition = data.commanderAbovePosition;
+      formData.author = data.author;
+      formData.subject = data.subject;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+}
+
+onMounted(async () => {
+  showLoader();
+  try {
+    await Promise.all([
+      fetchData(),
+      [
+        "1-แบบพิจารณาคุณสมบัติบุคคล",
+        "2-แบบแสดงรายละเอียดการเสนอผลงาน",
+        "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)",
+        "4-แบบประเมินคุณลักษณะบุคคล",
+        "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
+        "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
+      ].forEach((fileName) => downloadFile(fileName)),
+    ]);
+  } catch (err) {
+    messageError($q, err);
+  } finally {
+    hideLoader();
+  }
+});
+</script>
+
+<template>
+  <div class="col-xs-12 col-sm-12 col-md-11">
+    <div class="toptitle col-12 row items-center">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.go(-1)"
+      />
+      <div>ประเมินเชี่ยวชาญ</div>
+    </div>
+  </div>
+  <div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
+    <div class="col-12">
+      <q-card bordered>
+        <div class="col-12 row q-pa-md q-col-gutter-y-md">
+          <div class="col-12">
+            <q-card bordered class="col-12">
+              <div class="text-weight-medium bg-grey-1 col-12 q-py-sm q-px-md">
+                ผลงาน
+                <br />
+              </div>
+              <div class="col-12"><q-separator /></div>
+              <div class="col-12 q-pa-sm">
+                <div class="row q-col-gutter-sm">
+                  <q-input
+                    ref="subjectRef"
+                    dense
+                    readonly
+                    class="col-xs-12 col-sm-6"
+                    outlined
+                    label="ชื่อผลงาน"
+                    v-model="formData.subject"
+                    :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อผลงาน'}`]"
+                    lazy-rules
+                    hide-bottom-space
+                  />
+                  <q-input
+                    ref="authorRef"
+                    class="col-xs-12 col-sm-6"
+                    dense
+                    readonly
+                    outlined
+                    v-model="formData.author"
+                    label="เจ้าของผลงาน"
+                    :rules="[
+                          (val:string) => !!val || `${'กรุณากรอกเจ้าของผลงาน'}`,
+                        ]"
+                    lazy-rules
+                    hide-bottom-space
+                  />
+                </div>
+              </div>
+            </q-card>
+          </div>
+
+          <!-- เลือกผู้เซ็นเอกสาร -->
+          <div class="col-12">
+            <q-card bordered class="col-12">
+              <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
+                เลือกผู้เซ็นเอกสาร
+              </div>
+              <div class="col-12"><q-separator /></div>
+              <div class="col-12 q-pa-sm">
+                <div class="row q-col-gutter-sm">
+                  <div class="col-xs-12 col-sm-12 row">
+                    <div class="text-weight-medium q-pt-xs q-pl-sm">
+                      ผู้บังคับบัญชาชั้นต้น
+                    </div>
+                    <div class="row col-12 q-col-gutter-sm q-pa-sm">
+                      <q-input
+                        ref="commanderFullnameRef"
+                        dense
+                        class="col-xs-12 col-sm-6"
+                        readonly
+                        outlined
+                        label="ชื่อ-นามสกุล"
+                        v-model="formData.commanderFullname"
+                        :rules="[
+                              (val:string) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`,
+                            ]"
+                        lazy-rules
+                        hide-bottom-space
+                      />
+                      <q-input
+                        ref="commanderPositionRef"
+                        class="col-xs-12 col-sm-6"
+                        readonly
+                        dense
+                        outlined
+                        v-model="formData.commanderPosition"
+                        label="ตำแหน่ง"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+                        lazy-rules
+                        hide-bottom-space
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div class="row q-col-gutter-sm col-12">
+                  <div class="col-xs-12 col-sm-12 row">
+                    <div class="text-weight-medium q-pl-sm q-pt-sm">
+                      ผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
+                    </div>
+                    <div class="row col-12 q-col-gutter-md q-pa-sm">
+                      <q-input
+                        ref="commanderAboveFullnameRef"
+                        dense
+                        class="col-xs-12 col-sm-6"
+                        outlined
+                        readonly
+                        v-model="formData.commanderAboveFullname"
+                        label="ชื่อ-นามสกุล"
+                        :rules="[
+                              (val:string) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`,
+                            ]"
+                        lazy-rules
+                        hide-bottom-space
+                      />
+                      <q-input
+                        ref="commanderAbovePositionRef"
+                        class="col-xs-12 col-sm-6"
+                        dense
+                        readonly
+                        outlined
+                        v-model="formData.commanderAbovePosition"
+                        label="ตำแหน่ง"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+                        lazy-rules
+                        hide-bottom-space
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </q-card>
+          </div>
+          <div class="col-12">
+            <div class="row q-col-gutter-sm">
+              <!-- แบบพิจารณาคุณสมบัติบุคคล -->
+              <div class="col-6">
+                <q-card bordered>
+                  <div
+                    class="text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm col-12 row items-center"
+                  >
+                    <div>แบบพิจารณาคุณสมบัติบุคคล</div>
+                    <q-space />
+
+                    <div>
+                      <q-btn
+                        v-if="downloadFile1 != ''"
+                        :href="downloadFile1"
+                        target="_blank"
+                        class="q-ml-sm"
+                        color="blue"
+                        flat
+                        dense
+                        icon="visibility"
+                      >
+                        <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+                      >
+                    </div>
+                  </div>
+                  <div class="col-12"><q-separator /></div>
+                </q-card>
+              </div>
+
+              <!-- แบบแสดงรายละเอียดการเสนอผลงาน     -->
+              <div class="col-6">
+                <q-card bordered>
+                  <div
+                    class="text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm col-12 row items-center"
+                  >
+                    <div>แบบแสดงรายละเอียดการเสนอผลงาน</div>
+                    <q-space />
+
+                    <div>
+                      <q-btn
+                        v-if="downloadFile2 != ''"
+                        :href="downloadFile2"
+                        target="_blank"
+                        class="q-ml-sm"
+                        color="blue"
+                        flat
+                        dense
+                        icon="visibility"
+                      >
+                        <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+                      >
+                    </div>
+                  </div>
+                  <div class="col-12"><q-separator /></div>
+                </q-card>
+              </div>
+
+              <!-- แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก) -->
+              <div class="col-6">
+                <q-card bordered>
+                  <div
+                    class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm no-wrap"
+                  >
+                    <div>
+                      แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล
+                      (เอกสารแบบ ก.)
+                    </div>
+                    <q-space />
+
+                    <div v-if="downloadFile3 != ''">
+                      <q-btn
+                        :href="downloadFile3"
+                        target="_blank"
+                        flat
+                        dense
+                        icon="visibility"
+                        class="q-ml-sm"
+                        color="blue"
+                      >
+                        <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+                      >
+                    </div>
+                  </div>
+                  <div class="col-12"><q-separator /></div>
+                </q-card>
+              </div>
+
+              <!-- แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9) -->
+              <div class="col-6">
+                <q-card bordered>
+                  <div
+                    class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm no-wrap"
+                  >
+                    <div class="col-7">
+                      แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)
+                    </div>
+                    <q-space />
+
+                    <div>
+                      <q-btn
+                        v-if="downloadFile5 != ''"
+                        :href="downloadFile5"
+                        target="_blank"
+                        flat
+                        dense
+                        icon="visibility"
+                        class="q-ml-sm"
+                        color="blue"
+                      >
+                        <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+                      >
+                    </div>
+                  </div>
+                  <div class="col-12"><q-separator /></div>
+                </q-card>
+              </div>
+
+              <!-- แบบประเมินคุณลักษณะบุคคล -->
+              <div class="col-6">
+                <q-card bordered>
+                  <div
+                    class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm items-center"
+                  >
+                    <div>แบบประเมินคุณลักษณะบุคคล</div>
+                    <q-space />
+
+                    <div>
+                      <q-btn
+                        v-if="downloadFile4 != ''"
+                        :href="downloadFile4"
+                        target="_blank"
+                        flat
+                        dense
+                        icon="visibility"
+                        class="q-ml-sm"
+                        color="blue"
+                      >
+                        <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+                      >
+                    </div>
+                  </div>
+                  <div class="col-12"><q-separator /></div>
+                </q-card>
+              </div>
+
+              <!--ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) -->
+              <div class="col-6">
+                <q-card bordered>
+                  <div
+                    class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm items-center"
+                  >
+                    <div>ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)</div>
+                    <q-space />
+
+                    <div>
+                      <q-btn
+                        v-if="downloadFile6 != ''"
+                        :href="downloadFile6"
+                        target="_blank"
+                        flat
+                        dense
+                        icon="visibility"
+                        class="q-ml-sm"
+                        color="blue"
+                      >
+                        <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+                      >
+                    </div>
+                  </div>
+                  <div class="col-12"><q-separator /></div>
+                </q-card>
+              </div>
+            </div>
+          </div>
+        </div>
+      </q-card>
+    </div>
+  </div>
+</template>
diff --git a/src/modules/12_evaluatePersonal/views/MainPage.vue b/src/modules/12_evaluatePersonal/views/MainPage.vue
index 560db43d5..26b187626 100644
--- a/src/modules/12_evaluatePersonal/views/MainPage.vue
+++ b/src/modules/12_evaluatePersonal/views/MainPage.vue
@@ -43,7 +43,7 @@ const page = ref<number>(1); //หน้า
 const total = ref<number>(0); //จำนวนข้อมูลทั้งหมด
 const filter = ref<string>(""); //คำค้นหา
 const pageSize = ref<number>(10); //จำนวนรายการต่อหน้า
-const filterRef = ref<HTMLInputElement | null>(null);
+
 //ค้นหาตามสถานะ
 const selectedStatus = ref<string[]>([
   "CHECK_SPEC",
@@ -95,17 +95,6 @@ function filterFn() {
   fetchEvaluteList();
 }
 
-/**
- * functrion ล้างค้นหาD
- */
-function resetFilter() {
-  filter.value = "";
-  fetchEvaluteList();
-  if (filterRef.value) {
-    filterRef.value.focus();
-  }
-}
-
 /**
  * function เรียกรายการคำขอประเมินD
  */
@@ -137,8 +126,13 @@ async function fetchEvaluteList() {
  * funcition redirectToDetail
  * @param id รายการคำขอประเมิน
  */
-function Detailpage(id: string) {
-  router.push(`/evaluate/detail/${id}`);
+function Detailpage(id: string, type: string) {
+  //เชี่ยวชาญ
+  if (type === "EXPERTISE") {
+    router.push(`/evaluate/detail-expertise/${id}`);
+  } else {
+    router.push(`/evaluate/detail/${id}`);
+  }
 }
 
 /**
@@ -378,7 +372,7 @@ onMounted(async () => {
                 round
                 color="info"
                 icon="mdi-eye"
-                @click.stop.prevent="Detailpage(props.row.id)"
+                @click.stop.prevent="Detailpage(props.row.id, props.row.type)"
               >
                 <q-tooltip>รายละเอียด</q-tooltip>
               </q-btn>