diff --git a/src/app/components/RoleBadge.svelte b/src/app/components/RoleBadge.svelte
index 6e51a6d4..e94de592 100644
--- a/src/app/components/RoleBadge.svelte
+++ b/src/app/components/RoleBadge.svelte
@@ -9,7 +9,7 @@
 </script>
 
 <div
-  class="badge w-fit min-w-0"
+  class="badge badge-sm w-fit min-w-0"
   style="background-color: {roleColorSoft(role.color)}; border-color: {roleColor(
     role.color,
   )}; color: {roleColor(role.color)};">
diff --git a/src/lib/components/badge.css b/src/lib/components/badge.css
index 48715bed..e8af2021 100644
--- a/src/lib/components/badge.css
+++ b/src/lib/components/badge.css
@@ -2,6 +2,10 @@
   .badge {
     @apply inline-flex items-center gap-1 rounded-full border-2 border-solid border-transparent px-2 py-1 text-sm font-semibold whitespace-nowrap;
 
+    &.badge-sm {
+      @apply h-6 text-xs;
+    }
+
     &.badge-neutral {
       @apply bg-surface-less text-content-muted border-line;
     }