diff --git a/src/modules/04_registryNew/components/detail/Achievement/02_Train.vue b/src/modules/04_registryNew/components/detail/Achievement/02_Train.vue
index 1d36bb25e..901510331 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/02_Train.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/02_Train.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { ref, reactive, watch, onMounted } from "vue";
-import moment from "moment";
 import dialogHeader from "@/components/DialogHeader.vue";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRoute } from "vue-router";
+import type { RequestItemsObject } from "@/modules/04_registryNew/interface/request/Training";
+import type { ResponseObject } from "@/modules/04_registryNew/interface/response/Training";
 import { QForm, useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -142,7 +143,7 @@ const dialogStatus = ref<string>("create");
 const historyDialog = ref<boolean>(false);
 const editId = ref<string>("");
 
-const trainData = reactive({
+const trainData = reactive<RequestItemsObject>({
   name: "",
   topic: "",
   yearly: new Date().getFullYear(),
@@ -178,8 +179,8 @@ const historyPagination = ref({
   rowsPerPage: historyFormFilter.pageSize,
 });
 
-const rows = ref<any>([]);
-const historyRows = ref<any>([]);
+const rows = ref<ResponseObject[]>([]);
+const historyRows = ref<ResponseObject[]>([]);
 
 const visibleColumns = ref<string[]>([
   "name", // ชื่อโครงงาน
@@ -365,17 +366,6 @@ watch(
     }
   }
 );
-// async function isDateCheck() {
-//   if (isDate.value === "false") {
-//     trainData.startYear = +trainData.startDate.toString().slice(11, 15);
-//     trainData.finishYear = +trainData.endDate.toString().slice(11, 15);
-//     trainData.startDate = new Date(trainData.startYear + "-01-01");
-//     trainData.endDate = new Date(trainData.finishYear + "-01-01");
-//   } else {
-//     trainData.startDate = new Date(trainData.startYear + "-01-01");
-//     trainData.endDate = new Date(trainData.finishYear + "-01-01");
-//   }
-// }
 
 async function fetchData(id: string) {
   showLoader();
@@ -383,7 +373,6 @@ async function fetchData(id: string) {
     .get(config.API.profileNewTrainingByProfileId(id))
     .then(async (res) => {
       rows.value = res.data.result;
-      console.log(rows.value);
     })
     .catch((err) => {
       messageError($q, err);
@@ -520,30 +509,7 @@ onMounted(async () => {
     </template>
     <template v-slot:body="props" v-if="mode === 'table'">
       <q-tr :props="props" class="cursor-pointer">
-        <q-td
-          v-for="col in props.cols"
-          :key="col.id"
-          @click="
-            () => {
-              dialogStatus = 'edit';
-              editId = props.row.id;
-              isDate = props.row.isDate ? 'true' : 'false';
-              trainData.name = props.row.name;
-              trainData.topic = props.row.topic;
-              trainData.yearly = props.row.yearly;
-              trainData.place = props.row.place;
-              trainData.duration = props.row.duration;
-              trainData.department = props.row.department;
-              trainData.numberOrder = props.row.numberOrder;
-              trainData.dateOrder = props.row.dateOrder;
-              trainData.startDate = props.row.startDate;
-              trainData.endDate = props.row.endDate;
-              trainData.startYear = +props.row.startDate.slice(0, 4);
-              trainData.finishYear = +props.row.endDate.slice(0, 4);
-              dialog = true;
-            }
-          "
-        >
+        <q-td v-for="col in props.cols" :key="col.id">
           <div v-if="col.name === 'startDate' || col.name === 'endDate'">
             <div v-if="props.row.isDate">{{ date2Thai(col.value) }}</div>
             <div v-else>
@@ -559,6 +525,38 @@ onMounted(async () => {
           </div>
         </q-td>
         <q-td auto-width>
+          <q-btn
+            color="edit"
+            flat
+            dense
+            round
+            class="q-mr-xs"
+            size="14px"
+            icon="edit"
+            clickable
+            @click="
+              () => {
+                dialogStatus = 'edit';
+                editId = props.row.id;
+                isDate = props.row.isDate ? 'true' : 'false';
+                trainData.name = props.row.name;
+                trainData.topic = props.row.topic;
+                trainData.yearly = props.row.yearly;
+                trainData.place = props.row.place;
+                trainData.duration = props.row.duration;
+                trainData.department = props.row.department;
+                trainData.numberOrder = props.row.numberOrder;
+                trainData.dateOrder = props.row.dateOrder;
+                trainData.startDate = props.row.startDate;
+                trainData.endDate = props.row.endDate;
+                trainData.startYear = +props.row.startDate.slice(0, 4);
+                trainData.finishYear = +props.row.endDate.slice(0, 4);
+                dialog = true;
+              }
+            "
+          >
+            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+          </q-btn>
           <q-btn
             color="info"
             flat
@@ -1087,6 +1085,7 @@ onMounted(async () => {
             row-key="name"
             flat
             :filter="historyFormFilter.keyword"
+            v-model:pagination="historyPagination"
             bordered
             :paging="true"
             dense
@@ -1102,7 +1101,7 @@ onMounted(async () => {
                 <q-th auto-width />
               </q-tr>
             </template>
-            <template v-slot:body="props" v-if="mode === 'table'">
+            <template v-slot:body="props">
               <q-tr :props="props" class="cursor-pointer">
                 <q-td v-for="col in props.cols" :key="col.id">
                   <div
@@ -1125,7 +1124,6 @@ onMounted(async () => {
                     {{ col.value ? col.value : "-" }}
                   </div>
                 </q-td>
-                <q-td auto-width> </q-td>
               </q-tr>
             </template>
           </d-table>
diff --git a/src/modules/04_registryNew/interface/request/Training.ts b/src/modules/04_registryNew/interface/request/Training.ts
new file mode 100644
index 000000000..e5b86c386
--- /dev/null
+++ b/src/modules/04_registryNew/interface/request/Training.ts
@@ -0,0 +1,17 @@
+interface RequestItemsObject {
+    name: string,
+    topic: string,
+    yearly: number,
+    place: string,
+    duration: string,
+    department: string,
+    numberOrder: string,
+    dateOrder: Date,
+    startDate: Date,
+    endDate: Date,
+    startYear: number,
+    finishYear: number,
+  }
+  
+  export type { RequestItemsObject };
+
diff --git a/src/modules/04_registryNew/interface/response/Training.ts b/src/modules/04_registryNew/interface/response/Training.ts
new file mode 100644
index 000000000..79f31b546
--- /dev/null
+++ b/src/modules/04_registryNew/interface/response/Training.ts
@@ -0,0 +1,26 @@
+//ข้อมูล
+interface ResponseObject {
+    createdAt: Date 
+    createdFullName: string
+    createdUserId: string
+    dateOrder: Date
+    dateStart: Date | null
+    dateEnd: Date | null
+    department: string
+    duration : string
+    id: string
+    isActive: boolean
+    isDate: boolean
+    lastUpdateFullName: string
+    lastUpdateUserId: string
+    lastUpdateAt: Date
+    name: string
+    numberOrder: string
+    place: string
+    profileId: string
+    topic: string
+    yearly: number
+  }
+  
+  export type { ResponseObject };
+  
\ No newline at end of file