diff --git a/src/modules/15_development/components/FormHistory.vue b/src/modules/15_development/components/FormHistory.vue
new file mode 100644
index 000000000..d871308ab
--- /dev/null
+++ b/src/modules/15_development/components/FormHistory.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { useCounterMixin } from "@/stores/mixin";
+
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
+const dateHisStart = defineModel<Date | null>("dateHisStart", {
+  required: true,
+});
+const dateHisEnd = defineModel<Date | null>("dateHisEnd", { required: true });
+const trainingDays = defineModel<string>("trainingDays", { required: true });
+</script>
+<template>
+  <q-card flat bordered class="q-mt-md bg-grey-1">
+    <q-card-section class="q-pa-sm row q-col-gutter-sm">
+      <div class="col-4">
+        <q-input
+          :model-value="dateHisStart ? date2Thai(dateHisStart) : '-'"
+          dense
+          outlined
+          readonly
+          bg-color="white"
+          label="วันเริ่มต้นการฝึกอบรม/ศึกษาดูงาน"
+        >
+          <template v-slot:prepend>
+            <q-icon
+              name="event"
+              class="cursor-pointer"
+              style="color: var(--q-primary)"
+            >
+            </q-icon> </template
+        ></q-input>
+      </div>
+      <div class="col-4">
+        <q-input
+          :model-value="dateHisEnd ? date2Thai(dateHisStart) : '-'"
+          dense
+          outlined
+          readonly
+          bg-color="white"
+          label="วันสิ้นสุดการฝึกอบรม/ศึกษาดูงาน"
+        >
+          <template v-slot:prepend>
+            <q-icon
+              name="event"
+              class="cursor-pointer"
+              style="color: var(--q-primary)"
+            >
+            </q-icon>
+          </template>
+        </q-input>
+      </div>
+      <div class="col-4">
+        <q-input
+          :model-value="trainingDays ? trainingDays : '-'"
+          dense
+          outlined
+          readonly
+          bg-color="white"
+          label="จำนวนวันที่อบรม"
+        ></q-input>
+      </div>
+    </q-card-section>
+  </q-card>
+</template>
diff --git a/src/modules/15_development/components/history/AddPage.vue b/src/modules/15_development/components/history/AddPage.vue
index 653ec2224..391288ef3 100644
--- a/src/modules/15_development/components/history/AddPage.vue
+++ b/src/modules/15_development/components/history/AddPage.vue
@@ -14,6 +14,8 @@ import type {
   FormAddHistoryProject,
 } from "@/modules/15_development/interface/request/Main";
 
+import FormHistory from "@/modules/15_development/components/FormHistory.vue";
+
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError, date2Thai } = mixin;
@@ -25,6 +27,10 @@ const id = ref<string>(route.params.id as string); // id route
 const dateOrder = ref<Date | null>(null); // คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่
 const order = ref<string>(""); //เลขที่คำสั่ง/เลขที่หนังสืออนุมัติ
 
+const dateHisStart = ref<Date | null>(null);
+const dateHisEnd = ref<Date | null>(null);
+const trainingDays = ref<string>("");
+
 /** ตัวแปรข้อมูลข้าราชการ */
 const formMain = reactive<FormAddHistory>({
   id: "",
@@ -124,6 +130,10 @@ async function fetchData() {
       dateOrder.value = data.dateOrder;
       order.value = data.order;
       rows.value = data.academic;
+
+      dateHisStart.value = data.dateStart;
+      dateHisEnd.value = data.dateEnd;
+      trainingDays.value = data.trainingDays;
     })
     .catch((e) => {
       messageError($q, e);
@@ -332,7 +342,11 @@ onMounted(async () => {
                 </div>
 
                 <div class="col-12 col-sm-12 col-md-7">
-                  {{ formMainProject.totalTraining ?? "-" }}
+                  {{
+                    formMainProject.totalTraining
+                      ? `${formMainProject.totalTraining} วัน`
+                      : "-"
+                  }}
                 </div>
               </div>
               <!-- <div class="row col-12">
@@ -395,8 +409,12 @@ onMounted(async () => {
           </div>
         </div>
       </q-card>
-
-      <div class="row q-col-gutter-sm q-mt-md">
+      <FormHistory
+        :date-his-start="dateHisStart"
+        :date-his-end="dateHisEnd"
+        :training-days="trainingDays"
+      />
+      <div class="row q-col-gutter-sm q-mt-sm">
         <div class="col-3">
           <q-input
             readonly
diff --git a/src/modules/15_development/components/historyEmployee/AddPage.vue b/src/modules/15_development/components/historyEmployee/AddPage.vue
index 86c64f5b0..be35eed17 100644
--- a/src/modules/15_development/components/historyEmployee/AddPage.vue
+++ b/src/modules/15_development/components/historyEmployee/AddPage.vue
@@ -15,6 +15,8 @@ import type {
 import type { QTableProps } from "quasar";
 import type { DataTrainingTopics } from "@/modules/15_development/interface/index/Main";
 
+import FormHistory from "@/modules/15_development/components/FormHistory.vue";
+
 /** importStore*/
 
 /** use*/
@@ -28,6 +30,10 @@ const id = ref<string>(route.params.id as string);
 const dateOrder = ref<Date | null>(null);
 const order = ref<string>("");
 
+const dateHisStart = ref<Date | null>(null);
+const dateHisEnd = ref<Date | null>(null);
+const trainingDays = ref<string>('');
+
 /** ตัวแปรข้อมูลข้าราชการ */
 const formMain = reactive<FormAddHistoryEmployee>({
   id: "",
@@ -135,6 +141,10 @@ function fetchDataDetail() {
       dateOrder.value = data.dateOrder;
       order.value = data.order;
       rows.value = data.academic;
+
+      dateHisStart.value = data.dateStart;
+      dateHisEnd.value = data.dateEnd;
+      trainingDays.value = data.trainingDays;
     })
     .catch((e) => {
       messageError($q, e);
@@ -401,8 +411,12 @@ onMounted(() => {
           </div>
         </div>
       </q-card>
-
-      <div class="row q-col-gutter-sm q-mt-md">
+      <FormHistory
+        :date-his-start="dateHisStart"
+        :date-his-end="dateHisEnd"
+        :training-days="trainingDays"
+      />
+      <div class="row q-col-gutter-sm q-mt-sm">
         <div class="col-3">
           <q-input
             readonly