diff --git a/src/pages/role/component/DetailRole.jsx b/src/pages/role/component/DetailRole.jsx
index 4195c2e..c4be5bf 100644
--- a/src/pages/role/component/DetailRole.jsx
+++ b/src/pages/role/component/DetailRole.jsx
@@ -4,7 +4,14 @@ import { Modal, Form, Input, Select, Row, Col } from 'antd';
 const { TextArea } = Input;
 const { Option } = Select;
 
-const DetailRole = memo(function DetailRole({ visible, onCancel, onOk, form, editingKey, readOnly }) {
+const DetailRole = memo(function DetailRole({
+    visible,
+    onCancel,
+    onOk,
+    form,
+    editingKey,
+    readOnly,
+}) {
     const getModalTitle = () => {
         if (readOnly) return 'Detail Role';
         if (editingKey) return 'Edit Role';
@@ -22,12 +29,7 @@ const DetailRole = memo(function DetailRole({ visible, onCancel, onOk, form, edi
             width={600}
             cancelButtonProps={{ style: readOnly ? { display: 'none' } : {} }}
         >
-            <Form
-                form={form}
-                layout="vertical"
-                name="roleForm"
-                disabled={readOnly}
-            >
+            <Form form={form} layout="vertical" name="roleForm" disabled={readOnly}>
                 <Row gutter={16}>
                     <Col span={24}>
                         <Form.Item
@@ -61,6 +63,7 @@ const DetailRole = memo(function DetailRole({ visible, onCancel, onOk, form, edi
                                 <Option value={1}>Level 1</Option>
                                 <Option value={2}>Level 2</Option>
                                 <Option value={3}>Level 3</Option>
+                                <Option value={4}>Level 4</Option>
                             </Select>
                         </Form.Item>
                     </Col>
diff --git a/src/pages/user/component/DetailUser.jsx b/src/pages/user/component/DetailUser.jsx
index 6a60cce..3ad71b4 100644
--- a/src/pages/user/component/DetailUser.jsx
+++ b/src/pages/user/component/DetailUser.jsx
@@ -2,12 +2,15 @@ import React, { useEffect, useState } from 'react';
 import { Modal, Input, Divider, Typography, Switch, Button, ConfigProvider, Select } from 'antd';
 import { NotifAlert, NotifOk } from '../../../components/Global/ToastNotif';
 import { createUser, updateUser } from '../../../api/user';
+import { getAllRole } from '../../../api/role';
 
 const { Text } = Typography;
 const { Option } = Select;
 
 const DetailUser = (props) => {
     const [confirmLoading, setConfirmLoading] = useState(false);
+    const [roleList, setRoleList] = useState([]);
+    const [loadingRoles, setLoadingRoles] = useState(false);
 
     const defaultData = {
         user_id: '',
@@ -208,6 +211,35 @@ const DetailUser = (props) => {
         });
     };
 
+    // Fetch all roles when component mounts or modal opens
+    const fetchRoles = async () => {
+        setLoadingRoles(true);
+        try {
+            // Create query params for fetching all roles without pagination limit
+            const queryParams = new URLSearchParams({
+                page: 1,
+                limit: 100, // Get all roles
+                search: '',
+            });
+
+            const response = await getAllRole(queryParams);
+            console.log('Fetched roles:', response);
+
+            if (response && response.data && response.data.data) {
+                setRoleList(response.data.data);
+            }
+        } catch (error) {
+            console.error('Error fetching roles:', error);
+            NotifAlert({
+                icon: 'error',
+                title: 'Error',
+                message: 'Gagal memuat daftar role',
+            });
+        } finally {
+            setLoadingRoles(false);
+        }
+    };
+
     useEffect(() => {
         const token = localStorage.getItem('token');
         if (token) {
@@ -234,6 +266,9 @@ const DetailUser = (props) => {
                 setFormData(defaultData);
             }
             setErrors({});
+
+            // Fetch roles when modal opens
+            fetchRoles();
         }
     }, [props.showModal]);
 
@@ -420,14 +455,16 @@ const DetailUser = (props) => {
                             value={FormData.role_id}
                             onChange={handleSelectChange}
                             disabled={props.readOnly}
+                            loading={loadingRoles}
                             style={{ width: '100%' }}
-                            placeholder="Pilih role"
+                            placeholder={loadingRoles ? 'Memuat role...' : 'Pilih role'}
                             allowClear
                         >
-                            <Option value={1}>Administrator</Option>
-                            <Option value={2}>Operator</Option>
-                            <Option value={3}>Engineer</Option>
-                            <Option value={4}>Guest</Option>
+                            {roleList.map((role) => (
+                                <Option key={role.role_id} value={role.role_id}>
+                                    {role.role_name} (Level {role.role_level})
+                                </Option>
+                            ))}
                         </Select>
                     </div>