diff --git a/apps/web/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-linux.png b/apps/web/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-linux.png
index 8cd0cbf863d..6038500c477 100644
Binary files a/apps/web/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-linux.png and b/apps/web/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-smallscreen-linux.png b/apps/web/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-smallscreen-linux.png
index 14fd316f792..b3496cc2667 100644
Binary files a/apps/web/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-smallscreen-linux.png and b/apps/web/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-smallscreen-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png b/apps/web/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png
index 3d1d02f663b..64be83b5e2c 100644
Binary files a/apps/web/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png and b/apps/web/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png differ
diff --git a/apps/web/res/css/views/messages/_DisambiguatedProfile.pcss b/apps/web/res/css/views/messages/_DisambiguatedProfile.pcss
index f2d63b7a1e2..72d813f2d80 100644
--- a/apps/web/res/css/views/messages/_DisambiguatedProfile.pcss
+++ b/apps/web/res/css/views/messages/_DisambiguatedProfile.pcss
@@ -9,19 +9,28 @@ Please see LICENSE files in the repository root for full details.
 
 /** Disambiguated profile needs to have a different layout in the member tile */
 .mx_MemberTileView .mx_DisambiguatedProfile {
-    display: flex;
-    flex-direction: column;
+    /* Grid so that the name and the user status emoji share the first row
+       (with the name truncating and the emoji always visible), while the
+       disambiguated MXID gets a full row below. */
+    display: grid;
+    grid-template-columns: minmax(0, max-content) auto;
+    align-items: center;
 
     .mx_DisambiguatedProfile_mxid {
+        grid-column: 1 / -1;
         margin-inline-start: 0;
         font: var(--cpd-font-body-sm-regular);
         text-overflow: ellipsis;
         overflow: hidden;
     }
 
+    .mx_DisambiguatedProfile_userStatus {
+        margin-inline-start: var(--cpd-space-0-5x);
+    }
+
     span:not(.mx_DisambiguatedProfile_mxid) {
         /**
-        In a member tile, this span element is a flex child and so
+        In a member tile, this span element is a grid child and so
         we need the following for text overflow to work.
         **/
         overflow: hidden;
diff --git a/apps/web/res/css/views/right_panel/_UserInfo.pcss b/apps/web/res/css/views/right_panel/_UserInfo.pcss
index 70cc4ba0641..239e60ff51a 100644
--- a/apps/web/res/css/views/right_panel/_UserInfo.pcss
+++ b/apps/web/res/css/views/right_panel/_UserInfo.pcss
@@ -113,6 +113,11 @@ Please see LICENSE files in the repository root for full details.
             height: 20px;
         }
 
+        .mx_UserInfo_userStatusMessage {
+            justify-content: center;
+            max-width: 100%;
+        }
+
         .mx_UserInfo_timezone {
             height: 20px;
             margin: 0;
diff --git a/apps/web/res/css/views/rooms/_RoomHeader.pcss b/apps/web/res/css/views/rooms/_RoomHeader.pcss
index a42811fae2a..5d79498e4a1 100644
--- a/apps/web/res/css/views/rooms/_RoomHeader.pcss
+++ b/apps/web/res/css/views/rooms/_RoomHeader.pcss
@@ -68,6 +68,12 @@ Please see LICENSE files in the repository root for full details.
     padding: var(--cpd-space-1x);
 }
 
+.mx_RoomHeader_userStatus {
+    /* With the heading's own 4px gap this makes up the 8px gap from the design */
+    margin-inline-start: var(--cpd-space-1x);
+    min-width: 0;
+}
+
 .mx_RoomHeader .mx_FacePile {
     color: $secondary-content;
     background: $background;
diff --git a/apps/web/res/css/views/settings/_AvatarSetting.pcss b/apps/web/res/css/views/settings/_AvatarSetting.pcss
index b928522820e..fc87bf422aa 100644
--- a/apps/web/res/css/views/settings/_AvatarSetting.pcss
+++ b/apps/web/res/css/views/settings/_AvatarSetting.pcss
@@ -7,9 +7,9 @@ Please see LICENSE files in the repository root for full details.
 */
 
 .mx_AvatarSetting_avatar {
-    width: 90px;
-    min-width: 90px; /* so it doesn't get crushed by the flexbox in languages with longer words */
-    height: 90px;
+    width: 120px;
+    min-width: 120px; /* so it doesn't get crushed by the flexbox in languages with longer words */
+    height: 120px;
     margin-top: 8px;
     position: relative;
 
@@ -31,9 +31,9 @@ Please see LICENSE files in the repository root for full details.
 
     & > img {
         display: block;
-        height: 90px;
+        height: 120px;
         width: inherit;
-        border-radius: 90px;
+        border-radius: 120px;
         cursor: pointer;
         object-fit: cover;
     }
diff --git a/apps/web/res/css/views/settings/_UserProfileSettings.pcss b/apps/web/res/css/views/settings/_UserProfileSettings.pcss
index 845aa52c1c8..67750b943f7 100644
--- a/apps/web/res/css/views/settings/_UserProfileSettings.pcss
+++ b/apps/web/res/css/views/settings/_UserProfileSettings.pcss
@@ -19,10 +19,14 @@ Please see LICENSE files in the repository root for full details.
         gap: 16px;
 
         .mx_UserProfileSettings_profile_displayName {
-            flex-grow: 1;
+            flex-grow: 0;
             width: 100%;
             gap: 0;
         }
+        .mx_UserProfileSettings_profile_nameAndStatus {
+            width: 100%;
+            gap: 16px;
+        }
     }
 
     .mx_UserProfileSettings_profile_controls {
diff --git a/apps/web/src/components/views/right_panel/user_info/UserInfoHeaderView.tsx b/apps/web/src/components/views/right_panel/user_info/UserInfoHeaderView.tsx
index 275175198c4..9859f37df9d 100644
--- a/apps/web/src/components/views/right_panel/user_info/UserInfoHeaderView.tsx
+++ b/apps/web/src/components/views/right_panel/user_info/UserInfoHeaderView.tsx
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { type JSX } from "react";
 import { type User, type RoomMember } from "matrix-js-sdk/src/matrix";
 import { Heading, Tooltip, Text } from "@vector-im/compound-web";
-import { Flex } from "@element-hq/web-shared-components";
+import { Flex, UserStatusMessageView } from "@element-hq/web-shared-components";
 
 import { useUserfoHeaderViewModel } from "../../../viewmodels/right_panel/user_info/UserInfoHeaderViewModel";
 import MemberAvatar from "../../avatars/MemberAvatar";
@@ -16,6 +16,7 @@ import { Container, type Member, type IDevice } from "../UserInfo";
 import PresenceLabel from "../../rooms/PresenceLabel";
 import CopyableText from "../../elements/CopyableText";
 import { UserInfoHeaderVerificationView } from "./UserInfoHeaderVerificationView";
+import { useUserStatus } from "../../../../hooks/useUserStatus";
 
 export interface UserInfoHeaderViewProps {
     member: Member;
@@ -33,6 +34,7 @@ export const UserInfoHeaderView: React.FC<UserInfoHeaderViewProps> = ({
     const vm = useUserfoHeaderViewModel({ member, roomId });
     const avatarUrl = (member as User).avatarUrl;
     const displayName = (member as RoomMember).rawDisplayName;
+    const userStatus = useUserStatus(member.userId);
 
     let presenceLabel: JSX.Element | undefined;
 
@@ -73,6 +75,9 @@ export const UserInfoHeaderView: React.FC<UserInfoHeaderViewProps> = ({
                             {displayName}
                         </Flex>
                     </Heading>
+                    {userStatus && (
+                        <UserStatusMessageView status={userStatus} className="mx_UserInfo_userStatusMessage" />
+                    )}
                     {presenceLabel}
                     {vm.timezoneInfo && (
                         <Tooltip label={vm.timezoneInfo?.timezone ?? ""}>
diff --git a/apps/web/src/components/views/rooms/MemberList/tiles/RoomMemberTileView.tsx b/apps/web/src/components/views/rooms/MemberList/tiles/RoomMemberTileView.tsx
index a3813050884..aab430a3eac 100644
--- a/apps/web/src/components/views/rooms/MemberList/tiles/RoomMemberTileView.tsx
+++ b/apps/web/src/components/views/rooms/MemberList/tiles/RoomMemberTileView.tsx
@@ -18,6 +18,7 @@ import { MemberTileView } from "./common/MemberTileView";
 import { InvitedIconView } from "./common/InvitedIconView";
 import { type MemberWithSeparator } from "../../../../viewmodels/memberlist/MemberListViewModel";
 import { DisambiguatedProfileViewModel } from "../../../../../viewmodels/room/timeline/event-tile/DisambiguatedProfileViewModel";
+import { useUserStatus } from "../../../../../hooks/useUserStatus";
 
 interface IProps {
     /**
@@ -47,17 +48,22 @@ export function RoomMemberTileView(props: IProps): JSX.Element {
         />
     );
     const name = vm.name;
+    const userStatus = useUserStatus(member.userId);
     const disambiguatedProfileVM = useCreateAutoDisposedViewModel(
         () =>
             new DisambiguatedProfileViewModel({
                 fallbackName: name,
                 member,
                 withTooltip: true,
+                userStatus,
             }),
     );
     useEffect(() => {
         disambiguatedProfileVM.setMember(name, member);
     }, [disambiguatedProfileVM, member, name]);
+    useEffect(() => {
+        disambiguatedProfileVM.setUserStatus(userStatus);
+    }, [disambiguatedProfileVM, userStatus]);
     const nameJSX = <DisambiguatedProfileView vm={disambiguatedProfileVM} className="mx_DisambiguatedProfile" />;
 
     const presenceState = member.presenceState;
diff --git a/apps/web/src/components/views/rooms/RoomHeader/RoomHeader.tsx b/apps/web/src/components/views/rooms/RoomHeader/RoomHeader.tsx
index dbdb0f619a0..96088877acc 100644
--- a/apps/web/src/components/views/rooms/RoomHeader/RoomHeader.tsx
+++ b/apps/web/src/components/views/rooms/RoomHeader/RoomHeader.tsx
@@ -20,7 +20,7 @@ import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error-
 import PublicIcon from "@vector-im/compound-design-tokens/assets/web/icons/public";
 import { HistoryVisibility, JoinRule, type Room } from "matrix-js-sdk/src/matrix";
 import { type ViewRoomOpts } from "@matrix-org/react-sdk-module-api/lib/lifecycles/RoomViewLifecycle";
-import { Flex, Box } from "@element-hq/web-shared-components";
+import { Flex, Box, UserStatusMessageView } from "@element-hq/web-shared-components";
 import { CallType } from "matrix-js-sdk/src/webrtc/call";
 import { HistoryIcon, UserProfileSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
@@ -57,6 +57,7 @@ import { ToggleableIcon } from "./toggle/ToggleableIcon.tsx";
 import { CurrentRightPanelPhaseContextProvider } from "../../../../contexts/CurrentRightPanelPhaseContext.tsx";
 import { LocalRoom } from "../../../../models/LocalRoom.ts";
 import { useIsEncrypted } from "../../../../hooks/useIsEncrypted.ts";
+import { useUserStatus } from "../../../../hooks/useUserStatus.ts";
 
 function RoomHeaderButtons({
     room,
@@ -448,6 +449,7 @@ export default function RoomHeader({
     const historyVisibility = useRoomState(room, (state) => state.getHistoryVisibility());
     const dmMember = useDmMember(room);
     const isDirectMessage = !!dmMember;
+    const dmUserStatus = useUserStatus(dmMember?.userId);
     const isRoomEncrypted = useIsEncrypted(client, room);
     const e2eStatus = useEncryptionStatus(client, room);
     const askToJoinEnabled = useFeatureEnabled("feature_ask_to_join");
@@ -496,6 +498,10 @@ export default function RoomHeader({
                         >
                             <span className="mx_RoomHeader_truncated mx_lineClamp">{roomName}</span>
 
+                            {isDirectMessage && dmUserStatus && (
+                                <UserStatusMessageView status={dmUserStatus} className="mx_RoomHeader_userStatus" />
+                            )}
+
                             {!isDirectMessage && joinRule === JoinRule.Public && (
                                 <Tooltip label={_t("common|public_room")} placement="right">
                                     <PublicIcon
diff --git a/apps/web/src/components/views/settings/AvatarSetting.tsx b/apps/web/src/components/views/settings/AvatarSetting.tsx
index 1c27efa75c4..7407f64b56e 100644
--- a/apps/web/src/components/views/settings/AvatarSetting.tsx
+++ b/apps/web/src/components/views/settings/AvatarSetting.tsx
@@ -181,7 +181,7 @@ const AvatarSetting: React.FC<IProps> = ({
             <BaseAvatar
                 idName={placeholderId}
                 name={placeholderName}
-                size="90px"
+                size="120px"
                 url={avatarURL}
                 altText={avatarAccessibleName}
             />
diff --git a/apps/web/src/components/views/settings/UserProfileSettings.tsx b/apps/web/src/components/views/settings/UserProfileSettings.tsx
index 29506d8ccbf..5d1567f3bc7 100644
--- a/apps/web/src/components/views/settings/UserProfileSettings.tsx
+++ b/apps/web/src/components/views/settings/UserProfileSettings.tsx
@@ -11,7 +11,12 @@ import { logger } from "matrix-js-sdk/src/logger";
 import { EditInPlace, Alert, ErrorMessage } from "@vector-im/compound-web";
 import PopOutIcon from "@vector-im/compound-design-tokens/assets/web/icons/pop-out";
 import SignOutIcon from "@vector-im/compound-design-tokens/assets/web/icons/sign-out";
-import { Flex, useToastContext } from "@element-hq/web-shared-components";
+import {
+    Flex,
+    SetStatusView,
+    useCreateAutoDisposedViewModel,
+    useToastContext,
+} from "@element-hq/web-shared-components";
 
 import { _t } from "../../../languageHandler";
 import { OwnProfileStore } from "../../../stores/OwnProfileStore";
@@ -27,6 +32,8 @@ import LogoutDialog, { shouldShowLogoutDialog } from "../dialogs/LogoutDialog";
 import Modal from "../../../Modal";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
 import { SettingsSection } from "./shared/SettingsSection.tsx";
+import { SetStatusViewModel } from "../../../viewmodels/status/SetStatusViewModel.ts";
+import SettingsStore from "../../../settings/SettingsStore.ts";
 
 const SpinnerToast: React.FC<{ children?: ReactNode }> = ({ children }) => (
     <>
@@ -131,6 +138,9 @@ const UserProfileSettings: React.FC<UserProfileSettingsProps> = ({
         })();
     }, [client]);
 
+    const userStatusEnabled = SettingsStore.getValue("feature_user_status");
+    const setStatusVM = useCreateAutoDisposedViewModel(() => new SetStatusViewModel({ client }));
+
     const onAvatarRemove = useCallback(async () => {
         const removeToast = toastRack.displayToast(
             <SpinnerToast>{_t("settings|general|avatar_remove_progress")}</SpinnerToast>,
@@ -212,21 +222,27 @@ const UserProfileSettings: React.FC<UserProfileSettingsProps> = ({
                         placeholderId={client.getUserId() ?? ""}
                         disabled={!canSetAvatar}
                     />
-                    <EditInPlace
-                        className="mx_UserProfileSettings_profile_displayName"
-                        label={_t("settings|general|display_name")}
-                        value={displayName}
-                        saveButtonLabel={_t("common|save")}
-                        cancelButtonLabel={_t("common|cancel")}
-                        savedLabel={_t("common|saved")}
-                        savingLabel={_t("common|updating")}
-                        onChange={onDisplayNameChanged}
-                        onCancel={onDisplayNameCancel}
-                        onSave={onDisplayNameSave}
-                        disabled={!canSetDisplayName}
-                    >
-                        {displayNameError && <ErrorMessage>{_t("settings|general|display_name_error")}</ErrorMessage>}
-                    </EditInPlace>
+
+                    <Flex direction="column" className="mx_UserProfileSettings_profile_nameAndStatus">
+                        <EditInPlace
+                            className="mx_UserProfileSettings_profile_displayName"
+                            label={_t("settings|general|display_name")}
+                            value={displayName}
+                            saveButtonLabel={_t("common|save")}
+                            cancelButtonLabel={_t("common|cancel")}
+                            savedLabel={_t("common|saved")}
+                            savingLabel={_t("common|updating")}
+                            onChange={onDisplayNameChanged}
+                            onCancel={onDisplayNameCancel}
+                            onSave={onDisplayNameSave}
+                            disabled={!canSetDisplayName}
+                        >
+                            {displayNameError && (
+                                <ErrorMessage>{_t("settings|general|display_name_error")}</ErrorMessage>
+                            )}
+                        </EditInPlace>
+                        {userStatusEnabled && <SetStatusView vm={setStatusVM} />}
+                    </Flex>
                 </div>
                 {avatarError && (
                     <Alert title={_t("settings|general|avatar_upload_error_title")} type="critical">
diff --git a/apps/web/src/components/views/spaces/SpacePanel.tsx b/apps/web/src/components/views/spaces/SpacePanel.tsx
index 20754a429be..bb9d2fe4581 100644
--- a/apps/web/src/components/views/spaces/SpacePanel.tsx
+++ b/apps/web/src/components/views/spaces/SpacePanel.tsx
@@ -462,7 +462,7 @@ const SpacePanel: React.FC = () => {
                         ref={ref}
                         aria-label={_t("common|spaces")}
                     >
-                        <UserMenu vm={userMenuVm} className="mx_UserMenu" />
+                        <UserMenu vm={userMenuVm} setStatusVm={userMenuVm.setStatusVm} className="mx_UserMenu" />
                         <AccessibleButton
                             className={classNames("mx_SpacePanel_toggleCollapse", {
                                 expanded: !isPanelCollapsed,
diff --git a/apps/web/src/hooks/useUserStatus.ts b/apps/web/src/hooks/useUserStatus.ts
index 131e43f9aec..881ef9bf603 100644
--- a/apps/web/src/hooks/useUserStatus.ts
+++ b/apps/web/src/hooks/useUserStatus.ts
@@ -6,16 +6,13 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { useEffect, useState } from "react";
-import { ClientEvent, MatrixError } from "matrix-js-sdk/src/matrix";
-import { logger as rootLogger } from "matrix-js-sdk/src/logger";
+import { ClientEvent } from "matrix-js-sdk/src/matrix";
 import { type UserStatus } from "@element-hq/web-shared-components";
 
 import { useMatrixClientContext } from "../contexts/MatrixClientContext";
 import { useTypedEventEmitter } from "./useEventEmitter";
 import { useFeatureEnabled } from "./useSettings";
-import { validateUserStatus } from "../utils/userStatus";
-
-const logger = rootLogger.getChild("useUserStatus");
+import { fetchUserStatus, validateUserStatus } from "../utils/userStatus";
 
 /**
  * Hook to get the MSC4426 user status for a given user ID. Returns undefined if the feature is disabled,
@@ -27,14 +24,14 @@ const logger = rootLogger.getChild("useUserStatus");
 export function useUserStatus(userId: string | undefined): UserStatus | undefined {
     const isEnabled = useFeatureEnabled("feature_user_status");
     const matrixClient = useMatrixClientContext();
-    const [rawUserStatus, setRawUserStatus] = useState<unknown>();
+    const [userStatus, setUserStatus] = useState<UserStatus | undefined>();
 
     useTypedEventEmitter(matrixClient, ClientEvent.UserProfileUpdate, (syncedUserId, syncProfile) => {
         if (syncedUserId !== userId) {
             return;
         }
 
-        setRawUserStatus(syncProfile["org.matrix.msc4426.status"]);
+        setUserStatus(validateUserStatus(syncProfile["org.matrix.msc4426.status"]));
     });
     useEffect(() => {
         (async () => {
@@ -42,28 +39,15 @@ export function useUserStatus(userId: string | undefined): UserStatus | undefine
                 return;
             }
             if (!userId) {
-                setRawUserStatus(undefined);
-                return;
-            }
-            if ((await matrixClient.doesServerSupportExtendedProfiles()) === false) {
-                setRawUserStatus(undefined);
+                setUserStatus(undefined);
                 return;
             }
-            try {
-                const result = await matrixClient.getExtendedProfileProperty(userId, "org.matrix.msc4426.status");
-                setRawUserStatus(result);
-            } catch (ex) {
-                if (ex instanceof MatrixError && ex.errcode === "M_NOT_FOUND") {
-                    setRawUserStatus(undefined);
-                } else {
-                    logger.warn(`Failed to get userStatus for ${userId}`, ex);
-                }
-            }
+            setUserStatus(await fetchUserStatus(matrixClient, userId));
         })();
     }, [isEnabled, userId, matrixClient]);
     if (!isEnabled) {
         return;
     }
 
-    return validateUserStatus(rawUserStatus);
+    return userStatus;
 }
diff --git a/apps/web/src/utils/userStatus.ts b/apps/web/src/utils/userStatus.ts
index 6020b6bf893..00d82b2a068 100644
--- a/apps/web/src/utils/userStatus.ts
+++ b/apps/web/src/utils/userStatus.ts
@@ -6,7 +6,10 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { type UserStatus } from "@element-hq/web-shared-components";
-import { type MatrixClient } from "matrix-js-sdk/src/matrix";
+import { type MatrixClient, MatrixError } from "matrix-js-sdk/src/matrix";
+import { logger as rootLogger } from "matrix-js-sdk/src/logger";
+
+const logger = rootLogger.getChild("userStatus");
 
 // MSC4426 defines the maximum length of a status to be 256 bytes of UTF-8,
 // so we truncate anything longer than that.
@@ -35,6 +38,27 @@ export function validateUserStatus(rawUserStatus: unknown): UserStatus | undefin
     };
 }
 
+/**
+ * Fetch the MSC4426 user status of the given user. Returns undefined if the server does not
+ * support extended profiles, the user has no (valid) status, or the status could not be fetched.
+ *
+ * @param client The Matrix client to fetch the status with.
+ * @param userId The ID of the user whose status is being fetched.
+ */
+export async function fetchUserStatus(client: MatrixClient, userId: string): Promise<UserStatus | undefined> {
+    if ((await client.doesServerSupportExtendedProfiles()) === false) {
+        return undefined;
+    }
+    try {
+        return validateUserStatus(await client.getExtendedProfileProperty(userId, "org.matrix.msc4426.status"));
+    } catch (ex) {
+        if (!(ex instanceof MatrixError && ex.errcode === "M_NOT_FOUND")) {
+            logger.warn(`Failed to get userStatus for ${userId}`, ex);
+        }
+        return undefined;
+    }
+}
+
 export function setUserStatus(client: MatrixClient, userStatus: UserStatus): Promise<void> {
     return client.setExtendedProfileProperty("org.matrix.msc4426.status", {
         emoji: userStatus.emoji,
diff --git a/apps/web/src/viewmodels/menus/UserMenuViewModel.ts b/apps/web/src/viewmodels/menus/UserMenuViewModel.ts
index ee021d3f467..a8c7b0c925c 100644
--- a/apps/web/src/viewmodels/menus/UserMenuViewModel.ts
+++ b/apps/web/src/viewmodels/menus/UserMenuViewModel.ts
@@ -20,11 +20,14 @@ import { getHomePageUrl } from "../../utils/pages";
 import SdkConfig from "../../SdkConfig";
 import type { MatrixClient } from "matrix-js-sdk/src/matrix";
 import { clearUserStatus } from "../../utils/userStatus";
+import { type SetStatusViewModel, UserMenuSetStatusViewModel } from "../status/SetStatusViewModel";
+import SettingsStore from "../../settings/SettingsStore";
 
 // Matches maximum size of an avatar in the UserMenu
 const AVATAR_PX = 88;
 
 export class UserMenuViewModel extends BaseViewModel<UserMenuSnapshot, undefined> implements UserMenuViewActions {
+    public readonly setStatusVm: SetStatusViewModel;
     private static computeSnapshot(
         client: MatrixClient,
         isPanelCollapsed: boolean,
@@ -45,6 +48,7 @@ export class UserMenuViewModel extends BaseViewModel<UserMenuSnapshot, undefined
             manageAccountHref: accountManagementEndpoint,
             showAvatar: isAuthenticated,
             userStatus: OwnProfileStore.instance.userStatus,
+            showUserStatus: SettingsStore.getValue("feature_user_status"),
             actions: {
                 createAccount: !isAuthenticated,
                 signIn: !isAuthenticated,
@@ -64,11 +68,13 @@ export class UserMenuViewModel extends BaseViewModel<UserMenuSnapshot, undefined
         accountManagementEndpoint?: string,
     ) {
         super(undefined, UserMenuViewModel.computeSnapshot(client, isPanelCollapsed, accountManagementEndpoint));
+        this.setStatusVm = new UserMenuSetStatusViewModel({ client });
         OwnProfileStore.instance.on(UPDATE_EVENT, this.recalculateProfile);
     }
 
     public dispose(): void {
         OwnProfileStore.instance.off(UPDATE_EVENT, this.recalculateProfile);
+        this.setStatusVm.dispose();
         super.dispose();
     }
 
diff --git a/apps/web/src/viewmodels/room-list/RoomListItemViewModel.ts b/apps/web/src/viewmodels/room-list/RoomListItemViewModel.ts
index d4bc29a8097..a5942b494ab 100644
--- a/apps/web/src/viewmodels/room-list/RoomListItemViewModel.ts
+++ b/apps/web/src/viewmodels/room-list/RoomListItemViewModel.ts
@@ -11,11 +11,12 @@ import {
     type RoomListItemViewSnapshot,
     type RoomListItemViewActions,
     type Section,
+    type UserStatus,
 } from "@element-hq/web-shared-components";
-import { RoomEvent } from "matrix-js-sdk/src/matrix";
+import { ClientEvent, RoomEvent } from "matrix-js-sdk/src/matrix";
 import { CallType } from "matrix-js-sdk/src/webrtc/call";
 
-import type { Room, MatrixClient, RoomMember } from "matrix-js-sdk/src/matrix";
+import type { Room, MatrixClient, RoomMember, ClientEventHandlerMap } from "matrix-js-sdk/src/matrix";
 import type { RoomNotificationState } from "../../stores/notifications/RoomNotificationState";
 import { RoomNotificationStateStore } from "../../stores/notifications/RoomNotificationStateStore";
 import { NotificationStateEvents } from "../../stores/notifications/NotificationState";
@@ -41,6 +42,7 @@ import { type Call, CallEvent } from "../../models/Call";
 import RoomListStoreV3 from "../../stores/room-list-v3/RoomListStoreV3";
 import { getCustomSectionData, isDefaultSectionTag } from "../../stores/room-list-v3/section";
 import { _t } from "../../languageHandler";
+import { fetchUserStatus, validateUserStatus } from "../../utils/userStatus";
 
 /**
  * View section type without `isSelected` field
@@ -66,6 +68,10 @@ export class RoomListItemViewModel
      * Track the current call for this room to manager listeners
      */
     private currentCall: Call | null = null;
+    /**
+     * The user ID of the other user if this room is a DM, used to show their user status.
+     */
+    private readonly dmUserId?: string;
     /**
      * The sections available in the "Move to section" submenu (tag + display name), identical
      * for every update of this item. Computing it reads the custom section settings, so it is
@@ -133,6 +139,24 @@ export class RoomListItemViewModel
 
         // Load message preview asynchronously (sync data is already complete)
         void this.loadAndSetMessagePreview();
+
+        // If this room is a DM, show the MSC4426 user status of the other user
+        this.dmUserId = DMRoomMap.shared().getUserIdForRoomId(props.room.roomId) ?? undefined;
+        if (this.dmUserId) {
+            props.client.on(ClientEvent.UserProfileUpdate, this.onUserProfileUpdate);
+            this.disposables.track(() => {
+                props.client.off(ClientEvent.UserProfileUpdate, this.onUserProfileUpdate);
+            });
+
+            const userStatusWatchRef = SettingsStore.watchSetting("feature_user_status", null, () =>
+                this.loadAndSetUserStatus(),
+            );
+            this.disposables.track(() => {
+                SettingsStore.unwatchSetting(userStatusWatchRef);
+            });
+
+            this.loadAndSetUserStatus();
+        }
     }
 
     public dispose(): void {
@@ -255,6 +279,28 @@ export class RoomListItemViewModel
         this.snapshot.merge({ messagePreview });
     }
 
+    /**
+     * Handler for profile updates received via sync, to keep the DM user's status up to date.
+     */
+    private onUserProfileUpdate: ClientEventHandlerMap[ClientEvent.UserProfileUpdate] = (userId, profile) => {
+        if (userId !== this.dmUserId || !SettingsStore.getValue("feature_user_status")) return;
+        this.snapshot.merge({ userStatus: validateUserStatus(profile?.["org.matrix.msc4426.status"]) });
+    };
+
+    /**
+     * Fetch and set the user status of the DM user, if the feature is enabled.
+     */
+    private loadAndSetUserStatus(): void {
+        void (async () => {
+            let userStatus: UserStatus | undefined;
+            if (this.dmUserId && SettingsStore.getValue("feature_user_status")) {
+                userStatus = await fetchUserStatus(this.props.client, this.dmUserId);
+            }
+            if (this.disposables.isDisposed) return;
+            this.snapshot.merge({ userStatus });
+        })();
+    }
+
     /**
      * Generate a complete RoomListItem with all synchronous data.
      * Message preview is loaded separately to avoid blocking initial render.
diff --git a/apps/web/src/viewmodels/status/SetStatusViewModel.ts b/apps/web/src/viewmodels/status/SetStatusViewModel.ts
new file mode 100644
index 00000000000..d455bc372c3
--- /dev/null
+++ b/apps/web/src/viewmodels/status/SetStatusViewModel.ts
@@ -0,0 +1,78 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { type MatrixClient } from "matrix-js-sdk/src/matrix";
+import { logger } from "matrix-js-sdk/src/logger";
+import {
+    BaseViewModel,
+    type SetStatusViewSnapshot,
+    type SetStatusViewActions,
+    type UserStatus,
+} from "@element-hq/web-shared-components";
+
+import { clearUserStatus, setUserStatus } from "../../utils/userStatus";
+import { OwnProfileStore } from "../../stores/OwnProfileStore";
+import dis from "../../dispatcher/dispatcher";
+import { UserTab } from "../../components/views/dialogs/UserTab";
+import { Action } from "../../dispatcher/actions";
+
+export interface SetStatusViewModelProps {
+    /**
+     * The Matrix client instance.
+     */
+    client: MatrixClient;
+}
+
+export class SetStatusViewModel
+    extends BaseViewModel<SetStatusViewSnapshot, SetStatusViewModelProps>
+    implements SetStatusViewActions
+{
+    public constructor(props: SetStatusViewModelProps) {
+        super(props, {
+            userStatus: OwnProfileStore.instance.userStatus,
+        });
+    }
+
+    public setStatus = (userStatus: UserStatus): void => {
+        const oldStatus = this.snapshot.current.userStatus;
+
+        this.snapshot.merge({ userStatus });
+        setUserStatus(this.props.client, userStatus).catch((err) => {
+            this.snapshot.merge({ userStatus: oldStatus });
+            logger.warn("Failed to set user status", err);
+        });
+    };
+
+    public clearStatus = (): void => {
+        const oldStatus = this.snapshot.current.userStatus;
+
+        this.snapshot.merge({ userStatus: undefined });
+        clearUserStatus(this.props.client).catch((err) => {
+            this.snapshot.merge({ userStatus: oldStatus });
+            logger.warn("Failed to clear user status", err);
+        });
+    };
+}
+
+/**
+ * A version of the view model that overrides the click handler to open settings instead.
+ */
+export class UserMenuSetStatusViewModel extends SetStatusViewModel {
+    public constructor(props: SetStatusViewModelProps) {
+        super(props);
+    }
+
+    public onSetStatusClick = (): void => {
+        dis.dispatch({
+            action: Action.ToggleUserMenu,
+        });
+        dis.dispatch({
+            action: Action.ViewUserSettings,
+            initialTabId: UserTab.Account,
+        });
+    };
+}
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 136057a7aee..64057828854 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_dfcmg_8 mx_UserMenu"
     >
       <button
         aria-expanded="false"
         aria-haspopup="menu"
         aria-label="User menu"
-        class="_triggerButton_1yyfq_111"
+        class="_triggerButton_dfcmg_84"
         data-state="closed"
         id="radix-react-use-id-1"
         type="button"
       >
         <div
-          class="_avatarWrapper_1yyfq_61"
+          class="_avatarWrapper_dfcmg_61"
         >
           <span
             aria-label="@test:test"
diff --git a/apps/web/test/viewmodels/menus/__snapshots__/UserMenuViewModel-test.ts.snap b/apps/web/test/viewmodels/menus/__snapshots__/UserMenuViewModel-test.ts.snap
index 979c0c59946..b7f34866147 100644
--- a/apps/web/test/viewmodels/menus/__snapshots__/UserMenuViewModel-test.ts.snap
+++ b/apps/web/test/viewmodels/menus/__snapshots__/UserMenuViewModel-test.ts.snap
@@ -17,6 +17,7 @@ exports[`UserMenuViewModel should generate a menu options for a guest 1`] = `
   "manageAccountHref": undefined,
   "open": true,
   "showAvatar": false,
+  "showUserStatus": false,
   "userId": "@alice:domain",
   "userStatus": undefined,
 }
@@ -39,6 +40,7 @@ exports[`UserMenuViewModel should generate a menu options for a logged in client
   "manageAccountHref": undefined,
   "open": true,
   "showAvatar": true,
+  "showUserStatus": false,
   "userId": "@alice:domain",
   "userStatus": undefined,
 }
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 1b76d9b9ffc..aa586a7198b 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 98d1d362f88..d947beff77b 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 b0c403a074f..0cbfcdb3125 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 b583a0e45fa..059fa1c44a4 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 cbccc232fcc..c70eb644948 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/__vis__/linux/__baselines__/status/SetStatusView.stories.tsx/no-status-auto.png b/packages/shared-components/__vis__/linux/__baselines__/status/SetStatusView.stories.tsx/no-status-auto.png
new file mode 100644
index 00000000000..79955f8c34a
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/status/SetStatusView.stories.tsx/no-status-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/status/SetStatusView.stories.tsx/open-auto.png b/packages/shared-components/__vis__/linux/__baselines__/status/SetStatusView.stories.tsx/open-auto.png
new file mode 100644
index 00000000000..79955f8c34a
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/status/SetStatusView.stories.tsx/open-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/status/SetStatusView.stories.tsx/with-status-auto.png b/packages/shared-components/__vis__/linux/__baselines__/status/SetStatusView.stories.tsx/with-status-auto.png
new file mode 100644
index 00000000000..75eafc84cfd
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/status/SetStatusView.stories.tsx/with-status-auto.png differ
diff --git a/packages/shared-components/src/core/userStatus.ts b/packages/shared-components/src/core/userStatus.ts
index 6aada947ef0..ee82524d464 100644
--- a/packages/shared-components/src/core/userStatus.ts
+++ b/packages/shared-components/src/core/userStatus.ts
@@ -13,3 +13,11 @@ export interface UserStatus {
     emoji: string;
     text: string;
 }
+
+/**
+ * Get the emoji of a user status limited to its first grapheme cluster,
+ * so that a malformed status containing more than one emoji doesn't break the layout.
+ */
+export function getUserStatusEmoji(status: UserStatus): string | undefined {
+    return [...new Intl.Segmenter().segment(status.emoji)][0]?.segment;
+}
diff --git a/packages/shared-components/src/i18n/strings/en_EN.json b/packages/shared-components/src/i18n/strings/en_EN.json
index 810c206430d..dded80a263b 100644
--- a/packages/shared-components/src/i18n/strings/en_EN.json
+++ b/packages/shared-components/src/i18n/strings/en_EN.json
@@ -193,6 +193,16 @@
         },
         "unread_messages": "Unread messages"
     },
+    "status": {
+        "set_status": {
+            "away": "Away",
+            "be_right_back": "Be right back",
+            "focus_time": "Focus Time",
+            "in_a_meeting": "In a meeting",
+            "on_the_road": "On the road",
+            "set_status_prompt": "What's your status?"
+        }
+    },
     "terms": {
         "tac_button": "Review terms and conditions"
     },
diff --git a/packages/shared-components/src/index.ts b/packages/shared-components/src/index.ts
index e45a914f36c..b997e3cbb70 100644
--- a/packages/shared-components/src/index.ts
+++ b/packages/shared-components/src/index.ts
@@ -90,6 +90,8 @@ export * from "./core/utils/FormattingUtils";
 export * from "./core/utils/ToastContext.tsx";
 export * from "./core/i18n/I18nApi";
 export * from "./core/utils/linkify";
-export type * from "./core/userStatus.ts";
+export * from "./core/userStatus.ts";
+export * from "./status/SetStatusView";
+export * from "./status/UserStatusMessageView";
 // MVVM
 export * from "./core/viewmodel";
diff --git a/packages/shared-components/src/menus/UserMenu/UserMenu.module.css b/packages/shared-components/src/menus/UserMenu/UserMenu.module.css
index fa361db09ee..64e1cfe3844 100644
--- a/packages/shared-components/src/menus/UserMenu/UserMenu.module.css
+++ b/packages/shared-components/src/menus/UserMenu/UserMenu.module.css
@@ -81,33 +81,6 @@
     background-color: var(--cpd-color-bg-canvas-default);
 }
 
-.statusButton {
-    border-radius: 30px;
-    background: var(--cpd-color-bg-subtle-secondary);
-    display: flex;
-    align-items: center;
-    padding-inline-start: var(--cpd-space-2x);
-    gap: 6px;
-    white-space: nowrap;
-    overflow: hidden;
-    max-width: 100%;
-
-    .menuStatusEmoji {
-        flex-shrink: 0;
-    }
-
-    .menuStatusText {
-        overflow: hidden;
-        min-width: 0;
-        text-overflow: ellipsis;
-    }
-
-    span {
-        font: var(--cpd-font-body-md-medium);
-        color: var(--cpd-color-text-secondary);
-    }
-}
-
 .triggerButton {
     border: none;
     background: none;
diff --git a/packages/shared-components/src/menus/UserMenu/UserMenu.stories.tsx b/packages/shared-components/src/menus/UserMenu/UserMenu.stories.tsx
index 0e1900d0e02..0e9472a8b00 100644
--- a/packages/shared-components/src/menus/UserMenu/UserMenu.stories.tsx
+++ b/packages/shared-components/src/menus/UserMenu/UserMenu.stories.tsx
@@ -13,6 +13,7 @@ import { UserMenuView, type UserMenuViewSnapshot, type UserMenuViewActions } fro
 import avatarUrl from "../../../static/element.png";
 import { useMockedViewModel } from "../../core/viewmodel";
 import { withViewDocs } from "../../../.storybook/withViewDocs";
+import { type SetStatusViewActions, type SetStatusViewSnapshot } from "../..";
 
 const UserMenuWrapperImpl = (snapshot: UserMenuViewSnapshot): JSX.Element => {
     const vm = useMockedViewModel<UserMenuViewSnapshot, UserMenuViewActions>(snapshot, {
@@ -26,7 +27,16 @@ const UserMenuWrapperImpl = (snapshot: UserMenuViewSnapshot): JSX.Element => {
         openSettings: fn(),
         clearStatus: fn(),
     });
-    return <UserMenuView vm={vm} />;
+
+    const setStatusVm = useMockedViewModel<SetStatusViewSnapshot, SetStatusViewActions>(
+        {},
+        {
+            setStatus: fn(),
+            clearStatus: fn(),
+        },
+    );
+
+    return <UserMenuView vm={vm} setStatusVm={setStatusVm} />;
 };
 
 const UserMenuWrapper = withViewDocs(UserMenuWrapperImpl, UserMenuView);
diff --git a/packages/shared-components/src/menus/UserMenu/UserMenu.tsx b/packages/shared-components/src/menus/UserMenu/UserMenu.tsx
index 31301a3c5b6..f318075bd07 100644
--- a/packages/shared-components/src/menus/UserMenu/UserMenu.tsx
+++ b/packages/shared-components/src/menus/UserMenu/UserMenu.tsx
@@ -6,7 +6,7 @@
  */
 
 import React, { type JSX } from "react";
-import { Avatar, Button, IconButton, Link, Menu, MenuItem, Separator, Text } from "@vector-im/compound-web";
+import { Avatar, Button, Link, Menu, MenuItem, Separator, Text } from "@vector-im/compound-web";
 import {
     ChatProblemIcon,
     DevicesIcon,
@@ -14,7 +14,6 @@ import {
     LockIcon,
     PopOutIcon,
     SettingsIcon,
-    CloseIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 import classNames from "classnames";
 
@@ -22,7 +21,7 @@ import styles from "./UserMenu.module.css";
 import { useViewModel, type ViewModel } from "../../core/viewmodel";
 import { useI18n } from "../../core/i18n/i18nContext";
 import { type UserStatus } from "../../core/userStatus";
-import { _t } from "../..";
+import { SetStatusView, type SetStatusViewModel } from "../../status/SetStatusView";
 
 export interface UserMenuViewSnapshot {
     /**
@@ -57,6 +56,12 @@ export interface UserMenuViewSnapshot {
      * The user status to display, or undefined for no icon / status.
      */
     userStatus?: UserStatus;
+    /**
+     * Whether to show UI for user status.
+     * Temporary while user status is in labs.
+     * Default: true
+     */
+    showUserStatus?: boolean;
     /**
      * A set of actions that the user can perform from the menu.
      */
@@ -105,43 +110,33 @@ export declare interface UserMenuViewActions {
      */
     openSettings: () => void;
     /**
-     * Called when the user clicks the button to clear theirt status.
+     * Called when the user clicks the button to clear their status.
      */
     clearStatus: () => void;
 }
 
 export type UserMenuViewProps = {
     vm: ViewModel<UserMenuViewSnapshot, UserMenuViewActions>;
+    setStatusVm: SetStatusViewModel;
     /**
      * Class name for the wrapper
      */
     className?: string;
 };
 
-function StatusButton({ status, clearStatus }: { status: UserStatus; clearStatus: () => void }): JSX.Element {
-    return (
-        <div className={styles.statusButton}>
-            <Text as="span" className={styles.menuStatusEmoji}>
-                {status.emoji}
-            </Text>
-            <Text as="span" className={styles.menuStatusText}>
-                {status.text}
-            </Text>
-            <IconButton
-                onClick={clearStatus}
-                aria-label={_t("menus|user_menu|clear_status")}
-                tooltip={_t("menus|user_menu|clear_status")}
-                size="28px"
-            >
-                <CloseIcon />
-            </IconButton>
-        </div>
-    );
-}
-
-export function UserMenuView({ vm, className }: UserMenuViewProps): JSX.Element {
-    const { userId, displayName, avatarUrl, expanded, open, manageAccountHref, actions, showAvatar, userStatus } =
-        useViewModel(vm);
+export function UserMenuView({ vm, setStatusVm, className }: UserMenuViewProps): JSX.Element {
+    const {
+        userId,
+        displayName,
+        avatarUrl,
+        expanded,
+        open,
+        manageAccountHref,
+        actions,
+        showAvatar,
+        userStatus,
+        showUserStatus = true,
+    } = useViewModel(vm);
     const { translate: _t } = useI18n();
     const trigger = (
         <button className={styles.triggerButton} aria-label={_t("menus|user_menu|title")}>
@@ -175,7 +170,7 @@ export function UserMenuView({ vm, className }: UserMenuViewProps): JSX.Element
                     <Text className={styles.displayname} type="body" size="lg" weight="semibold" as="span">
                         {displayName}
                     </Text>
-                    {userStatus && <StatusButton status={userStatus} clearStatus={vm.clearStatus} />}
+                    {showUserStatus && <SetStatusView vm={setStatusVm} />}
                     <Text data-testid="userId" size="md" as="span" type="body">
                         {userId}
                     </Text>
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 c23fe6619b4..5d876a63b03 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
@@ -293,6 +293,89 @@ exports[`UserMenu > renders a menu without an avatar 1`] = `
         >
           Sally Sanderson
         </span>
+        <div
+          aria-invalid="false"
+          class="_container_1xtut_8"
+        >
+          <button
+            aria-controls="react-use-id-3"
+            aria-expanded="false"
+            aria-haspopup="listbox"
+            aria-label="What's your status?"
+            class="SetStatusView-module_setStatusTrigger"
+            role="combobox"
+          >
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M15.536 15.536a1 1 0 0 0-1.415-1.415 3 3 0 0 1-2.12.879 3 3 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A5 5 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464M10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
+              />
+              <path
+                d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10m-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0"
+              />
+            </svg>
+            <span
+              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60"
+            >
+              What's your status?
+            </span>
+          </button>
+          <div
+            class="_content_1xtut_62"
+          >
+            <ul
+              class="_content_1xtut_62"
+              id="react-use-id-3"
+              role="listbox"
+            >
+              <li
+                aria-selected="false"
+                role="option"
+                tabindex="0"
+              >
+                💬 In a meeting
+                 
+              </li>
+              <li
+                aria-selected="false"
+                role="option"
+                tabindex="0"
+              >
+                💡 Focus Time
+                 
+              </li>
+              <li
+                aria-selected="false"
+                role="option"
+                tabindex="0"
+              >
+                🚙 On the road
+                 
+              </li>
+              <li
+                aria-selected="false"
+                role="option"
+                tabindex="0"
+              >
+                ☕️ Be right back
+                 
+              </li>
+              <li
+                aria-selected="false"
+                role="option"
+                tabindex="0"
+              >
+                🌴 Away
+                 
+              </li>
+            </ul>
+          </div>
+        </div>
         <span
           class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50"
           data-testid="userId"
@@ -625,6 +708,89 @@ exports[`UserMenu > renders an open menu 1`] = `
         >
           Sally Sanderson with a longer name
         </span>
+        <div
+          aria-invalid="false"
+          class="_container_1xtut_8"
+        >
+          <button
+            aria-controls="react-use-id-3"
+            aria-expanded="false"
+            aria-haspopup="listbox"
+            aria-label="What's your status?"
+            class="SetStatusView-module_setStatusTrigger"
+            role="combobox"
+          >
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M15.536 15.536a1 1 0 0 0-1.415-1.415 3 3 0 0 1-2.12.879 3 3 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A5 5 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464M10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
+              />
+              <path
+                d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10m-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0"
+              />
+            </svg>
+            <span
+              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60"
+            >
+              What's your status?
+            </span>
+          </button>
+          <div
+            class="_content_1xtut_62"
+          >
+            <ul
+              class="_content_1xtut_62"
+              id="react-use-id-3"
+              role="listbox"
+            >
+              <li
+                aria-selected="false"
+                role="option"
+                tabindex="0"
+              >
+                💬 In a meeting
+                 
+              </li>
+              <li
+                aria-selected="false"
+                role="option"
+                tabindex="0"
+              >
+                💡 Focus Time
+                 
+              </li>
+              <li
+                aria-selected="false"
+                role="option"
+                tabindex="0"
+              >
+                🚙 On the road
+                 
+              </li>
+              <li
+                aria-selected="false"
+                role="option"
+                tabindex="0"
+              >
+                ☕️ Be right back
+                 
+              </li>
+              <li
+                aria-selected="false"
+                role="option"
+                tabindex="0"
+              >
+                🌴 Away
+                 
+              </li>
+            </ul>
+          </div>
+        </div>
         <span
           class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50"
           data-testid="userId"
diff --git a/packages/shared-components/src/room-list/RoomListView/__snapshots__/RoomListView.test.tsx.snap b/packages/shared-components/src/room-list/RoomListView/__snapshots__/RoomListView.test.tsx.snap
index 23fad55e270..32e8080e330 100644
--- a/packages/shared-components/src/room-list/RoomListView/__snapshots__/RoomListView.test.tsx.snap
+++ b/packages/shared-components/src/room-list/RoomListView/__snapshots__/RoomListView.test.tsx.snap
@@ -111,11 +111,16 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="General"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          General
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="General"
+                          >
+                            General
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -260,11 +265,16 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Random"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Random
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Random"
+                          >
+                            Random
+                          </div>
                         </div>
                       </div>
                       <div
@@ -382,11 +392,16 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Engineering"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Engineering
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Engineering"
+                          >
+                            Engineering
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -510,11 +525,16 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Design"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Design
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Design"
+                          >
+                            Design
+                          </div>
                         </div>
                       </div>
                       <div
@@ -632,11 +652,16 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Product"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Product
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Product"
+                          >
+                            Product
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -760,11 +785,16 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Marketing"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Marketing
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Marketing"
+                          >
+                            Marketing
+                          </div>
                         </div>
                       </div>
                       <div
@@ -905,11 +935,16 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Sales"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Sales
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Sales"
+                          >
+                            Sales
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -1033,11 +1068,16 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Support"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Support
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Support"
+                          >
+                            Support
+                          </div>
                         </div>
                       </div>
                       <div
@@ -1155,11 +1195,16 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Announcements"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Announcements
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Announcements"
+                          >
+                            Announcements
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -1283,11 +1328,16 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Off-topic"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Off-topic
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Off-topic"
+                          >
+                            Off-topic
+                          </div>
                         </div>
                       </div>
                       <div
@@ -1405,11 +1455,16 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Team Alpha"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Team Alpha
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Team Alpha"
+                          >
+                            Team Alpha
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -1556,11 +1611,16 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Team Beta"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Team Beta
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Team Beta"
+                          >
+                            Team Beta
+                          </div>
                         </div>
                       </div>
                       <div
@@ -1678,11 +1738,16 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Project X"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Project X
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Project X"
+                          >
+                            Project X
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -1806,11 +1871,16 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Project Y"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Project Y
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Project Y"
+                          >
+                            Project Y
+                          </div>
                         </div>
                       </div>
                       <div
@@ -1928,11 +1998,16 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Water Cooler"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Water Cooler
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Water Cooler"
+                          >
+                            Water Cooler
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -2056,11 +2131,16 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Feedback"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Feedback
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Feedback"
+                          >
+                            Feedback
+                          </div>
                         </div>
                       </div>
                       <div
@@ -2201,11 +2281,16 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Ideas"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Ideas
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Ideas"
+                          >
+                            Ideas
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -2329,11 +2414,16 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Bugs"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Bugs
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Bugs"
+                          >
+                            Bugs
+                          </div>
                         </div>
                       </div>
                       <div
@@ -2451,11 +2541,16 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Features"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Features
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Features"
+                          >
+                            Features
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -2579,11 +2674,16 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Releases"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Releases
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Releases"
+                          >
+                            Releases
+                          </div>
                         </div>
                       </div>
                       <div
@@ -3369,11 +3469,16 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="General"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          General
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="General"
+                          >
+                            General
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -3518,11 +3623,16 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Random"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Random
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Random"
+                          >
+                            Random
+                          </div>
                         </div>
                       </div>
                       <div
@@ -3640,11 +3750,16 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Engineering"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Engineering
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Engineering"
+                          >
+                            Engineering
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -3768,11 +3883,16 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Design"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Design
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Design"
+                          >
+                            Design
+                          </div>
                         </div>
                       </div>
                       <div
@@ -3890,11 +4010,16 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Product"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Product
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Product"
+                          >
+                            Product
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -4018,11 +4143,16 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Marketing"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Marketing
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Marketing"
+                          >
+                            Marketing
+                          </div>
                         </div>
                       </div>
                       <div
@@ -4163,11 +4293,16 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Sales"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Sales
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Sales"
+                          >
+                            Sales
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -4291,11 +4426,16 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Support"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Support
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Support"
+                          >
+                            Support
+                          </div>
                         </div>
                       </div>
                       <div
@@ -4413,11 +4553,16 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Announcements"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Announcements
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Announcements"
+                          >
+                            Announcements
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -4541,11 +4686,16 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Off-topic"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Off-topic
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Off-topic"
+                          >
+                            Off-topic
+                          </div>
                         </div>
                       </div>
                       <div
@@ -4663,11 +4813,16 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Team Alpha"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Team Alpha
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Team Alpha"
+                          >
+                            Team Alpha
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -4814,11 +4969,16 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Team Beta"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Team Beta
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Team Beta"
+                          >
+                            Team Beta
+                          </div>
                         </div>
                       </div>
                       <div
@@ -4936,11 +5096,16 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Project X"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Project X
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Project X"
+                          >
+                            Project X
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -5064,11 +5229,16 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Project Y"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Project Y
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Project Y"
+                          >
+                            Project Y
+                          </div>
                         </div>
                       </div>
                       <div
@@ -5186,11 +5356,16 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Water Cooler"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Water Cooler
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Water Cooler"
+                          >
+                            Water Cooler
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -5314,11 +5489,16 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Feedback"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Feedback
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Feedback"
+                          >
+                            Feedback
+                          </div>
                         </div>
                       </div>
                       <div
@@ -5459,11 +5639,16 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Ideas"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Ideas
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Ideas"
+                          >
+                            Ideas
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -5587,11 +5772,16 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Bugs"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Bugs
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Bugs"
+                          >
+                            Bugs
+                          </div>
                         </div>
                       </div>
                       <div
@@ -5709,11 +5899,16 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Features"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Features
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Features"
+                          >
+                            Features
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -5837,11 +6032,16 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Releases"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Releases
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Releases"
+                          >
+                            Releases
+                          </div>
                         </div>
                       </div>
                       <div
@@ -5959,11 +6159,16 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="General"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          General
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="General"
+                          >
+                            General
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -6110,11 +6315,16 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Random"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Random
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Random"
+                          >
+                            Random
+                          </div>
                         </div>
                       </div>
                       <div
@@ -6232,11 +6442,16 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Engineering"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Engineering
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Engineering"
+                          >
+                            Engineering
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -6360,11 +6575,16 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Design"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Design
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Design"
+                          >
+                            Design
+                          </div>
                         </div>
                       </div>
                       <div
@@ -6482,11 +6702,16 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Product"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Product
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Product"
+                          >
+                            Product
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -6610,11 +6835,16 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Marketing"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Marketing
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Marketing"
+                          >
+                            Marketing
+                          </div>
                         </div>
                       </div>
                       <div
@@ -6755,11 +6985,16 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Sales"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Sales
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Sales"
+                          >
+                            Sales
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -6883,11 +7118,16 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Support"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Support
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Support"
+                          >
+                            Support
+                          </div>
                         </div>
                       </div>
                       <div
@@ -7005,11 +7245,16 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Announcements"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Announcements
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Announcements"
+                          >
+                            Announcements
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -7133,11 +7378,16 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Off-topic"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Off-topic
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Off-topic"
+                          >
+                            Off-topic
+                          </div>
                         </div>
                       </div>
                       <div
@@ -7255,11 +7505,16 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Team Alpha"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Team Alpha
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Team Alpha"
+                          >
+                            Team Alpha
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -7406,11 +7661,16 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Team Beta"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Team Beta
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Team Beta"
+                          >
+                            Team Beta
+                          </div>
                         </div>
                       </div>
                       <div
@@ -7528,11 +7788,16 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Project X"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Project X
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Project X"
+                          >
+                            Project X
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -7656,11 +7921,16 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Project Y"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Project Y
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Project Y"
+                          >
+                            Project Y
+                          </div>
                         </div>
                       </div>
                       <div
@@ -7778,11 +8048,16 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Water Cooler"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Water Cooler
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Water Cooler"
+                          >
+                            Water Cooler
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -7906,11 +8181,16 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Feedback"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Feedback
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Feedback"
+                          >
+                            Feedback
+                          </div>
                         </div>
                       </div>
                       <div
@@ -8051,11 +8331,16 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Ideas"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Ideas
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Ideas"
+                          >
+                            Ideas
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -8376,11 +8661,16 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                               class="RoomListItemView-module_ellipsis"
                             >
                               <div
-                                class="RoomListItemView-module_roomName"
-                                data-testid="room-name"
-                                title="General"
+                                class="Flex-module_flex"
+                                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                               >
-                                General
+                                <div
+                                  class="RoomListItemView-module_roomName"
+                                  data-testid="room-name"
+                                  title="General"
+                                >
+                                  General
+                                </div>
                               </div>
                               <div
                                 class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -8534,11 +8824,16 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                               class="RoomListItemView-module_ellipsis"
                             >
                               <div
-                                class="RoomListItemView-module_roomName"
-                                data-testid="room-name"
-                                title="Random"
+                                class="Flex-module_flex"
+                                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                               >
-                                Random
+                                <div
+                                  class="RoomListItemView-module_roomName"
+                                  data-testid="room-name"
+                                  title="Random"
+                                >
+                                  Random
+                                </div>
                               </div>
                             </div>
                             <div
@@ -8665,11 +8960,16 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                               class="RoomListItemView-module_ellipsis"
                             >
                               <div
-                                class="RoomListItemView-module_roomName"
-                                data-testid="room-name"
-                                title="Engineering"
+                                class="Flex-module_flex"
+                                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                               >
-                                Engineering
+                                <div
+                                  class="RoomListItemView-module_roomName"
+                                  data-testid="room-name"
+                                  title="Engineering"
+                                >
+                                  Engineering
+                                </div>
                               </div>
                               <div
                                 class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -8802,11 +9102,16 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                               class="RoomListItemView-module_ellipsis"
                             >
                               <div
-                                class="RoomListItemView-module_roomName"
-                                data-testid="room-name"
-                                title="Design"
+                                class="Flex-module_flex"
+                                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                               >
-                                Design
+                                <div
+                                  class="RoomListItemView-module_roomName"
+                                  data-testid="room-name"
+                                  title="Design"
+                                >
+                                  Design
+                                </div>
                               </div>
                             </div>
                             <div
@@ -8933,11 +9238,16 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                               class="RoomListItemView-module_ellipsis"
                             >
                               <div
-                                class="RoomListItemView-module_roomName"
-                                data-testid="room-name"
-                                title="Product"
+                                class="Flex-module_flex"
+                                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                               >
-                                Product
+                                <div
+                                  class="RoomListItemView-module_roomName"
+                                  data-testid="room-name"
+                                  title="Product"
+                                >
+                                  Product
+                                </div>
                               </div>
                               <div
                                 class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -9070,11 +9380,16 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                               class="RoomListItemView-module_ellipsis"
                             >
                               <div
-                                class="RoomListItemView-module_roomName"
-                                data-testid="room-name"
-                                title="Marketing"
+                                class="Flex-module_flex"
+                                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                               >
-                                Marketing
+                                <div
+                                  class="RoomListItemView-module_roomName"
+                                  data-testid="room-name"
+                                  title="Marketing"
+                                >
+                                  Marketing
+                                </div>
                               </div>
                             </div>
                             <div
@@ -9224,11 +9539,16 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                               class="RoomListItemView-module_ellipsis"
                             >
                               <div
-                                class="RoomListItemView-module_roomName"
-                                data-testid="room-name"
-                                title="Sales"
+                                class="Flex-module_flex"
+                                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                               >
-                                Sales
+                                <div
+                                  class="RoomListItemView-module_roomName"
+                                  data-testid="room-name"
+                                  title="Sales"
+                                >
+                                  Sales
+                                </div>
                               </div>
                               <div
                                 class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -9361,11 +9681,16 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                               class="RoomListItemView-module_ellipsis"
                             >
                               <div
-                                class="RoomListItemView-module_roomName"
-                                data-testid="room-name"
-                                title="Support"
+                                class="Flex-module_flex"
+                                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                               >
-                                Support
+                                <div
+                                  class="RoomListItemView-module_roomName"
+                                  data-testid="room-name"
+                                  title="Support"
+                                >
+                                  Support
+                                </div>
                               </div>
                             </div>
                             <div
@@ -9492,11 +9817,16 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                               class="RoomListItemView-module_ellipsis"
                             >
                               <div
-                                class="RoomListItemView-module_roomName"
-                                data-testid="room-name"
-                                title="Announcements"
+                                class="Flex-module_flex"
+                                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                               >
-                                Announcements
+                                <div
+                                  class="RoomListItemView-module_roomName"
+                                  data-testid="room-name"
+                                  title="Announcements"
+                                >
+                                  Announcements
+                                </div>
                               </div>
                               <div
                                 class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -9629,11 +9959,16 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                               class="RoomListItemView-module_ellipsis"
                             >
                               <div
-                                class="RoomListItemView-module_roomName"
-                                data-testid="room-name"
-                                title="Off-topic"
+                                class="Flex-module_flex"
+                                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                               >
-                                Off-topic
+                                <div
+                                  class="RoomListItemView-module_roomName"
+                                  data-testid="room-name"
+                                  title="Off-topic"
+                                >
+                                  Off-topic
+                                </div>
                               </div>
                             </div>
                             <div
@@ -9760,11 +10095,16 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                               class="RoomListItemView-module_ellipsis"
                             >
                               <div
-                                class="RoomListItemView-module_roomName"
-                                data-testid="room-name"
-                                title="Team Alpha"
+                                class="Flex-module_flex"
+                                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                               >
-                                Team Alpha
+                                <div
+                                  class="RoomListItemView-module_roomName"
+                                  data-testid="room-name"
+                                  title="Team Alpha"
+                                >
+                                  Team Alpha
+                                </div>
                               </div>
                               <div
                                 class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -9920,11 +10260,16 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                               class="RoomListItemView-module_ellipsis"
                             >
                               <div
-                                class="RoomListItemView-module_roomName"
-                                data-testid="room-name"
-                                title="Team Beta"
+                                class="Flex-module_flex"
+                                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                               >
-                                Team Beta
+                                <div
+                                  class="RoomListItemView-module_roomName"
+                                  data-testid="room-name"
+                                  title="Team Beta"
+                                >
+                                  Team Beta
+                                </div>
                               </div>
                             </div>
                             <div
@@ -10051,11 +10396,16 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                               class="RoomListItemView-module_ellipsis"
                             >
                               <div
-                                class="RoomListItemView-module_roomName"
-                                data-testid="room-name"
-                                title="Project X"
+                                class="Flex-module_flex"
+                                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                               >
-                                Project X
+                                <div
+                                  class="RoomListItemView-module_roomName"
+                                  data-testid="room-name"
+                                  title="Project X"
+                                >
+                                  Project X
+                                </div>
                               </div>
                               <div
                                 class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -10188,11 +10538,16 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                               class="RoomListItemView-module_ellipsis"
                             >
                               <div
-                                class="RoomListItemView-module_roomName"
-                                data-testid="room-name"
-                                title="Project Y"
+                                class="Flex-module_flex"
+                                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                               >
-                                Project Y
+                                <div
+                                  class="RoomListItemView-module_roomName"
+                                  data-testid="room-name"
+                                  title="Project Y"
+                                >
+                                  Project Y
+                                </div>
                               </div>
                             </div>
                             <div
@@ -10319,11 +10674,16 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                               class="RoomListItemView-module_ellipsis"
                             >
                               <div
-                                class="RoomListItemView-module_roomName"
-                                data-testid="room-name"
-                                title="Water Cooler"
+                                class="Flex-module_flex"
+                                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                               >
-                                Water Cooler
+                                <div
+                                  class="RoomListItemView-module_roomName"
+                                  data-testid="room-name"
+                                  title="Water Cooler"
+                                >
+                                  Water Cooler
+                                </div>
                               </div>
                               <div
                                 class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -10456,11 +10816,16 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                               class="RoomListItemView-module_ellipsis"
                             >
                               <div
-                                class="RoomListItemView-module_roomName"
-                                data-testid="room-name"
-                                title="Feedback"
+                                class="Flex-module_flex"
+                                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                               >
-                                Feedback
+                                <div
+                                  class="RoomListItemView-module_roomName"
+                                  data-testid="room-name"
+                                  title="Feedback"
+                                >
+                                  Feedback
+                                </div>
                               </div>
                             </div>
                             <div
@@ -10610,11 +10975,16 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                               class="RoomListItemView-module_ellipsis"
                             >
                               <div
-                                class="RoomListItemView-module_roomName"
-                                data-testid="room-name"
-                                title="Ideas"
+                                class="Flex-module_flex"
+                                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                               >
-                                Ideas
+                                <div
+                                  class="RoomListItemView-module_roomName"
+                                  data-testid="room-name"
+                                  title="Ideas"
+                                >
+                                  Ideas
+                                </div>
                               </div>
                               <div
                                 class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -10747,11 +11117,16 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                               class="RoomListItemView-module_ellipsis"
                             >
                               <div
-                                class="RoomListItemView-module_roomName"
-                                data-testid="room-name"
-                                title="Bugs"
+                                class="Flex-module_flex"
+                                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                               >
-                                Bugs
+                                <div
+                                  class="RoomListItemView-module_roomName"
+                                  data-testid="room-name"
+                                  title="Bugs"
+                                >
+                                  Bugs
+                                </div>
                               </div>
                             </div>
                             <div
@@ -10878,11 +11253,16 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                               class="RoomListItemView-module_ellipsis"
                             >
                               <div
-                                class="RoomListItemView-module_roomName"
-                                data-testid="room-name"
-                                title="Features"
+                                class="Flex-module_flex"
+                                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                               >
-                                Features
+                                <div
+                                  class="RoomListItemView-module_roomName"
+                                  data-testid="room-name"
+                                  title="Features"
+                                >
+                                  Features
+                                </div>
                               </div>
                               <div
                                 class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -11015,11 +11395,16 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                               class="RoomListItemView-module_ellipsis"
                             >
                               <div
-                                class="RoomListItemView-module_roomName"
-                                data-testid="room-name"
-                                title="Releases"
+                                class="Flex-module_flex"
+                                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                               >
-                                Releases
+                                <div
+                                  class="RoomListItemView-module_roomName"
+                                  data-testid="room-name"
+                                  title="Releases"
+                                >
+                                  Releases
+                                </div>
                               </div>
                             </div>
                             <div
@@ -11146,11 +11531,16 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                               class="RoomListItemView-module_ellipsis"
                             >
                               <div
-                                class="RoomListItemView-module_roomName"
-                                data-testid="room-name"
-                                title="General"
+                                class="Flex-module_flex"
+                                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                               >
-                                General
+                                <div
+                                  class="RoomListItemView-module_roomName"
+                                  data-testid="room-name"
+                                  title="General"
+                                >
+                                  General
+                                </div>
                               </div>
                               <div
                                 class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -11306,11 +11696,16 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                               class="RoomListItemView-module_ellipsis"
                             >
                               <div
-                                class="RoomListItemView-module_roomName"
-                                data-testid="room-name"
-                                title="Random"
+                                class="Flex-module_flex"
+                                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                               >
-                                Random
+                                <div
+                                  class="RoomListItemView-module_roomName"
+                                  data-testid="room-name"
+                                  title="Random"
+                                >
+                                  Random
+                                </div>
                               </div>
                             </div>
                             <div
@@ -11437,11 +11832,16 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                               class="RoomListItemView-module_ellipsis"
                             >
                               <div
-                                class="RoomListItemView-module_roomName"
-                                data-testid="room-name"
-                                title="Engineering"
+                                class="Flex-module_flex"
+                                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                               >
-                                Engineering
+                                <div
+                                  class="RoomListItemView-module_roomName"
+                                  data-testid="room-name"
+                                  title="Engineering"
+                                >
+                                  Engineering
+                                </div>
                               </div>
                               <div
                                 class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -11632,11 +12032,16 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                               class="RoomListItemView-module_ellipsis"
                             >
                               <div
-                                class="RoomListItemView-module_roomName"
-                                data-testid="room-name"
-                                title="Design"
+                                class="Flex-module_flex"
+                                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                               >
-                                Design
+                                <div
+                                  class="RoomListItemView-module_roomName"
+                                  data-testid="room-name"
+                                  title="Design"
+                                >
+                                  Design
+                                </div>
                               </div>
                             </div>
                             <div
@@ -11763,11 +12168,16 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                               class="RoomListItemView-module_ellipsis"
                             >
                               <div
-                                class="RoomListItemView-module_roomName"
-                                data-testid="room-name"
-                                title="Product"
+                                class="Flex-module_flex"
+                                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                               >
-                                Product
+                                <div
+                                  class="RoomListItemView-module_roomName"
+                                  data-testid="room-name"
+                                  title="Product"
+                                >
+                                  Product
+                                </div>
                               </div>
                               <div
                                 class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -11900,11 +12310,16 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                               class="RoomListItemView-module_ellipsis"
                             >
                               <div
-                                class="RoomListItemView-module_roomName"
-                                data-testid="room-name"
-                                title="Marketing"
+                                class="Flex-module_flex"
+                                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                               >
-                                Marketing
+                                <div
+                                  class="RoomListItemView-module_roomName"
+                                  data-testid="room-name"
+                                  title="Marketing"
+                                >
+                                  Marketing
+                                </div>
                               </div>
                             </div>
                             <div
@@ -12054,11 +12469,16 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                               class="RoomListItemView-module_ellipsis"
                             >
                               <div
-                                class="RoomListItemView-module_roomName"
-                                data-testid="room-name"
-                                title="Sales"
+                                class="Flex-module_flex"
+                                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                               >
-                                Sales
+                                <div
+                                  class="RoomListItemView-module_roomName"
+                                  data-testid="room-name"
+                                  title="Sales"
+                                >
+                                  Sales
+                                </div>
                               </div>
                               <div
                                 class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -12191,11 +12611,16 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                               class="RoomListItemView-module_ellipsis"
                             >
                               <div
-                                class="RoomListItemView-module_roomName"
-                                data-testid="room-name"
-                                title="Support"
+                                class="Flex-module_flex"
+                                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                               >
-                                Support
+                                <div
+                                  class="RoomListItemView-module_roomName"
+                                  data-testid="room-name"
+                                  title="Support"
+                                >
+                                  Support
+                                </div>
                               </div>
                             </div>
                             <div
@@ -12322,11 +12747,16 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                               class="RoomListItemView-module_ellipsis"
                             >
                               <div
-                                class="RoomListItemView-module_roomName"
-                                data-testid="room-name"
-                                title="Announcements"
+                                class="Flex-module_flex"
+                                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                               >
-                                Announcements
+                                <div
+                                  class="RoomListItemView-module_roomName"
+                                  data-testid="room-name"
+                                  title="Announcements"
+                                >
+                                  Announcements
+                                </div>
                               </div>
                               <div
                                 class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -12459,11 +12889,16 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                               class="RoomListItemView-module_ellipsis"
                             >
                               <div
-                                class="RoomListItemView-module_roomName"
-                                data-testid="room-name"
-                                title="Off-topic"
+                                class="Flex-module_flex"
+                                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                               >
-                                Off-topic
+                                <div
+                                  class="RoomListItemView-module_roomName"
+                                  data-testid="room-name"
+                                  title="Off-topic"
+                                >
+                                  Off-topic
+                                </div>
                               </div>
                             </div>
                             <div
@@ -12590,11 +13025,16 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                               class="RoomListItemView-module_ellipsis"
                             >
                               <div
-                                class="RoomListItemView-module_roomName"
-                                data-testid="room-name"
-                                title="Team Alpha"
+                                class="Flex-module_flex"
+                                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                               >
-                                Team Alpha
+                                <div
+                                  class="RoomListItemView-module_roomName"
+                                  data-testid="room-name"
+                                  title="Team Alpha"
+                                >
+                                  Team Alpha
+                                </div>
                               </div>
                               <div
                                 class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -12750,11 +13190,16 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                               class="RoomListItemView-module_ellipsis"
                             >
                               <div
-                                class="RoomListItemView-module_roomName"
-                                data-testid="room-name"
-                                title="Team Beta"
+                                class="Flex-module_flex"
+                                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                               >
-                                Team Beta
+                                <div
+                                  class="RoomListItemView-module_roomName"
+                                  data-testid="room-name"
+                                  title="Team Beta"
+                                >
+                                  Team Beta
+                                </div>
                               </div>
                             </div>
                             <div
@@ -12881,11 +13326,16 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                               class="RoomListItemView-module_ellipsis"
                             >
                               <div
-                                class="RoomListItemView-module_roomName"
-                                data-testid="room-name"
-                                title="Project X"
+                                class="Flex-module_flex"
+                                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                               >
-                                Project X
+                                <div
+                                  class="RoomListItemView-module_roomName"
+                                  data-testid="room-name"
+                                  title="Project X"
+                                >
+                                  Project X
+                                </div>
                               </div>
                               <div
                                 class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -13018,11 +13468,16 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                               class="RoomListItemView-module_ellipsis"
                             >
                               <div
-                                class="RoomListItemView-module_roomName"
-                                data-testid="room-name"
-                                title="Project Y"
+                                class="Flex-module_flex"
+                                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                               >
-                                Project Y
+                                <div
+                                  class="RoomListItemView-module_roomName"
+                                  data-testid="room-name"
+                                  title="Project Y"
+                                >
+                                  Project Y
+                                </div>
                               </div>
                             </div>
                             <div
@@ -13149,11 +13604,16 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                               class="RoomListItemView-module_ellipsis"
                             >
                               <div
-                                class="RoomListItemView-module_roomName"
-                                data-testid="room-name"
-                                title="Water Cooler"
+                                class="Flex-module_flex"
+                                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                               >
-                                Water Cooler
+                                <div
+                                  class="RoomListItemView-module_roomName"
+                                  data-testid="room-name"
+                                  title="Water Cooler"
+                                >
+                                  Water Cooler
+                                </div>
                               </div>
                               <div
                                 class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -13427,11 +13887,16 @@ exports[`<RoomListView /> > renders SmallFlatList story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="General"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          General
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="General"
+                          >
+                            General
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -13576,11 +14041,16 @@ exports[`<RoomListView /> > renders SmallFlatList story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Random"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Random
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Random"
+                          >
+                            Random
+                          </div>
                         </div>
                       </div>
                       <div
@@ -13895,11 +14365,16 @@ exports[`<RoomListView /> > renders SmallSectionList story 1`] = `
                               class="RoomListItemView-module_ellipsis"
                             >
                               <div
-                                class="RoomListItemView-module_roomName"
-                                data-testid="room-name"
-                                title="General"
+                                class="Flex-module_flex"
+                                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                               >
-                                General
+                                <div
+                                  class="RoomListItemView-module_roomName"
+                                  data-testid="room-name"
+                                  title="General"
+                                >
+                                  General
+                                </div>
                               </div>
                               <div
                                 class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -14053,11 +14528,16 @@ exports[`<RoomListView /> > renders SmallSectionList story 1`] = `
                               class="RoomListItemView-module_ellipsis"
                             >
                               <div
-                                class="RoomListItemView-module_roomName"
-                                data-testid="room-name"
-                                title="Random"
+                                class="Flex-module_flex"
+                                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                               >
-                                Random
+                                <div
+                                  class="RoomListItemView-module_roomName"
+                                  data-testid="room-name"
+                                  title="Random"
+                                >
+                                  Random
+                                </div>
                               </div>
                             </div>
                             <div
@@ -14318,11 +14798,16 @@ exports[`<RoomListView /> > renders Toast story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="General"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          General
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="General"
+                          >
+                            General
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -14467,11 +14952,16 @@ exports[`<RoomListView /> > renders Toast story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Random"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Random
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Random"
+                          >
+                            Random
+                          </div>
                         </div>
                       </div>
                       <div
@@ -14589,11 +15079,16 @@ exports[`<RoomListView /> > renders Toast story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Engineering"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Engineering
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Engineering"
+                          >
+                            Engineering
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -14717,11 +15212,16 @@ exports[`<RoomListView /> > renders Toast story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Design"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Design
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Design"
+                          >
+                            Design
+                          </div>
                         </div>
                       </div>
                       <div
@@ -14839,11 +15339,16 @@ exports[`<RoomListView /> > renders Toast story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Product"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Product
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Product"
+                          >
+                            Product
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -14967,11 +15472,16 @@ exports[`<RoomListView /> > renders Toast story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Marketing"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Marketing
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Marketing"
+                          >
+                            Marketing
+                          </div>
                         </div>
                       </div>
                       <div
@@ -15112,11 +15622,16 @@ exports[`<RoomListView /> > renders Toast story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Sales"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Sales
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Sales"
+                          >
+                            Sales
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -15240,11 +15755,16 @@ exports[`<RoomListView /> > renders Toast story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Support"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Support
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Support"
+                          >
+                            Support
+                          </div>
                         </div>
                       </div>
                       <div
@@ -15362,11 +15882,16 @@ exports[`<RoomListView /> > renders Toast story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Announcements"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Announcements
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Announcements"
+                          >
+                            Announcements
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -15490,11 +16015,16 @@ exports[`<RoomListView /> > renders Toast story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Off-topic"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Off-topic
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Off-topic"
+                          >
+                            Off-topic
+                          </div>
                         </div>
                       </div>
                       <div
@@ -15612,11 +16142,16 @@ exports[`<RoomListView /> > renders Toast story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Team Alpha"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Team Alpha
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Team Alpha"
+                          >
+                            Team Alpha
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -15763,11 +16298,16 @@ exports[`<RoomListView /> > renders Toast story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Team Beta"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Team Beta
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Team Beta"
+                          >
+                            Team Beta
+                          </div>
                         </div>
                       </div>
                       <div
@@ -15885,11 +16425,16 @@ exports[`<RoomListView /> > renders Toast story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Project X"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Project X
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Project X"
+                          >
+                            Project X
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -16013,11 +16558,16 @@ exports[`<RoomListView /> > renders Toast story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Project Y"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Project Y
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Project Y"
+                          >
+                            Project Y
+                          </div>
                         </div>
                       </div>
                       <div
@@ -16135,11 +16685,16 @@ exports[`<RoomListView /> > renders Toast story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Water Cooler"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Water Cooler
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Water Cooler"
+                          >
+                            Water Cooler
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -16263,11 +16818,16 @@ exports[`<RoomListView /> > renders Toast story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Feedback"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Feedback
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Feedback"
+                          >
+                            Feedback
+                          </div>
                         </div>
                       </div>
                       <div
@@ -16408,11 +16968,16 @@ exports[`<RoomListView /> > renders Toast story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Ideas"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Ideas
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Ideas"
+                          >
+                            Ideas
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -16536,11 +17101,16 @@ exports[`<RoomListView /> > renders Toast story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Bugs"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Bugs
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Bugs"
+                          >
+                            Bugs
+                          </div>
                         </div>
                       </div>
                       <div
@@ -16658,11 +17228,16 @@ exports[`<RoomListView /> > renders Toast story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Features"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Features
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Features"
+                          >
+                            Features
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -16786,11 +17361,16 @@ exports[`<RoomListView /> > renders Toast story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Releases"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Releases
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Releases"
+                          >
+                            Releases
+                          </div>
                         </div>
                       </div>
                       <div
@@ -17024,11 +17604,16 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="General"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          General
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="General"
+                          >
+                            General
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -17173,11 +17758,16 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Random"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Random
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Random"
+                          >
+                            Random
+                          </div>
                         </div>
                       </div>
                       <div
@@ -17295,11 +17885,16 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Engineering"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Engineering
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Engineering"
+                          >
+                            Engineering
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -17423,11 +18018,16 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Design"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Design
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Design"
+                          >
+                            Design
+                          </div>
                         </div>
                       </div>
                       <div
@@ -17545,11 +18145,16 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Product"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Product
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Product"
+                          >
+                            Product
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -17673,11 +18278,16 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Marketing"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Marketing
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Marketing"
+                          >
+                            Marketing
+                          </div>
                         </div>
                       </div>
                       <div
@@ -17818,11 +18428,16 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Sales"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Sales
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Sales"
+                          >
+                            Sales
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -17946,11 +18561,16 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Support"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Support
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Support"
+                          >
+                            Support
+                          </div>
                         </div>
                       </div>
                       <div
@@ -18068,11 +18688,16 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Announcements"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Announcements
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Announcements"
+                          >
+                            Announcements
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -18196,11 +18821,16 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Off-topic"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Off-topic
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Off-topic"
+                          >
+                            Off-topic
+                          </div>
                         </div>
                       </div>
                       <div
@@ -18318,11 +18948,16 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Team Alpha"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Team Alpha
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Team Alpha"
+                          >
+                            Team Alpha
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -18469,11 +19104,16 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Team Beta"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Team Beta
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Team Beta"
+                          >
+                            Team Beta
+                          </div>
                         </div>
                       </div>
                       <div
@@ -18591,11 +19231,16 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Project X"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Project X
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Project X"
+                          >
+                            Project X
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -18719,11 +19364,16 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Project Y"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Project Y
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Project Y"
+                          >
+                            Project Y
+                          </div>
                         </div>
                       </div>
                       <div
@@ -18841,11 +19491,16 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Water Cooler"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Water Cooler
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Water Cooler"
+                          >
+                            Water Cooler
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -18969,11 +19624,16 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Feedback"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Feedback
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Feedback"
+                          >
+                            Feedback
+                          </div>
                         </div>
                       </div>
                       <div
@@ -19114,11 +19774,16 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Ideas"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Ideas
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Ideas"
+                          >
+                            Ideas
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -19242,11 +19907,16 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Bugs"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Bugs
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Bugs"
+                          >
+                            Bugs
+                          </div>
                         </div>
                       </div>
                       <div
@@ -19364,11 +20034,16 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Features"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Features
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Features"
+                          >
+                            Features
+                          </div>
                         </div>
                         <div
                           class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -19492,11 +20167,16 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                         class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="RoomListItemView-module_roomName"
-                          data-testid="room-name"
-                          title="Releases"
+                          class="Flex-module_flex"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                         >
-                          Releases
+                          <div
+                            class="RoomListItemView-module_roomName"
+                            data-testid="room-name"
+                            title="Releases"
+                          >
+                            Releases
+                          </div>
                         </div>
                       </div>
                       <div
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemContent.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemContent.tsx
index 4843a3463f5..80e5f50a445 100644
--- a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemContent.tsx
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemContent.tsx
@@ -6,11 +6,12 @@
  */
 
 import React, { type JSX, memo, type ReactNode } from "react";
-import { Text } from "@vector-im/compound-web";
+import { Text, Tooltip } from "@vector-im/compound-web";
 import classNames from "classnames";
 
 import { Flex } from "../../../../core/utils/Flex";
 import { useViewModel } from "../../../../core/viewmodel";
+import { getUserStatusEmoji } from "../../../../core/userStatus";
 import { NotificationDecoration } from "./NotificationDecoration";
 import { RoomListItemHoverMenu } from "./RoomListItemHoverMenu";
 import { type Room, type RoomListItemViewModel } from "./RoomListItemView";
@@ -52,9 +53,18 @@ export const RoomListItemContent = memo(function RoomListItemContent({
             <Flex className={styles.content} gap="var(--cpd-space-2x)" align="center" justify="space-between">
                 {/* We truncate the room name when too long. Title here is to show the full name on hover */}
                 <div className={styles.ellipsis}>
-                    <div className={styles.roomName} title={item.name} data-testid="room-name">
-                        {item.name}
-                    </div>
+                    <Flex align="center" gap="var(--cpd-space-1-5x)">
+                        <div className={styles.roomName} title={item.name} data-testid="room-name">
+                            {item.name}
+                        </div>
+                        {item.userStatus && (
+                            <Tooltip description={item.userStatus.text}>
+                                <Text as="span" size="lg" className={styles.userStatusEmoji}>
+                                    {getUserStatusEmoji(item.userStatus)}
+                                </Text>
+                            </Tooltip>
+                        )}
+                    </Flex>
                     {item.messagePreview && (
                         <Text as="div" size="sm" className={styles.ellipsis} title={item.messagePreview}>
                             {item.messagePreview}
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.module.css b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.module.css
index 4359634380e..9eaa7e6ad45 100644
--- a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.module.css
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.module.css
@@ -99,6 +99,16 @@
     text-overflow: ellipsis;
 }
 
+.roomName {
+    /* Allow the room name to shrink and truncate when displayed next to the user status emoji */
+    min-width: 0;
+}
+
+.userStatusEmoji {
+    flex-shrink: 0;
+    line-height: 1;
+}
+
 .selected {
     .container {
         background-color: var(--cpd-color-bg-action-tertiary-selected);
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.tsx
index fbfa2f9e285..0ca002d3e7a 100644
--- a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.tsx
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.tsx
@@ -16,6 +16,7 @@ import { RoomListItemContent } from "./RoomListItemContent";
 import { type RoomNotifState } from "./RoomNotifs";
 import styles from "./RoomListItemView.module.css";
 import { useViewModel, type ViewModel } from "../../../../core/viewmodel";
+import { type UserStatus } from "../../../../core/userStatus";
 import { _t } from "../../../../core/i18n/i18n";
 
 /**
@@ -72,6 +73,8 @@ export interface RoomListItemViewSnapshot {
     isBold: boolean;
     /** Optional message preview text */
     messagePreview?: string;
+    /** The MSC4426 user status of the other user in a DM room, if any */
+    userStatus?: UserStatus;
     /** Notification decoration data */
     notification: NotificationDecorationData;
     /** Whether the more options menu should be shown */
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/__snapshots__/RoomListItemView.test.tsx.snap b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/__snapshots__/RoomListItemView.test.tsx.snap
index 353ce9c7c43..8ec0f731e8c 100644
--- a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/__snapshots__/RoomListItemView.test.tsx.snap
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/__snapshots__/RoomListItemView.test.tsx.snap
@@ -37,11 +37,16 @@ exports[`<RoomListItemView /> > renders Bold story 1`] = `
             class="RoomListItemView-module_ellipsis"
           >
             <div
-              class="RoomListItemView-module_roomName"
-              data-testid="room-name"
-              title="Team Updates"
+              class="Flex-module_flex"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
             >
-              Team Updates
+              <div
+                class="RoomListItemView-module_roomName"
+                data-testid="room-name"
+                title="Team Updates"
+              >
+                Team Updates
+              </div>
             </div>
             <div
               class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -167,11 +172,16 @@ exports[`<RoomListItemView /> > renders Default story 1`] = `
             class="RoomListItemView-module_ellipsis"
           >
             <div
-              class="RoomListItemView-module_roomName"
-              data-testid="room-name"
-              title="General"
+              class="Flex-module_flex"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
             >
-              General
+              <div
+                class="RoomListItemView-module_roomName"
+                data-testid="room-name"
+                title="General"
+              >
+                General
+              </div>
             </div>
             <div
               class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -297,11 +307,16 @@ exports[`<RoomListItemView /> > renders Invitation story 1`] = `
             class="RoomListItemView-module_ellipsis"
           >
             <div
-              class="RoomListItemView-module_roomName"
-              data-testid="room-name"
-              title="Secret Project"
+              class="Flex-module_flex"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
             >
-              Secret Project
+              <div
+                class="RoomListItemView-module_roomName"
+                data-testid="room-name"
+                title="Secret Project"
+              >
+                Secret Project
+              </div>
             </div>
             <div
               class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -445,11 +460,16 @@ exports[`<RoomListItemView /> > renders NoMessagePreview story 1`] = `
             class="RoomListItemView-module_ellipsis"
           >
             <div
-              class="RoomListItemView-module_roomName"
-              data-testid="room-name"
-              title="General"
+              class="Flex-module_flex"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
             >
-              General
+              <div
+                class="RoomListItemView-module_roomName"
+                data-testid="room-name"
+                title="General"
+              >
+                General
+              </div>
             </div>
           </div>
           <div
@@ -569,11 +589,16 @@ exports[`<RoomListItemView /> > renders Selected story 1`] = `
             class="RoomListItemView-module_ellipsis"
           >
             <div
-              class="RoomListItemView-module_roomName"
-              data-testid="room-name"
-              title="General"
+              class="Flex-module_flex"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
             >
-              General
+              <div
+                class="RoomListItemView-module_roomName"
+                data-testid="room-name"
+                title="General"
+              >
+                General
+              </div>
             </div>
             <div
               class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -699,11 +724,16 @@ exports[`<RoomListItemView /> > renders UnsentMessage story 1`] = `
             class="RoomListItemView-module_ellipsis"
           >
             <div
-              class="RoomListItemView-module_roomName"
-              data-testid="room-name"
-              title="General"
+              class="Flex-module_flex"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
             >
-              General
+              <div
+                class="RoomListItemView-module_roomName"
+                data-testid="room-name"
+                title="General"
+              >
+                General
+              </div>
             </div>
             <div
               class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -847,11 +877,16 @@ exports[`<RoomListItemView /> > renders WithHoverMenu story 1`] = `
             class="RoomListItemView-module_ellipsis"
           >
             <div
-              class="RoomListItemView-module_roomName"
-              data-testid="room-name"
-              title="General"
+              class="Flex-module_flex"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
             >
-              General
+              <div
+                class="RoomListItemView-module_roomName"
+                data-testid="room-name"
+                title="General"
+              >
+                General
+              </div>
             </div>
             <div
               class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -977,11 +1012,16 @@ exports[`<RoomListItemView /> > renders WithMention story 1`] = `
             class="RoomListItemView-module_ellipsis"
           >
             <div
-              class="RoomListItemView-module_roomName"
-              data-testid="room-name"
-              title="General"
+              class="Flex-module_flex"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
             >
-              General
+              <div
+                class="RoomListItemView-module_roomName"
+                data-testid="room-name"
+                title="General"
+              >
+                General
+              </div>
             </div>
             <div
               class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -1130,11 +1170,16 @@ exports[`<RoomListItemView /> > renders WithNotification story 1`] = `
             class="RoomListItemView-module_ellipsis"
           >
             <div
-              class="RoomListItemView-module_roomName"
-              data-testid="room-name"
-              title="General"
+              class="Flex-module_flex"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
             >
-              General
+              <div
+                class="RoomListItemView-module_roomName"
+                data-testid="room-name"
+                title="General"
+              >
+                General
+              </div>
             </div>
             <div
               class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -1272,11 +1317,16 @@ exports[`<RoomListItemView /> > renders WithVideoCall story 1`] = `
             class="RoomListItemView-module_ellipsis"
           >
             <div
-              class="RoomListItemView-module_roomName"
-              data-testid="room-name"
-              title="General"
+              class="Flex-module_flex"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
             >
-              General
+              <div
+                class="RoomListItemView-module_roomName"
+                data-testid="room-name"
+                title="General"
+              >
+                General
+              </div>
             </div>
             <div
               class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -1420,11 +1470,16 @@ exports[`<RoomListItemView /> > renders WithVoiceCall story 1`] = `
             class="RoomListItemView-module_ellipsis"
           >
             <div
-              class="RoomListItemView-module_roomName"
-              data-testid="room-name"
-              title="General"
+              class="Flex-module_flex"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
             >
-              General
+              <div
+                class="RoomListItemView-module_roomName"
+                data-testid="room-name"
+                title="General"
+              >
+                General
+              </div>
             </div>
             <div
               class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/__snapshots__/VirtualizedRoomListView.test.tsx.snap b/packages/shared-components/src/room-list/VirtualizedRoomListView/__snapshots__/VirtualizedRoomListView.test.tsx.snap
index 14c320cfb24..ca0981e3fe5 100644
--- a/packages/shared-components/src/room-list/VirtualizedRoomListView/__snapshots__/VirtualizedRoomListView.test.tsx.snap
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/__snapshots__/VirtualizedRoomListView.test.tsx.snap
@@ -63,11 +63,16 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                       class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="General"
+                        class="Flex-module_flex"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                       >
-                        General
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="General"
+                        >
+                          General
+                        </div>
                       </div>
                       <div
                         class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -212,11 +217,16 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                       class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Random"
+                        class="Flex-module_flex"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                       >
-                        Random
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Random"
+                        >
+                          Random
+                        </div>
                       </div>
                     </div>
                     <div
@@ -334,11 +344,16 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                       class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Engineering"
+                        class="Flex-module_flex"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                       >
-                        Engineering
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Engineering"
+                        >
+                          Engineering
+                        </div>
                       </div>
                       <div
                         class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -462,11 +477,16 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                       class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Design"
+                        class="Flex-module_flex"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                       >
-                        Design
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Design"
+                        >
+                          Design
+                        </div>
                       </div>
                     </div>
                     <div
@@ -584,11 +604,16 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                       class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Product"
+                        class="Flex-module_flex"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                       >
-                        Product
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Product"
+                        >
+                          Product
+                        </div>
                       </div>
                       <div
                         class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -712,11 +737,16 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                       class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Marketing"
+                        class="Flex-module_flex"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                       >
-                        Marketing
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Marketing"
+                        >
+                          Marketing
+                        </div>
                       </div>
                     </div>
                     <div
@@ -857,11 +887,16 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                       class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Sales"
+                        class="Flex-module_flex"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                       >
-                        Sales
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Sales"
+                        >
+                          Sales
+                        </div>
                       </div>
                       <div
                         class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -985,11 +1020,16 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                       class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Support"
+                        class="Flex-module_flex"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                       >
-                        Support
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Support"
+                        >
+                          Support
+                        </div>
                       </div>
                     </div>
                     <div
@@ -1107,11 +1147,16 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                       class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Announcements"
+                        class="Flex-module_flex"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                       >
-                        Announcements
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Announcements"
+                        >
+                          Announcements
+                        </div>
                       </div>
                       <div
                         class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
@@ -1235,11 +1280,16 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                       class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Off-topic"
+                        class="Flex-module_flex"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
                       >
-                        Off-topic
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Off-topic"
+                        >
+                          Off-topic
+                        </div>
                       </div>
                     </div>
                     <div
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/DisambiguatedProfile/DisambiguatedProfileView.tsx b/packages/shared-components/src/room/timeline/event-tile/EventTileView/DisambiguatedProfile/DisambiguatedProfileView.tsx
index f7a3a2b62a9..7162e923c4c 100644
--- a/packages/shared-components/src/room/timeline/event-tile/EventTileView/DisambiguatedProfile/DisambiguatedProfileView.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/DisambiguatedProfile/DisambiguatedProfileView.tsx
@@ -10,6 +10,7 @@ import classNames from "classnames";
 import { Text, Tooltip } from "@vector-im/compound-web";
 
 import { type ViewModel, useViewModel } from "../../../../../core/viewmodel";
+import { getUserStatusEmoji } from "../../../../../core/userStatus";
 import styles from "./DisambiguatedProfile.module.css";
 
 /**
@@ -91,7 +92,7 @@ interface DisambiguatedProfileViewProps {
 export function DisambiguatedProfileView({ vm, className }: Readonly<DisambiguatedProfileViewProps>): JSX.Element {
     const { displayName, colorClass, displayIdentifier, title, emphasizeDisplayName, userStatus } = useViewModel(vm);
 
-    const userStatusEmoji = userStatus && [...new Intl.Segmenter().segment(userStatus.emoji)][0]?.segment;
+    const userStatusEmoji = userStatus && getUserStatusEmoji(userStatus);
 
     const displayNameClasses = classNames(colorClass, {
         [styles.disambiguatedProfile_displayName]: emphasizeDisplayName,
@@ -128,7 +129,12 @@ export function DisambiguatedProfileView({ vm, className }: Readonly<Disambiguat
             )}
             {userStatus && (
                 <Tooltip description={userStatus.text}>
-                    <Text as="span" size="md" className={styles.userStatus}>
+                    {/* mx_DisambiguatedProfile_userStatus is required for PCSS selectors like .mx_MemberTileView .mx_DisambiguatedProfile_userStatus */}
+                    <Text
+                        as="span"
+                        size="lg"
+                        className={classNames("mx_DisambiguatedProfile_userStatus", styles.userStatus)}
+                    >
                         {userStatusEmoji}
                     </Text>
                 </Tooltip>
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/DisambiguatedProfile/__snapshots__/DisambiguatedProfile.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/EventTileView/DisambiguatedProfile/__snapshots__/DisambiguatedProfile.test.tsx.snap
index 9d4c1fc3d66..4c55b3ba27a 100644
--- a/packages/shared-components/src/room/timeline/event-tile/EventTileView/DisambiguatedProfile/__snapshots__/DisambiguatedProfile.test.tsx.snap
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/DisambiguatedProfile/__snapshots__/DisambiguatedProfile.test.tsx.snap
@@ -37,7 +37,7 @@ exports[`DisambiguatedProfileView > renders the full example 1`] = `
       @eve:matrix.org
     </span>
     <span
-      class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 DisambiguatedProfile-module_userStatus"
+      class="_typography_6v6n8_153 _font-body-lg-regular_6v6n8_69 mx_DisambiguatedProfile_userStatus DisambiguatedProfile-module_userStatus"
     >
       🏝️
     </span>
diff --git a/packages/shared-components/src/status/SetStatusView.module.css b/packages/shared-components/src/status/SetStatusView.module.css
new file mode 100644
index 00000000000..63aeb4faed7
--- /dev/null
+++ b/packages/shared-components/src/status/SetStatusView.module.css
@@ -0,0 +1,33 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.setStatusTrigger {
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    text-decoration: underline solid;
+    display: flex;
+    align-items: center;
+    width: fit-content;
+    /* Make the button a little taller so it matches the height of the status pill */
+    min-height: 2.1em;
+
+    svg {
+        width: 20px;
+        height: 20px;
+        margin-right: 1.5px;
+    }
+}
+
+.menuItem {
+    place-items: start;
+    gap: var(--cpd-space-1x);
+    color: var(--cpd-color-text-secondary);
+    font-weight: var(--cpd-font-weight-medium);
+    font-size: var(--cpd-font-size-body-md);
+}
diff --git a/packages/shared-components/src/status/SetStatusView.stories.tsx b/packages/shared-components/src/status/SetStatusView.stories.tsx
new file mode 100644
index 00000000000..f063da4d393
--- /dev/null
+++ b/packages/shared-components/src/status/SetStatusView.stories.tsx
@@ -0,0 +1,74 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import { type Meta, type StoryObj } from "@storybook/react-vite";
+import React, { type JSX } from "react";
+import { fn } from "storybook/test";
+
+import { SetStatusView, type SetStatusViewActions, type SetStatusViewSnapshot } from "./SetStatusView";
+import { useMockedViewModel } from "../core/viewmodel";
+import { withViewDocs } from "../../.storybook/withViewDocs";
+
+const SetStatusViewWrapperImpl = ({
+    setStatus,
+    clearStatus,
+    ...snapshot
+}: SetStatusViewSnapshot & SetStatusViewActions): JSX.Element => {
+    const vm = useMockedViewModel<SetStatusViewSnapshot, SetStatusViewActions>(snapshot, {
+        setStatus,
+        clearStatus,
+    });
+    return <SetStatusView vm={vm} />;
+};
+
+const SetStatusViewWrapper = withViewDocs(SetStatusViewWrapperImpl, SetStatusView);
+
+const meta = {
+    title: "Status/SetStatusView",
+    component: SetStatusViewWrapper,
+    tags: ["autodocs"],
+    args: {
+        setStatus: fn(),
+        clearStatus: fn(),
+    },
+} satisfies Meta<typeof SetStatusViewWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const NoStatus: Story = {};
+
+export const WithStatus: Story = {
+    args: {
+        userStatus: { emoji: "🦩", text: "Flamboyant" },
+    },
+};
+
+// Rules needed for any story where the menu is open.
+const MENU_OPEN_A11Y_RULES = [
+    {
+        // Menu contains a header which is invalid
+        id: "aria-required-children",
+        enabled: false,
+    },
+    {
+        // Menu pops open by default
+        id: "aria-hidden-focus",
+        enabled: false,
+    },
+];
+
+export const Open: Story = {
+    parameters: {
+        a11y: {
+            config: {
+                rules: MENU_OPEN_A11Y_RULES,
+            },
+        },
+    },
+    tags: ["!dev", "!autodocs"],
+};
diff --git a/packages/shared-components/src/status/SetStatusView.tsx b/packages/shared-components/src/status/SetStatusView.tsx
new file mode 100644
index 00000000000..92844a19c9b
--- /dev/null
+++ b/packages/shared-components/src/status/SetStatusView.tsx
@@ -0,0 +1,105 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React, { type JSX } from "react";
+import { Dropdown, type DropdownTriggerProps, Text } from "@vector-im/compound-web";
+import { ReactionIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+
+import { _t, _td, type UserStatus } from "..";
+import { useViewModel, type ViewModel } from "../core/viewmodel";
+import { StatusPillView } from "./StatusPillView";
+import styles from "./SetStatusView.module.css";
+
+const PRESET_STATUSES = [
+    { emoji: "💬", textKey: _td("status|set_status|in_a_meeting") },
+    { emoji: "💡", textKey: _td("status|set_status|focus_time") },
+    { emoji: "🚙", textKey: _td("status|set_status|on_the_road") },
+    { emoji: "☕️", textKey: _td("status|set_status|be_right_back") },
+    { emoji: "🌴", textKey: _td("status|set_status|away") },
+];
+
+export interface SetStatusViewSnapshot {
+    /**
+     * The current user status, or undefined if no status is set.
+     */
+    userStatus?: UserStatus;
+}
+
+export interface SetStatusViewActions {
+    /**
+     * Called when the user clicks to start setting a status.
+     *
+     * If falsy, the default dropdown will open for the user to choose a status.
+     */
+    onSetStatusClick?: () => void;
+
+    /**
+     * Called when the user selects a preset status from the dropdown.
+     */
+    setStatus: (status: UserStatus) => void;
+
+    /**
+     * Called when the user clears their current status.
+     */
+    clearStatus: () => void;
+}
+
+export type SetStatusViewModel = ViewModel<SetStatusViewSnapshot, SetStatusViewActions>;
+
+export type SetStatusViewProps = {
+    vm: SetStatusViewModel;
+};
+
+export function SetStatusView({ vm }: SetStatusViewProps): JSX.Element {
+    const { userStatus } = useViewModel(vm);
+
+    if (userStatus) {
+        return <StatusPillView status={userStatus} clearStatus={vm.clearStatus} />;
+    }
+
+    const renderTrigger = (props: DropdownTriggerProps): JSX.Element => {
+        const trigger = (
+            <button
+                className={styles.setStatusTrigger}
+                aria-label={_t("status|set_status|set_status_prompt")}
+                {...props}
+            >
+                <ReactionIcon />
+                <Text as="span" type="body" size="md" weight="medium">
+                    {_t("status|set_status|set_status_prompt")}
+                </Text>
+            </button>
+        );
+
+        return trigger;
+    };
+
+    const onValueChange = (value: string): void => {
+        const status = PRESET_STATUSES.find((s) => s.textKey === value);
+
+        if (!status) {
+            return;
+        }
+
+        vm.setStatus({
+            emoji: status.emoji,
+            text: _t(status.textKey),
+        });
+    };
+
+    return vm.onSetStatusClick ? (
+        renderTrigger({ onClick: vm.onSetStatusClick })
+    ) : (
+        <Dropdown
+            values={PRESET_STATUSES.map((s) => [s.textKey, `${s.emoji} ${_t(s.textKey)}`])}
+            label={null}
+            placeholder={null}
+            trigger={renderTrigger}
+            onValueChange={onValueChange}
+        />
+    );
+}
diff --git a/packages/shared-components/src/status/StatusPillView.module.css b/packages/shared-components/src/status/StatusPillView.module.css
new file mode 100644
index 00000000000..0d347c06f5a
--- /dev/null
+++ b/packages/shared-components/src/status/StatusPillView.module.css
@@ -0,0 +1,35 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+.statusPill {
+    border-radius: 30px;
+    background: var(--cpd-color-bg-subtle-secondary);
+    display: inline-flex;
+    /* Disables filling to available width if we're in a flex container */
+    align-self: flex-start;
+    align-items: center;
+    padding-inline-start: var(--cpd-space-2x);
+    gap: 6px;
+    white-space: nowrap;
+    overflow: hidden;
+    max-width: 100%;
+
+    .menuStatusEmoji {
+        flex-shrink: 0;
+    }
+
+    .menuStatusText {
+        overflow: hidden;
+        min-width: 0;
+        text-overflow: ellipsis;
+    }
+
+    span {
+        font: var(--cpd-font-body-md-medium);
+        color: var(--cpd-color-text-secondary);
+    }
+}
diff --git a/packages/shared-components/src/status/StatusPillView.tsx b/packages/shared-components/src/status/StatusPillView.tsx
new file mode 100644
index 00000000000..c76bc15f4d5
--- /dev/null
+++ b/packages/shared-components/src/status/StatusPillView.tsx
@@ -0,0 +1,40 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type JSX } from "react";
+import { IconButton, Text } from "@vector-im/compound-web";
+import { CloseIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+
+import { _t, type UserStatus } from "..";
+import styles from "./StatusPillView.module.css";
+
+export const StatusPillView = React.forwardRef<
+    HTMLDivElement,
+    {
+        status: UserStatus;
+        clearStatus: () => void;
+    } & React.HTMLAttributes<HTMLDivElement>
+>(function StatusPillView({ status, clearStatus, ...props }, ref): JSX.Element {
+    return (
+        <div ref={ref} {...props} className={styles.statusPill}>
+            <Text as="span" className={styles.menuStatusEmoji}>
+                {status.emoji}
+            </Text>
+            <Text as="span" className={styles.menuStatusText}>
+                {status.text}
+            </Text>
+            <IconButton
+                onClick={clearStatus}
+                aria-label={_t("menus|user_menu|clear_status")}
+                tooltip={_t("menus|user_menu|clear_status")}
+                size="28px"
+            >
+                <CloseIcon />
+            </IconButton>
+        </div>
+    );
+});
diff --git a/packages/shared-components/src/status/UserStatusMessageView.module.css b/packages/shared-components/src/status/UserStatusMessageView.module.css
new file mode 100644
index 00000000000..c1e23523a60
--- /dev/null
+++ b/packages/shared-components/src/status/UserStatusMessageView.module.css
@@ -0,0 +1,25 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+.userStatusMessage {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--cpd-space-1x);
+    min-width: 0;
+}
+
+.userStatusMessage_emoji {
+    flex-shrink: 0;
+    line-height: 1;
+}
+
+.userStatusMessage_text {
+    color: var(--cpd-color-text-secondary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
diff --git a/packages/shared-components/src/status/UserStatusMessageView.tsx b/packages/shared-components/src/status/UserStatusMessageView.tsx
new file mode 100644
index 00000000000..1beb8cba0fc
--- /dev/null
+++ b/packages/shared-components/src/status/UserStatusMessageView.tsx
@@ -0,0 +1,37 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type JSX } from "react";
+import classNames from "classnames";
+import { Text } from "@vector-im/compound-web";
+
+import { getUserStatusEmoji, type UserStatus } from "../core/userStatus";
+import styles from "./UserStatusMessageView.module.css";
+
+export interface UserStatusMessageViewProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * The user status to display.
+     */
+    status: UserStatus;
+}
+
+/**
+ * Displays a user's MSC4426 status as its emoji followed by the status text,
+ * e.g. next to the room name in a DM room header or under the name in a user profile.
+ */
+export function UserStatusMessageView({ status, className, ...props }: UserStatusMessageViewProps): JSX.Element {
+    return (
+        <span {...props} className={classNames(styles.userStatusMessage, className)}>
+            <Text as="span" size="lg" className={styles.userStatusMessage_emoji}>
+                {getUserStatusEmoji(status)}
+            </Text>
+            <Text as="span" size="md" weight="medium" className={styles.userStatusMessage_text}>
+                {status.text}
+            </Text>
+        </span>
+    );
+}