diff --git a/.env b/.env
new file mode 100644
index 00000000..a6347f86
--- /dev/null
+++ b/.env
@@ -0,0 +1,3 @@
+VITE_REALM_KEYCLOAK: "bma-ehr"
+VITE_CLIENTID_KEYCLOAK: "HRIS_ADMIN"
+VITE_URL_KEYCLOAK: "https://id.frappet.synology.me/"
\ No newline at end of file
diff --git a/src/api/manage/api.management.ts b/src/api/manage/api.management.ts
new file mode 100644
index 00000000..8c37eac8
--- /dev/null
+++ b/src/api/manage/api.management.ts
@@ -0,0 +1,7 @@
+import env from "../index";
+
+const management = `${env.API_URI}/org/keycloak`;
+
+export default {
+  managementUser: `${management}/user`,
+};
diff --git a/src/app.config.ts b/src/app.config.ts
index e77dc80e..6e0175fd 100644
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -29,6 +29,9 @@ import organization from "./api/02_organizational/api.organization";
 
 import file from "./api/file/api.file";
 
+/** API ManagementUsers*/
+import menagement from "./api/manage/api.management";
+
 // environment variables
 export const compettitivePanel = import.meta.env.VITE_COMPETITIVE_EXAM_PANEL;
 export const qualifyDisableExamPanel = import.meta.env
@@ -63,6 +66,9 @@ const API = {
 
   /*file*/
   ...file,
+
+  /**  menagement*/
+  ...menagement,
 };
 
 export default {
diff --git a/src/modules/02_users/components/Users/DialogAddUser.vue b/src/modules/02_users/components/Users/DialogAddUser.vue
new file mode 100644
index 00000000..c68bba40
--- /dev/null
+++ b/src/modules/02_users/components/Users/DialogAddUser.vue
@@ -0,0 +1,206 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { FormUser } from "@/modules/02_users/interface/request/Main";
+
+/** importComponents*/
+import DialogHeader from "@/components/DialogHeader.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
+const $q = useQuasar();
+const { showLoader, hideLoader, dialogConfirm, messageError, success } =
+  useCounterMixin();
+
+/**  props*/
+const modal = defineModel<boolean>("modal", { required: true });
+const isStatusEdit = defineModel<boolean>("isStatusEdit", { required: true });
+const userId = defineModel<string>("userId", { required: true });
+const props = defineProps({
+  fetchlist: {
+    type: Function,
+    required: true,
+  },
+});
+
+const isPwd = ref<boolean>(true);
+const formData = reactive<FormUser>({
+  username: "",
+  password: "",
+  firstName: "",
+  lastName: "",
+  email: "",
+});
+
+/**
+ * function fetch ข้อมูลผู้ใช้งาน
+ * @param id ผู้ใช้งาน
+ */
+function fetchUserDetail(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 + `/${userId.value}`
+      : config.API.managementUser;
+
+    http[isStatusEdit.value ? "put" : "post"](url, formData)
+      .then(() => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        props.fetchlist?.();
+        closeDialog();
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+/** function ปิด Dialog */
+function closeDialog() {
+  modal.value = false;
+  formData.username = "";
+  formData.password = "";
+  formData.firstName = "";
+  formData.lastName = "";
+  formData.email = "";
+}
+
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value && isStatusEdit.value) {
+      fetchUserDetail(userId.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"
+        />
+        <q-separator />
+        <q-card-section>
+          <div class="row q-col-gutter-md">
+            <div class="col-12">
+              <q-input
+                :readonly="isStatusEdit"
+                v-model="formData.username"
+                outlined
+                dense
+                :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อผู้ใช้งาน'}`,]"
+                lazy-rules
+                hide-bottom-space
+                class="inputgreen"
+                label="ชื่อผู้ใช้งาน"
+              >
+              </q-input>
+            </div>
+            <div class="col-12" v-if="!isStatusEdit">
+              <q-input
+                v-model="formData.password"
+                outlined
+                dense
+                :type="isPwd ? 'password' : 'text'"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกรหัสผู้ใช้งาน'}`,]"
+                lazy-rules
+                label="รหัสผู้ใช้งาน"
+                hide-bottom-space
+                class="inputgreen"
+              >
+                <template v-slot:append>
+                  <q-icon
+                    :name="isPwd ? 'visibility_off' : 'visibility'"
+                    class="cursor-pointer"
+                    @click="isPwd = !isPwd"
+                  />
+                </template>
+              </q-input>
+            </div>
+            <div class="col-12">
+              <q-input
+                v-model="formData.firstName"
+                outlined
+                dense
+                :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อ'}`,]"
+                lazy-rules
+                hide-bottom-space
+                class="inputgreen"
+                label="ชื่อ"
+              >
+              </q-input>
+            </div>
+            <div class="col-12">
+              <q-input
+                v-model="formData.lastName"
+                outlined
+                dense
+                :rules="[(val:string) => !!val || `${'กรุณากรอกนามสกุล'}`,]"
+                lazy-rules
+                hide-bottom-space
+                class="inputgreen"
+                label="นามสกุล"
+              >
+              </q-input>
+            </div>
+
+            <div class="col-12">
+              <q-input
+                v-model="formData.email"
+                outlined
+                dense
+                :rules="[(val:string) => !!val || `${'กรุณากรอก Email'}`,]"
+                lazy-rules
+                hide-bottom-space
+                class="inputgreen"
+                label="Email"
+                type="email"
+              >
+              </q-input>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/02_users/interface/index/Main.ts b/src/modules/02_users/interface/index/Main.ts
index 1aeb5a4b..e6dd68b5 100644
--- a/src/modules/02_users/interface/index/Main.ts
+++ b/src/modules/02_users/interface/index/Main.ts
@@ -2,4 +2,11 @@ interface Pagination {
   rowsPerPage: number;
 }
 
-export type { Pagination };
+interface ItemsMenu {
+  label: string;
+  icon: string;
+  color: string;
+  type: string;
+}
+
+export type { Pagination, ItemsMenu };
diff --git a/src/modules/02_users/interface/request/Main.ts b/src/modules/02_users/interface/request/Main.ts
index 02867600..39e3e0cb 100644
--- a/src/modules/02_users/interface/request/Main.ts
+++ b/src/modules/02_users/interface/request/Main.ts
@@ -1,7 +1,8 @@
-interface DataListsObject {
-  id: number;
-  count: number;
-  name: string;
+interface FormUser {
+  username: string;
+  password: string;
+  firstName: string;
+  lastName: string;
+  email: string;
 }
-
-export type { DataListsObject };
+export type { FormUser };
diff --git a/src/modules/02_users/interface/response/Main.ts b/src/modules/02_users/interface/response/Main.ts
index da7e9293..fefdf1ba 100644
--- a/src/modules/02_users/interface/response/Main.ts
+++ b/src/modules/02_users/interface/response/Main.ts
@@ -1,14 +1,9 @@
-interface ResRound {
-  createdAt: Date;
-  createdFullName: string;
-  createdUserId: Date;
-  durationKPI: string;
-  endDate: Date;
-  id: Date;
-  lastUpdateFullName: string;
-  lastUpdateUserId: Date;
-  lastUpdatedAt: Date;
-  startDate: Date;
+interface Users {
+  email: string;
+  firstName: string;
+  id: string;
+  lastName: string;
+  username: string;
 }
 
-export type { ResRound };
+export type { Users };
diff --git a/src/modules/02_users/router.ts b/src/modules/02_users/router.ts
index 0fd9f8be..ba9c8dcb 100644
--- a/src/modules/02_users/router.ts
+++ b/src/modules/02_users/router.ts
@@ -1,10 +1,11 @@
-const ListsPage = () => import("@/modules/02_users/views/lists.vue");
+const ListsPageUser = () => import("@/modules/02_users/views/listsUser.vue");
+const ListsPageRole = () => import("@/modules/02_users/views/listsRole.vue");
 
 export default [
   {
     path: "/users",
     name: "manageUsers",
-    component: ListsPage,
+    component: ListsPageUser,
     meta: {
       Auth: true,
       Key: [7],
@@ -15,4 +16,15 @@ export default [
     path: "/users/:id",
     name: "masterInsignia",
   },
+
+  {
+    path: "/roles",
+    name: "manageRoles",
+    component: ListsPageRole,
+    meta: {
+      Auth: true,
+      Key: [7],
+      Role: "user_role",
+    },
+  },
 ];
diff --git a/src/modules/02_users/views/lists.vue b/src/modules/02_users/views/lists.vue
deleted file mode 100644
index 8b137891..00000000
--- a/src/modules/02_users/views/lists.vue
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/modules/02_users/views/listsRole.vue b/src/modules/02_users/views/listsRole.vue
new file mode 100644
index 00000000..3f2a4645
--- /dev/null
+++ b/src/modules/02_users/views/listsRole.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div>manageRoles</div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/02_users/views/listsUser.vue b/src/modules/02_users/views/listsUser.vue
new file mode 100644
index 00000000..5d34491d
--- /dev/null
+++ b/src/modules/02_users/views/listsUser.vue
@@ -0,0 +1,287 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { QTableProps } from "quasar";
+import type { ItemsMenu } from "@/modules/02_users/interface/index/Main";
+import type { Users } from "@/modules/02_users/interface/response/Main";
+
+/** importComponents*/
+import DialogAddUser from "@/modules/02_users/components/Users/DialogAddUser.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const {
+  date2Thai,
+  dialogRemove,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+} = useCounterMixin();
+
+/** Table*/
+const rows = ref<Users[]>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: (row) => rows.value.indexOf(row) + 1,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "username",
+    align: "left",
+    label: "ชื่อผู้ใช้งาน",
+    sortable: true,
+    field: "username",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "email",
+    align: "left",
+    label: "Email",
+    sortable: true,
+    field: "email",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "firstName",
+    align: "left",
+    label: "ชื่อ",
+    sortable: true,
+    field: "firstName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "lastName",
+    align: "left",
+    label: "นามสกุล",
+    sortable: true,
+    field: "lastName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "username",
+  "email",
+  "firstName",
+  "lastName",
+]);
+const keyword = ref<string>("");
+
+const modalDialogAdd = ref<boolean>(false);
+const isStatusEdit = ref<boolean>(false);
+const userId = ref<string>("");
+
+/** List Mune*/
+const itemMenu = ref<ItemsMenu[]>([
+  {
+    label: "แก้ไข",
+    icon: "edit",
+    color: "edit",
+    type: "edit",
+  },
+  {
+    label: "ลบ",
+    icon: "delete",
+    color: "red",
+    type: "delete",
+  },
+]);
+
+/** function fetch รายชื่อผู้ใช้งาน*/
+function fetchListUsers() {
+  showLoader();
+  http
+    .get(config.API.managementUser)
+    .then((res) => {
+      const data = res.data;
+      rows.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ *
+ * @param type ประเภท
+ * @param data ข้อมูลรายการผู้ใช้งาน
+ */
+function onClickAction(type: string, data: Users) {
+  if (type === "edit") {
+    modalDialogAdd.value = true;
+    isStatusEdit.value = true;
+    userId.value = data.id;
+  } else if (type === "delete") {
+    onDeleteUser(data.id);
+  }
+}
+
+function openDialog() {
+  modalDialogAdd.value = true;
+  isStatusEdit.value = false;
+  userId.value = "";
+}
+
+/**
+ * function ยืนยันการลบข้อมูลรายการผู้ใช้งาน
+ * @param id รายการผู้ใช้งาน
+ */
+function onDeleteUser(id: string) {
+  dialogRemove($q, () => {
+    showLoader();
+    http
+      .delete(config.API.managementUser + `/${id}`)
+      .then(() => {
+        success($q, "ลบข้อมูลสำเร็จ");
+        fetchListUsers();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+onMounted(() => {
+  fetchListUsers();
+});
+</script>
+
+<template>
+  <div class="row items-center">
+    <div class="toptitle text-dark row items-center q-py-xs">
+      จัดการผู้ใช้งาน
+    </div>
+  </div>
+
+  <q-card flast bordered class="q-pa-md">
+    <div class="items-center col-12 row q-col-gutter-sm q-mb-sm">
+      <q-btn flat round dense color="primary" icon="add" @click="openDialog()">
+        <q-tooltip>เพิ่มผู้ใช้งาน </q-tooltip>
+      </q-btn>
+      <q-space />
+
+      <q-input
+        borderless
+        dense
+        debounce="300"
+        outlined
+        v-model="keyword"
+        placeholder="ค้นหา"
+      >
+        <template v-slot:append>
+          <q-icon name="search" />
+        </template>
+      </q-input>
+      <q-select
+        v-model="visibleColumns"
+        multiple
+        outlined
+        dense
+        options-dense
+        :display-value="$q.lang.table.columns"
+        emit-value
+        map-options
+        :options="columns"
+        option-value="name"
+        options-cover
+      />
+    </div>
+
+    <div class="col-12 q-pt-sm">
+      <d-table
+        ref="table"
+        :columns="columns"
+        :rows="rows"
+        row-key="id"
+        :filter="keyword"
+        flat
+        bordered
+        :paging="true"
+        dense
+        :rows-per-page-options="[10, 25, 50, 100]"
+        :visible-columns="visibleColumns"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+            <q-th auto-width></q-th>
+          </q-tr>
+        </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">
+              <div>
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </q-td>
+            <q-td>
+              <q-btn
+                flat
+                dense
+                icon="mdi-dots-vertical"
+                class="q-pa-none q-ml-xs"
+                color="grey-13"
+                size="12px"
+              >
+                <q-menu>
+                  <q-list dense style="min-width: 200px">
+                    <q-item
+                      v-for="(item, index) in itemMenu"
+                      :key="index"
+                      clickable
+                      v-close-popup
+                      @click.stop="onClickAction(item.type, props.row)"
+                    >
+                      <q-item-section>
+                        <div class="row items-center">
+                          <q-icon
+                            :color="item.color"
+                            size="17px"
+                            :name="item.icon"
+                          />
+                          <div class="q-pl-md">{{ item.label }}</div>
+                        </div>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+    </div>
+  </q-card>
+
+  <DialogAddUser
+    :fetchlist="fetchListUsers"
+    v-model:modal="modalDialogAdd"
+    v-model:isStatusEdit="isStatusEdit"
+    :userId="userId"
+  />
+</template>
+
+<style scoped></style>
diff --git a/src/router/index.ts b/src/router/index.ts
index 257dc09d..927bf3eb 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -5,6 +5,7 @@ const Dashboard = () => import("@/views/Dashboard.vue");
 const Error404NotFound = () => import("@/views/Error404NotFound.vue");
 
 import ModuleMetadata from "@/modules/01_metadata/router";
+import ModuleUser from "@/modules/02_users/router";
 
 // TODO: ใช้หรือไม่?
 import keycloak from "@/plugins/keycloak";
@@ -28,6 +29,7 @@ const router = createRouter({
           },
         },
         ...ModuleMetadata,
+        ...ModuleUser,
       ],
     },
     /**