diff --git a/frontend/src/ts/components/pages/profile/UserDetails.tsx b/frontend/src/ts/components/pages/profile/UserDetails.tsx
index 36cc40e23b4c..1a13516913ed 100644
--- a/frontend/src/ts/components/pages/profile/UserDetails.tsx
+++ b/frontend/src/ts/components/pages/profile/UserDetails.tsx
@@ -333,7 +333,7 @@ function LevelAndBar(props: { xp?: number }): JSXElement {
         {xpDetails().level}
       </div>
       <div
-        class="h-2 flex-1 rounded bg-sub"
+        class="h-2 flex-1 rounded bg-bg"
         data-balloon-pos="up"
         aria-label={bar()}
       >