diff --git a/apps/web/src/app/settings/users/page.tsx b/apps/web/src/app/settings/users/page.tsx
index da85bf4..755a752 100644
--- a/apps/web/src/app/settings/users/page.tsx
+++ b/apps/web/src/app/settings/users/page.tsx
@@ -42,7 +42,7 @@ export default async function UsersPage() {
             demoted or deleted.
           </CardDescription>
         </CardHeader>
-        <CardContent className="space-y-3">
+        <CardContent className="space-y-4">
           {rows.map((u) => (
             <UserRowClient
               key={u.id}
diff --git a/apps/web/src/app/settings/users/user-row-client.tsx b/apps/web/src/app/settings/users/user-row-client.tsx
index e8682de..317ea2b 100644
--- a/apps/web/src/app/settings/users/user-row-client.tsx
+++ b/apps/web/src/app/settings/users/user-row-client.tsx
@@ -58,11 +58,13 @@ export function UserRowClient({ user, isSelf, isLastAdmin }: UserRowClientProps)
   const deleteDisabled = pending || isSelf || isLastAdmin;
 
   return (
-    <div className="flex flex-col gap-2 rounded-lg border p-3">
-      <div className="flex items-center justify-between gap-2">
-        <div className="min-w-0">
-          <p className="text-sm font-medium truncate">{user.username}</p>
-          <div className="flex items-center gap-1.5">
+    <div className="flex flex-col gap-3 rounded-lg border p-4">
+      <div className="flex items-center justify-between gap-3">
+        <div className="min-w-0 space-y-1.5">
+          <p className="text-sm font-medium leading-none truncate">
+            {user.username}
+          </p>
+          <div className="flex items-center gap-2">
             <Badge
               variant="secondary"
               className={
@@ -78,7 +80,7 @@ export function UserRowClient({ user, isSelf, isLastAdmin }: UserRowClientProps)
             )}
           </div>
         </div>
-        <div className="flex flex-wrap justify-end gap-1">
+        <div className="flex flex-wrap justify-end gap-1.5">
           <Button
             type="button"
             size="sm"