diff --git a/src/api/02_organizational/api.organization.ts b/src/api/02_organizational/api.organization.ts
index 21dec61c1..be30dbfae 100644
--- a/src/api/02_organizational/api.organization.ts
+++ b/src/api/02_organizational/api.organization.ts
@@ -122,6 +122,11 @@ export default {
    */
   requestEdit: `${orgProfile}/edit/`,
 
+  /**
+   * ข้อมูลการพัฒนารายบุคคล IDP
+   */
+  requestDevelopmentEdit: `${orgProfile}/development-request/`,
+
   /**
    * รายการเมนู
    */
diff --git a/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue b/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue
index 04a4964d3..13fdf2f1c 100644
--- a/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue
@@ -418,7 +418,7 @@ async function getDevelop() {
 
 /**
  * บันทึกข้อมูลผลการประเมินการปฏิบัติราชการ
- * @param editStatus แก่ไข,เพิ่ม
+ * @param editStatus แก้ไข,เพิ่ม
  */
 async function addEditData(editStatus: boolean = false) {
   if (!profileId.value) return;
@@ -706,7 +706,9 @@ onMounted(async () => {
                       icon="mdi-history"
                       @click="clickHistory(props.row)"
                     >
-                      <q-tooltip>ประวัติแก้ไขเครื่องราชอิสริยาภรณ์</q-tooltip>
+                      <q-tooltip
+                        >ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ</q-tooltip
+                      >
                     </q-btn>
                     <q-btn
                       v-if="checkPermission($route)?.attrIsUpdate"
@@ -716,7 +718,7 @@ onMounted(async () => {
                       icon="edit"
                       @click.stop.prevent="onClickOpenDialog(true, props.row)"
                     >
-                      <q-tooltip>แก่ไขข้อมุล</q-tooltip>
+                      <q-tooltip>แก้ไขข้อมุล</q-tooltip>
                     </q-btn>
                   </q-card-actions>
                   <q-separator />
diff --git a/src/modules/04_registryPerson/components/requestEdit/01_TabInformation.vue b/src/modules/04_registryPerson/components/requestEdit/01_TabInformation.vue
index 2d4833055..777a65404 100644
--- a/src/modules/04_registryPerson/components/requestEdit/01_TabInformation.vue
+++ b/src/modules/04_registryPerson/components/requestEdit/01_TabInformation.vue
@@ -2,15 +2,12 @@
 import { ref, onMounted, watch } from "vue";
 import { useQuasar } from "quasar";
 
-import { useRouter } from "vue-router";
-import config from "@/app.config";
-import http from "@/plugins/http";
 import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
 import { useCounterMixin } from "@/stores/mixin";
+import config from "@/app.config";
+import http from "@/plugins/http";
 
-/**
- * importType
- */
+/** importType*/
 import type { QTableProps } from "quasar";
 import type {
   DataOption,
@@ -18,22 +15,14 @@ import type {
 } from "@/modules/04_registryPerson/interface/index/Main";
 import type { DateRequest } from "@/modules/04_registryPerson/interface/response/Main";
 
-/**
- * importComponents
- */
+/** importComponents*/
 import DialogStatus from "@/modules/04_registryPerson/components/requestEdit/Dialog01_EditStatus.vue";
 
-/**
- * use
- */
 const $q = useQuasar();
-const router = useRouter();
 const store = useRequestEditStore();
 const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
 
-/**
- * Table
- */
+//Table
 const rows = ref<DateRequest[]>([]); //รายการข้อมูลคำร้องขอแก้ไขทะเบียนประวัติ
 const page = ref<number>(1); //หน้า
 const pageSize = ref<number>(10); //จำนวนต่อหน้า
@@ -119,18 +108,14 @@ const visibleColumns = ref<string[]>([
   "remark",
 ]);
 
-/**
- * ตัวแปร
- */
+//ตัวแปร
 const status = ref<string>("PENDING"); //ค้นหาตามสถานะ
 const keyword = ref<string>(""); //คำค้นหา
 const statusOption = ref<DataOption[]>(store.optionStatus); //รายการสถานะ
 const modalStatus = ref<boolean>(false); //แก้ไขสถานะคำร้อง
 const requestId = ref<string>(""); //id รายการแก้ไข
 
-/**
- * function fetch รายการคำร้องขอแก้ไขทะเบียนประวัติ
- */
+/** function fetch รายการคำร้องขอแก้ไขทะเบียนประวัติ*/
 function fetchListRequset() {
   showLoader();
   http
@@ -156,18 +141,14 @@ function fetchListRequset() {
     });
 }
 
-/**
- * function เลือกสถานะคำร้อง
- */
+/** function เลือกสถานะคำร้อง*/
 function updateStatusValue() {
   page.value = 1;
   // fetch รายการคำร้องขอแก้ไขทะเบียนประวัติ
   fetchListRequset();
 }
 
-/**
- * function เคลียร์ สถานะคำร้อง
- */
+/** function เคลียร์ สถานะคำร้อง*/
 function clearStatus() {
   status.value = "";
   statusOption.value = store.optionStatus;
@@ -260,7 +241,6 @@ async function downloadUrl(id: string, fileName: string) {
 
 /**
  * ดูการเปลี่ยนแปลงของ pageSize
- *
  * เมื่อมีการเปลี่ยนแปลงจำทำการ ดึงช้อมูลรายการคำร้องขอแก้ไขทะเบียนประวัติตามจำนวน pageSize
  */
 watch(
diff --git a/src/modules/04_registryPerson/components/requestEdit/02_TabIDP.vue b/src/modules/04_registryPerson/components/requestEdit/02_TabIDP.vue
index 8cffe9722..f34761819 100644
--- a/src/modules/04_registryPerson/components/requestEdit/02_TabIDP.vue
+++ b/src/modules/04_registryPerson/components/requestEdit/02_TabIDP.vue
@@ -1,18 +1,22 @@
 <script setup lang="ts">
 import { ref, onMounted, watch } from "vue";
+import { useQuasar } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
 import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
+import config from "@/app.config";
+import http from "@/plugins/http";
 
 import type { QTableProps } from "quasar";
-
 import type {
   DataOption,
   Pagination,
 } from "@/modules/04_registryPerson/interface/index/Main";
+import type { DataListsIDP } from "@/modules/04_registryPerson/interface/response/Main";
 
 import DialogEditIDP from "@/modules/04_registryPerson/components/requestEdit/Dialog02_EditIDP.vue";
 
+const $q = useQuasar();
 const store = useRequestEditStore();
 const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
 /**
@@ -20,14 +24,14 @@ const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
  */
 const status = ref<string>("PENDING"); //ค้นหาตามสถานะ
 const keyword = ref<string>(""); //คำค้นหา
-const statusOption = ref<DataOption[]>(store.optionStatus); //รายการสถานะ
+const statusOption = ref<DataOption[]>(store.optionStatusIDP); //รายการสถานะ
 const modalEdit = ref<boolean>(false); //แก้ไขสถานะคำร้อง
 const requestId = ref<string>(""); //id รายการแก้ไข
 
 /**
  * Table
  */
-const rows = ref<any[]>([]); //รายการข้อมูลการพัฒนารายบุคคล
+const rows = ref<DataListsIDP[]>([]); //รายการข้อมูลการพัฒนารายบุคคล
 const page = ref<number>(1); //หน้า
 const pageSize = ref<number>(10); //จำนวนต่อหน้า
 const rowsTotal = ref<number>(0); //จำนวนรายการ
@@ -44,11 +48,11 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "knowledgeSkills",
+    name: "name",
     align: "left",
     label: "ความรู้ / ทักษะ / สมรรถนะที่ต้องได้รับการพัฒนา",
     sortable: true,
-    field: "knowledgeSkills",
+    field: "name",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -103,16 +107,16 @@ const columns = ref<QTableProps["columns"]>([
     label: "สถานะคำร้อง",
     sortable: true,
     field: "status",
-    format: (v) => store.convertStatus(v),
+    format: (v) => store.convertStatusIDP(v),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "remark",
+    name: "reason",
     align: "left",
     label: "หมายเหตุ",
     sortable: true,
-    field: "remark",
+    field: "reason",
     format: (v) => (v ? v : "-"),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -120,47 +124,53 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 const visibleColumns = ref<string[]>([
   "createdAt",
-  "knowledgeSkills",
+  "name",
   "developmentProjects",
   "developmentTarget",
   "developmentResults",
   "developmentReport",
   "document",
   "status",
-  "remark",
+  "reason",
 ]);
 
-function fetchData() {
-  const data = [
-    {
-      id: "1",
-      createdAt: "2024-09-17T08:21:21.600Z",
-      status: "PENDING",
-      knowledgeSkills: "ความรู้",
-      developmentProjects: "การพัฒนา",
-      developmentTarget: "เป้าหมาย",
-      developmentResults: "ผล",
-      developmentReport: "รายงาน",
-    },
-  ];
-  rows.value = data;
+/** function fetch ข้อมูลรายการการพัฒนารายบุคคล*/
+async function fetchData() {
+  showLoader();
+  await http
+    .get(config.API.requestDevelopmentEdit + `admin`, {
+      params: {
+        page: page.value,
+        pageSize: pageSize.value,
+        status: status.value ? status.value : "",
+        keyword: keyword.value,
+      },
+    })
+    .then(async (res) => {
+      const data = await res.data.result;
+      maxPage.value = Math.ceil(data.total / pageSize.value);
+      rowsTotal.value = data.total;
+      rows.value = data.data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
-/**
- * function เลือกสถานะคำร้อง
- */
+/** function เลือกสถานะคำร้อง */
 function updateStatusValue() {
   page.value = 1;
   // fetch รายการคำร้องขอแก้ไขทะเบียนประวัติ
-  //   function  fetchData() {
+  fetchData();
 }
 
-/**
- * function เคลียร์ สถานะคำร้อง
- */
+/** function เคลียร์ สถานะคำร้อง */
 function clearStatus() {
   status.value = "";
-  statusOption.value = store.optionStatus;
+  statusOption.value = store.optionStatusIDP;
 }
 
 /**
@@ -171,7 +181,7 @@ function clearStatus() {
 function filterOption(val: string, update: Function) {
   update(() => {
     status.value = val ? "" : status.value;
-    statusOption.value = store.optionStatus.filter(
+    statusOption.value = store.optionStatusIDP.filter(
       (v: DataOption) => v.name.indexOf(val) > -1
     );
   });
@@ -195,6 +205,70 @@ function onclickEdit(id: string) {
   requestId.value = id;
 }
 
+/**
+ * function หาชื่อไฟล์
+ * @param id รายการยื่นคำร้องขอแก้ไขข้อมูล
+ */
+function onDownloadFile(id: string) {
+  showLoader();
+  http
+    .get(
+      config.API.file(
+        "ระบบทะเบียนประวัติ",
+        "เอกสารหลักฐานคำร้องขอแก้ไขข้อมูล",
+        id
+      )
+    )
+    .then(async (res) => {
+      if (res.data.length !== 0) {
+        await downloadUrl(id, res.data[0].fileName);
+      } else {
+        hideLoader();
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+      hideLoader();
+    });
+}
+
+/**
+ * function  โหลดไฟล์
+ * @param id  รายการยื่นคำร้องขอแก้ไขข้อมูล
+ * @param fileName  ชื่อไฟล์
+ */
+async function downloadUrl(id: string, fileName: string) {
+  await http
+    .get(
+      config.API.fileByFile(
+        "ระบบทะเบียนประวัติ",
+        "เอกสารหลักฐานคำร้องขอแก้ไขข้อมูล",
+        id,
+        fileName
+      )
+    )
+    .then((res) => {
+      window.open(res.data.downloadUrl, "_blank");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ดูการเปลี่ยนแปลงของ pageSize
+ * เมื่อมีการเปลี่ยนแปลงจำทำการ ดึงช้อมูลรายการคำร้องขอแก้ไขทะเบียนประวัติตามจำนวน pageSize
+ */
+watch(
+  () => pageSize.value,
+  () => {
+    fetchData();
+  }
+);
+
 onMounted(() => {
   fetchData();
 });
@@ -291,12 +365,38 @@ onMounted(() => {
               </q-btn>
             </q-td>
             <q-td v-for="col in props.cols" :key="col.name" :props="props">
-              <div v-if="col.name === 'document'">
-                <q-btn icon="mdi-download" round dense flat color="primary">
+              <div v-if="col.name == 'developmentProjects'">
+                <div class="column">
+                  <q-checkbox
+                    size="xs"
+                    :model-value="props.row.isDevelopment70"
+                    label="70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)"
+                  />
+                  <q-checkbox
+                    size="xs"
+                    :model-value="props.row.isDevelopment20"
+                    label="20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)"
+                  />
+                  <q-checkbox
+                    size="xs"
+                    :model-value="props.row.isDevelopment10"
+                    label="10 การฝึกอบรมอื่นๆ"
+                  />
+                </div>
+              </div>
+              <div v-else-if="col.name === 'document'">
+                <q-btn
+                  icon="mdi-download"
+                  round
+                  dense
+                  flat
+                  color="primary"
+                  @click.pervent="onDownloadFile(props.row.id)"
+                >
                   <q-tooltip>หลักฐานอ้างอิง</q-tooltip>
                 </q-btn>
               </div>
-              <div v-else class="table_ellipsis2">
+              <div v-else>
                 {{ col.value ? col.value : "-" }}
               </div>
             </q-td>
@@ -320,7 +420,11 @@ onMounted(() => {
     </div>
   </q-card>
 
-  <DialogEditIDP v-model:modal="modalEdit" v-model:request-id="requestId" />
+  <DialogEditIDP
+    v-model:modal="modalEdit"
+    v-model:request-id="requestId"
+    :fetch-data-list="fetchData"
+  />
 </template>
 
 <style scoped></style>
diff --git a/src/modules/04_registryPerson/components/requestEdit/Dialog01_EditStatus.vue b/src/modules/04_registryPerson/components/requestEdit/Dialog01_EditStatus.vue
index 3bc1ddbcd..277232104 100644
--- a/src/modules/04_registryPerson/components/requestEdit/Dialog01_EditStatus.vue
+++ b/src/modules/04_registryPerson/components/requestEdit/Dialog01_EditStatus.vue
@@ -9,22 +9,14 @@ import { useCounterMixin } from "@/stores/mixin";
 
 import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
 
-/**
- * importComponents
- */
 import DialogHeader from "@/components/DialogHeader.vue";
 
-/**
- * use
- */
 const $q = useQuasar();
 const store = useRequestEditStore();
 const { dialogConfirm, showLoader, hideLoader, messageError, success } =
   useCounterMixin();
 
-/**
- *  props
- */
+/** props*/
 const modal = defineModel<boolean>("modal", { required: true }); //เปิด,ปิด popup แก้ไขสถานะคำร้อง
 const requestId = defineModel<string>("requestId", { required: true }); // id ที่ต้องการแก้ไข
 const props = defineProps({
@@ -42,9 +34,7 @@ const statusOptionMain = ref<DataOption[]>(
 );
 const statusOption = ref<DataOption[]>(statusOptionMain.value); //ตัวเลือกรายการสถานะ
 
-/**
- * function บันทึกรายการคำร้อง
- */
+/** function บันทึกรายการคำร้อง*/
 function onSubmit() {
   dialogConfirm($q, async () => {
     showLoader();
@@ -67,9 +57,7 @@ function onSubmit() {
   });
 }
 
-/**
- * function ปิด popup
- */
+/** function ปิด popup*/
 function closeDialog() {
   modal.value = false;
   formData.status = "";
@@ -89,9 +77,7 @@ function filterOption(val: string, update: Function) {
   });
 }
 
-/**
- * function fetch ข้อมูลคำร้องแก้ไข
- */
+/** function fetch ข้อมูลคำร้องแก้ไข*/
 function fetchDataRequest() {
   showLoader();
   http
@@ -127,7 +113,6 @@ function classInput(val: boolean) {
 
 /**
  * ดูการเปลี่ยนแปลงของ modal
- *
  * เมื่อ modal เป็น true ทำการดึงข้อมูลคำร้องแก้ไข
  */
 watch(
diff --git a/src/modules/04_registryPerson/components/requestEdit/Dialog02_EditIDP.vue b/src/modules/04_registryPerson/components/requestEdit/Dialog02_EditIDP.vue
index e7cee0f22..60cca11fb 100644
--- a/src/modules/04_registryPerson/components/requestEdit/Dialog02_EditIDP.vue
+++ b/src/modules/04_registryPerson/components/requestEdit/Dialog02_EditIDP.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { reactive, ref } from "vue";
+import { reactive, ref, watch } from "vue";
 import { useQuasar } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
 import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
+import config from "@/app.config";
+import http from "@/plugins/http";
 
 import type {
   DataOption,
@@ -20,24 +22,28 @@ const { dialogConfirm, showLoader, hideLoader, messageError, success } =
 
 const modal = defineModel<boolean>("modal", { required: true }); //เปิด,ปิด popup แก้ไขสถานะคำร้อง
 const requestId = defineModel<string>("requestId", { required: true }); // id ที่ต้องการแก้ไข
+const { fetchDataList } = defineProps({
+  fetchDataList: { type: Function, require: true },
+});
 
-const isReadOnly = ref<boolean>(false);
+const isReadOnly = ref<boolean>(false); //อ่านอย่างเดียว
 
+//ฟอร์มข้อมูลการพัฒนารายบุคคล
 const formData = reactive<FormDataIDP>({
-  topic: "",
-  development: [],
-  otherAction: "",
-  otherPerson: "",
-  otherTraining: "",
-  developmentTarget: "",
-  developmentResults: "",
-  developmentReport: "",
-  status: "",
-  remark: "",
+  topic: "", //ชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา
+  developmentProjects: [], //วิธีการพัฒนา
+  reasonDevelopment70: "", //อื่นๆ 70 การลงมือปฏิบัติ
+  reasonDevelopment20: "", //อื่นๆ 20 การเรียนรู้จากผู้อื่น
+  reasonDevelopment10: "", //อื่นๆ 10 การฝึกอบรมอื่นๆ
+  developmentTarget: "", //เป้าหมายการนำไปพัฒนางาน
+  developmentResults: "", //วิธีการวัดผลการพัฒนา
+  developmentReport: "", //รายงานผลการพัฒนา
+  status: "", //สถานะ
+  reason: "", //หมายเหตุ
 });
 
 //70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)
-const itemsDevelopmentAction = ref<DataItemsDevelopment[]>([
+const itemsDevelopment70 = ref<DataItemsDevelopment[]>([
   {
     value: "on_the_job_training",
     label: "การฝึกปฏิบัติในงาน (On the job training)",
@@ -88,7 +94,7 @@ const itemsDevelopmentAction = ref<DataItemsDevelopment[]>([
   },
 ]);
 //20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)
-const itemsDevelopmentPerson = ref<DataItemsDevelopment[]>([
+const itemsDevelopment20 = ref<DataItemsDevelopment[]>([
   { value: "coaching", label: "การสอนงาน (Coaching)" },
   { value: "mentoring", label: "การเป็นพี่เลี้ยง (Mentoring)" },
   { value: "team_meeting", label: "การประชุมทีม (Team meeting)" },
@@ -97,7 +103,7 @@ const itemsDevelopmentPerson = ref<DataItemsDevelopment[]>([
   { value: "other2", label: "อื่น ๆ (ระบุ)" },
 ]);
 //10 การฝึกอบรมอื่นๆ
-const itemsDevelopmentTraining = ref<DataItemsDevelopment[]>([
+const itemsDevelopment10 = ref<DataItemsDevelopment[]>([
   {
     value: "self_learning",
     label: "การเรียนรู้ด้วยตนเอง แบบ online/offline (Self – learning)",
@@ -121,10 +127,39 @@ const itemsDevelopmentTraining = ref<DataItemsDevelopment[]>([
 ]);
 //ข้อมูลรายการสถานะ
 const statusOptionMain = ref<DataOption[]>(
-  store.optionStatus.filter((e: DataOption) => e.id !== "")
+  store.optionStatusIDP.filter((e: DataOption) => e.id !== "")
 );
 const statusOption = ref<DataOption[]>(statusOptionMain.value); //ตัวเลือกรายการสถานะ
 
+/**
+ * function fetch ข้อมูลการพัฒนารายบุคคลตาม ID ที่ค้องการ
+ * @param id ID ที่ต้องการดูรายละเอียด
+ */
+function fetchDataByid(id: string) {
+  showLoader();
+  http
+    .get(config.API.requestDevelopmentEdit + `admin/${id}`)
+    .then((res) => {
+      const data = res.data.result;
+      formData.topic = data.name;
+      formData.developmentProjects = data.developmentProjects;
+      formData.developmentTarget = data.developmentTarget;
+      formData.developmentResults = data.developmentResults;
+      formData.developmentReport = data.developmentReport;
+      formData.reasonDevelopment70 = data.reasonDevelopment70;
+      formData.reasonDevelopment20 = data.reasonDevelopment20;
+      formData.reasonDevelopment10 = data.reasonDevelopment10;
+      formData.status = data.status;
+      formData.reason = data.reason;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 /**
  * function ค้นหาคำใน select  สถานะคำร้อง
  * @param val คำค้น
@@ -139,25 +174,45 @@ function filterOption(val: string, update: Function) {
   });
 }
 
+/** function บันทึกข้อมูลการพัฒนารายบุคคล */
 function onSubmit() {
-  dialogConfirm($q, () => {});
+  dialogConfirm($q, async () => {
+    showLoader();
+    await http
+      .patch(config.API.requestDevelopmentEdit + `admin/${requestId.value}`, {
+        status: formData.status,
+        reason: formData.reason,
+      })
+      .then(async () => {
+        await fetchDataList?.();
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        closeDialog();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
 }
 
 /**
  * function ปิด popup
+ * และกำหนด formData เป็นค่า Defult
  */
 function closeDialog() {
   modal.value = false;
   formData.topic = "";
-  formData.development = [];
-  formData.otherAction = "";
-  formData.otherPerson = "";
-  formData.otherTraining = "";
+  formData.developmentProjects = [];
+  formData.reasonDevelopment70 = "";
+  formData.reasonDevelopment20 = "";
+  formData.reasonDevelopment10 = "";
   formData.developmentTarget = "";
   formData.developmentResults = "";
   formData.developmentReport = "";
   formData.status = "";
-  formData.remark = "";
+  formData.reason = "";
 }
 
 /**
@@ -170,6 +225,16 @@ function classInput(val: boolean) {
     "full-width cursor-pointer inputgreen": !val,
   };
 }
+
+/**
+ * ดูการเปลี่ยนแปลงของ modal เมื่อ modal เป็น True
+ * fetch ข้อมูลการพัฒนารายบุคคลตาม ID ที่ค้องการ
+ */
+watch(modal, (val) => {
+  if (val) {
+    fetchDataByid(requestId.value);
+  }
+});
 </script>
 
 <template>
@@ -218,7 +283,7 @@ function classInput(val: boolean) {
                 <div class="col-12">
                   <q-input
                     :class="classInput(isReadOnly)"
-                    v-model="formData.remark"
+                    v-model="formData.reason"
                     label="หมายเหตุ"
                     dense
                     outlined
@@ -233,7 +298,6 @@ function classInput(val: boolean) {
               <div class="row q-col-gutter-sm">
                 <div class="col-12">
                   <q-input
-                    :class="classInput(isReadOnly)"
                     readonly
                     outlined
                     v-model="formData.topic"
@@ -243,38 +307,37 @@ function classInput(val: boolean) {
                 </div>
 
                 <div class="col-12">
-                  <q-label class="q-mb-sm text-weight-medium text-body2"
-                    >วิธีการพัฒนา
-                  </q-label>
+                  <div class="q-mb-sm text-weight-medium text-body2">
+                    วิธีการพัฒนา
+                  </div>
                   <div class="row col-12 q-ml-md q-col-gutter-sm">
                     <!-- 70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย) -->
                     <div class="col-4">
-                      <q-label class="q-mb-sm text-weight-medium text-body2"
-                        >70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)</q-label
-                      >
+                      <div class="q-mb-sm text-weight-medium text-body2">
+                        70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)
+                      </div>
                       <q-option-group
                         disable
                         class="check_box q-mt-sm"
                         keep-color
                         color="primary"
                         dense
-                        v-model="formData.development"
-                        :options="itemsDevelopmentAction"
+                        v-model="formData.developmentProjects"
+                        :options="itemsDevelopment70"
                         type="checkbox"
                       />
 
                       <div
                         class="row"
-                        v-if="formData.development.includes('other1')"
+                        v-if="formData.developmentProjects.includes('other1')"
                       >
                         <div class="col-8 q-mt-sm relative-position">
                           <div class="other_custom_input">
                             <q-input
                               readonly
-                              v-model="formData.otherAction"
+                              v-model="formData.reasonDevelopment70"
                               dense
                               outlined
-                              class="inputgreen"
                               label="กรุณาระบุ"
                             ></q-input>
                           </div>
@@ -284,29 +347,28 @@ function classInput(val: boolean) {
 
                     <!-- 20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting) -->
                     <div class="col-4">
-                      <q-label class="q-mb-sm text-weight-medium text-body2"
-                        >20 การเรียนรู้จากผู้อื่น
-                        (Coach/Mentor/Consulting)</q-label
-                      >
+                      <div class="q-mb-sm text-weight-medium text-body2">
+                        20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)
+                      </div>
                       <q-option-group
                         disable
                         class="check_box q-mt-sm"
                         keep-color
                         color="primary"
                         dense
-                        v-model="formData.development"
-                        :options="itemsDevelopmentPerson"
+                        v-model="formData.developmentProjects"
+                        :options="itemsDevelopment20"
                         type="checkbox"
                       />
                       <div
                         class="row"
-                        v-if="formData.development.includes('other2')"
+                        v-if="formData.developmentProjects.includes('other2')"
                       >
                         <div class="col-8 q-mt-sm relative-position">
                           <div class="other_custom_input">
                             <q-input
                               readonly
-                              v-model="formData.otherPerson"
+                              v-model="formData.reasonDevelopment20"
                               dense
                               outlined
                               label="กรุณาระบุ"
@@ -318,28 +380,28 @@ function classInput(val: boolean) {
 
                     <!-- 10 การฝึกอบรมอื่นๆ -->
                     <div class="col-4">
-                      <q-label class="q-mb-sm text-weight-medium text-body2"
-                        >10 การฝึกอบรมอื่นๆ</q-label
-                      >
+                      <div class="q-mb-sm text-weight-medium text-body2">
+                        10 การฝึกอบรมอื่นๆ
+                      </div>
                       <q-option-group
                         disable
                         class="check_box q-mt-sm"
                         keep-color
                         color="primary"
                         dense
-                        v-model="formData.development"
-                        :options="itemsDevelopmentTraining"
+                        v-model="formData.developmentProjects"
+                        :options="itemsDevelopment10"
                         type="checkbox"
                       />
                       <div
                         class="row"
-                        v-if="formData.development.includes('other3')"
+                        v-if="formData.developmentProjects.includes('other3')"
                       >
                         <div class="offset-4 col-8 q-mt-sm relative-position">
                           <div class="other_custom_input">
                             <q-input
                               readonly
-                              v-model="formData.otherTraining"
+                              v-model="formData.reasonDevelopment10"
                               dense
                               outlined
                               label="กรุณาระบุ"
diff --git a/src/modules/04_registryPerson/interface/request/Main.ts b/src/modules/04_registryPerson/interface/request/Main.ts
index 178cb0ece..97556ceb6 100644
--- a/src/modules/04_registryPerson/interface/request/Main.ts
+++ b/src/modules/04_registryPerson/interface/request/Main.ts
@@ -68,15 +68,15 @@ interface FormChangeName {
 
 interface FormDataIDP {
   topic: string;
-  development: string[];
-  otherAction: string;
-  otherPerson: string;
-  otherTraining: string;
+  developmentProjects: string[];
+  reasonDevelopment70: string;
+  reasonDevelopment20: string;
+  reasonDevelopment10: string;
   developmentTarget: string;
   developmentResults: string;
   developmentReport: string;
   status: string;
-  remark: string;
+  reason: string;
 }
 
 export type {
diff --git a/src/modules/04_registryPerson/interface/response/Main.ts b/src/modules/04_registryPerson/interface/response/Main.ts
index 2e740320e..95f0abf69 100644
--- a/src/modules/04_registryPerson/interface/response/Main.ts
+++ b/src/modules/04_registryPerson/interface/response/Main.ts
@@ -152,6 +152,30 @@ interface DataLeaveType {
   refCommandDate: string;
 }
 
+interface DataListsIDP {
+  createdAt: string;
+  createdFullName: string;
+  createdUserId: string;
+  developmentReport: string;
+  developmentResults: string;
+  developmentTarget: string;
+  id: string;
+  isDevelopment10: boolean;
+  isDevelopment20: boolean;
+  isDevelopment70: boolean;
+  lastUpdateFullName: string;
+  lastUpdateUserId: string;
+  lastUpdatedAt: string;
+  name: string;
+  profileEmployeeId: string;
+  profileId: string;
+  reason: string;
+  reasonDevelopment10: string;
+  reasonDevelopment20: string;
+  reasonDevelopment70: string;
+  status: string;
+}
+
 export type {
   DataType,
   DataLevel,
@@ -160,4 +184,5 @@ export type {
   DataProfile,
   DataLeave,
   DataLeaveType,
+  DataListsIDP,
 };
diff --git a/src/modules/04_registryPerson/stores/RequestEdit.ts b/src/modules/04_registryPerson/stores/RequestEdit.ts
index 118b17db3..32e889d20 100644
--- a/src/modules/04_registryPerson/stores/RequestEdit.ts
+++ b/src/modules/04_registryPerson/stores/RequestEdit.ts
@@ -20,6 +20,13 @@ export const useRequestEditStore = defineStore("requestEditStore", () => {
     { id: "REJECT", name: "ไม่อนุมัตการแก้ไข" },
   ]);
 
+  const optionStatusIDP = ref<DataOption[]>([
+    { id: "", name: "ทั้งหมด" },
+    { id: "PENDING", name: "รอดำเนินการ" },
+    { id: "APPROVE", name: "อนุมัติ" },
+    { id: "REJECT", name: "ไม่อนุมัติ" },
+  ]);
+
   function convertStatus(val: string) {
     switch (val) {
       case "PENDING":
@@ -32,5 +39,24 @@ export const useRequestEditStore = defineStore("requestEditStore", () => {
         return "-";
     }
   }
-  return { convertStatus, optionTopic, optionStatus };
+
+  function convertStatusIDP(val: string) {
+    switch (val) {
+      case "PENDING":
+        return "รอดำเนินการ";
+      case "APPROVE":
+        return "อนุมัติ";
+      case "REJECT":
+        return "ไม่อนุมัติ";
+      default:
+        return "-";
+    }
+  }
+  return {
+    convertStatus,
+    optionTopic,
+    optionStatus,
+    optionStatusIDP,
+    convertStatusIDP,
+  };
 });