diff --git a/src/renderer/src/pages/profile/profile-hero/profile-hero.scss b/src/renderer/src/pages/profile/profile-hero/profile-hero.scss
index 284d1abf..fd21cf1d 100644
--- a/src/renderer/src/pages/profile/profile-hero/profile-hero.scss
+++ b/src/renderer/src/pages/profile/profile-hero/profile-hero.scss
@@ -82,7 +82,7 @@
     text-shadow: 0 0 5px rgb(0 0 0 / 40%);
   }
 
-  &__display-name-badges {
+  &__display-name-badges-container {
     display: flex;
     gap: globals.$spacing-unit;
     align-items: center;
diff --git a/src/renderer/src/pages/profile/profile-hero/user-badges.tsx b/src/renderer/src/pages/profile/profile-hero/user-badges.tsx
index 4ca180a0..ed5d0571 100644
--- a/src/renderer/src/pages/profile/profile-hero/user-badges.tsx
+++ b/src/renderer/src/pages/profile/profile-hero/user-badges.tsx
@@ -20,13 +20,14 @@ export function UserBadges() {
   };
 
   return (
-    <div className="profile-hero__display-name-badges">
+    <div className="profile-hero__display-name-badges-container">
       {userProfile.badges.map((badge) => {
         const badgeIcon = getBadgeIcon(badge);
 
         if (!badgeIcon) return null;
         return (
           <div
+            className={`badge__${badge.toLowerCase()}`}
             key={badge}
             title={t(`badge_description_${badge.toLowerCase()}`)}
           >