diff --git a/src/modules/06_webservices/components/DialogApiKey.vue b/src/modules/06_webservices/components/DialogApiKey.vue
index deddbc09..2320615b 100644
--- a/src/modules/06_webservices/components/DialogApiKey.vue
+++ b/src/modules/06_webservices/components/DialogApiKey.vue
@@ -4,6 +4,9 @@ import { useQuasar } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
 
+import type { ListApi } from "@/modules/06_webservices/interface/index/Main";
+import type { FormCreate } from "@/modules/06_webservices/interface/request/Main";
+
 import DialogHeader from "@/components/DialogHeader.vue";
 
 const $q = useQuasar();
@@ -14,18 +17,18 @@ const modal = defineModel<boolean>("modal", { required: true });
 const isAPIKey = ref<boolean>(false);
 const topicRef = ref<any>(null);
 const apiKey = ref<string>("");
-const options = ref<any[]>([
+const options = ref<ListApi[]>([
   { label: "API 1", value: "API 1" },
   { label: "API 2", value: "API 2" },
   { label: "API 3", value: "API 3" },
 ]);
 
-const formData = reactive({
+const formData = reactive<FormCreate>({
   topic: "",
   access: [],
 });
 
-const titleName = computed(() => {
+const titleName = computed<string>(() => {
   return !isAPIKey.value ? "สร้าง API Key" : "API Key";
 });
 
@@ -64,6 +67,7 @@ function onCloseDialog() {
           <div class="col-12">
             <q-input
               ref="topicRef"
+              class="inputgreen"
               dense
               outlined
               v-model="formData.topic"
@@ -113,6 +117,7 @@ function onCloseDialog() {
           <div class="col-12">
             API ที่เข้าถึงได้
             <q-option-group
+              disable
               :options="options"
               type="checkbox"
               keep-color
diff --git a/src/modules/06_webservices/interface/index/Main.ts b/src/modules/06_webservices/interface/index/Main.ts
new file mode 100644
index 00000000..ada2cbd1
--- /dev/null
+++ b/src/modules/06_webservices/interface/index/Main.ts
@@ -0,0 +1,13 @@
+interface ListWebServices {
+  id: string;
+  topic: string;
+  access: string[];
+  amount: string;
+}
+
+interface ListApi {
+  label: string;
+  value: string;
+}
+
+export type { ListWebServices, ListApi };
diff --git a/src/modules/06_webservices/interface/request/Main.ts b/src/modules/06_webservices/interface/request/Main.ts
new file mode 100644
index 00000000..fd4de713
--- /dev/null
+++ b/src/modules/06_webservices/interface/request/Main.ts
@@ -0,0 +1,6 @@
+interface FormCreate {
+  topic: string;
+  access: string[];
+}
+
+export type { FormCreate };
diff --git a/src/modules/06_webservices/interface/response/Main.ts b/src/modules/06_webservices/interface/response/Main.ts
new file mode 100644
index 00000000..6626157e
--- /dev/null
+++ b/src/modules/06_webservices/interface/response/Main.ts
@@ -0,0 +1,8 @@
+interface ResListWebServices {
+  id: string;
+  topic: string;
+  access: string[];
+  amount: string;
+}
+
+export type { ResListWebServices };
diff --git a/src/modules/06_webservices/view/main.vue b/src/modules/06_webservices/view/main.vue
index ac0a1e0b..a46c9eea 100644
--- a/src/modules/06_webservices/view/main.vue
+++ b/src/modules/06_webservices/view/main.vue
@@ -1,14 +1,23 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
+import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
 
 /** importType*/
 import type { QTableProps } from "quasar";
+import type { ListWebServices } from "@/modules/06_webservices/interface/index/Main";
+import type { ResListWebServices } from "@/modules/06_webservices/interface/response/Main";
 
 import DialogApiKey from "@/modules/06_webservices/components/DialogApiKey.vue";
 import DialogUsability from "@/modules/06_webservices/components/DialogUsability.vue";
 
+/** use*/
+const $q = useQuasar();
+const { dialogRemove } = useCounterMixin();
+
 /** Table*/
-const rows = ref<any>([]);
+const rows = ref<ListWebServices[]>([]);
 const keyword = ref<string>("");
 const visibleColumns = ref<string[]>(["topic", "access", "amount"]);
 const columns = ref<QTableProps["columns"]>([
@@ -48,13 +57,15 @@ const modalApiKey = ref<boolean>(false);
 const modalUsability = ref<boolean>(false);
 
 function fetchListWebServices() {
-  const data = [
+  const data: ResListWebServices[] = [
     {
+      id: "",
       topic: "รายการ web services 1",
       access: ["API1", "API2", "API3"],
       amount: "1",
     },
     {
+      id: "",
       topic: "รายการ web services 2",
       access: ["API1", "API2", "API3"],
       amount: "2",
@@ -63,6 +74,10 @@ function fetchListWebServices() {
   rows.value = data;
 }
 
+function onDeleteData(id: string) {
+  dialogRemove($q, () => {});
+}
+
 onMounted(() => {
   fetchListWebServices();
 });
@@ -140,18 +155,31 @@ onMounted(() => {
       >
         <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" class="cursor-pointer">
+          <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-if="col.name === 'access'">
                 <q-list dense>
                   <q-item v-for="(item, key) in col.value">
-                    <q-item-section> {{ item }}</q-item-section>
+                    <q-item-section> - {{ item }}</q-item-section>
                   </q-item>
                 </q-list>
               </div>