diff --git a/src/modules/02_users/components/Users/DialogAddUser.vue b/src/modules/02_users/components/Users/DialogAddUser.vue
index 1a6389af..0077bf44 100644
--- a/src/modules/02_users/components/Users/DialogAddUser.vue
+++ b/src/modules/02_users/components/Users/DialogAddUser.vue
@@ -74,7 +74,13 @@ function fetchlistRole() {
   http
     .get(config.API.managementRole)
     .then((res) => {
-      roleOptions.value = res.data;
+      roleOptions.value = res.data.filter(
+        (e: Roles) =>
+          e.name === "STAFF" ||
+          e.name === "SUPER_ADMIN" ||
+          e.name === "ADMIN" ||
+          e.name === "USER"
+      );
     })
     .catch((err) => {
       messageError($q, err);
@@ -237,7 +243,7 @@ watch(
                 use-chips
                 multiple
                 use-input
-                :rules="[(val:any) => !!val && val.length > 0|| `${'กรุณาเลือก Role'}`,]"
+                :rules="[(val:string) => !!val && val.length > 0|| `${'กรุณาเลือก Role'}`,]"
               />
             </div>
           </div>
diff --git a/src/modules/02_users/components/Users/DialogRoleUser.vue b/src/modules/02_users/components/Users/DialogRoleUser.vue
index aad15417..34c7e14e 100644
--- a/src/modules/02_users/components/Users/DialogRoleUser.vue
+++ b/src/modules/02_users/components/Users/DialogRoleUser.vue
@@ -27,7 +27,7 @@ const {
 /**  props*/
 const modal = defineModel<boolean>("modal", { required: true });
 const userId = defineModel<string>("userId", { required: true });
-const roles = defineModel<Roles[]>("roles", {});
+const roles = defineModel<any[]>("roles", {});
 
 const props = defineProps({
   fetchlist: {
diff --git a/src/modules/02_users/interface/response/Main.ts b/src/modules/02_users/interface/response/Main.ts
index a40d924f..341b2f92 100644
--- a/src/modules/02_users/interface/response/Main.ts
+++ b/src/modules/02_users/interface/response/Main.ts
@@ -4,7 +4,7 @@ interface Users {
   id: string;
   lastName: string;
   username: string;
-  roles: Roles;
+  roles: Roles[];
 }
 
 interface Roles {
@@ -16,7 +16,7 @@ interface Roles {
   lastUpdateUserId: string;
   lastUpdatedAt: string;
   roleDescription: string;
-  roleName: string;
+  name: string;
 }
 
 interface NodeTree {
diff --git a/src/modules/02_users/views/listsUser.vue b/src/modules/02_users/views/listsUser.vue
index 82cf2711..8121cbe8 100644
--- a/src/modules/02_users/views/listsUser.vue
+++ b/src/modules/02_users/views/listsUser.vue
@@ -7,7 +7,10 @@ import config from "@/app.config";
 
 /** importType*/
 import type { QTableProps } from "quasar";
-import type { ItemsMenu } from "@/modules/02_users/interface/index/Main";
+import type {
+  ItemsMenu,
+  Pagination,
+} from "@/modules/02_users/interface/index/Main";
 import type { Users, Roles } from "@/modules/02_users/interface/response/Main";
 
 /** importComponents*/
@@ -84,7 +87,7 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     field: (row) => {
-      const names = row.roles.map((role: Roles) => role.roleName);
+      const names = row.roles.map((role: Roles) => role.name);
       return names.join(", ");
     },
   },
@@ -138,9 +141,22 @@ function fetchListUsers() {
     )
     .then((res) => {
       const data = res.data.data;
+      console.log(data);
+
       total.value = res.data.total;
       maxPage.value = Math.ceil(total.value / pageSize.value);
-      rows.value = data;
+      rows.value = data.map((e: Users) => ({
+        ...e,
+        roles: e.roles.filter(
+          (e: Roles) =>
+            e.name === "STAFF" ||
+            e.name === "SUPER_ADMIN" ||
+            e.name === "ADMIN" ||
+            e.name === "USER"
+        ),
+      }));
+
+      console.log(rows.value);
     })
     .catch((err) => {
       messageError($q, err);
@@ -199,7 +215,7 @@ function onDeleteUser(id: string) {
  * function อัปเดท paging
  * @param initialPagination ข้อมูล pagination
  */
-async function updatePagination(initialPagination: any) {
+async function updatePagination(initialPagination: Pagination) {
   currentPage.value = 1;
   pageSize.value = initialPagination.rowsPerPage;
 }
diff --git a/src/modules/02_users/views/managementRoleUser.vue b/src/modules/02_users/views/managementRoleUser.vue
index 18c423e3..7a26082a 100644
--- a/src/modules/02_users/views/managementRoleUser.vue
+++ b/src/modules/02_users/views/managementRoleUser.vue
@@ -63,7 +63,13 @@ function fetchListRoleUser() {
   http
     .get(config.API.managementUser + `/role/${userId.value}`)
     .then((res) => {
-      rows.value = res.data;
+      rows.value = res.data.filter(
+        (e: Roles) =>
+          e.name === "STAFF" ||
+          e.name === "SUPER_ADMIN" ||
+          e.name === "ADMIN" ||
+          e.name === "USER"
+      );
     })
     .catch((err) => {
       messageError($q, err);