diff --git a/src/pages/user/component/ListUser.jsx b/src/pages/user/component/ListUser.jsx
index b5530af..ed6dc51 100644
--- a/src/pages/user/component/ListUser.jsx
+++ b/src/pages/user/component/ListUser.jsx
@@ -15,6 +15,40 @@ import { deleteUser, getAllUser, approveUser } from '../../../api/user';
 import TableList from '../../../components/Global/TableList';
 import Swal from 'sweetalert2';
 
+// Helper function to capitalize first letter
+const capitalizeFirstLetter = (str) => {
+    if (!str) return '';
+    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
+};
+
+// Helper function to get role tag color based on role_level or role_name
+const getRoleColor = (role_name, role_level) => {
+    // Priority 1: Based on role_level
+    if (role_level) {
+        switch (role_level) {
+            case 1:
+                return 'purple'; // Highest level
+            case 2:
+                return 'blue';
+            case 3:
+                return 'cyan';
+            case 4:
+                return 'green';
+            default:
+                return 'default';
+        }
+    }
+
+    // Priority 2: Based on role_name (fallback for backward compatibility)
+    const roleLower = role_name?.toLowerCase() || '';
+    if (roleLower.includes('admin')) return 'purple';
+    if (roleLower.includes('operator')) return 'blue';
+    if (roleLower.includes('engineer')) return 'cyan';
+    if (roleLower.includes('guest')) return 'default';
+
+    return 'default';
+};
+
 const columns = (showPreviewModal, showEditModal, showDeleteDialog, showApproveDialog) => [
     {
         title: 'ID',
@@ -54,31 +88,16 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog, showApproveD
         dataIndex: 'role_name',
         key: 'role_name',
         width: '12%',
-        render: (_, { role_name }) => {
+        render: (_, { role_name, role_level }) => {
             if (!role_name) return <Tag color={'default'}>Belum Ada Role</Tag>;
+
+            const color = getRoleColor(role_name, role_level);
+            const displayName = capitalizeFirstLetter(role_name);
+
             return (
-                <>
-                    {role_name === 'administrator' && (
-                        <Tag color={'purple'} key={'role'}>
-                            Administrator
-                        </Tag>
-                    )}
-                    {role_name === 'operator' && (
-                        <Tag color={'blue'} key={'role'}>
-                            Operator
-                        </Tag>
-                    )}
-                    {role_name === 'engineer' && (
-                        <Tag color={'cyan'} key={'role'}>
-                            Engineer
-                        </Tag>
-                    )}
-                    {role_name === 'guest' && (
-                        <Tag color={'default'} key={'role'}>
-                            Guest
-                        </Tag>
-                    )}
-                </>
+                <Tag color={color} key={'role'}>
+                    {displayName}
+                </Tag>
             );
         },
     },
@@ -354,7 +373,6 @@ const ListUser = memo(function ListUser(props) {
                     </Col>
                 </Row>
             </Card>
-
         </React.Fragment>
     );
 });