diff --git a/apps/web/test/unit-tests/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap b/apps/web/test/unit-tests/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
index 136057a7ae..b6d45daca0 100644
--- a/apps/web/test/unit-tests/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
@@ -7,19 +7,19 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
     class="mx_SpacePanel collapsed"
   >
     <div
-      class="_wrapper_1yyfq_8 mx_UserMenu"
+      class="_wrapper_owhbm_8 mx_UserMenu"
     >
       <button
         aria-expanded="false"
         aria-haspopup="menu"
         aria-label="User menu"
-        class="_triggerButton_1yyfq_111"
+        class="_triggerButton_owhbm_115"
         data-state="closed"
         id="radix-react-use-id-1"
         type="button"
       >
         <div
-          class="_avatarWrapper_1yyfq_61"
+          class="_avatarWrapper_owhbm_65"
         >
           <span
             aria-label="@test:test"
diff --git a/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/guest-open-auto.png b/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/guest-open-auto.png
index 1b76d9b9ff..ac91bc3162 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/guest-open-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/guest-open-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/no-avatar-auto.png b/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/no-avatar-auto.png
index 98d1d362f8..ee4a9bd84a 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/no-avatar-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/no-avatar-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/open-auto.png b/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/open-auto.png
index b0c403a074..0f02583ce2 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/open-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/open-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/open-very-long-name-auto.png b/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/open-very-long-name-auto.png
index b583a0e45f..ba23fa005c 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/open-very-long-name-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/open-very-long-name-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/with-status-open-auto.png b/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/with-status-open-auto.png
index cbccc232fc..5daf44ef88 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/with-status-open-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/with-status-open-auto.png differ
diff --git a/packages/shared-components/src/menus/UserMenu/UserMenu.module.css b/packages/shared-components/src/menus/UserMenu/UserMenu.module.css
index fa361db09e..f6f612c338 100644
--- a/packages/shared-components/src/menus/UserMenu/UserMenu.module.css
+++ b/packages/shared-components/src/menus/UserMenu/UserMenu.module.css
@@ -39,6 +39,10 @@
             text-align: center;
         }
 
+        .userId {
+            color: var(--cpd-color-text-secondary);
+        }
+
         .createAccount {
             margin-top: var(--cpd-space-1x);
             margin-bottom: var(--cpd-space-2x);
diff --git a/packages/shared-components/src/menus/UserMenu/UserMenu.tsx b/packages/shared-components/src/menus/UserMenu/UserMenu.tsx
index 31301a3c5b..1af6f8183c 100644
--- a/packages/shared-components/src/menus/UserMenu/UserMenu.tsx
+++ b/packages/shared-components/src/menus/UserMenu/UserMenu.tsx
@@ -176,7 +176,7 @@ export function UserMenuView({ vm, className }: UserMenuViewProps): JSX.Element
                         {displayName}
                     </Text>
                     {userStatus && <StatusButton status={userStatus} clearStatus={vm.clearStatus} />}
-                    <Text data-testid="userId" size="md" as="span" type="body">
+                    <Text data-testid="userId" size="md" as="span" type="body" className={styles.userId}>
                         {userId}
                     </Text>
                     {manageAccountHref && (
diff --git a/packages/shared-components/src/menus/UserMenu/__snapshots__/UserMenu.test.tsx.snap b/packages/shared-components/src/menus/UserMenu/__snapshots__/UserMenu.test.tsx.snap
index c23fe6619b..62d0ef4d1f 100644
--- a/packages/shared-components/src/menus/UserMenu/__snapshots__/UserMenu.test.tsx.snap
+++ b/packages/shared-components/src/menus/UserMenu/__snapshots__/UserMenu.test.tsx.snap
@@ -294,7 +294,7 @@ exports[`UserMenu > renders a menu without an avatar 1`] = `
           Sally Sanderson
         </span>
         <span
-          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50"
+          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 UserMenu-module_userId"
           data-testid="userId"
         >
           @person-name:homeserver.com
@@ -626,7 +626,7 @@ exports[`UserMenu > renders an open menu 1`] = `
           Sally Sanderson with a longer name
         </span>
         <span
-          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50"
+          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 UserMenu-module_userId"
           data-testid="userId"
         >
           @person-name:homeserver.com