diff --git a/.agent/skills/ui-consistency/SKILL.md b/.agent/skills/ui-consistency/SKILL.md
index 0560d13..fa2003f 100644
--- a/.agent/skills/ui-consistency/SKILL.md
+++ b/.agent/skills/ui-consistency/SKILL.md
@@ -417,14 +417,14 @@ import { Badge } from "@/Components/ui/badge";
     <div
       key={role.id}
       className={cn(
-        "inline-flex flex-col px-3 py-1.5 rounded-md border",
+        "inline-flex items-center px-2.5 py-1 rounded-md border",
         role.name === 'super-admin'
           ? "bg-purple-50 border-purple-200"
           : "bg-gray-50 border-gray-200"
       )}
     >
-      <div className="flex items-center gap-1">
-        {role.name === 'super-admin' && <Shield className="h-3 w-3 text-purple-600" />}
+      <div className="flex items-center gap-1.5">
+        {role.name === 'super-admin' && <Shield className="h-3.5 w-3.5 text-purple-600" />}
         <span className={cn(
           "text-sm font-medium",
           role.name === 'super-admin' ? "text-purple-700" : "text-gray-900"
@@ -432,9 +432,6 @@ import { Badge } from "@/Components/ui/badge";
           {role.display_name}
         </span>
       </div>
-      <span className="text-[10px] text-gray-500 font-mono">
-        {role.name}
-      </span>
     </div>
   ))}
 </div>
diff --git a/resources/js/Pages/Admin/User/Index.tsx b/resources/js/Pages/Admin/User/Index.tsx
index ee23ef0..459e93b 100644
--- a/resources/js/Pages/Admin/User/Index.tsx
+++ b/resources/js/Pages/Admin/User/Index.tsx
@@ -138,14 +138,14 @@ export default function UserIndex({ users, filters }: Props) {
                                                     <div
                                                         key={role.id}
                                                         className={cn(
-                                                            "inline-flex flex-col px-3 py-1.5 rounded-md border",
+                                                            "inline-flex items-center px-2.5 py-1 rounded-md border",
                                                             role.name === 'super-admin'
                                                                 ? "bg-purple-50 border-purple-200"
                                                                 : "bg-gray-50 border-gray-200"
                                                         )}
                                                     >
-                                                        <div className="flex items-center gap-1">
-                                                            {role.name === 'super-admin' && <Shield className="h-3 w-3 text-purple-600" />}
+                                                        <div className="flex items-center gap-1.5">
+                                                            {role.name === 'super-admin' && <Shield className="h-3.5 w-3.5 text-purple-600" />}
                                                             <span className={cn(
                                                                 "text-sm font-medium",
                                                                 role.name === 'super-admin' ? "text-purple-700" : "text-gray-900"
@@ -153,9 +153,6 @@ export default function UserIndex({ users, filters }: Props) {
                                                                 {role.display_name}
                                                             </span>
                                                         </div>
-                                                        <span className="text-[10px] text-gray-500 font-mono">
-                                                            {role.name}
-                                                        </span>
                                                     </div>
                                                 ))
                                             ) : (