diff --git a/src/frontend/routes/users.tsx b/src/frontend/routes/users.tsx
index 00a7793..0de38a5 100644
--- a/src/frontend/routes/users.tsx
+++ b/src/frontend/routes/users.tsx
@@ -58,13 +58,37 @@ const getRoleColor = (role: string) => {
 const roles = [
   {
     name: 'DEVELOPER',
-    color: 'red',
-    permissions: ['Full Access', 'Error Feedback', 'Error Management', 'App Version Management', 'User Management']
+    color: 'violet',
+    description: 'Super admin dengan akses penuh ke seluruh sistem termasuk Dev Console.',
+    permissions: [
+      'Akses Dev Console (/dev)',
+      'Manajemen user & role',
+      'Kelola bug report & feedback',
+      'Lihat semua app & log aktivitas',
+      'Kelola versi & status aplikasi',
+      'Hapus log sistem',
+    ],
   },
   {
     name: 'ADMIN',
-    color: 'orange',
-    permissions: ['View All Apps', 'View Logs', 'Report Errors']
+    color: 'blue',
+    description: 'Operator yang dapat mengelola aplikasi, bug, dan melihat log aktivitas.',
+    permissions: [
+      'Lihat & kelola semua aplikasi',
+      'Kelola bug report',
+      'Lihat log aktivitas',
+      'Lihat data user, desa, orders',
+      'Update status village & produk',
+    ],
+  },
+  {
+    name: 'USER',
+    color: 'gray',
+    description: 'Akun baru yang belum disetujui. Menunggu approval dari Admin atau Developer.',
+    permissions: [
+      'Akses halaman profil',
+      'Lihat status persetujuan akun',
+    ],
   },
 ]
 
@@ -343,8 +367,8 @@ function UsersPage() {
                       </Group>
 
                       <Stack gap={4}>
-                        <Title order={4}>{role.name.replace('_', ' ')}</Title>
-                        <Text size="sm" c="dimmed">Core role for secure app management.</Text>
+                        <Title order={4}>{role.name}</Title>
+                        <Text size="sm" c="dimmed">{role.description}</Text>
                       </Stack>
 
                       <Divider />