diff --git a/package.json b/package.json
index a0c03662..edef0327 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "quasar": "^2.11.1",
     "socket.io-client": "^4.7.4",
     "structure-chart": "^0.0.9",
+    "swagger-ui": "^5.27.1",
     "v-code-diff": "^1.12.0",
     "vue": "^3.4.15",
     "vue-currency-input": "^3.0.5",
@@ -44,6 +45,7 @@
     "@rushstack/eslint-patch": "^1.1.4",
     "@types/jsdom": "^20.0.1",
     "@types/node": "^18.11.12",
+    "@types/swagger-ui": "^5.21.1",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitejs/plugin-vue-jsx": "^3.0.0",
     "@vue/eslint-config-prettier": "^7.0.0",
diff --git a/src/modules/06_webservices/components/DialogUsability.vue b/src/modules/06_webservices/components/DialogUsability.vue
index 302b246b..4f8a0882 100644
--- a/src/modules/06_webservices/components/DialogUsability.vue
+++ b/src/modules/06_webservices/components/DialogUsability.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import DialogHeader from "@/components/DialogHeader.vue";
+import SwaggerViewer from "@/modules/06_webservices/components/SwaggerViewer.vue";
 
 const modal = defineModel<boolean>("modal", { required: true });
 
@@ -8,12 +9,14 @@ function onCloseDialog() {
 }
 </script>
 <template>
-  <q-dialog v-model="modal" persistent>
-    <q-card style="width: 700px; max-width: 80vw">
+  <q-dialog v-model="modal" persistent maximized>
+    <q-card style="max-width: 85vw; height: 85vh">
       <DialogHeader tittle="วิธีการใช้งาน" :close="onCloseDialog" />
       <q-separator />
 
-      <q-card-section> </q-card-section>
+      <q-card-section>
+        <SwaggerViewer />
+      </q-card-section>
 
       <q-separator />
 
diff --git a/src/modules/06_webservices/components/SwaggerViewer.vue b/src/modules/06_webservices/components/SwaggerViewer.vue
new file mode 100644
index 00000000..fa201dcf
--- /dev/null
+++ b/src/modules/06_webservices/components/SwaggerViewer.vue
@@ -0,0 +1,91 @@
+<template>
+  <div id="swagger-ui" />
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from "vue";
+import SwaggerUI from "swagger-ui";
+import "swagger-ui/dist/swagger-ui.css";
+
+// 🔁 ใส่ URL ของ Swagger JSON API ของคุณตรงนี้
+// const swaggerUrl: string = "https://petstore.swagger.io/v2/swagger.json";
+
+onMounted(() => {
+  SwaggerUI({
+    dom_id: "#swagger-ui",
+    // url: swaggerUrl,
+    spec: {
+      openapi: "3.0.0",
+      info: {
+        title: "API Web service",
+        version: "1.0.0",
+        description: "Example API for getting registry data",
+      },
+      servers: [
+        {
+          url: "https://api.example.com",
+        },
+      ],
+      paths: {
+        "/registry": {
+          get: {
+            summary: "รายการข้อมูลทะเบียนประวัติข้าราชการ",
+            description: "แสดงข้อมูลข้าราชการทั้งหมด",
+            tags: ["ทะเบียนประวัติ"],
+            responses: {
+              "200": {
+                description: "รายการข้อมูลทะเบียนประวัติ",
+                content: {
+                  "application/json": {
+                    schema: {
+                      type: "array",
+                      items: {
+                        $ref: "#/components/schemas/Registry",
+                      },
+                    },
+                    example: [
+                      {
+                        id_card: "1234567890123",
+                        firstname: "Developer",
+                        lastname: "Lastname",
+                      },
+                    ],
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+      components: {
+        schemas: {
+          Registry: {
+            type: "object",
+            properties: {
+              id_card: {
+                type: "string",
+                example: "1234567890123",
+              },
+              firstname: {
+                type: "string",
+                example: "Developer",
+              },
+              lastname: {
+                type: "string",
+                example: "Lastname",
+              },
+            },
+            required: ["id_card", "firstname", "lastname"],
+          },
+        },
+      },
+    },
+  });
+});
+</script>
+
+<style>
+.swagger-ui h2.title {
+  line-height: 1rem;
+}
+</style>
diff --git a/src/modules/06_webservices/view/main.vue b/src/modules/06_webservices/view/main.vue
index 00478fc2..ab029912 100644
--- a/src/modules/06_webservices/view/main.vue
+++ b/src/modules/06_webservices/view/main.vue
@@ -4,6 +4,7 @@ import { ref } from "vue";
 /** importComponents*/
 import ListView from "@/modules/06_webservices/view/listView.vue";
 import LogView from "@/modules/06_webservices/view/historyView.vue";
+import ManageWebServices from "@/modules/06_webservices/view/manage.vue";
 
 const tabs = ref<string>("list");
 </script>
@@ -27,12 +28,17 @@ const tabs = ref<string>("list");
     >
       <q-tab name="list" label="รายการ web services" />
       <q-tab name="log" label="ประวัติการใช้งาน" />
+      <q-tab name="manage" label="จัดการ API" />
     </q-tabs>
     <q-separator />
 
     <q-tab-panels v-model="tabs" animated>
       <q-tab-panel name="list"> <ListView /> </q-tab-panel>
       <q-tab-panel name="log"> <LogView /> </q-tab-panel>
+      <q-tab-panel name="manage">
+        <div style="min-height: 50em"></div>
+        <!-- <ManageWebServices /> -->
+      </q-tab-panel>
     </q-tab-panels>
   </q-card>
 </template>
diff --git a/src/modules/06_webservices/view/manage.vue b/src/modules/06_webservices/view/manage.vue
new file mode 100644
index 00000000..e5f4084c
--- /dev/null
+++ b/src/modules/06_webservices/view/manage.vue
@@ -0,0 +1,267 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** importType*/
+import type { QTableProps } from "quasar";
+import type { ListWebServices } from "@/modules/06_webservices/interface/index/Main";
+import type { ResApiName } from "@/modules/06_webservices/interface/response/Main";
+
+/** importComponents*/
+import DialogApiKey from "@/modules/06_webservices/components/DialogApiKey.vue"; //สร้าง API Key
+import DialogUsability from "@/modules/06_webservices/components/DialogUsability.vue"; //การใช้งาน
+
+/** use*/
+const $q = useQuasar();
+const {
+  dialogRemove,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  date2Thai,
+  onSearchDataTable,
+} = useCounterMixin();
+
+/** Table*/
+const rows = ref<ListWebServices[]>([]); //รายการ webservices
+const rowsMain = ref<ListWebServices[]>([]); //รายการ webservices
+const keyword = ref<string>(""); //คำค้นหา รายการ webservices
+const visibleColumns = ref<string[]>([
+  "name",
+  "apiNames",
+  "amount",
+  "createdAt",
+  "createdFullName",
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ-คำอธิบาย",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "apiNames",
+    align: "left",
+    label: "API ที่เข้าถึง",
+    sortable: true,
+    field: "apiNames",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val) {
+      return val
+        .map((e: ResApiName) => `<div class='q-mt-sm'>-${e.name}</div>`)
+        .join("");
+    },
+  },
+  {
+    name: "amount",
+    align: "left",
+    label: "สถิติ ",
+    sortable: true,
+    field: "amount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่สร้าง",
+    sortable: true,
+    field: "createdAt",
+    format(val) {
+      return date2Thai(val, false, true);
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+/** API Key*/
+const modalApiKey = ref<boolean>(false); //popup สร้าง API Key
+
+/** usability*/
+const modalUsability = ref<boolean>(false); //popup การใช้งาน
+
+/** ฟังก์ชันเรียกข้อมูลรายการ Web services*/
+async function fetchListWebServices() {
+  showLoader();
+  await http
+    .get(config.API.apiKeyMain + "/list")
+    .then(async (res) => {
+      const data = await res.data.result;
+      rows.value = data;
+      rowsMain.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ฟังก์ชัน ลบข้อมูลรายการ Web services
+ * @param id รายการ Web services ที่ต้องการลบ
+ * เมื่อสำเร็จจะเรียกฟังก์ชัน 'fetchListWebServices' มาเรียกข้อมูลรายการ web servcice ใหม่
+ */
+function onDeleteData(id: string) {
+  dialogRemove($q, () => {
+    showLoader();
+    http
+      .delete(config.API.apiKeyMain + `/${id}`)
+      .then(async () => {
+        // เรียกข้อมูลรายการ web servcice ใหม่
+        await fetchListWebServices();
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    keyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
+/**  hook เมื่อเรียก Components จะเรียกฟังก์ชัน 'fetchListWebServices' เรียกข้อมูลรายการ webservices*/
+onMounted(() => {
+  fetchListWebServices();
+});
+</script>
+
+<template>
+  <div class="row items-center">
+    <q-space />
+    <q-btn
+      flat
+      color="public"
+      label="วิธีการใช้งาน"
+      @click.pervent="modalUsability = true"
+    />
+  </div>
+
+  <div class="items-center col-12 row q-col-gutter-sm">
+    <q-btn
+      class="q-ml-sm"
+      flat
+      round
+      dense
+      color="primary"
+      icon="add"
+      @click.pervent="modalApiKey = true"
+    >
+      <q-tooltip>สร้าง API Key </q-tooltip>
+    </q-btn>
+    <q-space />
+    <q-input
+      borderless
+      dense
+      outlined
+      v-model="keyword"
+      placeholder="ค้นหา"
+      @keydown.enter.prevent="serchDataTable"
+    >
+      <template v-slot:append>
+        <q-icon name="search" />
+      </template>
+    </q-input>
+    <q-select
+      v-model="visibleColumns"
+      multiple
+      outlined
+      dense
+      options-dense
+      :display-value="$q.lang.table.columns"
+      emit-value
+      map-options
+      :options="columns"
+      option-value="name"
+      style="min-width: 140px"
+    />
+  </div>
+
+  <!-- Table -->
+  <div class="col-12 q-pt-sm">
+    <d-table
+      ref="table"
+      :columns="columns"
+      :rows="rows"
+      row-key="id"
+      flat
+      bordered
+      :paging="true"
+      dense
+      :rows-per-page-options="[10, 25, 50, 100]"
+      :visible-columns="visibleColumns"
+    >
+      <template v-slot:header="props">
+        <q-tr :props="props">
+          <q-th auto-width />
+          <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 auto-width>
+            <q-btn
+              dense
+              flat
+              round
+              color="red"
+              @click="onDeleteData(props.row.id)"
+              icon="delete"
+            >
+              <q-tooltip>ลบข้อมูล</q-tooltip>
+            </q-btn></q-td
+          >
+          <q-td v-for="col in props.cols" :key="col.name" :props="props">
+            <div v-html="col.value ? col.value : '-'"></div>
+
+            <div></div>
+          </q-td>
+        </q-tr>
+      </template>
+    </d-table>
+  </div>
+
+  <!-- สร้าง API Key -->
+  <DialogApiKey
+    v-model:modal="modalApiKey"
+    :fetch-data="fetchListWebServices"
+  />
+
+  <!-- การใช้งาน -->
+  <DialogUsability v-model:modal="modalUsability" />
+</template>
+
+<style scoped></style>