diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue
index 4c789a446..1c9025ccc 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue
@@ -1,14 +1,26 @@
 <script setup lang="ts">
-import { ref, reactive } from "vue";
+import { ref, reactive, onMounted } from "vue";
 import { QForm, useQuasar } from "quasar";
 import dialogHeader from "@/components/DialogHeader.vue";
 import { useCounterMixin } from "@/stores/mixin";
+import type { RequestItemsObject } from "@/modules/04_registryNew/interface/request/SpecialSkill";
+import type { ResponseObject } from "@/modules/04_registryNew/interface/response/SpecialSkill";
 import type { QTableProps } from "quasar";
+import { useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const mixin = useCounterMixin();
 const $q = useQuasar();
 const mode = ref<string>("table");
-const { dialogConfirm } = mixin;
+const {
+  dialogRemove,
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+} = mixin;
 const columns = ref<QTableProps["columns"]>([
   {
     name: "field",
@@ -57,41 +69,21 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 
 const historyDialog = ref<boolean>(false);
-const rows = [
-  {
-    field: "กีต้าร์",
-    detail: "จับคอร์ดได้",
-    remark: "เล่นดีมาก",
-    reference: "อ้างอิง",
-  },
-  {
-    field: "ว่ายน้ำ",
-    detail: "ดำน้ำนาน 5 นาที",
-    remark: "ว่ายน้ำเก่งมาก",
-    reference: "อ้างอิง",
-  },
-  {
-    field: "กีฬา",
-    detail: "จับคอร์ดได้",
-    remark: "เล่นดีมาก",
-    reference: "อ้างอิง",
-  },
-  {
-    field: "การเรียน",
-    detail: "เรียนเก่งมาก",
-    remark: "ตั้งใจเรียนมาก",
-    reference: "อ้างอิง",
-  },
-];
 const dialog = ref<boolean>(false);
-const backgroundColor = "grey-2";
+const dialogStatus = ref<string>("create");
+const rows = ref<ResponseObject[]>([]);
+const historyRows = ref<ResponseObject[]>([]);
+const route = useRoute();
+const id = ref<string>(route.params.id.toString());
+const editId = ref<string>("");
+
 const formFilter = reactive({
   page: 1,
   pageSize: 10,
   keyword: "",
 });
 
-const specialSkill = reactive({
+const specialSkill = reactive<RequestItemsObject>({
   field: "",
   detail: "",
   remark: "",
@@ -103,12 +95,30 @@ const pagination = ref({
   rowsPerPage: formFilter.pageSize,
 });
 
+const historyFormFilter = reactive({
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+});
+
+const historyPagination = ref({
+  page: historyFormFilter.page,
+  rowsPerPage: historyFormFilter.pageSize,
+});
+
 const visibleColumns = ref<string[]>([
   "field",
   "detail",
   "remark",
   "reference",
 ]);
+
+const historyVisibleColumns = ref<string[]>([
+  "field",
+  "detail",
+  "remark",
+  "reference",
+]);
 function closeDialog() {
   dialog.value = false;
 }
@@ -125,16 +135,127 @@ async function onSubmit() {
   dialogConfirm(
     $q,
     async () => {
+      dialogStatus.value === "create" ? addData() : editData(editId.value);
       closeDialog();
     },
     "ยืนยันการบันทึกข้อมูล",
     "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
   );
 }
+
+function clearForm() {
+  specialSkill.detail = "";
+  specialSkill.field = "";
+  specialSkill.reference = "";
+  specialSkill.remark = "";
+}
+
+async function fetchData(id: string) {
+  showLoader();
+  await http
+    .get(config.API.profileNewAbilityByProfileId(id))
+    .then(async (res) => {
+      rows.value = res.data.result;
+      console.log(rows.value);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function fetchHistoryData(id: string) {
+  showLoader();
+  await http
+    .get(config.API.profileNewAbilityHisByAbilityId(id))
+    .then(async (res) => {
+      historyRows.value = res.data.result;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function addData() {
+  await http
+    .post(config.API.profileNewAbility, {
+      profileId: id.value,
+      isActive: true,
+      remark: specialSkill.remark,
+      field: specialSkill.field,
+      reference: specialSkill.reference,
+      detail: specialSkill.detail,
+      dateStart: null,
+      dateEnd: null,
+    })
+    .then(() => {
+      fetchData(id.value);
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function editData(idData: string) {
+  await http
+    .patch(config.API.profileNewAbilityByAbilityId(idData), {
+      profileId: id.value,
+      isActive: true,
+      remark: specialSkill.remark,
+      field: specialSkill.field,
+      reference: specialSkill.reference,
+      detail: specialSkill.detail,
+      dateStart: null,
+      dateEnd: null,
+    })
+    .then(() => {
+      fetchData(id.value);
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function deleteData(idData: string) {
+  await http
+    .delete(config.API.profileNewAbilityByAbilityId(idData))
+    .then(() => {
+      fetchData(id.value);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(async () => {
+  await fetchData(id.value);
+});
 </script>
 <template>
   <q-toolbar style="padding: 0px" class="text-primary">
-    <q-btn flat round dense icon="add" @click="() => (dialog = true)">
+    <q-btn
+      flat
+      round
+      dense
+      icon="add"
+      @click="() => ((dialogStatus = 'create'), clearForm(), (dialog = true))"
+    >
       <q-tooltip>เพิ่ม</q-tooltip>
     </q-btn>
     <q-space />
@@ -208,6 +329,7 @@ async function onSubmit() {
     :columns="columns"
     :rows="rows"
     :paging="true"
+    :filter="formFilter.keyword"
     v-model:pagination="pagination"
     :rows-per-page-options="[20, 50, 100]"
     :visible-columns="visibleColumns"
@@ -222,10 +344,33 @@ async function onSubmit() {
     </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="dialog = true">
+        <q-td v-for="col in props.cols" :key="col.id">
           <div>{{ col.value ? col.value : "-" }}</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;
+                specialSkill.detail = props.row.detail;
+                specialSkill.field = props.row.field;
+                specialSkill.reference = props.row.reference;
+                specialSkill.remark = props.row.remark;
+                dialog = true;
+              }
+            "
+          >
+            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+          </q-btn>
           <q-btn
             color="info"
             flat
@@ -233,10 +378,28 @@ async function onSubmit() {
             round
             size="14px"
             icon="mdi-history"
-            @click="historyDialog = true"
+            @click="
+              fetchHistoryData(props.row.id);
+              historyDialog = true;
+            "
           >
             <q-tooltip>ประวัติแก้ไขความสามารถพิเศษ</q-tooltip>
           </q-btn>
+          <q-btn
+            color="red"
+            flat
+            dense
+            round
+            size="12px"
+            icon="mdi-delete"
+            clickable
+            @click.stop="
+              dialogRemove($q, async () => await deleteData(props.row.id))
+            "
+            v-close-popup
+          >
+            <q-tooltip>ลบข้อมูล</q-tooltip>
+          </q-btn>
         </q-td>
       </q-tr>
     </template>
@@ -251,7 +414,17 @@ async function onSubmit() {
               round
               color="primary"
               icon="edit"
-              @click="dialog = true"
+              @click="
+                () => {
+                  dialogStatus = 'edit';
+                  editId = props.row.id;
+                  specialSkill.detail = props.row.detail;
+                  specialSkill.field = props.row.field;
+                  specialSkill.reference = props.row.reference;
+                  specialSkill.remark = props.row.remark;
+                  dialog = true;
+                }
+              "
             >
               <q-tooltip>แก้ไขข้อมูล</q-tooltip>
             </q-btn>
@@ -261,7 +434,10 @@ async function onSubmit() {
               round
               color="blue"
               icon="mdi-history"
-              @click="historyDialog = true"
+              @click="
+                fetchHistoryData(props.row.id);
+                historyDialog = true;
+              "
             >
               <q-tooltip>ประวัติแก้ไขความสามารถพิเศษ</q-tooltip>
             </q-btn>
@@ -352,7 +528,6 @@ async function onSubmit() {
 
   <q-dialog v-model="historyDialog" class="dialog" persistent>
     <q-card style="min-width: 70%" class="bg-white">
-      console.log("🚀 ~ bg-white:", bg-white)
       <q-form @submit.prevent greedy @validation-success="validateForm">
         <q-card-section class="flex justify-between" style="padding: 0">
           <dialog-header
@@ -368,7 +543,7 @@ async function onSubmit() {
               dense
               outlined
               bg-color="white"
-              v-model="formFilter.keyword"
+              v-model="historyFormFilter.keyword"
               label="ค้นหา"
               class="q-mr-sm"
             >
@@ -378,7 +553,7 @@ async function onSubmit() {
             </q-input>
 
             <q-select
-              v-model="visibleColumns"
+              v-model="historyVisibleColumns"
               multiple
               outlined
               dense
@@ -396,15 +571,17 @@ async function onSubmit() {
           <d-table
             ref="table"
             :columns="columns"
-            :rows="rows"
+            :rows="historyRows"
             row-key="name"
             flat
             bordered
             :paging="true"
             dense
+            :filter="historyFormFilter.keyword"
+            v-model:pagination="historyPagination"
             :rows-per-page-options="[20, 50, 100]"
             class="custom-header-table"
-            :visible-columns="visibleColumns"
+            :visible-columns="historyVisibleColumns"
           >
             <template v-slot:header="props">
               <q-tr :props="props">
@@ -414,13 +591,12 @@ async function onSubmit() {
                 <q-th auto-width />
               </q-tr>
             </template>
-            <template v-slot:body="props">
+            <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">
-                  <div>
-                    {{ col.value }}
-                  </div>
+                  <div>{{ 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/SpecialSkill.ts b/src/modules/04_registryNew/interface/request/SpecialSkill.ts
new file mode 100644
index 000000000..5e1aeea3e
--- /dev/null
+++ b/src/modules/04_registryNew/interface/request/SpecialSkill.ts
@@ -0,0 +1,10 @@
+interface RequestItemsObject {
+    field: string;
+    detail: string;
+    remark: string;
+    reference: string;
+  }
+  
+  export type { RequestItemsObject };
+
+  
\ No newline at end of file
diff --git a/src/modules/04_registryNew/interface/response/SpecialSkill.ts b/src/modules/04_registryNew/interface/response/SpecialSkill.ts
new file mode 100644
index 000000000..bf7750421
--- /dev/null
+++ b/src/modules/04_registryNew/interface/response/SpecialSkill.ts
@@ -0,0 +1,21 @@
+//ข้อมูล
+interface ResponseObject {
+    createdAt: Date 
+    createdFullName: string
+    createdUserId: string
+    dateStart: Date | null
+    dateEnd: Date | null
+    detail: string 
+    field: string
+    id: string
+    isActive: boolean
+    lastUpdateFullName: string
+    lastUpdateUserId: string
+    lastUpdatedAt: Date
+    profileId: string
+    reference: string
+    remark: string
+  }
+  
+  export type { ResponseObject };
+  
\ No newline at end of file