diff --git a/src/api/06_webservices/api.webservices.ts b/src/api/06_webservices/api.webservices.ts
index 01978abe..483e6909 100644
--- a/src/api/06_webservices/api.webservices.ts
+++ b/src/api/06_webservices/api.webservices.ts
@@ -2,8 +2,10 @@ import env from "../index";
 
 const apiKey = `${env.API_URI}/org/apiKey`;
 const apiManage = `${env.API_URI}/org/api-manage/`;
+const apiManualSwagger = `${env.API_URI}/org/api-manage/manual/swagger`;
 
 export default {
   apiKeyMain: apiKey,
   apiManage: apiManage,
+  apiManualSwagger: apiManualSwagger,
 };
diff --git a/src/modules/06_webservices/components/DialogUsability.vue b/src/modules/06_webservices/components/DialogUsability.vue
index 4f8a0882..d1192ecb 100644
--- a/src/modules/06_webservices/components/DialogUsability.vue
+++ b/src/modules/06_webservices/components/DialogUsability.vue
@@ -10,19 +10,13 @@ function onCloseDialog() {
 </script>
 <template>
   <q-dialog v-model="modal" persistent maximized>
-    <q-card style="max-width: 85vw; height: 85vh">
+    <q-card style="max-width: 85vw; height: 90vh">
       <DialogHeader tittle="วิธีการใช้งาน" :close="onCloseDialog" />
       <q-separator />
 
-      <q-card-section>
+      <q-card-section style="height: 80vh; overflow: auto">
         <SwaggerViewer />
       </q-card-section>
-
-      <q-separator />
-
-      <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn label="ปิด" color="secondary" @click.pervent="onCloseDialog()" />
-      </q-card-actions>
     </q-card>
   </q-dialog>
 </template>
diff --git a/src/modules/06_webservices/components/SwaggerViewer.vue b/src/modules/06_webservices/components/SwaggerViewer.vue
index fa201dcf..e62d1071 100644
--- a/src/modules/06_webservices/components/SwaggerViewer.vue
+++ b/src/modules/06_webservices/components/SwaggerViewer.vue
@@ -3,83 +3,34 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from "vue";
+import { onMounted, ref } 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";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
-onMounted(() => {
+// URL ของ Swagger JSON API ของคุณตรงนี้
+// const swaggerUrl: string = "https://petstore.swagger.io/v2/swagger.json";
+const swaggerJson = ref();
+async function fetchSwaggerJson() {
+  swaggerJson.value = await http
+    .get(`${config.API.apiManualSwagger}`)
+    .then((res) => {
+      return res.data.result;
+    })
+    .catch((error) => {
+      console.error("Error fetching Swagger JSON:", error);
+      return null; // หรือจัดการข้อผิดพลาดตามที่คุณต้องการ
+    });
+}
+
+onMounted(async () => {
+  await fetchSwaggerJson();
   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"],
-          },
-        },
-      },
-    },
+    spec: swaggerJson.value,
   });
 });
 </script>
@@ -88,4 +39,11 @@ onMounted(() => {
 .swagger-ui h2.title {
   line-height: 1rem;
 }
+.swagger-ui .scheme-container {
+  margin: 0 0 0px;
+  padding: 0px 0px 20px;
+}
+.swagger-ui .scheme-container .schemes .auth-wrapper {
+  justify-content: end;
+}
 </style>