diff --git a/src/modules/02_users/router.ts b/src/modules/02_users/router.ts
index 956aa408..f76bb72a 100644
--- a/src/modules/02_users/router.ts
+++ b/src/modules/02_users/router.ts
@@ -2,7 +2,8 @@ const ListsPageUser = () => import("@/modules/02_users/views/listsUser.vue");
 const PageManagementRole = () =>
   import("@/modules/02_users/views/managementRoleUser.vue");
 const ListsPageRole = () => import("@/modules/02_users/views/listsRole.vue");
-const ListsRoleDetail = () => import("@/modules/02_users/views/roleDetail.vue");
+const ListsPage2Role = () =>
+  import("@/modules/02_users/views/permissionDetail.vue");
 
 export default [
   {
@@ -44,7 +45,7 @@ export default [
   {
     path: "/roles/:id",
     name: "manageRolesId",
-    component: ListsRoleDetail,
+    component: ListsPage2Role,
     meta: {
       Auth: true,
       Key: [7],
diff --git a/src/modules/02_users/views/roleDetail.vue b/src/modules/02_users/views/permissionDetail.vue
similarity index 81%
rename from src/modules/02_users/views/roleDetail.vue
rename to src/modules/02_users/views/permissionDetail.vue
index 41b4cf5b..41b02d56 100644
--- a/src/modules/02_users/views/roleDetail.vue
+++ b/src/modules/02_users/views/permissionDetail.vue
@@ -1,14 +1,17 @@
-<script setup>
-import { id } from "date-fns/locale";
-import { off } from "process";
+<script setup lang="ts">
 import { reactive, ref } from "vue";
 import { useRouter } from "vue-router";
+import type { FormRole } from "@/modules/02_users/interface/request/Main";
 
 const router = useRouter();
+const formData = reactive<FormRole>({
+  role: "",
+  description: "",
+});
 
-const columns = [];
+const columns = ref<any>([]);
 
-const systemLists = ref([
+const systemLists = ref<any>([
   {
     key: "SYS_METADATA_KPI",
     name: "ข้อมูลการประเมิน",
@@ -1052,6 +1055,8 @@ const systemLists = ref([
     ],
   },
 ]);
+
+function onSubmit() {}
 </script>
 
 <template>
@@ -1069,106 +1074,141 @@ const systemLists = ref([
     จัดการสิทธิ์บทบาท
   </div>
 
-  <q-card flast bordered class="">
-    <div class="col-12">
-      <q-table
-        flat
-        bordered
-        :rows="systemLists"
-        :columns="columns"
-        separator="cell"
-        :pagination="{
-          page: 1,
-          rowsPerPage: 100,
-        }"
-        hide-bottom
-      >
-        <template v-slot:header>
-          <q-tr>
-            <q-th rowspan="2" colspan="3" style="font-size: 1rem"
-              >รายการระบบ</q-th
+  <q-form greedy @submit.prevent @validation-success="onSubmit">
+    <q-card flast bordered class="">
+      <div class="col-12">
+        <q-card>
+          <q-card-section>
+            <div class="row q-col-gutter-md">
+              <div class="col-4">
+                <q-input
+                  v-model="formData.role"
+                  outlined
+                  dense
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อบทบาท'}`,]"
+                  lazy-rules
+                  hide-bottom-space
+                  class="inputgreen"
+                  label="ชื่อบทบาท"
+                />
+              </div>
+              <div class="col-8">
+                <q-input
+                  v-model="formData.description"
+                  outlined
+                  dense
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกคำอิบาย'}`,]"
+                  lazy-rules
+                  hide-bottom-space
+                  class="inputgreen"
+                  label="คำอิบาย"
+                  type="textarea"
+                />
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+
+      <div class="col-12">
+        <q-table
+          flat
+          bordered
+          :rows="systemLists"
+          :columns="columns"
+          separator="cell"
+          :pagination="{
+            page: 1,
+            rowsPerPage: 100,
+          }"
+          hide-bottom
+        >
+          <template v-slot:header>
+            <q-tr>
+              <q-th rowspan="2" colspan="3" style="font-size: 1rem"
+                >รายการระบบ</q-th
+              >
+              <q-th colspan="2" style="font-size: 1rem"
+                >สิทธิ์การเข้าถึงข้อมูล</q-th
+              >
+              <q-th colspan="5" style="text-align: center; font-size: 1rem"
+                >สิทธิ์การใช้งาน</q-th
+              >
+            </q-tr>
+            <q-tr>
+              <q-th
+                >OWNER<br />
+                เจ้าของระบบ</q-th
+              >
+              <q-th>OFFICER <br />(การเจ้าหน้าที่)</q-th>
+              <q-th>CREATE <br />(มีสิทธิในการสร้างข้อมูล)</q-th>
+              <q-th>LIST<br />(มีสิทธิในการดูรายการข้อมูล)</q-th>
+              <q-th>GET<br />(มีสิทธิในการดูรายละเอียดข้อมูล)</q-th>
+              <q-th>UPDATE<br />(มีสิทธิในการแก้ไขข้อมูล)</q-th>
+              <q-th>DELETE<br />(มีสิทธิในการลบข้อมูล)</q-th>
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr>
+              <q-td auto-width colspan="3">
+                <q-checkbox v-model="props.row.selected" />
+                <strong>{{ props.row.name }}</strong>
+              </q-td>
+              <q-td style="text-align: center">
+                <q-checkbox v-model="props.row.owner" />
+              </q-td>
+              <q-td style="text-align: center">
+                <q-checkbox v-model="props.row.officer" />
+              </q-td>
+              <q-td style="text-align: center">
+                <q-checkbox v-model="props.row.create" />
+              </q-td>
+              <q-td style="text-align: center">
+                <q-checkbox v-model="props.row.list" />
+              </q-td>
+              <q-td style="text-align: center">
+                <q-checkbox v-model="props.row.get" />
+              </q-td>
+              <q-td style="text-align: center">
+                <q-checkbox v-model="props.row.update" />
+              </q-td>
+              <q-td style="text-align: center">
+                <q-checkbox v-model="props.row.delete" />
+              </q-td>
+            </q-tr>
+            <q-tr
+              v-if="props.row.selected && props.row.children"
+              v-for="(item, index) in props.row.children"
+              :key="index"
             >
-            <q-th colspan="2" style="font-size: 1rem"
-              >สิทธิ์การเข้าถึงข้อมูล</q-th
-            >
-            <q-th colspan="5" style="text-align: center; font-size: 1rem"
-              >สิทธิ์การใช้งาน</q-th
-            >
-          </q-tr>
-          <q-tr>
-            <q-th
-              >OWNER<br />
-              เจ้าของระบบ</q-th
-            >
-            <q-th>OFFICER <br />(การเจ้าหน้าที่)</q-th>
-            <q-th>CREATE <br />(มีสิทธิในการสร้างข้อมูล)</q-th>
-            <q-th>LIST<br />(มีสิทธิในการดูรายการข้อมูล)</q-th>
-            <q-th>GET<br />(มีสิทธิในการดูรายละเอียดข้อมูล)</q-th>
-            <q-th>UPDATE<br />(มีสิทธิในการแก้ไขข้อมูล)</q-th>
-            <q-th>DELETE<br />(มีสิทธิในการลบข้อมูล)</q-th>
-          </q-tr>
-        </template>
-        <template v-slot:body="props">
-          <q-tr>
-            <q-td auto-width colspan="3">
-              <q-checkbox v-model="props.row.selected" />
-              <strong>{{ props.row.name }}</strong>
-            </q-td>
-            <q-td style="text-align: center">
-              <q-checkbox v-model="props.row.owner" />
-            </q-td>
-            <q-td style="text-align: center">
-              <q-checkbox v-model="props.row.officer" />
-            </q-td>
-            <q-td style="text-align: center">
-              <q-checkbox v-model="props.row.create" />
-            </q-td>
-            <q-td style="text-align: center">
-              <q-checkbox v-model="props.row.list" />
-            </q-td>
-            <q-td style="text-align: center">
-              <q-checkbox v-model="props.row.get" />
-            </q-td>
-            <q-td style="text-align: center">
-              <q-checkbox v-model="props.row.update" />
-            </q-td>
-            <q-td style="text-align: center">
-              <q-checkbox v-model="props.row.delete" />
-            </q-td>
-          </q-tr>
-          <q-tr
-            v-if="props.row.selected && props.row.children"
-            v-for="(item, index) in props.row.children"
-            :key="index"
-          >
-            <q-td></q-td>
-            <q-td auto-width colspan="2">
-              <q-checkbox v-model="item.selected" />
-              {{ item.name }}
-            </q-td>
-            <q-td style="text-align: center">
-              <q-checkbox v-model="item.owner" />
-            </q-td>
-            <q-td style="text-align: center">
-              <q-checkbox v-model="item.officer" />
-            </q-td>
-            <q-td style="text-align: center">
-              <q-checkbox v-model="item.create" />
-            </q-td>
-            <q-td style="text-align: center">
-              <q-checkbox v-model="item.list" />
-            </q-td>
-            <q-td style="text-align: center">
-              <q-checkbox v-model="item.get" />
-            </q-td>
-            <q-td style="text-align: center">
-              <q-checkbox v-model="item.update" />
-            </q-td>
-            <q-td style="text-align: center">
-              <q-checkbox v-model="item.delete" />
-            </q-td>
-          </q-tr>
-          <!-- <q-tr
+              <q-td></q-td>
+              <q-td auto-width colspan="2">
+                <q-checkbox v-model="item.selected" />
+                {{ item.name }}
+              </q-td>
+              <q-td style="text-align: center">
+                <q-checkbox v-model="item.owner" />
+              </q-td>
+              <q-td style="text-align: center">
+                <q-checkbox v-model="item.officer" />
+              </q-td>
+              <q-td style="text-align: center">
+                <q-checkbox v-model="item.create" />
+              </q-td>
+              <q-td style="text-align: center">
+                <q-checkbox v-model="item.list" />
+              </q-td>
+              <q-td style="text-align: center">
+                <q-checkbox v-model="item.get" />
+              </q-td>
+              <q-td style="text-align: center">
+                <q-checkbox v-model="item.update" />
+              </q-td>
+              <q-td style="text-align: center">
+                <q-checkbox v-model="item.delete" />
+              </q-td>
+            </q-tr>
+            <!-- <q-tr
           v-if="item.children"
           v-for="(item3, index) in item.children"
           :key="index"
@@ -1200,8 +1240,15 @@ const systemLists = ref([
             <q-checkbox v-model="item3.delete" />
           </q-td>
         </q-tr> -->
-        </template>
-      </q-table>
-    </div>
-  </q-card>
+          </template>
+        </q-table>
+      </div>
+
+      <!-- <q-card-actions align="right">
+        <q-btn label="บันทึก" color="secondary" type="submit"
+          ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+        >
+      </q-card-actions> -->
+    </q-card>
+  </q-form>
 </template>