diff --git a/src/api/manage/api.management.ts b/src/api/manage/api.management.ts
index 3f6864d5..2937af13 100644
--- a/src/api/manage/api.management.ts
+++ b/src/api/manage/api.management.ts
@@ -1,9 +1,13 @@
 import env from "../index";
 
 const management = `${env.API_URI}/org/keycloak`;
+const managementAuth = `${env.API_URI}/org/auth/authRole`;
 
 export default {
   management,
   managementUser: `${management}/user`,
   managementRole: `${management}/role`,
+
+  /** จัดการบทบาทและสิทธิ์*/
+  managementAuth,
 };
diff --git a/src/modules/02_users/components/Roles/DialogAddRole.vue b/src/modules/02_users/components/Roles/DialogAddRole.vue
index 9c023633..246e3929 100644
--- a/src/modules/02_users/components/Roles/DialogAddRole.vue
+++ b/src/modules/02_users/components/Roles/DialogAddRole.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { ref, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -14,101 +16,56 @@ import { useCounterMixin } from "@/stores/mixin";
 
 /** use*/
 const $q = useQuasar();
+const router = useRouter();
 const { showLoader, hideLoader, dialogConfirm, messageError, success } =
   useCounterMixin();
 
 /**  props*/
 const modal = defineModel<boolean>("modal", { required: true });
-const isStatusEdit = defineModel<boolean>("isStatusEdit", { required: true });
-const roleId = defineModel<string>("roleId", { required: true });
-const props = defineProps({
-  fetchlist: {
-    type: Function,
-    required: true,
-  },
-});
 
 const formData = reactive<FormRole>({
-  role: "",
-  description: "",
+  roleName: "",
+  roleDescription: "",
 });
 
-/**
- * function fetch ข้อมูลผู้ใช้งาน
- * @param id ผู้ใช้งาน
- */
-function fetchRoleDetail(id: string) {
-  // showLoader();
-  // http
-  //   .get(config.API.managementUser + `/${id}`)
-  //   .then((res) => {
-  //     const data = res.data;
-  //     formData.username = data.username;
-  //     formData.firstName = data.firstName;
-  //     formData.lastName = data.lastName;
-  //     formData.email = data.email;
-  //   })
-  //   .catch((err) => {
-  //     messageError($q, err);
-  //   })
-  //   .finally(() => {
-  //     hideLoader();
-  //   });
-}
-
 /** function บันทึกข้อมูลผู้ใช้งาน*/
 function onSubmit() {
   dialogConfirm($q, () => {
-    // showLoader();
-    // const url = isStatusEdit.value
-    //   ? config.API.managementUser + `/${roleId.value}`
-    //   : config.API.managementUser;
-    // http[isStatusEdit.value ? "put" : "post"](url, formData)
-    //   .then(() => {
-    //     success($q, "บันทึกข้อมูลสำเร็จ");
-    //     props.fetchlist?.();
-    closeDialog();
-    //   })
-    //   .catch((e) => {
-    //     messageError($q, e);
-    //   })
-    //   .finally(() => {
-    //     hideLoader();
-    //   });
+    showLoader();
+    http
+      .post(config.API.managementAuth, formData)
+      .then((res) => {
+        closeDialog();
+        router.push(`/roles/${res.data.result}`);
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
   });
 }
 
 /** function ปิด Dialog */
 function closeDialog() {
   modal.value = false;
-  formData.role = "";
-  formData.description = "";
+  formData.roleName = "";
+  formData.roleDescription = "";
 }
-
-watch(
-  () => modal.value,
-  () => {
-    if (modal.value && isStatusEdit.value) {
-      fetchRoleDetail(roleId.value);
-    }
-  }
-);
 </script>
 
 <template>
   <q-dialog v-model="modal" persistent>
     <q-card class="col-12" style="width: 25%">
       <q-form greedy @submit.prevent @validation-success="onSubmit">
-        <DialogHeader
-          :tittle="isStatusEdit ? 'แก้ไขบทบาท' : 'เพิ่มบทบาท'"
-          :close="closeDialog"
-        />
+        <DialogHeader :tittle="'เพิ่มบทบาท'" :close="closeDialog" />
         <q-separator />
         <q-card-section>
           <div class="row q-col-gutter-md">
             <div class="col-12">
               <q-input
-                v-model="formData.role"
+                v-model="formData.roleName"
                 outlined
                 dense
                 :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อบทบาท'}`,]"
@@ -120,7 +77,7 @@ watch(
             </div>
             <div class="col-12">
               <q-input
-                v-model="formData.description"
+                v-model="formData.roleDescription"
                 outlined
                 dense
                 :rules="[(val:string) => !!val || `${'กรุณากรอกคำอิบาย'}`,]"
diff --git a/src/modules/02_users/interface/request/Main.ts b/src/modules/02_users/interface/request/Main.ts
index 4f1cb8ac..1d5de527 100644
--- a/src/modules/02_users/interface/request/Main.ts
+++ b/src/modules/02_users/interface/request/Main.ts
@@ -8,8 +8,8 @@ interface FormUser {
 }
 
 interface FormRole {
-  role: string;
-  description: string;
+  roleName: string;
+  roleDescription: string;
 }
 
 interface Roles {
diff --git a/src/modules/02_users/interface/response/Main.ts b/src/modules/02_users/interface/response/Main.ts
index ce675174..3bdec6f4 100644
--- a/src/modules/02_users/interface/response/Main.ts
+++ b/src/modules/02_users/interface/response/Main.ts
@@ -8,12 +8,15 @@ interface Users {
 }
 
 interface Roles {
-  clientRole?: boolean;
-  composite?: boolean;
-  containerId?: string;
-  description: string;
+  createdAt: string;
+  createdFullName: string;
+  createdUserId: string;
   id: string;
-  name: string;
+  lastUpdateFullName: string;
+  lastUpdateUserId: string;
+  lastUpdatedAt: string;
+  roleDescription: string;
+  roleName: string;
 }
 
 interface NodeTree {
diff --git a/src/modules/02_users/views/listsRole.vue b/src/modules/02_users/views/listsRole.vue
index 86dee7df..9080901a 100644
--- a/src/modules/02_users/views/listsRole.vue
+++ b/src/modules/02_users/views/listsRole.vue
@@ -23,13 +23,7 @@ const { dialogRemove, messageError, showLoader, hideLoader, success } =
   useCounterMixin();
 
 /** Table*/
-const rows = ref<Roles[]>([
-  {
-    id: "1",
-    name: "ชื่อบทบาท",
-    description: "คำอธิบาย",
-  },
-]);
+const rows = ref<Roles[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -41,30 +35,28 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "name",
+    name: "roleName",
     align: "left",
     label: "ชื่อบทบาท",
     sortable: true,
-    field: "name",
+    field: "roleName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "description",
+    name: "roleDescription",
     align: "left",
     label: "คำอธิบาย",
     sortable: true,
-    field: "description",
+    field: "roleDescription",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
 ]);
-const visibleColumns = ref<string[]>(["no", "name", "description"]);
+const visibleColumns = ref<string[]>(["no", "roleName", "roleDescription"]);
 const keyword = ref<string>("");
 
 const modalDialogAdd = ref<boolean>(false);
-const isStatusEdit = ref<boolean>(false);
-const roleId = ref<string>("");
 
 /** List Mune*/
 const itemMenu = ref<ItemsMenu[]>([
@@ -84,19 +76,19 @@ const itemMenu = ref<ItemsMenu[]>([
 
 /** function fetch รายการบทบาท*/
 function fetchListRole() {
-  // showLoader();
-  // http
-  //   .get(config.API.managementUser)
-  //   .then((res) => {
-  //     const data = res.data;
-  //     rows.value = data;
-  //   })
-  //   .catch((err) => {
-  //     messageError($q, err);
-  //   })
-  //   .finally(() => {
-  //     hideLoader();
-  //   });
+  showLoader();
+  http
+    .get(config.API.managementAuth + `/list`)
+    .then((res) => {
+      const data = res.data.result;
+      rows.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 /**
@@ -106,9 +98,7 @@ function fetchListRole() {
  */
 function onClickAction(type: string, data: Roles) {
   if (type === "edit") {
-    modalDialogAdd.value = true;
-    isStatusEdit.value = true;
-    roleId.value = data.id;
+    router.push(`/roles/${data.id}`);
   } else if (type === "delete") {
     onDeleteRole(data.id);
   }
@@ -116,8 +106,6 @@ function onClickAction(type: string, data: Roles) {
 
 function openDialog() {
   modalDialogAdd.value = true;
-  isStatusEdit.value = false;
-  roleId.value = "";
 }
 
 /**
@@ -126,26 +114,22 @@ function openDialog() {
  */
 function onDeleteRole(id: string) {
   dialogRemove($q, () => {
-    // showLoader();
-    // http
-    //   .delete(config.API.managementUser + `/${id}`)
-    //   .then(() => {
-    //     success($q, "ลบข้อมูลสำเร็จ");
-    //     fetchListRole();
-    //   })
-    //   .catch((err) => {
-    //     messageError($q, err);
-    //   })
-    //   .finally(() => {
-    //     hideLoader();
-    //   });
+    showLoader();
+    http
+      .delete(config.API.managementAuth + `/${id}`)
+      .then(() => {
+        success($q, "ลบข้อมูลสำเร็จ");
+        fetchListRole();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
   });
 }
 
-function viewDetail(id: string) {
-  router.push(`/roles/${id}`);
-}
-
 onMounted(() => {
   fetchListRole();
 });
@@ -216,12 +200,7 @@ onMounted(() => {
         </template>
         <template v-slot:body="props">
           <q-tr :props="props" class="cursor-pointer">
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="viewDetail(props.row.id)"
-            >
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
               <div>
                 {{ col.value ? col.value : "-" }}
               </div>
@@ -265,12 +244,9 @@ onMounted(() => {
     </div>
   </q-card>
 
-  <DialogAddRole
-    :fetchlist="fetchListRole"
-    v-model:modal="modalDialogAdd"
-    v-model:isStatusEdit="isStatusEdit"
-    :roleId="roleId"
-  />
+  <DialogAddRole v-model:modal="modalDialogAdd" />
+  <!-- :fetchlist="fetchListRole" v-model:isStatusEdit="isStatusEdit"
+  :roleId="roleId" -->
 </template>
 
 <style scoped></style>
diff --git a/src/modules/02_users/views/permissionDetail.vue b/src/modules/02_users/views/permissionDetail.vue
index 47fac5a4..b11eb591 100644
--- a/src/modules/02_users/views/permissionDetail.vue
+++ b/src/modules/02_users/views/permissionDetail.vue
@@ -1,8 +1,20 @@
 <script setup lang="ts">
-import { reactive, ref } from "vue";
-import { useRouter } from "vue-router";
+import { onMounted, reactive, ref } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
 import type { FormRole } from "@/modules/02_users/interface/request/Main";
 
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
+const $q = useQuasar();
+const { dialogConfirm, messageError, showLoader, hideLoader, success } =
+  useCounterMixin();
+
 const attrPrivilege = ref<any[]>([]);
 const attrPrivilegeOp = ref<any[]>([
   {
@@ -23,9 +35,12 @@ const attrPrivilegeOp = ref<any[]>([
   },
 ]);
 const router = useRouter();
+const route = useRoute();
+
+const roleId = ref<string>(route.params.id.toString());
 const formData = reactive<FormRole>({
-  role: "",
-  description: "",
+  roleName: "",
+  roleDescription: "",
 });
 
 const columns = ref<any>([]);
@@ -1154,9 +1169,49 @@ const systemLists = ref<any>([
   },
 ]);
 
+function fetchDataRole() {
+  showLoader();
+  http
+    .get(config.API.managementAuth + `/${roleId.value}`)
+    .then((res) => {
+      const data = res.data.result;
+      formData.roleName = data.roleName;
+      formData.roleDescription = data.roleDescription;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 function onSubmit() {
+  dialogConfirm($q, () => {
+    showLoader();
+    const body = {
+      ...formData,
+      authRoleAttrs: [],
+    };
+    http
+      .patch(config.API.managementAuth + `/${roleId.value}`, body)
+      .then(() => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        fetchDataRole();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
   console.log(systemLists.value);
 }
+
+onMounted(() => {
+  fetchDataRole();
+});
 </script>
 
 <template>
@@ -1182,7 +1237,7 @@ function onSubmit() {
             <div class="row q-col-gutter-md">
               <div class="col-4">
                 <q-input
-                  v-model="formData.role"
+                  v-model="formData.roleName"
                   outlined
                   dense
                   :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อบทบาท'}`,]"
@@ -1194,7 +1249,7 @@ function onSubmit() {
               </div>
               <div class="col-8">
                 <q-input
-                  v-model="formData.description"
+                  v-model="formData.roleDescription"
                   outlined
                   dense
                   lazy-rules