diff --git a/src/api/registry/api.registry.ts b/src/api/registry/api.registry.ts
index cee74e8de..849569599 100644
--- a/src/api/registry/api.registry.ts
+++ b/src/api/registry/api.registry.ts
@@ -50,8 +50,17 @@ profileNewEducationHisByEducationId: (educationsId: string) =>
 profileNewAbility: `${registryNew}ability`,
 profileNewAbilityByProfileId: (profileId: string) =>
   `${registryNew}ability/${profileId}`,
-profileNewAbilityByAbilityId: (educationId: string) =>
-  `${registryNew}ability/${educationId}`,
+profileNewAbilityByAbilityId: (abilityId: string) =>
+  `${registryNew}ability/${abilityId}`,
 profileNewAbilityHisByAbilityId: (abilityId: string) =>
   `${registryNew}ability/history/${abilityId}`,
+
+  // ใบอนุญาตประกอบวิชาชีพ
+profileNewCertificate: `${registryNew}certificate`,
+profileNewCertificateByProfileId: (profileId: string) =>
+  `${registryNew}certificate/${profileId}`,
+profileNewCertificateByCertificateId: (certificateId: string) =>
+  `${registryNew}certificate/${certificateId}`,
+profileNewCertificateHisByCertificateId: (certificateId: string) =>
+  `${registryNew}certificate/history/${certificateId}`,
 };
diff --git a/src/modules/04_registryNew/components/detail/Achievement/01_ProfessionalLicense.vue b/src/modules/04_registryNew/components/detail/Achievement/01_ProfessionalLicense.vue
index 2d71d5130..d745956c5 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/01_ProfessionalLicense.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/01_ProfessionalLicense.vue
@@ -1,18 +1,34 @@
 <script setup lang="ts">
-import { ref, reactive, watch } from "vue";
-import moment from "moment";
+import { ref, reactive, watch, onMounted } from "vue";
 import dialogHeader from "@/components/DialogHeader.vue";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { QForm, useQuasar } from "quasar";
-import type { ProfesLicenseObject } from "@/modules/04_registryNew/interface/index/profesLicense";
+import { useRoute } from "vue-router";
+import type { RequestItemsObject } from "@/modules/04_registryNew/interface/request/ProfesLicense";
+import type { ResponseObject } from "@/modules/04_registryNew/interface/response/ProfesLicense";
+import http from "@/plugins/http";
+import config from "@/app.config";
 const mixin = useCounterMixin();
 const $q = useQuasar();
-const { dialogConfirm, date2Thai } = mixin;
+const {
+  dialogRemove,
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  date2Thai,
+} = mixin;
 
 const historyDialog = ref<boolean>(false);
-const addDataDialog = ref<boolean>(false);
 const mode = ref<string>("table");
+const dialog = ref<boolean>(false);
+const route = useRoute();
+const id = ref<string>(route.params.id.toString());
+const dialogStatus = ref<string>("create");
+const editId = ref<string>("");
+
 const columns = ref<QTableProps["columns"]>([
   {
     name: "certificateType",
@@ -53,6 +69,7 @@ const columns = ref<QTableProps["columns"]>([
     label: "วันที่ออกใบอนุญาต",
     sortable: true,
     field: "issueDate",
+    format: (v) => date2Thai(v),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -63,6 +80,7 @@ const columns = ref<QTableProps["columns"]>([
     align: "left",
     label: "วันที่หมดอายุ",
     sortable: true,
+    format: (v) => date2Thai(v),
     field: "expireDate",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -71,7 +89,7 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-const profesLicenseData = reactive<ProfesLicenseObject>({
+const profesLicenseData = reactive<RequestItemsObject>({
   certificateType: "",
   issuer: "",
   certificateNo: "",
@@ -79,47 +97,30 @@ const profesLicenseData = reactive<ProfesLicenseObject>({
   expireDate: new Date(),
 });
 
+const rows = ref<ResponseObject[]>([]);
+const historyRows = ref<ResponseObject[]>([]);
+
 const formFilter = reactive({
   page: 1,
   pageSize: 10,
   keyword: "",
 });
 
+const historyFormFilter = reactive({
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+});
+
 const pagination = ref({
   page: formFilter.page,
   rowsPerPage: formFilter.pageSize,
 });
 
-const row = [
-  {
-    certificateType: "ใบอนุญาต",
-    issuer: "หน่วยงานเชียงใหม่",
-    certificateNo: "12",
-    issueDate: new Date(),
-    expireDate: new Date(),
-  },
-  {
-    certificateType: "ใบอนุญาต",
-    issuer: "หน่วยงานพะเยา",
-    certificateNo: "136",
-    issueDate: new Date(),
-    expireDate: new Date(),
-  },
-  {
-    certificateType: "ใบอนุญาต",
-    issuer: "หน่วยงานโคราช",
-    certificateNo: "12",
-    issueDate: new Date(),
-    expireDate: new Date(),
-  },
-  {
-    certificateType: "ใบอนุญาต",
-    issuer: "หน่วยงานกทม",
-    certificateNo: "11",
-    issueDate: new Date(),
-    expireDate: new Date(),
-  },
-];
+const historyPagination = ref({
+  page: historyFormFilter.page,
+  rowsPerPage: historyFormFilter.pageSize,
+});
 
 const visibleColumns = ref<string[]>([
   "certificateType",
@@ -129,6 +130,14 @@ const visibleColumns = ref<string[]>([
   "expireDate",
 ]);
 
+const historyVisibleColumns = ref<string[]>([
+  "certificateType",
+  "issuer",
+  "certificateNo",
+  "issueDate",
+  "expireDate",
+]);
+
 function validateForm() {
   onSubmit();
 }
@@ -137,6 +146,7 @@ async function onSubmit() {
   dialogConfirm(
     $q,
     async () => {
+      dialogStatus.value === "create" ? addData() : editData(editId.value);
       closeDialog();
     },
     "ยืนยันการบันทึกข้อมูล",
@@ -145,11 +155,112 @@ async function onSubmit() {
 }
 
 function closeDialog() {
-  addDataDialog.value = false;
+  dialog.value = false;
 }
 function closeHistoryDialog() {
   historyDialog.value = false;
 }
+
+async function fetchData(id: string) {
+  showLoader();
+  await http
+    .get(config.API.profileNewCertificateByProfileId(id))
+    .then(async (res) => {
+      rows.value = res.data.result;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function clearForm() {
+  profesLicenseData.expireDate = new Date();
+  profesLicenseData.issueDate = new Date();
+  profesLicenseData.certificateNo = "";
+  profesLicenseData.certificateType = "";
+  profesLicenseData.issuer = "";
+}
+
+async function addData() {
+  await http
+    .post(config.API.profileNewCertificate, {
+      profileId: id.value,
+      expireDate: profesLicenseData.expireDate,
+      issueDate: profesLicenseData.issueDate,
+      certificateNo: profesLicenseData.certificateNo,
+      certificateType: profesLicenseData.certificateType,
+      issuer: profesLicenseData.issuer,
+      isActive: true,
+    })
+    .then(() => {
+      fetchData(id.value);
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function editData(idData: string) {
+  await http
+    .patch(config.API.profileNewCertificateByCertificateId(idData), {
+      expireDate: profesLicenseData.expireDate,
+      issueDate: profesLicenseData.issueDate,
+      certificateNo: profesLicenseData.certificateNo,
+      certificateType: profesLicenseData.certificateType,
+      issuer: profesLicenseData.issuer,
+      isActive: true,
+    })
+    .then(() => {
+      fetchData(id.value);
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function deleteData(idData: string) {
+  await http
+    .delete(config.API.profileNewCertificateByCertificateId(idData))
+    .then(() => {
+      fetchData(id.value);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function fetchHistoryData(id: string) {
+  showLoader();
+  await http
+    .get(config.API.profileNewCertificateHisByCertificateId(id))
+    .then(async (res) => {
+      historyRows.value = res.data.result;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(async () => {
+  await fetchData(id.value);
+});
 </script>
 
 <template>
@@ -161,12 +272,27 @@ function closeHistoryDialog() {
       color="primary"
       icon="add"
       size="16px"
-      @click="addDataDialog = true"
+      @click="
+        dialogStatus = 'create';
+        clearForm();
+        dialog = true;
+      "
     >
       <q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn
     >
 
     <q-space />
+    <q-input
+      dense
+      outlined
+      v-model="formFilter.keyword"
+      label="ค้นหา"
+      class="q-mr-sm"
+    >
+      <template v-slot:append>
+        <q-icon name="search" />
+      </template>
+    </q-input>
     <q-select
       v-if="mode === 'table'"
       v-model="visibleColumns"
@@ -219,12 +345,13 @@ function closeHistoryDialog() {
     :grid="mode === 'card'"
     ref="table"
     :columns="columns"
-    :rows="row"
+    :rows="rows"
     row-key="name"
     flat
     bordered
     :paging="true"
     dense
+    :filter="formFilter.keyword"
     v-model:pagination="pagination"
     :rows-per-page-options="[20, 50, 100]"
     class="custom-header-table"
@@ -240,19 +367,36 @@ function closeHistoryDialog() {
     </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="addDataDialog = true"
-        >
-          <div v-if="col.name === 'issueDate' || col.name === 'expireDate'">
-            {{ col.value ? date2Thai(col.value) : "-" }}
-          </div>
-          <div v-else>
+        <q-td v-for="col in props.cols" :key="col.id">
+          <div>
             {{ col.value }}
           </div>
         </q-td>
         <q-td auto-width>
+          <q-btn
+            color="primary"
+            flat
+            dense
+            round
+            class="q-mr-xs"
+            size="14px"
+            icon="mdi-pencil-outline"
+            clickable
+            @click="
+              () => {
+                dialogStatus = 'edit';
+                editId = props.row.id;
+                profesLicenseData.certificateType = props.row.certificateType;
+                profesLicenseData.certificateNo = props.row.certificateNo;
+                profesLicenseData.issuer = props.row.issuer;
+                profesLicenseData.issueDate = props.row.issueDate;
+                profesLicenseData.expireDate = props.row.expireDate;
+                dialog = true;
+              }
+            "
+          >
+            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+          </q-btn>
           <q-btn
             color="info"
             flat
@@ -260,9 +404,26 @@ function closeHistoryDialog() {
             round
             size="14px"
             icon="mdi-history"
-            @click="() => (historyDialog = true)"
+            @click="
+              () => (fetchHistoryData(props.row.id), (historyDialog = true))
+            "
           >
-            <q-tooltip>ประวัติแก้ไขประวัติการศึกษา</q-tooltip>
+            <q-tooltip>ประวัติแก้ไขใบอนุญาตประกอบวิชาชีพ</q-tooltip>
+          </q-btn>
+          <q-btn
+            color="red"
+            flat
+            dense
+            round
+            size="14px"
+            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>
@@ -278,18 +439,30 @@ function closeHistoryDialog() {
               round
               color="primary"
               icon="edit"
-              @click="addDataDialog = true"
+              @click="
+                dialogStatus = 'edit';
+                editId = props.row.id;
+                profesLicenseData.certificateType = props.row.certificateType;
+                profesLicenseData.certificateNo = props.row.certificateNo;
+                profesLicenseData.issuer = props.row.issuer;
+                profesLicenseData.issueDate = props.row.issueDate;
+                profesLicenseData.expireDate = props.row.expireDate;
+                dialog = true;
+              "
             >
               <q-tooltip>แก้ไขข้อมูล</q-tooltip>
             </q-btn>
             <q-btn
               flat
               round
-              color="blue"
-              icon="history"
-              @click="historyDialog = true"
+              color="info"
+              icon="mdi-history"
+              size="14px"
+              @click="
+                () => (fetchHistoryData(props.row.id), (historyDialog = true))
+              "
             >
-              <q-tooltip>ประวัติแก้ไขประวัติการศึกษา</q-tooltip>
+              <q-tooltip>ประวัติแก้ไขใบอนุญาตประกอบวิชาชีพ</q-tooltip>
             </q-btn>
           </q-card-actions>
           <q-separator />
@@ -305,13 +478,7 @@ function closeHistoryDialog() {
                 <div>{{ col.label }}</div>
               </div>
               <div class="col">
-                <div
-                  v-if="col.name === 'issueDate' || col.name === 'expireDate'"
-                >
-                  {{ col.value ? date2Thai(col.value) : "-" }}
-                </div>
-
-                <div v-else>{{ col.value }}</div>
+                <div>{{ col.value }}</div>
               </div>
             </div>
           </q-list>
@@ -320,12 +487,12 @@ function closeHistoryDialog() {
     </template>
   </d-table>
 
-  <q-dialog v-model="addDataDialog" class="dialog" persistent>
+  <q-dialog v-model="dialog" class="dialog" persistent>
     <q-card style="min-width: 40%" class="bg-white">
       <q-form @submit.prevent greedy @validation-success="validateForm">
         <q-card-section class="flex justify-between" style="padding: 0">
           <dialog-header
-            tittle="เพิ่มใบอนุญาตประกอบวิชาชีพ"
+            :tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
             :close="closeDialog"
           />
         </q-card-section>
@@ -345,7 +512,7 @@ function closeHistoryDialog() {
           <div class="col">
             <q-input
               outlined
-              v-model="profesLicenseData.certificateType"
+              v-model="profesLicenseData.issuer"
               label="หน่วยงานผู้ออกใบอนุญาต"
               bg-color="white"
               dense
@@ -360,7 +527,7 @@ function closeHistoryDialog() {
           <div class="col">
             <q-input
               outlined
-              v-model="profesLicenseData.certificateType"
+              v-model="profesLicenseData.certificateNo"
               label="เลขที่ใบอนุญาต"
               bg-color="white"
               dense
@@ -475,7 +642,7 @@ function closeHistoryDialog() {
       <q-form @submit.prevent greedy @validation-success="validateForm">
         <q-card-section class="flex justify-between" style="padding: 0">
           <dialog-header
-            tittle="ประวัติแก้ไขประวัติการศึกษา"
+            tittle="ประวัติแก้ไขใบอนุญาตประกอบวิชาชีพ"
             :close="closeHistoryDialog"
           />
         </q-card-section>
@@ -487,7 +654,7 @@ function closeHistoryDialog() {
               dense
               outlined
               bg-color="white"
-              v-model="formFilter.keyword"
+              v-model="historyFormFilter.keyword"
               label="ค้นหา"
               class="q-mr-sm"
             >
@@ -497,7 +664,7 @@ function closeHistoryDialog() {
             </q-input>
 
             <q-select
-              v-model="visibleColumns"
+              v-model="historyVisibleColumns"
               multiple
               outlined
               dense
@@ -515,15 +682,17 @@ function closeHistoryDialog() {
           <d-table
             ref="table"
             :columns="columns"
-            :rows="row"
+            :rows="historyRows"
             row-key="name"
             flat
+            :filter="historyFormFilter.keyword"
+            v-model:pagination="historyPagination"
             bordered
             :paging="true"
             dense
             :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">
@@ -536,13 +705,8 @@ function closeHistoryDialog() {
             <template v-slot:body="props">
               <q-tr :props="props" class="cursor-pointer">
                 <q-td v-for="col in props.cols" :key="col.id">
-                  <div
-                    v-if="col.name === 'issueDate' || col.name === 'expireDate'"
-                  >
-                    {{ col.value ? date2Thai(col.value) : "-" }}
-                  </div>
-                  <div v-else>
-                    {{ col.value }}
+                  <div>
+                    {{ col.value ? col.value : "-" }}
                   </div>
                 </q-td>
               </q-tr>
diff --git a/src/modules/04_registryNew/interface/index/profesLicense.ts b/src/modules/04_registryNew/interface/request/ProfesLicense.ts
similarity index 63%
rename from src/modules/04_registryNew/interface/index/profesLicense.ts
rename to src/modules/04_registryNew/interface/request/ProfesLicense.ts
index a7eb4f4b0..0753c11b4 100644
--- a/src/modules/04_registryNew/interface/index/profesLicense.ts
+++ b/src/modules/04_registryNew/interface/request/ProfesLicense.ts
@@ -1,4 +1,4 @@
-interface ProfesLicenseObject {
+interface RequestItemsObject {
     certificateType: string;
     issuer: string;
     certificateNo: string;
@@ -6,4 +6,4 @@ interface ProfesLicenseObject {
     expireDate: Date;
 }
 
-export type { ProfesLicenseObject };
+export type { RequestItemsObject };
diff --git a/src/modules/04_registryNew/interface/response/ProfesLicense.ts b/src/modules/04_registryNew/interface/response/ProfesLicense.ts
new file mode 100644
index 000000000..307b41c5a
--- /dev/null
+++ b/src/modules/04_registryNew/interface/response/ProfesLicense.ts
@@ -0,0 +1,12 @@
+//ข้อมูล
+interface ResponseObject {
+    issuer: string,
+    certificateType: string,
+    certificateNo: string,
+    issueDate: Date | null,
+    isActive: boolean,
+    expireDate: Date | null
+  }
+  
+  export type { ResponseObject };
+  
\ No newline at end of file