diff --git a/frontend/src/ts/components/common/UserBadge.tsx b/frontend/src/ts/components/common/UserBadge.tsx
index 03c953d7cd00..c0ebd235fa71 100644
--- a/frontend/src/ts/components/common/UserBadge.tsx
+++ b/frontend/src/ts/components/common/UserBadge.tsx
@@ -19,7 +19,10 @@ export function UserBadge(props: {
   return (
     <Show when={badge() !== undefined}>
       <Balloon
-        class={cn("rounded-[0.5em] text-em-xs", props.class)}
+        class={cn(
+          "rounded-[0.5em] px-[0.75em] py-[0.5em] text-em-xs",
+          props.class,
+        )}
         text={badge()?.description ?? ""}
         {...props.balloon}
         style={{
@@ -31,8 +34,7 @@ export function UserBadge(props: {
         <Show when={badge()?.icon}>
           <Fa
             icon={badge()?.icon ?? "fa-question"}
-            fixedWidth={false}
-            class="px-[0.75em] py-[0.5em]"
+            fixedWidth={props.iconOnly === true}
           />
           <Show when={!props.iconOnly}>
             <span class="hidden pr-[0.75em] md:inline">{badge()?.name}</span>
diff --git a/frontend/src/ts/components/pages/profile/UserDetails.tsx b/frontend/src/ts/components/pages/profile/UserDetails.tsx
index 618426da0fdc..fa7b462ada53 100644
--- a/frontend/src/ts/components/pages/profile/UserDetails.tsx
+++ b/frontend/src/ts/components/pages/profile/UserDetails.tsx
@@ -303,22 +303,26 @@ function AvatarAndName(props: {
             length: balloonPosition() === "up" ? "medium" : undefined,
           }}
         />
-        <For
-          each={props.profile.inventory?.badges
-            .filter((it) => !it.selected)
-            .map((it) => it.id)}
-        >
-          {(badgeId) => (
-            <UserBadge
-              id={badgeId}
-              iconOnly
-              balloon={{
-                position: balloonPosition(),
-                length: balloonPosition() === "up" ? "medium" : undefined,
-              }}
-            />
-          )}
-        </For>
+        <Show when={(props.profile.inventory?.badges?.length ?? 0) > 1}>
+          <div class="flex flex-row gap-1">
+            <For
+              each={props.profile.inventory?.badges
+                .filter((it) => !it.selected)
+                .map((it) => it.id)}
+            >
+              {(badgeId) => (
+                <UserBadge
+                  id={badgeId}
+                  iconOnly
+                  balloon={{
+                    position: balloonPosition(),
+                    length: balloonPosition() === "up" ? "medium" : undefined,
+                  }}
+                />
+              )}
+            </For>
+          </div>
+        </Show>
         <div class="grid">
           <Balloon inline text={accountAgeHint()} position={balloonPosition()}>
             Joined {formatDate(props.profile.addedAt ?? 0, "dd MMM yyyy")}