diff --git a/src/modules/15_development/components/history/AddPage.vue b/src/modules/15_development/components/history/AddPage.vue
index f431bad62..8231a4055 100644
--- a/src/modules/15_development/components/history/AddPage.vue
+++ b/src/modules/15_development/components/history/AddPage.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
-import { useRoute, useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 
+import { useRoute, useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useCounterMixin } from "@/stores/mixin";
 
+import type { QTableProps } from "quasar";
+import type { DataTrainingTopics } from "@/modules/15_development/interface/index/Main";
 import type {
   FormAddHistory,
   FormAddHistoryProject,
@@ -55,9 +57,36 @@ const formMainProject = reactive<FormAddHistoryProject>({
   organizingTraining: "", //หน่วยงานที่รับผิดชอบจัดการอบรม
 });
 
-function getClass() {
-  return "inputgreen";
-}
+const rows = ref<DataTrainingTopics[]>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "topicAcademic",
+    align: "left",
+    label: "หัวข้อ/ประเด็นการฝึกอบรม ศึกษาดูงาน",
+    sortable: false,
+    field: "topicAcademic",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "addressAcademic",
+    align: "left",
+    label: "สถานที่ฝึกอบรม ศึกษาดูงาน",
+    sortable: true,
+    field: "addressAcademic",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "province",
+    align: "left",
+    label: "จังหวัด",
+    sortable: false,
+    field: "province",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
 
 /** ดึงข้อมูล */
 async function fetchData() {
@@ -94,6 +123,7 @@ async function fetchData() {
       formMainProject.organizingTraining = data.org ? data.org : null;
       dateOrder.value = data.dateOrder;
       order.value = data.order;
+      rows.value = data.academic
     })
     .catch((e) => {
       messageError($q, e);
@@ -123,7 +153,7 @@ onMounted(async () => {
       class="q-mr-sm"
       @click="router.go(-1)"
     />
-    <span> ประวัติการฝึกอบรม/ดูงานของข้าราชการกรุงเทพมหานครสามัญ </span>
+    <span> ประวัติการฝึกอบรม/ดูงาน ข้าราชการกรุงเทพมหานครสามัญ </span>
   </div>
   <q-card flat bordered>
     <q-card-section>
@@ -240,6 +270,15 @@ onMounted(async () => {
                 </div>
               </div>
               <div class="row col-12">
+                <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
+                  หน่วยงานที่รับผิดชอบ
+                </div>
+
+                <div class="col-12 col-sm-12 col-md-7">
+                  {{ formMainProject.organizingTraining ?? "-" }}
+                </div>
+              </div>
+              <!-- <div class="row col-12">
                 <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
                   หัวข้อการไปฝึกอบรม/ศึกษาดูงาน
                 </div>
@@ -256,7 +295,7 @@ onMounted(async () => {
                 <div class="col-12 col-sm-12 col-md-7">
                   {{ formMainProject.location ?? "-" }}
                 </div>
-              </div>
+              </div> -->
             </div>
           </div>
           <div class="col-6">
@@ -296,7 +335,7 @@ onMounted(async () => {
                   {{ formMainProject.totalTraining ?? "-" }}
                 </div>
               </div>
-              <div class="row col-12">
+              <!-- <div class="row col-12">
                 <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
                   หน่วยงานที่รับผิดชอบ
                 </div>
@@ -304,12 +343,59 @@ onMounted(async () => {
                 <div class="col-12 col-sm-12 col-md-7">
                   {{ formMainProject.organizingTraining ?? "-" }}
                 </div>
-              </div>
+              </div> -->
             </div>
           </div>
         </div>
       </q-card>
 
+      <!--card หัวข้อและสถานที่ไปฝึกอบรม ศึกษาดูงาน -->
+      <q-card flat bordered class="q-mt-md" style="border: 1px solid #d6dee1">
+        <div class="col-12 text-weight-bold bg-grey-1 q-py-sm q-px-md">
+          หัวข้อและสถานที่ไปฝึกอบรม ศึกษาดูงาน
+        </div>
+        <div class="col-12"><q-separator /></div>
+        <div class="row q-pa-md q-col-gutter-md">
+          <div class="col-12">
+            <d-table
+              :columns="columns"
+              :rows="rows"
+              row-key="id"
+              flat
+              bordered
+              :paging="true"
+              dense
+              :rows-per-page-options="[10, 25, 50, 100]"
+            >
+              <template v-slot:header="props">
+                <q-tr :props="props">
+                  <q-th
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <span class="text-weight-medium">{{ col.label }}</span>
+                  </q-th>
+                </q-tr>
+              </template>
+              <template v-slot:body="props">
+                <q-tr :props="props">
+                  <q-td
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <div class="table_ellipsis2">
+                      {{ col.value ?? "-" }}
+                    </div>
+                  </q-td>
+                </q-tr>
+              </template>
+            </d-table>
+          </div>
+        </div>
+      </q-card>
+
       <div class="row q-col-gutter-sm q-mt-md">
         <div class="col-3">
           <q-input
@@ -318,10 +404,9 @@ onMounted(async () => {
             v-model="order"
             dense
             outlined
-            :class="getClass()"
             hide-bottom-space
-            :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง/เลขที่หนังสืออนุมัติ'}`,]"
           />
+          <!-- :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง/เลขที่หนังสืออนุมัติ'}`,]" -->
         </div>
         <div class="col-3">
           <datepicker
@@ -340,15 +425,14 @@ onMounted(async () => {
             <template #year-overlay-value="{ value }">
               {{ parseInt(value + 543) }}
             </template>
+            <!-- :rules="[(val:string) => !!val || `${'กรุณากรอกคำสั่งลงวันที่/หนังสืออนุมัติลงวันที่'}`,]" -->
             <template #trigger>
               <q-input
                 readonly
                 outlined
                 dense
-                :class="getClass()"
                 hide-bottom-space
                 :model-value="dateOrder != null ? date2Thai(dateOrder) : null"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกคำสั่งลงวันที่/หนังสืออนุมัติลงวันที่'}`,]"
                 label="คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่"
               >
                 <template v-slot:prepend>
diff --git a/src/modules/15_development/components/historyEmployee/AddPage.vue b/src/modules/15_development/components/historyEmployee/AddPage.vue
index 07f0048c4..59edfd83f 100644
--- a/src/modules/15_development/components/historyEmployee/AddPage.vue
+++ b/src/modules/15_development/components/historyEmployee/AddPage.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
-import { useRoute, useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 
+import { useRoute, useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -11,9 +12,10 @@ import type {
   FormAddHistoryEmployee,
   FormAddHistoryProject,
 } from "@/modules/15_development/interface/request/Main";
+import type { QTableProps } from "quasar";
+import type { DataTrainingTopics } from "@/modules/15_development/interface/index/Main";
 
 /** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
 
 /** use*/
 const $q = useQuasar();
@@ -57,10 +59,36 @@ const formMainProject = reactive<FormAddHistoryProject>({
   organizingTraining: "", //หน่วยงานที่รับผิดชอบจัดการอบรม
 });
 
-/** class  */
-function getClass() {
-  return "inputgreen";
-}
+const rows = ref<DataTrainingTopics[]>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "topicAcademic",
+    align: "left",
+    label: "หัวข้อ/ประเด็นการฝึกอบรม ศึกษาดูงาน",
+    sortable: false,
+    field: "topicAcademic",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "addressAcademic",
+    align: "left",
+    label: "สถานที่ฝึกอบรม ศึกษาดูงาน",
+    sortable: true,
+    field: "addressAcademic",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "province",
+    align: "left",
+    label: "จังหวัด",
+    sortable: false,
+    field: "province",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
 
 /** ดึงข้อมูล */
 function fetchDataDetail() {
@@ -106,6 +134,7 @@ function fetchDataDetail() {
 
       dateOrder.value = data.dateOrder;
       order.value = data.order;
+      rows.value = data.academic;
     })
     .catch((e) => {
       messageError($q, e);
@@ -135,7 +164,7 @@ onMounted(() => {
       class="q-mr-sm"
       @click="router.go(-1)"
     />
-    <span> ประวัติฝึกอบรม/ดูงานลูกจ้าง </span>
+    <span> ประวัติการฝึกอบรม/ดูงาน ลูกจ้าง </span>
   </div>
   <q-card flat bordered>
     <q-card-section>
@@ -243,6 +272,15 @@ onMounted(() => {
                 </div>
               </div>
               <div class="row col-12">
+                <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
+                  หน่วยงานที่รับผิดชอบ
+                </div>
+
+                <div class="col-12 col-sm-12 col-md-7">
+                  {{ formMainProject.organizingTraining ?? "-" }}
+                </div>
+              </div>
+              <!-- <div class="row col-12">
                 <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
                   หัวข้อการไปฝึกอบรม/ศึกษาดูงาน
                 </div>
@@ -259,7 +297,7 @@ onMounted(() => {
                 <div class="col-12 col-sm-12 col-md-7">
                   {{ formMainProject.location ?? "-" }}
                 </div>
-              </div>
+              </div> -->
             </div>
           </div>
           <div class="col-6">
@@ -299,7 +337,7 @@ onMounted(() => {
                   {{ formMainProject.totalTraining ?? "-" }}
                 </div>
               </div>
-              <div class="row col-12">
+              <!-- <div class="row col-12">
                 <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
                   หน่วยงานที่รับผิดชอบ
                 </div>
@@ -307,12 +345,59 @@ onMounted(() => {
                 <div class="col-12 col-sm-12 col-md-7">
                   {{ formMainProject.organizingTraining ?? "-" }}
                 </div>
-              </div>
+              </div> -->
             </div>
           </div>
         </div>
       </q-card>
 
+      <!--card  หัวข้อและสถานที่ไปฝึกอบรม ศึกษาดูงาน-->
+      <q-card flat bordered class="q-mt-md" style="border: 1px solid #d6dee1">
+        <div class="col-12 text-weight-bold bg-grey-1 q-py-sm q-px-md">
+          หัวข้อและสถานที่ไปฝึกอบรม ศึกษาดูงาน
+        </div>
+        <div class="col-12"><q-separator /></div>
+        <div class="row q-pa-md q-col-gutter-md">
+          <div class="col-12">
+            <d-table
+              :columns="columns"
+              :rows="rows"
+              row-key="id"
+              flat
+              bordered
+              :paging="true"
+              dense
+              :rows-per-page-options="[10, 25, 50, 100]"
+            >
+              <template v-slot:header="props">
+                <q-tr :props="props">
+                  <q-th
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <span class="text-weight-medium">{{ col.label }}</span>
+                  </q-th>
+                </q-tr>
+              </template>
+              <template v-slot:body="props">
+                <q-tr :props="props">
+                  <q-td
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <div class="table_ellipsis2">
+                      {{ col.value ?? "-" }}
+                    </div>
+                  </q-td>
+                </q-tr>
+              </template>
+            </d-table>
+          </div>
+        </div>
+      </q-card>
+
       <div class="row q-col-gutter-sm q-mt-md">
         <div class="col-3">
           <q-input
@@ -321,7 +406,6 @@ onMounted(() => {
             v-model="order"
             dense
             outlined
-            :class="getClass()"
             hide-bottom-space
             :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง/เลขที่หนังสืออนุมัติ'}`,]"
           />
@@ -348,7 +432,6 @@ onMounted(() => {
                 readonly
                 outlined
                 dense
-                :class="getClass()"
                 hide-bottom-space
                 :model-value="dateOrder != null ? date2Thai(dateOrder) : null"
                 :rules="[(val:string) => !!val || `${'กรุณากรอกคำสั่งลงวันที่/หนังสืออนุมัติลงวันที่'}`,]"
diff --git a/src/modules/15_development/interface/index/Main.ts b/src/modules/15_development/interface/index/Main.ts
index ebf9e863b..2bc51e713 100644
--- a/src/modules/15_development/interface/index/Main.ts
+++ b/src/modules/15_development/interface/index/Main.ts
@@ -166,6 +166,12 @@ interface DataItemsDevelopment {
   label: string;
 }
 
+interface DataTrainingTopics {
+  topicAcademic: "";
+  addressAcademic: "";
+  province: "";
+}
+
 export type {
   DataOption,
   DataOptionCheckBox,
@@ -181,4 +187,5 @@ export type {
   PersonData,
   StrategyNode,
   DataItemsDevelopment,
+  DataTrainingTopics,
 };