diff --git a/src/api/12_evaluatePersonal/api.evaluate.ts b/src/api/12_evaluatePersonal/api.evaluate.ts
index 32a9b45b4..d97430957 100644
--- a/src/api/12_evaluatePersonal/api.evaluate.ts
+++ b/src/api/12_evaluatePersonal/api.evaluate.ts
@@ -8,6 +8,9 @@ export default {
 
   evaluationMain: (page: number, pageSize: number, keyword: string) =>
     `${evaluation}?page=${page}&pageSize=${pageSize}&keyword=${keyword}`,
+
+  evaluateGetDetail: (id: string) => `${evaluation}/check-spec/${id}`,
+
   meeting: () => `${evaluation}/meeting`,
   meetingById: (id: string) => `${evaluation}/meeting/${id}`,
   meetingFilebyId: (volume: string, id: string) =>
@@ -15,22 +18,28 @@ export default {
   meetingFileDowloadbyId: (volume: string, id: string, file: string) =>
     `${evaluation}/document/${volume}/${id}/${file}`,
 
-  evaluationFilebyId:(volume:string,id:string,file:string) => `${evaluationFile}/${volume}/${id}/${file}`,
-  evaluationFileListbyId:(volume:string,id:string) => `${evaluationFile}/${volume}/${id}`,
-  evaluationApproveDoc1:(id:string)=>`${evaluation}/doc1/approve/${id}`,
+  evaluationFilebyId: (volume: string, id: string, file: string) =>
+    `${evaluationFile}/${volume}/${id}/${file}`,
+  evaluationFileListbyId: (volume: string, id: string) =>
+    `${evaluationFile}/${volume}/${id}`,
+  evaluationApproveDoc1: (id: string) => `${evaluation}/doc1/approve/${id}`,
 
   evaluationHistory: (id: string) => `${evaluation}/step-history/${id}`,
 
-  evaluationDateAnnounce:(id:string) => `${evaluation}/check-date/${id}`,
+  evaluationDateAnnounce: (id: string) => `${evaluation}/check-date/${id}`,
 
-  evaluationSigner:(id:string,num:number) => `${evaluation}/doc${num}-signer/${id}`,
+  evaluationSigner: (id: string, num: number) =>
+    `${evaluation}/doc${num}-signer/${id}`,
 
-  evaluationSentToContact:(id:string) => `${evaluation}/contact/user/${id}`,
+  evaluationSentToContact: (id: string) => `${evaluation}/contact/user/${id}`,
 
-  evaluationPatchData:(volume:string,id:string,file:string) => `${evaluationFile}/${volume}/${id}/${file}`,
+  evaluationPatchData: (volume: string, id: string, file: string) =>
+    `${evaluationFile}/${volume}/${id}/${file}`,
 
-  evaluationChooseDirectors:(id:string) => `${evaluation}/choose-directors/${id}`,
-  evaluationChooseMeeting:(id:string) => `${evaluation}/choose-meetings/${id}`,
+  evaluationChooseDirectors: (id: string) =>
+    `${evaluation}/choose-directors/${id}`,
+  evaluationChooseMeeting: (id: string) =>
+    `${evaluation}/choose-meetings/${id}`,
 
-  evaluationListData:(id:string) =>`${evaluation}/director-meeting/${id}`
+  evaluationListData: (id: string) => `${evaluation}/director-meeting/${id}`,
 };
diff --git a/src/modules/12_evaluatePersonal/components/Detail/Tab1.vue b/src/modules/12_evaluatePersonal/components/Detail/Tab1.vue
index e304a0b92..2be1cb4bf 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/Tab1.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/Tab1.vue
@@ -35,6 +35,14 @@ const mixin = useCounterMixin();
 const { dialogConfirm } = mixin;
 
 const $q = useQuasar();
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: {},
+  },
+});
+
 const modalHistory = ref<boolean>(false);
 const externalLink =
   "https://accreditation.ocsc.go.th/accreditation/search/curriculum";
@@ -186,7 +194,7 @@ onMounted(() => {
   <div class="row q-col-gutter-md">
     <div class="col-xs-12 col-sm-3">
       <div class="toptitle">
-        ประเมินชำนาญการ
+        {{ props.data && props.data?.type == 'SPECIAL_EXPERT' ? 'ประเมินชำนาญการพิเศษ' : 'ประเมินชำนาญการ' }}
 
         <q-btn
           flat
@@ -223,7 +231,7 @@ onMounted(() => {
         >
           <q-card flat bordered class="col-12">
             <q-card-section>
-              <Step1 v-if="store.step === 1" />
+              <Step1 v-if="store.step === 1" :data="props.data"/>
               <Step2 v-if="store.step === 2" @update:form="updateformCommand" />
               <Step3 v-if="store.step === 3" :step="store.step" />
               <Step4 v-if="store.step === 4" />
@@ -241,7 +249,7 @@ onMounted(() => {
         >
           <q-card flat bordered class="col-12">
             <q-card-section>
-              <ViewStep1 v-if="store.step === 1" />
+              <ViewStep1 v-if="store.step === 1" :data="data"/>
               <ViewStep3 v-if="store.step === 3" />
               <ViewStep7 v-if="store.step === 7" /> </q-card-section
           ></q-card>
diff --git a/src/modules/12_evaluatePersonal/components/Detail/Tab2.vue b/src/modules/12_evaluatePersonal/components/Detail/Tab2.vue
index fb6684477..baaa4bab5 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/Tab2.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/Tab2.vue
@@ -22,9 +22,12 @@ const director = ref<any[]>();
 const meeting = ref<any[]>();
 const $q = useQuasar();
 
-// onMounted(() => {
-//   store.step = 1;
-// });
+const props = defineProps({
+  data: {
+    type: Object,
+    default: {},
+  },
+});
 
 function getList() {
   showLoader();
@@ -42,6 +45,7 @@ function getList() {
       hideLoader();
     });
 }
+
 onMounted(() => {
   getList();
 });
@@ -52,8 +56,8 @@ onMounted(() => {
     <div class="toptitle">กรรมการและการประชุม</div>
 
     <div class="row col-12 q-gutter-md">
-      <CardDirector :data="director"/>
-      <CardMeet :data="meeting"/>
+      <CardDirector :data="director" :fetchdata="getList" />
+      <CardMeet :data="meeting" :fetchdata="getList" />
     </div>
   </div>
 </template>
diff --git a/src/modules/12_evaluatePersonal/components/Detail/step/step1.vue b/src/modules/12_evaluatePersonal/components/Detail/step/step1.vue
index 0281cc05d..f5e30b3d1 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/step/step1.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step1.vue
@@ -1,5 +1,12 @@
 <script setup lang="ts">
-import { reactive } from "vue";
+import { onMounted, reactive, watch } from "vue";
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: {},
+  },
+});
 
 const formData = reactive<any>({
   isEducationalQft: false, // คุณวุฒิการศึกษา
@@ -10,6 +17,18 @@ const formData = reactive<any>({
   isHaveProLicense: false, // มีใบอนุญาตประกอบวิชาชีพของสายงานต่างๆ
   isHaveMinPeriodOrHoldPos: false, // มีระยะเวลาขั้นต่ำในการดำรงตำแหน่งหรือเคยดำรงตำแหน่งในสายงานที่จะคัดเลือกตามคุณวุฒิของบุคคลและระดับตำแหน่งที่จะคัดเลือก]
 });
+
+watch(props, () => {
+  if (props.data) {
+    formData.isEducationalQft = props.data.isEducationalQft;
+    formData.isGovermantServiceHtr = props.data.isGovermantServiceHtr;
+    formData.isOperatingExp = props.data.isOperatingExp;
+    formData.isMinPeriodOfTenure = props.data.isMinPeriodOfTenure;
+    formData.isHaveSpecificQft = props.data.isHaveSpecificQft;
+    formData.isHaveProLicense = props.data.isHaveProLicense;
+    formData.isHaveMinPeriodOrHoldPos = props.data.isHaveMinPeriodOrHoldPos;
+  }
+});
 </script>
 
 <template>
@@ -17,6 +36,7 @@ const formData = reactive<any>({
     <q-item v-ripple>
       <q-item-section avatar>
         <q-checkbox
+          disable
           keep-color
           color="primary"
           v-model="formData.isEducationalQft"
@@ -29,6 +49,7 @@ const formData = reactive<any>({
     <q-item v-ripple>
       <q-item-section avatar>
         <q-checkbox
+          disable
           keep-color
           color="primary"
           v-model="formData.isGovermantServiceHtr"
@@ -41,6 +62,7 @@ const formData = reactive<any>({
     <q-item v-ripple>
       <q-item-section avatar>
         <q-checkbox
+          disabled
           keep-color
           color="primary"
           v-model="formData.isOperatingExp"
@@ -53,6 +75,7 @@ const formData = reactive<any>({
     <q-item v-ripple>
       <q-item-section avatar>
         <q-checkbox
+          disable
           keep-color
           color="primary"
           v-model="formData.isMinPeriodOfTenure"
@@ -67,6 +90,7 @@ const formData = reactive<any>({
     <q-item v-ripple>
       <q-item-section avatar>
         <q-checkbox
+          disable
           keep-color
           color="primary"
           v-model="formData.isHaveSpecificQft"
@@ -82,6 +106,7 @@ const formData = reactive<any>({
     <q-item v-ripple>
       <q-item-section avatar>
         <q-checkbox
+          disable
           keep-color
           color="primary"
           v-model="formData.isHaveProLicense"
@@ -98,6 +123,7 @@ const formData = reactive<any>({
     <q-item v-ripple>
       <q-item-section avatar>
         <q-checkbox
+          disable
           keep-color
           color="primary"
           v-model="formData.isHaveMinPeriodOrHoldPos"
diff --git a/src/modules/12_evaluatePersonal/components/Detail/viewTab2/CardDirector.vue b/src/modules/12_evaluatePersonal/components/Detail/viewTab2/CardDirector.vue
index 9b21825b8..2302da72b 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/viewTab2/CardDirector.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/viewTab2/CardDirector.vue
@@ -27,6 +27,10 @@ const props = defineProps({
     type: Array,
     default: [],
   },
+  fetchdata: {
+    type: Function,
+    default: () => "",
+  }
 });
 const { showLoader, hideLoader, messageError, dialogConfirm } = mixin;
 
@@ -144,8 +148,6 @@ async function updatePaging(rpp: number, p: number) {
  */
 function returnDirector(data: any) {
   const dataList = data.map((item: any) => item.id);
-  console.log(dataList);
-
   dialogConfirm($q, () => {
     showLoader();
     http
@@ -160,6 +162,7 @@ function returnDirector(data: any) {
       })
       .finally(() => {
         hideLoader();
+        props.fetchdata()
         onClickClose();
       });
   });
diff --git a/src/modules/12_evaluatePersonal/components/Detail/viewTab2/CardMeet.vue b/src/modules/12_evaluatePersonal/components/Detail/viewTab2/CardMeet.vue
index 068ffce62..5536b7f69 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/viewTab2/CardMeet.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/viewTab2/CardMeet.vue
@@ -17,6 +17,10 @@ const props = defineProps({
     type: Array,
     default: [],
   },
+  fetchdata: {
+    type: Function,
+    default: () => "",
+  }
 });
 const { showLoader, hideLoader, messageError, dialogConfirm, date2Thai } =
   mixin;
@@ -118,6 +122,7 @@ function returnData(data: any) {
       })
       .finally(() => {
         hideLoader();
+        props.fetchdata()
         onClickClose();
       });
   });
diff --git a/src/modules/12_evaluatePersonal/components/Detail/viewTab2/DialogDirector.vue b/src/modules/12_evaluatePersonal/components/Detail/viewTab2/DialogDirector.vue
index 327ed0dc1..c54caf04a 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/viewTab2/DialogDirector.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/viewTab2/DialogDirector.vue
@@ -169,7 +169,7 @@ watch(
 <template>
   <q-dialog v-model="props.Modal" persistent>
     <q-card style="width: 1200px; max-width: 80vw">
-      <DialogHeader title="เลือกรายชื่อกรรมการ" :close="clickClose" />
+      <DialogHeader tittle="เลือกรายชื่อกรรมการ" :close="clickClose" />
       <q-separator />
       <q-card-section>
         <q-input
diff --git a/src/modules/12_evaluatePersonal/components/Detail/viewTab2/DialogMeet.vue b/src/modules/12_evaluatePersonal/components/Detail/viewTab2/DialogMeet.vue
index e69d1eaa8..db44a1a58 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/viewTab2/DialogMeet.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/viewTab2/DialogMeet.vue
@@ -171,7 +171,7 @@ watch(
 <template>
   <q-dialog v-model="props.Modal" persistent>
     <q-card style="width: 1200px; max-width: 80vw">
-      <DialogHeader title="เลือกรายชื่อกรรมการ" :close="clickClose" />
+      <DialogHeader tittle="เลือกการประชุม" :close="clickClose" />
       <q-separator />
       <q-card-section>
         <q-input
diff --git a/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep1.vue b/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep1.vue
index d102f1809..adbd5cbcc 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep1.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep1.vue
@@ -3,6 +3,13 @@ import TableData from "@/modules/12_evaluatePersonal/components/Detail/viewstep/
 
 import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
 
+const props = defineProps({
+  data: {
+    type: Object,
+    default: {},
+  },
+});
+
 const store = useEvaluateDetailStore();
 const {
   columnsLicense,
@@ -27,7 +34,7 @@ const {
                 <q-input
                   borderless
                   readonly
-                  model-value="นาย"
+                  :model-value="data.prefix"
                   label="คำนำหน้าชื่อ"
                 />
               </div>
@@ -36,7 +43,7 @@ const {
                 <q-input
                   borderless
                   readonly
-                  model-value="ธนพนธ์ แสงจันทร์"
+                  :model-value="data.fullName"
                   label="ชื่อ - นามสกุล"
                 />
               </div>
diff --git a/src/modules/12_evaluatePersonal/views/DetailPage.vue b/src/modules/12_evaluatePersonal/views/DetailPage.vue
index 4e9db7ec3..f6fb8e175 100644
--- a/src/modules/12_evaluatePersonal/views/DetailPage.vue
+++ b/src/modules/12_evaluatePersonal/views/DetailPage.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
-import { useRouter } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -10,9 +12,35 @@ import Tab2 from "@/modules/12_evaluatePersonal/components/Detail/Tab2.vue"; //
 
 import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
 
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError } = mixin;
+
 const store = useEvaluateDetailStore();
 const router = useRouter();
 const $q = useQuasar();
+const route = useRoute();
+
+const id = ref<string>(route.params.id as string);
+
+const data = ref<any>({});
+function getData() {
+  showLoader();
+  http
+    .get(config.API.evaluateGetDetail(id.value))
+    .then((res: any) => {
+      data.value = res.data.result;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(() => {
+  getData();
+});
 </script>
 
 <template>
@@ -28,7 +56,9 @@ const $q = useQuasar();
         class="q-mr-sm"
         @click="router.go(-1)"
       />
-      <div>รายละเอียดการประเมินของ นาวสาววารุณี แต้มคู</div>
+      <div>
+        รายละเอียดการประเมินบุคคลของ {{ `${data.prefix}${data.fullName}` }}
+      </div>
     </div>
   </div>
   <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
@@ -51,9 +81,9 @@ const $q = useQuasar();
             </q-tabs>
             <q-separator />
             <q-tab-panels v-model="store.tabMenu" animated>
-              <q-tab-panel name="1"> <Tab1 /></q-tab-panel>
+              <q-tab-panel name="1"> <Tab1 :data="data" /></q-tab-panel>
 
-              <q-tab-panel name="2"> <Tab2 /></q-tab-panel>
+              <q-tab-panel name="2"> <Tab2 :data="data" /></q-tab-panel>
             </q-tab-panels>
           </q-card>
         </q-card>