diff --git a/apps/nextjs/src/components/layout/header/configurable-header.module.css b/apps/nextjs/src/components/layout/header/configurable-header.module.css
index b4905947d..27e2c8402 100644
--- a/apps/nextjs/src/components/layout/header/configurable-header.module.css
+++ b/apps/nextjs/src/components/layout/header/configurable-header.module.css
@@ -73,6 +73,11 @@
   flex: 0 0 auto;
 }
 
+.userMenu {
+  display: flex;
+  padding-inline: rem(6px);
+}
+
 .mobileContent {
   display: none;
   grid-template-columns: minmax(0, 1fr) auto;
diff --git a/apps/nextjs/src/components/layout/header/configurable-header.tsx b/apps/nextjs/src/components/layout/header/configurable-header.tsx
index 3dd432c4f..6584cc17f 100644
--- a/apps/nextjs/src/components/layout/header/configurable-header.tsx
+++ b/apps/nextjs/src/components/layout/header/configurable-header.tsx
@@ -408,12 +408,14 @@ const HeaderItem = ({
 
   return (
     <TourTarget id="board-user-menu">
-      <UserButtonClient
-        avatar={avatar}
-        isAdmin={isAdmin}
-        isDockerEnabled={isDockerEnabled}
-        boardSwitcher={boardSwitcher}
-      />
+      <div className={classes.userMenu}>
+        <UserButtonClient
+          avatar={avatar}
+          isAdmin={isAdmin}
+          isDockerEnabled={isDockerEnabled}
+          boardSwitcher={boardSwitcher}
+        />
+      </div>
     </TourTarget>
   );
 };