diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/default-auto.png
new file mode 100644
index 0000000000..fde6a23cfe
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/default-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-auto.png
new file mode 100644
index 0000000000..bcf28e7f88
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-favourite-filter-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-favourite-filter-auto.png
new file mode 100644
index 0000000000..503593f1f7
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-favourite-filter-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-invites-filter-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-invites-filter-auto.png
new file mode 100644
index 0000000000..ef6ddca30b
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-invites-filter-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-low-priority-filter-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-low-priority-filter-auto.png
new file mode 100644
index 0000000000..2efcd5267e
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-low-priority-filter-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-mentions-filter-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-mentions-filter-auto.png
new file mode 100644
index 0000000000..a72a03d73b
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-mentions-filter-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-people-filter-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-people-filter-auto.png
new file mode 100644
index 0000000000..88597f19e1
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-people-filter-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-rooms-filter-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-rooms-filter-auto.png
new file mode 100644
index 0000000000..de8bc49c55
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-rooms-filter-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-unread-filter-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-unread-filter-auto.png
new file mode 100644
index 0000000000..844f532cf1
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-unread-filter-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-without-create-permission-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-without-create-permission-auto.png
new file mode 100644
index 0000000000..fdfb2a4d12
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-without-create-permission-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/large-list-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/large-list-auto.png
new file mode 100644
index 0000000000..fde6a23cfe
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/large-list-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/loading-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/loading-auto.png
new file mode 100644
index 0000000000..bace5dba52
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/loading-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/small-list-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/small-list-auto.png
new file mode 100644
index 0000000000..7572cec331
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/small-list-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/with-active-filter-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/with-active-filter-auto.png
new file mode 100644
index 0000000000..081aa94307
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/with-active-filter-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/with-selection-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/with-selection-auto.png
new file mode 100644
index 0000000000..8bb5d6447f
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/with-selection-auto.png differ
diff --git a/packages/shared-components/src/room-list/RoomListView/RoomListEmptyState.module.css b/packages/shared-components/src/room-list/RoomListView/RoomListEmptyState.module.css
new file mode 100644
index 0000000000..204e7615a4
--- /dev/null
+++ b/packages/shared-components/src/room-list/RoomListView/RoomListEmptyState.module.css
@@ -0,0 +1,33 @@
+/*
+ * Copyright 2025 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.
+ */
+
+.genericPlaceholder {
+    align-self: center;
+    /** It should take 2/3 of the width **/
+    width: 66%;
+    /** It should be positioned at 1/3 of the height **/
+    padding-top: 33%;
+}
+
+.title {
+    font: var(--cpd-font-body-lg-semibold);
+    text-align: center;
+}
+
+.description {
+    font: var(--cpd-font-body-sm-regular);
+    color: var(--cpd-color-text-secondary);
+    text-align: center;
+}
+
+.defaultPlaceholder {
+    margin-top: var(--cpd-space-4x);
+}
+
+.genericPlaceholder button {
+    width: 100%;
+}
diff --git a/packages/shared-components/src/room-list/RoomListView/RoomListEmptyState.tsx b/packages/shared-components/src/room-list/RoomListView/RoomListEmptyState.tsx
new file mode 100644
index 0000000000..98e51d6878
--- /dev/null
+++ b/packages/shared-components/src/room-list/RoomListView/RoomListEmptyState.tsx
@@ -0,0 +1,182 @@
+/*
+ * 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, type PropsWithChildren, type ReactNode } from "react";
+import { Button } from "@vector-im/compound-web";
+import ChatIcon from "@vector-im/compound-design-tokens/assets/web/icons/chat";
+import RoomIcon from "@vector-im/compound-design-tokens/assets/web/icons/room";
+
+import { Flex } from "../../utils/Flex";
+import { _t } from "../../utils/i18n";
+import { useViewModel } from "../../viewmodel";
+import type { RoomListViewModel } from "./RoomListView";
+import styles from "./RoomListEmptyState.module.css";
+
+/**
+ * Props for RoomListEmptyState component
+ */
+export interface RoomListEmptyStateProps {
+    /** The view model containing all data and callbacks */
+    vm: RoomListViewModel;
+}
+
+/**
+ * Empty state component for the room list.
+ * Displays appropriate message and actions based on the active filter.
+ */
+export const RoomListEmptyState: React.FC<RoomListEmptyStateProps> = ({ vm }): JSX.Element => {
+    const snapshot = useViewModel(vm);
+
+    // If there is no active filter, show the default empty state
+    if (!snapshot.activeFilterId) {
+        return (
+            <GenericPlaceholder
+                title={_t("room_list|empty|no_chats")}
+                description={
+                    snapshot.canCreateRoom
+                        ? _t("room_list|empty|no_chats_description")
+                        : _t("room_list|empty|no_chats_description_no_room_rights")
+                }
+            >
+                <Flex
+                    className={styles.defaultPlaceholder}
+                    align="center"
+                    justify="center"
+                    direction="column"
+                    gap="var(--cpd-space-4x)"
+                >
+                    <Button size="sm" kind="secondary" Icon={ChatIcon} onClick={vm.createChatRoom}>
+                        {_t("action|start_chat")}
+                    </Button>
+                    {snapshot.canCreateRoom && (
+                        <Button size="sm" kind="secondary" Icon={RoomIcon} onClick={vm.createRoom}>
+                            {_t("action|new_room")}
+                        </Button>
+                    )}
+                </Flex>
+            </GenericPlaceholder>
+        );
+    }
+
+    // Handle different filter cases based on filter ID
+    switch (snapshot.activeFilterId) {
+        case "favourite":
+            return (
+                <GenericPlaceholder
+                    title={_t("room_list|empty|no_favourites")}
+                    description={_t("room_list|empty|no_favourites_description")}
+                />
+            );
+        case "people":
+            return (
+                <GenericPlaceholder
+                    title={_t("room_list|empty|no_people")}
+                    description={_t("room_list|empty|no_people_description")}
+                />
+            );
+        case "rooms":
+            return (
+                <GenericPlaceholder
+                    title={_t("room_list|empty|no_rooms")}
+                    description={_t("room_list|empty|no_rooms_description")}
+                />
+            );
+        case "unread":
+            return (
+                <ActionPlaceholder
+                    title={_t("room_list|empty|no_unread")}
+                    action={_t("room_list|empty|show_chats")}
+                    onAction={() => vm.onToggleFilter(snapshot.activeFilterId!)}
+                />
+            );
+        case "invites":
+            return (
+                <ActionPlaceholder
+                    title={_t("room_list|empty|no_invites")}
+                    action={_t("room_list|empty|show_activity")}
+                    onAction={() => vm.onToggleFilter(snapshot.activeFilterId!)}
+                />
+            );
+        case "mentions":
+            return (
+                <ActionPlaceholder
+                    title={_t("room_list|empty|no_mentions")}
+                    action={_t("room_list|empty|show_activity")}
+                    onAction={() => vm.onToggleFilter(snapshot.activeFilterId!)}
+                />
+            );
+        case "low_priority":
+            return (
+                <ActionPlaceholder
+                    title={_t("room_list|empty|no_lowpriority")}
+                    action={_t("room_list|empty|show_activity")}
+                    onAction={() => vm.onToggleFilter(snapshot.activeFilterId!)}
+                />
+            );
+        default:
+            return (
+                <GenericPlaceholder
+                    title={_t("room_list|empty|no_chats")}
+                    description={_t("room_list|empty|no_chats_description")}
+                />
+            );
+    }
+};
+
+interface GenericPlaceholderProps {
+    /** The title of the placeholder */
+    title: string;
+    /** The description of the placeholder */
+    description?: string;
+    /** Optional children (e.g., action buttons) */
+    children?: ReactNode;
+}
+
+/**
+ * A generic placeholder for the room list
+ */
+function GenericPlaceholder({ title, description, children }: PropsWithChildren<GenericPlaceholderProps>): JSX.Element {
+    return (
+        <Flex
+            data-testid="empty-room-list"
+            className={styles.genericPlaceholder}
+            direction="column"
+            align="stretch"
+            justify="center"
+            gap="var(--cpd-space-2x)"
+        >
+            <span className={styles.title}>{title}</span>
+            {description && <span className={styles.description}>{description}</span>}
+            {children}
+        </Flex>
+    );
+}
+
+interface ActionPlaceholderProps {
+    /** The title to display */
+    title: string;
+    /** The action button text */
+    action: string;
+    /** Callback when the action button is clicked */
+    onAction?: () => void;
+}
+
+/**
+ * A placeholder for the room list when a filter is active
+ * The user can take action to toggle the filter
+ */
+function ActionPlaceholder({ title, action, onAction }: ActionPlaceholderProps): JSX.Element {
+    return (
+        <GenericPlaceholder title={title}>
+            {onAction && (
+                <Button kind="tertiary" onClick={onAction}>
+                    {action}
+                </Button>
+            )}
+        </GenericPlaceholder>
+    );
+}
diff --git a/packages/shared-components/src/room-list/RoomListView/RoomListLoadingSkeleton.module.css b/packages/shared-components/src/room-list/RoomListView/RoomListLoadingSkeleton.module.css
new file mode 100644
index 0000000000..2f65f7969d
--- /dev/null
+++ b/packages/shared-components/src/room-list/RoomListView/RoomListLoadingSkeleton.module.css
@@ -0,0 +1,24 @@
+/*
+ * Copyright 2025 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.
+ */
+
+.skeleton {
+    position: relative;
+    margin-left: 4px;
+    height: 100%;
+    flex: 1;
+}
+
+.skeleton::before {
+    background-color: var(--cpd-color-bg-subtle-secondary);
+    width: 100%;
+    height: 100%;
+    content: "";
+    position: absolute;
+    mask-repeat: repeat-y;
+    mask-size: auto 96px;
+    mask-image: url("./assets/skeleton.svg");
+}
diff --git a/packages/shared-components/src/room-list/RoomListView/RoomListLoadingSkeleton.tsx b/packages/shared-components/src/room-list/RoomListView/RoomListLoadingSkeleton.tsx
new file mode 100644
index 0000000000..6ab8b80de3
--- /dev/null
+++ b/packages/shared-components/src/room-list/RoomListView/RoomListLoadingSkeleton.tsx
@@ -0,0 +1,18 @@
+/*
+ * 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 styles from "./RoomListLoadingSkeleton.module.css";
+
+/**
+ * Loading skeleton component for the room list.
+ * Displays a repeating skeleton pattern while rooms are being fetched.
+ */
+export const RoomListLoadingSkeleton: React.FC = (): JSX.Element => {
+    return <div className={styles.skeleton} />;
+};
diff --git a/packages/shared-components/src/room-list/RoomListView/RoomListView.stories.tsx b/packages/shared-components/src/room-list/RoomListView/RoomListView.stories.tsx
new file mode 100644
index 0000000000..af812d7347
--- /dev/null
+++ b/packages/shared-components/src/room-list/RoomListView/RoomListView.stories.tsx
@@ -0,0 +1,220 @@
+/*
+ * 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 { fn } from "storybook/test";
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import type { FilterId } from "../RoomListPrimaryFilters";
+import { RoomListView, type RoomListSnapshot, type RoomListViewActions } from "./RoomListView";
+import { useMockedViewModel } from "../../viewmodel";
+import {
+    renderAvatar,
+    createGetRoomItemViewModel,
+    mockRoomIds,
+    smallListRoomIds,
+    largeListRoomIds,
+} from "../story-mocks";
+
+type RoomListViewProps = RoomListSnapshot & RoomListViewActions & { renderAvatar: (room: any) => React.ReactElement };
+
+const mockFilterIds: FilterId[] = ["unread", "people", "rooms", "favourite"];
+
+// Wrapper component that creates a mocked ViewModel
+const RoomListViewWrapper = ({
+    onToggleFilter,
+    createChatRoom,
+    createRoom,
+    getRoomItemViewModel,
+    updateVisibleRooms,
+    renderAvatar: renderAvatarProp,
+    ...rest
+}: RoomListViewProps): JSX.Element => {
+    const vm = useMockedViewModel(rest, {
+        onToggleFilter,
+        createChatRoom,
+        createRoom,
+        getRoomItemViewModel,
+        updateVisibleRooms,
+    });
+    return <RoomListView vm={vm} renderAvatar={renderAvatarProp} />;
+};
+
+const meta = {
+    title: "Room List/RoomListView",
+    component: RoomListViewWrapper,
+    tags: ["autodocs"],
+    decorators: [
+        (Story) => (
+            <div
+                style={{
+                    width: "320px",
+                    height: "600px",
+                    border: "1px solid var(--cpd-color-border-interactive-primary)",
+                    display: "flex",
+                    flexDirection: "column",
+                    resize: "horizontal",
+                    overflow: "auto",
+                    minWidth: "250px",
+                    maxWidth: "800px",
+                }}
+            >
+                <Story />
+            </div>
+        ),
+    ],
+    args: {
+        // Snapshot properties (state)
+        isLoadingRooms: false,
+        isRoomListEmpty: false,
+        filterIds: mockFilterIds,
+        activeFilterId: undefined,
+        roomListState: {
+            activeRoomIndex: undefined,
+            spaceId: "!space:server",
+            filterKeys: undefined,
+        },
+        roomIds: mockRoomIds,
+        canCreateRoom: true,
+        // Action properties (callbacks)
+        onToggleFilter: fn(),
+        createChatRoom: fn(),
+        createRoom: fn(),
+        getRoomItemViewModel: createGetRoomItemViewModel(mockRoomIds),
+        updateVisibleRooms: fn(),
+        renderAvatar,
+    },
+    parameters: {
+        design: {
+            type: "figma",
+            url: "https://www.figma.com/design/vlmt46QDdE4dgXDiyBJXqp/ER-33-Left-Panel?node-id=2925-19126",
+        },
+    },
+} satisfies Meta<typeof RoomListViewWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Loading: Story = {
+    args: {
+        isLoadingRooms: true,
+    },
+};
+
+export const Empty: Story = {
+    args: {
+        isRoomListEmpty: true,
+    },
+};
+
+export const EmptyWithoutCreatePermission: Story = {
+    args: {
+        isRoomListEmpty: true,
+        canCreateRoom: false,
+    },
+};
+
+export const WithActiveFilter: Story = {
+    args: {
+        filterIds: ["unread", "people", "rooms", "favourite"],
+        activeFilterId: "favourite",
+        roomListState: {
+            activeRoomIndex: undefined,
+            spaceId: "!space:server",
+            filterKeys: ["favourites"],
+        },
+    },
+};
+
+export const WithSelection: Story = {
+    args: {
+        roomListState: {
+            activeRoomIndex: 0,
+            spaceId: "!space:server",
+            filterKeys: undefined,
+        },
+    },
+};
+
+export const EmptyFavouriteFilter: Story = {
+    args: {
+        isRoomListEmpty: true,
+        roomIds: [],
+        filterIds: ["favourite", "people"],
+        activeFilterId: "favourite",
+    },
+};
+
+export const EmptyPeopleFilter: Story = {
+    args: {
+        isRoomListEmpty: true,
+        roomIds: [],
+        filterIds: ["people", "rooms"],
+        activeFilterId: "people",
+    },
+};
+
+export const EmptyRoomsFilter: Story = {
+    args: {
+        isRoomListEmpty: true,
+        roomIds: [],
+        filterIds: ["rooms", "people"],
+        activeFilterId: "rooms",
+    },
+};
+
+export const EmptyUnreadFilter: Story = {
+    args: {
+        isRoomListEmpty: true,
+        roomIds: [],
+        filterIds: ["unread", "people"],
+        activeFilterId: "unread",
+    },
+};
+
+export const EmptyInvitesFilter: Story = {
+    args: {
+        isRoomListEmpty: true,
+        roomIds: [],
+        filterIds: ["invites", "people"],
+        activeFilterId: "invites",
+    },
+};
+
+export const EmptyMentionsFilter: Story = {
+    args: {
+        isRoomListEmpty: true,
+        roomIds: [],
+        filterIds: ["mentions", "people"],
+        activeFilterId: "mentions",
+    },
+};
+
+export const EmptyLowPriorityFilter: Story = {
+    args: {
+        isRoomListEmpty: true,
+        roomIds: [],
+        filterIds: ["low_priority", "people"],
+        activeFilterId: "low_priority",
+    },
+};
+
+export const SmallList: Story = {
+    args: {
+        roomIds: smallListRoomIds,
+        getRoomItemViewModel: createGetRoomItemViewModel(smallListRoomIds),
+    },
+};
+
+export const LargeList: Story = {
+    args: {
+        roomIds: largeListRoomIds,
+        getRoomItemViewModel: createGetRoomItemViewModel(largeListRoomIds),
+    },
+};
diff --git a/packages/shared-components/src/room-list/RoomListView/RoomListView.test.tsx b/packages/shared-components/src/room-list/RoomListView/RoomListView.test.tsx
new file mode 100644
index 0000000000..15237eed7e
--- /dev/null
+++ b/packages/shared-components/src/room-list/RoomListView/RoomListView.test.tsx
@@ -0,0 +1,177 @@
+/*
+ * 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 from "react";
+import { render, screen } from "@test-utils";
+import userEvent from "@testing-library/user-event";
+import { VirtuosoMockContext } from "react-virtuoso";
+import { composeStories } from "@storybook/react-vite";
+import { describe, it, expect } from "vitest";
+
+import * as stories from "./RoomListView.stories";
+
+const {
+    Default,
+    Loading,
+    Empty,
+    EmptyWithoutCreatePermission,
+    WithActiveFilter,
+    SmallList,
+    LargeList,
+    EmptyFavouriteFilter,
+    EmptyPeopleFilter,
+    EmptyRoomsFilter,
+    EmptyUnreadFilter,
+    EmptyInvitesFilter,
+    EmptyMentionsFilter,
+    EmptyLowPriorityFilter,
+} = composeStories(stories);
+
+const renderWithMockContext = (component: React.ReactElement): ReturnType<typeof render> => {
+    return render(component, {
+        wrapper: ({ children }) => (
+            <VirtuosoMockContext.Provider value={{ viewportHeight: 600, itemHeight: 48 }}>
+                {children}
+            </VirtuosoMockContext.Provider>
+        ),
+    });
+};
+
+describe("<RoomListView />", () => {
+    it("renders Default story", () => {
+        const { container } = renderWithMockContext(<Default />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders Loading story", () => {
+        const { container } = renderWithMockContext(<Loading />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders Empty story", () => {
+        const { container } = renderWithMockContext(<Empty />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders EmptyWithoutCreatePermission story", () => {
+        const { container } = renderWithMockContext(<EmptyWithoutCreatePermission />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders WithActiveFilter story", () => {
+        const { container } = renderWithMockContext(<WithActiveFilter />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders SmallList story", () => {
+        const { container } = renderWithMockContext(<SmallList />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders LargeList story", () => {
+        const { container } = renderWithMockContext(<LargeList />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders EmptyFavouriteFilter story", () => {
+        const { container } = renderWithMockContext(<EmptyFavouriteFilter />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders EmptyPeopleFilter story", () => {
+        const { container } = renderWithMockContext(<EmptyPeopleFilter />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders EmptyRoomsFilter story", () => {
+        const { container } = renderWithMockContext(<EmptyRoomsFilter />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders EmptyUnreadFilter story", () => {
+        const { container } = renderWithMockContext(<EmptyUnreadFilter />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders EmptyInvitesFilter story", () => {
+        const { container } = renderWithMockContext(<EmptyInvitesFilter />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders EmptyMentionsFilter story", () => {
+        const { container } = renderWithMockContext(<EmptyMentionsFilter />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders EmptyLowPriorityFilter story", () => {
+        const { container } = renderWithMockContext(<EmptyLowPriorityFilter />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("should call onToggleFilter when filter is clicked", async () => {
+        const user = userEvent.setup();
+        renderWithMockContext(<Default />);
+
+        await user.click(screen.getByRole("option", { name: "People" }));
+
+        expect(Default.args.onToggleFilter).toHaveBeenCalled();
+    });
+
+    it("should call createRoom when New room button is clicked", async () => {
+        const user = userEvent.setup();
+        renderWithMockContext(<Empty />);
+
+        await user.click(screen.getByRole("button", { name: "New room" }));
+
+        expect(Empty.args.createRoom).toHaveBeenCalled();
+    });
+
+    it("should call createChatRoom when Start chat button is clicked", async () => {
+        const user = userEvent.setup();
+        renderWithMockContext(<Empty />);
+
+        await user.click(screen.getByRole("button", { name: "Start chat" }));
+
+        expect(Empty.args.createChatRoom).toHaveBeenCalled();
+    });
+
+    it("should call onToggleFilter when Show all chats is clicked in unread empty state", async () => {
+        const user = userEvent.setup();
+        renderWithMockContext(<EmptyUnreadFilter />);
+
+        await user.click(screen.getByRole("button", { name: "Show all chats" }));
+
+        expect(EmptyUnreadFilter.args.onToggleFilter).toHaveBeenCalled();
+    });
+
+    it("should call onToggleFilter when See all activity is clicked in invites empty state", async () => {
+        const user = userEvent.setup();
+        renderWithMockContext(<EmptyInvitesFilter />);
+
+        await user.click(screen.getByRole("button", { name: "See all activity" }));
+
+        expect(EmptyInvitesFilter.args.onToggleFilter).toHaveBeenCalled();
+    });
+
+    it("should call onToggleFilter when See all activity is clicked in mentions empty state", async () => {
+        const user = userEvent.setup();
+        renderWithMockContext(<EmptyMentionsFilter />);
+
+        await user.click(screen.getByRole("button", { name: "See all activity" }));
+
+        expect(EmptyMentionsFilter.args.onToggleFilter).toHaveBeenCalled();
+    });
+
+    it("should call onToggleFilter when See all activity is clicked in low priority empty state", async () => {
+        const user = userEvent.setup();
+        renderWithMockContext(<EmptyLowPriorityFilter />);
+
+        await user.click(screen.getByRole("button", { name: "See all activity" }));
+
+        expect(EmptyLowPriorityFilter.args.onToggleFilter).toHaveBeenCalled();
+    });
+});
diff --git a/packages/shared-components/src/room-list/RoomListView/RoomListView.tsx b/packages/shared-components/src/room-list/RoomListView/RoomListView.tsx
new file mode 100644
index 0000000000..0abf9aa0e1
--- /dev/null
+++ b/packages/shared-components/src/room-list/RoomListView/RoomListView.tsx
@@ -0,0 +1,101 @@
+/*
+ * 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, type ReactNode } from "react";
+
+import { useViewModel, type ViewModel } from "../../viewmodel";
+import { RoomListPrimaryFilters, type FilterId } from "../RoomListPrimaryFilters";
+import { RoomListLoadingSkeleton } from "./RoomListLoadingSkeleton";
+import { RoomListEmptyState } from "./RoomListEmptyState";
+import { RoomList, type RoomListViewState } from "../RoomList";
+import { type RoomListItemSnapshot } from "../RoomListItem";
+
+/**
+ * Snapshot for the room list view
+ */
+export type RoomListSnapshot = {
+    /** Whether the rooms are currently loading */
+    isLoadingRooms: boolean;
+    /** Whether the room list is empty */
+    isRoomListEmpty: boolean;
+    /** Array of filter IDs */
+    filterIds: FilterId[];
+    /** Currently active filter ID (if any) */
+    activeFilterId?: FilterId;
+    /** Room list state */
+    roomListState: RoomListViewState;
+    /** Array of room IDs for virtualization */
+    roomIds: string[];
+    /** Optional description for the empty state */
+    emptyStateDescription?: string;
+    /** Optional action element for the empty state */
+    emptyStateAction?: ReactNode;
+    /** Whether the user can create rooms */
+    canCreateRoom?: boolean;
+};
+
+/**
+ * Actions interface for room list operations
+ */
+export interface RoomListViewActions {
+    /** Called when a filter is toggled */
+    onToggleFilter: (filterId: FilterId) => void;
+    /** Called to create a new chat room */
+    createChatRoom: () => void;
+    /** Called to create a new room */
+    createRoom: () => void;
+    /** Get view model for a specific room (virtualization API) */
+    getRoomItemViewModel: (roomId: string) => any;
+    /** Called when the visible range changes (virtualization API) */
+    updateVisibleRooms: (startIndex: number, endIndex: number) => void;
+}
+
+/**
+ * The view model type for the room list view
+ */
+export type RoomListViewModel = ViewModel<RoomListSnapshot> & RoomListViewActions;
+
+/**
+ * Props for RoomListView component
+ */
+export interface RoomListViewProps {
+    /** The view model containing all data and callbacks */
+    vm: RoomListViewModel;
+    /** Render function for room avatar */
+    renderAvatar: (roomItem: RoomListItemSnapshot) => ReactNode;
+    /** Optional callback for keyboard events on the room list */
+    onKeyDown?: (e: React.KeyboardEvent<HTMLDivElement>) => void;
+}
+
+/**
+ * Room list view component that manages filters, loading states, empty states, and the room list.
+ */
+export const RoomListView: React.FC<RoomListViewProps> = ({ vm, renderAvatar, onKeyDown }): JSX.Element => {
+    const snapshot = useViewModel(vm);
+    let listBody: ReactNode;
+
+    if (snapshot.isLoadingRooms) {
+        listBody = <RoomListLoadingSkeleton />;
+    } else if (snapshot.isRoomListEmpty) {
+        listBody = <RoomListEmptyState vm={vm} />;
+    } else {
+        listBody = <RoomList vm={vm} renderAvatar={renderAvatar} onKeyDown={onKeyDown} />;
+    }
+
+    return (
+        <>
+            <div>
+                <RoomListPrimaryFilters
+                    filterIds={snapshot.filterIds}
+                    activeFilterId={snapshot.activeFilterId}
+                    onToggleFilter={vm.onToggleFilter}
+                />
+            </div>
+            {listBody}
+        </>
+    );
+};
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
new file mode 100644
index 0000000000..c518632039
--- /dev/null
+++ b/packages/shared-components/src/room-list/RoomListView/__snapshots__/RoomListView.test.tsx.snap
@@ -0,0 +1,11387 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<RoomListView /> > renders Default story 1`] = `
+<div>
+  <div
+    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
+  >
+    <div>
+      <div
+        class="flex roomListPrimaryFilters"
+        data-testid="primary-filters"
+        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+      >
+        <div
+          aria-label="Room list filters"
+          class="flex list"
+          id="_r_0_"
+          role="listbox"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
+        >
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            Unreads
+          </button>
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            People
+          </button>
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            Rooms
+          </button>
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            Favourites
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-label="Room list"
+      data-testid="room-list"
+      data-virtuoso-scroller="true"
+      role="listbox"
+      style="height: 100%; outline: none; overflow-y: auto; position: relative;"
+      tabindex="0"
+    >
+      <div
+        data-viewport-type="element"
+        style="height: 100%; position: absolute; top: 0px; width: 100%;"
+      >
+        <div
+          data-testid="virtuoso-item-list"
+          style="box-sizing: border-box; margin-top: 0px; padding-bottom: 0px; padding-top: 0px;"
+        >
+          <div
+            data-index="0"
+            data-item-index="0"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room General"
+              aria-posinset="1"
+              aria-selected="false"
+              aria-setsize="20"
+              class="flex roomListItem mx_RoomListItemView bold"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="General avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                GE
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="General"
+                  >
+                    General
+                  </div>
+                  <div
+                    class="messagePreview"
+                    title="Last message in General"
+                  >
+                    Last message in General
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_3_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_1_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_a_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_8_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                >
+                  <div
+                    class="flex"
+                    data-testid="notification-decoration"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                  >
+                    <svg
+                      fill="var(--cpd-color-icon-accent-primary)"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
+                      />
+                    </svg>
+                    <div
+                      class="_unread-counter_1147r_8"
+                    />
+                  </div>
+                </div>
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="1"
+            data-item-index="1"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Random"
+              aria-posinset="2"
+              aria-selected="false"
+              aria-setsize="20"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Random avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                RA
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Random"
+                  >
+                    Random
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_h_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_f_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_o_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_m_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="2"
+            data-item-index="2"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Engineering"
+              aria-posinset="3"
+              aria-selected="false"
+              aria-setsize="20"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Engineering avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                EN
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Engineering"
+                  >
+                    Engineering
+                  </div>
+                  <div
+                    class="messagePreview"
+                    title="Last message in Engineering"
+                  >
+                    Last message in Engineering
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_v_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_t_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_16_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_14_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="3"
+            data-item-index="3"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Design"
+              aria-posinset="4"
+              aria-selected="false"
+              aria-setsize="20"
+              class="flex roomListItem mx_RoomListItemView bold"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Design avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                DE
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Design"
+                  >
+                    Design
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_1d_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_1b_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_1k_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_1i_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="4"
+            data-item-index="4"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Product"
+              aria-posinset="5"
+              aria-selected="false"
+              aria-setsize="20"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Product avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                PR
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Product"
+                  >
+                    Product
+                  </div>
+                  <div
+                    class="messagePreview"
+                    title="Last message in Product"
+                  >
+                    Last message in Product
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_1r_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_1p_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_22_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_20_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="5"
+            data-item-index="5"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Marketing with 5 unread mentions."
+              aria-posinset="6"
+              aria-selected="false"
+              aria-setsize="20"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Marketing avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                MA
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Marketing"
+                  >
+                    Marketing
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_29_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_27_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_2g_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_2e_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                >
+                  <div
+                    class="flex"
+                    data-testid="notification-decoration"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                  >
+                    <svg
+                      fill="var(--cpd-color-icon-accent-primary)"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
+                      />
+                    </svg>
+                    <span
+                      class="_unread-counter_1147r_8"
+                    >
+                      5
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="6"
+            data-item-index="6"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Sales"
+              aria-posinset="7"
+              aria-selected="false"
+              aria-setsize="20"
+              class="flex roomListItem mx_RoomListItemView bold"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Sales avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                SA
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Sales"
+                  >
+                    Sales
+                  </div>
+                  <div
+                    class="messagePreview"
+                    title="Last message in Sales"
+                  >
+                    Last message in Sales
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_2n_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_2l_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_2u_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_2s_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="7"
+            data-item-index="7"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Support"
+              aria-posinset="8"
+              aria-selected="false"
+              aria-setsize="20"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Support avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                SU
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Support"
+                  >
+                    Support
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_35_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_33_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_3c_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_3a_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="8"
+            data-item-index="8"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Announcements"
+              aria-posinset="9"
+              aria-selected="false"
+              aria-setsize="20"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Announcements avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                AN
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Announcements"
+                  >
+                    Announcements
+                  </div>
+                  <div
+                    class="messagePreview"
+                    title="Last message in Announcements"
+                  >
+                    Last message in Announcements
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_3j_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_3h_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_3q_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_3o_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="9"
+            data-item-index="9"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Off-topic"
+              aria-posinset="10"
+              aria-selected="false"
+              aria-setsize="20"
+              class="flex roomListItem mx_RoomListItemView bold"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Off-topic avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                OF
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Off-topic"
+                  >
+                    Off-topic
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_41_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_3v_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_48_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_46_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="10"
+            data-item-index="10"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Team Alpha with 10 unread mentions."
+              aria-posinset="11"
+              aria-selected="false"
+              aria-setsize="20"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Team Alpha avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                TE
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Team Alpha"
+                  >
+                    Team Alpha
+                  </div>
+                  <div
+                    class="messagePreview"
+                    title="Last message in Team Alpha"
+                  >
+                    Last message in Team Alpha
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_4f_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_4d_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_4m_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_4k_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                >
+                  <div
+                    class="flex"
+                    data-testid="notification-decoration"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                  >
+                    <svg
+                      fill="var(--cpd-color-icon-accent-primary)"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
+                      />
+                    </svg>
+                    <span
+                      class="_unread-counter_1147r_8"
+                    >
+                      10
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="11"
+            data-item-index="11"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Team Beta"
+              aria-posinset="12"
+              aria-selected="false"
+              aria-setsize="20"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Team Beta avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                TE
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Team Beta"
+                  >
+                    Team Beta
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_4t_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_4r_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_54_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_52_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="12"
+            data-item-index="12"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Project X"
+              aria-posinset="13"
+              aria-selected="false"
+              aria-setsize="20"
+              class="flex roomListItem mx_RoomListItemView bold"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Project X avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                PR
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Project X"
+                  >
+                    Project X
+                  </div>
+                  <div
+                    class="messagePreview"
+                    title="Last message in Project X"
+                  >
+                    Last message in Project X
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_5b_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_59_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_5i_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_5g_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="13"
+            data-item-index="13"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Project Y"
+              aria-posinset="14"
+              aria-selected="false"
+              aria-setsize="20"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Project Y avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                PR
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Project Y"
+                  >
+                    Project Y
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_5p_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_5n_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_60_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_5u_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="14"
+            data-item-index="14"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Water Cooler"
+              aria-posinset="15"
+              aria-selected="false"
+              aria-setsize="20"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Water Cooler avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                WA
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Water Cooler"
+                  >
+                    Water Cooler
+                  </div>
+                  <div
+                    class="messagePreview"
+                    title="Last message in Water Cooler"
+                  >
+                    Last message in Water Cooler
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_67_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_65_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_6e_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_6c_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="15"
+            data-item-index="15"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Feedback with 15 unread mentions."
+              aria-posinset="16"
+              aria-selected="false"
+              aria-setsize="20"
+              class="flex roomListItem mx_RoomListItemView bold"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Feedback avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                FE
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Feedback"
+                  >
+                    Feedback
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_6l_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_6j_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_6s_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_6q_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                >
+                  <div
+                    class="flex"
+                    data-testid="notification-decoration"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                  >
+                    <svg
+                      fill="var(--cpd-color-icon-accent-primary)"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
+                      />
+                    </svg>
+                    <span
+                      class="_unread-counter_1147r_8"
+                    >
+                      15
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="16"
+            data-item-index="16"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Ideas"
+              aria-posinset="17"
+              aria-selected="false"
+              aria-setsize="20"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Ideas avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                ID
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Ideas"
+                  >
+                    Ideas
+                  </div>
+                  <div
+                    class="messagePreview"
+                    title="Last message in Ideas"
+                  >
+                    Last message in Ideas
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_73_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_71_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_7a_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_78_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="17"
+            data-item-index="17"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Bugs"
+              aria-posinset="18"
+              aria-selected="false"
+              aria-setsize="20"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Bugs avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                BU
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Bugs"
+                  >
+                    Bugs
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_7h_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_7f_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_7o_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_7m_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="18"
+            data-item-index="18"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Features"
+              aria-posinset="19"
+              aria-selected="false"
+              aria-setsize="20"
+              class="flex roomListItem mx_RoomListItemView bold"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Features avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                FE
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Features"
+                  >
+                    Features
+                  </div>
+                  <div
+                    class="messagePreview"
+                    title="Last message in Features"
+                  >
+                    Last message in Features
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_7v_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_7t_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_86_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_84_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="19"
+            data-item-index="19"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Releases"
+              aria-posinset="20"
+              aria-selected="false"
+              aria-setsize="20"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Releases avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                RE
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Releases"
+                  >
+                    Releases
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_8d_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_8b_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_8k_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_8i_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<RoomListView /> > renders Empty story 1`] = `
+<div>
+  <div
+    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
+  >
+    <div>
+      <div
+        class="flex roomListPrimaryFilters"
+        data-testid="primary-filters"
+        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+      >
+        <div
+          aria-label="Room list filters"
+          class="flex list"
+          id="_r_a2_"
+          role="listbox"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
+        >
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            Unreads
+          </button>
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            People
+          </button>
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            Rooms
+          </button>
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            Favourites
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      class="flex genericPlaceholder"
+      data-testid="empty-room-list"
+      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+    >
+      <span
+        class="title"
+      >
+        No chats yet
+      </span>
+      <span
+        class="description"
+      >
+        Get started by messaging someone or by creating a room
+      </span>
+      <div
+        class="flex defaultPlaceholder"
+        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
+      >
+        <button
+          class="_button_13vu4_8 _has-icon_13vu4_60"
+          data-kind="secondary"
+          data-size="sm"
+          role="button"
+          tabindex="0"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="20"
+            viewBox="0 0 24 24"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="m1.5 21.25 1.45-4.95a10.2 10.2 0 0 1-.712-2.1A10.2 10.2 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22q-1.125 0-2.2-.238a10.2 10.2 0 0 1-2.1-.712L2.75 22.5a.94.94 0 0 1-1-.25.94.94 0 0 1-.25-1m2.45-1.2 3.2-.95a1 1 0 0 1 .275-.062q.15-.013.275-.013.225 0 .438.038.212.036.412.137a7.4 7.4 0 0 0 1.675.6Q11.1 20 12 20q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12q0 .9.2 1.775t.6 1.675q.176.325.188.688t-.088.712z"
+            />
+          </svg>
+          Start chat
+        </button>
+        <button
+          class="_button_13vu4_8 _has-icon_13vu4_60"
+          data-kind="secondary"
+          data-size="sm"
+          role="button"
+          tabindex="0"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="20"
+            viewBox="0 0 24 24"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="m8.566 17-.944 4.094q-.086.406-.372.656t-.687.25q-.543 0-.887-.469a1.18 1.18 0 0 1-.2-1.031l.801-3.5H3.158q-.572 0-.916-.484a1.27 1.27 0 0 1-.2-1.078 1.12 1.12 0 0 1 1.116-.938H6.85l1.145-5h-3.12q-.57 0-.915-.484a1.27 1.27 0 0 1-.2-1.078A1.12 1.12 0 0 1 4.875 7h3.691l.945-4.094q.085-.406.372-.656.286-.25.686-.25.544 0 .887.469.345.468.2 1.031l-.8 3.5h4.578l.944-4.094q.085-.406.372-.656.286-.25.687-.25.543 0 .887.469t.2 1.031L17.723 7h3.119q.573 0 .916.484.343.485.2 1.079a1.12 1.12 0 0 1-1.116.937H17.15l-1.145 5h3.12q.57 0 .915.484.343.485.2 1.079a1.12 1.12 0 0 1-1.116.937h-3.691l-.944 4.094q-.087.406-.373.656t-.686.25q-.544 0-.887-.469a1.18 1.18 0 0 1-.2-1.031l.8-3.5zm.573-2.5h4.578l1.144-5h-4.578z"
+            />
+          </svg>
+          New room
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<RoomListView /> > renders EmptyFavouriteFilter story 1`] = `
+<div>
+  <div
+    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
+  >
+    <div>
+      <div
+        class="flex roomListPrimaryFilters"
+        data-testid="primary-filters"
+        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+      >
+        <div
+          aria-label="Room list filters"
+          class="flex list"
+          id="_r_19n_"
+          role="listbox"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
+        >
+          <button
+            aria-hidden="false"
+            aria-selected="true"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            Favourites
+          </button>
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            People
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      class="flex genericPlaceholder"
+      data-testid="empty-room-list"
+      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+    >
+      <span
+        class="title"
+      >
+        You don't have favourite chats yet
+      </span>
+      <span
+        class="description"
+      >
+        You can add a chat to your favourites in the chat settings
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<RoomListView /> > renders EmptyInvitesFilter story 1`] = `
+<div>
+  <div
+    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
+  >
+    <div>
+      <div
+        class="flex roomListPrimaryFilters"
+        data-testid="primary-filters"
+        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+      >
+        <div
+          aria-label="Room list filters"
+          class="flex list"
+          id="_r_19r_"
+          role="listbox"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
+        >
+          <button
+            aria-hidden="false"
+            aria-selected="true"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            Invites
+          </button>
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            People
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      class="flex genericPlaceholder"
+      data-testid="empty-room-list"
+      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+    >
+      <span
+        class="title"
+      >
+        You don't have any unread invites
+      </span>
+      <button
+        class="_button_13vu4_8"
+        data-kind="tertiary"
+        data-size="lg"
+        role="button"
+        tabindex="0"
+      >
+        See all activity
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<RoomListView /> > renders EmptyLowPriorityFilter story 1`] = `
+<div>
+  <div
+    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
+  >
+    <div>
+      <div
+        class="flex roomListPrimaryFilters"
+        data-testid="primary-filters"
+        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+      >
+        <div
+          aria-label="Room list filters"
+          class="flex list"
+          id="_r_19t_"
+          role="listbox"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
+        >
+          <button
+            aria-hidden="false"
+            aria-selected="true"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            Low priority
+          </button>
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            People
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      class="flex genericPlaceholder"
+      data-testid="empty-room-list"
+      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+    >
+      <span
+        class="title"
+      >
+        You don't have any low priority rooms
+      </span>
+      <button
+        class="_button_13vu4_8"
+        data-kind="tertiary"
+        data-size="lg"
+        role="button"
+        tabindex="0"
+      >
+        See all activity
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<RoomListView /> > renders EmptyMentionsFilter story 1`] = `
+<div>
+  <div
+    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
+  >
+    <div>
+      <div
+        class="flex roomListPrimaryFilters"
+        data-testid="primary-filters"
+        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+      >
+        <div
+          aria-label="Room list filters"
+          class="flex list"
+          id="_r_19s_"
+          role="listbox"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
+        >
+          <button
+            aria-hidden="false"
+            aria-selected="true"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            Mentions
+          </button>
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            People
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      class="flex genericPlaceholder"
+      data-testid="empty-room-list"
+      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+    >
+      <span
+        class="title"
+      >
+        You don't have any unread mentions
+      </span>
+      <button
+        class="_button_13vu4_8"
+        data-kind="tertiary"
+        data-size="lg"
+        role="button"
+        tabindex="0"
+      >
+        See all activity
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<RoomListView /> > renders EmptyPeopleFilter story 1`] = `
+<div>
+  <div
+    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
+  >
+    <div>
+      <div
+        class="flex roomListPrimaryFilters"
+        data-testid="primary-filters"
+        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+      >
+        <div
+          aria-label="Room list filters"
+          class="flex list"
+          id="_r_19o_"
+          role="listbox"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
+        >
+          <button
+            aria-hidden="false"
+            aria-selected="true"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            People
+          </button>
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            Rooms
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      class="flex genericPlaceholder"
+      data-testid="empty-room-list"
+      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+    >
+      <span
+        class="title"
+      >
+        You don’t have direct chats with anyone yet
+      </span>
+      <span
+        class="description"
+      >
+        You can deselect filters in order to see your other chats
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<RoomListView /> > renders EmptyRoomsFilter story 1`] = `
+<div>
+  <div
+    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
+  >
+    <div>
+      <div
+        class="flex roomListPrimaryFilters"
+        data-testid="primary-filters"
+        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+      >
+        <div
+          aria-label="Room list filters"
+          class="flex list"
+          id="_r_19p_"
+          role="listbox"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
+        >
+          <button
+            aria-hidden="false"
+            aria-selected="true"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            Rooms
+          </button>
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            People
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      class="flex genericPlaceholder"
+      data-testid="empty-room-list"
+      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+    >
+      <span
+        class="title"
+      >
+        You’re not in any room yet
+      </span>
+      <span
+        class="description"
+      >
+        You can deselect filters in order to see your other chats
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<RoomListView /> > renders EmptyUnreadFilter story 1`] = `
+<div>
+  <div
+    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
+  >
+    <div>
+      <div
+        class="flex roomListPrimaryFilters"
+        data-testid="primary-filters"
+        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+      >
+        <div
+          aria-label="Room list filters"
+          class="flex list"
+          id="_r_19q_"
+          role="listbox"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
+        >
+          <button
+            aria-hidden="false"
+            aria-selected="true"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            Unreads
+          </button>
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            People
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      class="flex genericPlaceholder"
+      data-testid="empty-room-list"
+      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+    >
+      <span
+        class="title"
+      >
+        Congrats! You don’t have any unread messages
+      </span>
+      <button
+        class="_button_13vu4_8"
+        data-kind="tertiary"
+        data-size="lg"
+        role="button"
+        tabindex="0"
+      >
+        Show all chats
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<RoomListView /> > renders EmptyWithoutCreatePermission story 1`] = `
+<div>
+  <div
+    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
+  >
+    <div>
+      <div
+        class="flex roomListPrimaryFilters"
+        data-testid="primary-filters"
+        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+      >
+        <div
+          aria-label="Room list filters"
+          class="flex list"
+          id="_r_a3_"
+          role="listbox"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
+        >
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            Unreads
+          </button>
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            People
+          </button>
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            Rooms
+          </button>
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            Favourites
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      class="flex genericPlaceholder"
+      data-testid="empty-room-list"
+      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+    >
+      <span
+        class="title"
+      >
+        No chats yet
+      </span>
+      <span
+        class="description"
+      >
+        Get started by messaging someone
+      </span>
+      <div
+        class="flex defaultPlaceholder"
+        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
+      >
+        <button
+          class="_button_13vu4_8 _has-icon_13vu4_60"
+          data-kind="secondary"
+          data-size="sm"
+          role="button"
+          tabindex="0"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="20"
+            viewBox="0 0 24 24"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="m1.5 21.25 1.45-4.95a10.2 10.2 0 0 1-.712-2.1A10.2 10.2 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22q-1.125 0-2.2-.238a10.2 10.2 0 0 1-2.1-.712L2.75 22.5a.94.94 0 0 1-1-.25.94.94 0 0 1-.25-1m2.45-1.2 3.2-.95a1 1 0 0 1 .275-.062q.15-.013.275-.013.225 0 .438.038.212.036.412.137a7.4 7.4 0 0 0 1.675.6Q11.1 20 12 20q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12q0 .9.2 1.775t.6 1.675q.176.325.188.688t-.088.712z"
+            />
+          </svg>
+          Start chat
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<RoomListView /> > renders LargeList story 1`] = `
+<div>
+  <div
+    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
+  >
+    <div>
+      <div
+        class="flex roomListPrimaryFilters"
+        data-testid="primary-filters"
+        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+      >
+        <div
+          aria-label="Room list filters"
+          class="flex list"
+          id="_r_mm_"
+          role="listbox"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
+        >
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            Unreads
+          </button>
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            People
+          </button>
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            Rooms
+          </button>
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            Favourites
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-label="Room list"
+      data-testid="room-list"
+      data-virtuoso-scroller="true"
+      role="listbox"
+      style="height: 100%; outline: none; overflow-y: auto; position: relative;"
+      tabindex="0"
+    >
+      <div
+        data-viewport-type="element"
+        style="height: 100%; position: absolute; top: 0px; width: 100%;"
+      >
+        <div
+          data-testid="virtuoso-item-list"
+          style="box-sizing: border-box; margin-top: 0px; padding-bottom: 2976px; padding-top: 0px;"
+        >
+          <div
+            data-index="0"
+            data-item-index="0"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room General"
+              aria-posinset="1"
+              aria-selected="false"
+              aria-setsize="100"
+              class="flex roomListItem mx_RoomListItemView bold"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="General avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                GE
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="General"
+                  >
+                    General
+                  </div>
+                  <div
+                    class="messagePreview"
+                    title="Last message in General"
+                  >
+                    Last message in General
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_mp_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_mn_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_n0_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_mu_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                >
+                  <div
+                    class="flex"
+                    data-testid="notification-decoration"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                  >
+                    <svg
+                      fill="var(--cpd-color-icon-accent-primary)"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
+                      />
+                    </svg>
+                    <div
+                      class="_unread-counter_1147r_8"
+                    />
+                  </div>
+                </div>
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="1"
+            data-item-index="1"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Random"
+              aria-posinset="2"
+              aria-selected="false"
+              aria-setsize="100"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Random avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                RA
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Random"
+                  >
+                    Random
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_n7_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_n5_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_ne_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_nc_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="2"
+            data-item-index="2"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Engineering"
+              aria-posinset="3"
+              aria-selected="false"
+              aria-setsize="100"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Engineering avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                EN
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Engineering"
+                  >
+                    Engineering
+                  </div>
+                  <div
+                    class="messagePreview"
+                    title="Last message in Engineering"
+                  >
+                    Last message in Engineering
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_nl_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_nj_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_ns_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_nq_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="3"
+            data-item-index="3"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Design"
+              aria-posinset="4"
+              aria-selected="false"
+              aria-setsize="100"
+              class="flex roomListItem mx_RoomListItemView bold"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Design avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                DE
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Design"
+                  >
+                    Design
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_o3_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_o1_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_oa_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_o8_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="4"
+            data-item-index="4"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Product"
+              aria-posinset="5"
+              aria-selected="false"
+              aria-setsize="100"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Product avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                PR
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Product"
+                  >
+                    Product
+                  </div>
+                  <div
+                    class="messagePreview"
+                    title="Last message in Product"
+                  >
+                    Last message in Product
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_oh_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_of_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_oo_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_om_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="5"
+            data-item-index="5"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Marketing with 5 unread mentions."
+              aria-posinset="6"
+              aria-selected="false"
+              aria-setsize="100"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Marketing avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                MA
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Marketing"
+                  >
+                    Marketing
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_ov_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_ot_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_p6_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_p4_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                >
+                  <div
+                    class="flex"
+                    data-testid="notification-decoration"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                  >
+                    <svg
+                      fill="var(--cpd-color-icon-accent-primary)"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
+                      />
+                    </svg>
+                    <span
+                      class="_unread-counter_1147r_8"
+                    >
+                      5
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="6"
+            data-item-index="6"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Sales"
+              aria-posinset="7"
+              aria-selected="false"
+              aria-setsize="100"
+              class="flex roomListItem mx_RoomListItemView bold"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Sales avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                SA
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Sales"
+                  >
+                    Sales
+                  </div>
+                  <div
+                    class="messagePreview"
+                    title="Last message in Sales"
+                  >
+                    Last message in Sales
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_pd_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_pb_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_pk_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_pi_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="7"
+            data-item-index="7"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Support"
+              aria-posinset="8"
+              aria-selected="false"
+              aria-setsize="100"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Support avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                SU
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Support"
+                  >
+                    Support
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_pr_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_pp_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_q2_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_q0_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="8"
+            data-item-index="8"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Announcements"
+              aria-posinset="9"
+              aria-selected="false"
+              aria-setsize="100"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Announcements avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                AN
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Announcements"
+                  >
+                    Announcements
+                  </div>
+                  <div
+                    class="messagePreview"
+                    title="Last message in Announcements"
+                  >
+                    Last message in Announcements
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_q9_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_q7_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_qg_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_qe_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="9"
+            data-item-index="9"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Off-topic"
+              aria-posinset="10"
+              aria-selected="false"
+              aria-setsize="100"
+              class="flex roomListItem mx_RoomListItemView bold"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Off-topic avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                OF
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Off-topic"
+                  >
+                    Off-topic
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_qn_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_ql_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_qu_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_qs_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="10"
+            data-item-index="10"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Team Alpha with 10 unread mentions."
+              aria-posinset="11"
+              aria-selected="false"
+              aria-setsize="100"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Team Alpha avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                TE
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Team Alpha"
+                  >
+                    Team Alpha
+                  </div>
+                  <div
+                    class="messagePreview"
+                    title="Last message in Team Alpha"
+                  >
+                    Last message in Team Alpha
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_r5_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_r3_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_rc_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_ra_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                >
+                  <div
+                    class="flex"
+                    data-testid="notification-decoration"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                  >
+                    <svg
+                      fill="var(--cpd-color-icon-accent-primary)"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
+                      />
+                    </svg>
+                    <span
+                      class="_unread-counter_1147r_8"
+                    >
+                      10
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="11"
+            data-item-index="11"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Team Beta"
+              aria-posinset="12"
+              aria-selected="false"
+              aria-setsize="100"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Team Beta avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                TE
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Team Beta"
+                  >
+                    Team Beta
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_rj_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_rh_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_rq_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_ro_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="12"
+            data-item-index="12"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Project X"
+              aria-posinset="13"
+              aria-selected="false"
+              aria-setsize="100"
+              class="flex roomListItem mx_RoomListItemView bold"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Project X avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                PR
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Project X"
+                  >
+                    Project X
+                  </div>
+                  <div
+                    class="messagePreview"
+                    title="Last message in Project X"
+                  >
+                    Last message in Project X
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_s1_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_rv_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_s8_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_s6_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="13"
+            data-item-index="13"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Project Y"
+              aria-posinset="14"
+              aria-selected="false"
+              aria-setsize="100"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Project Y avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                PR
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Project Y"
+                  >
+                    Project Y
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_sf_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_sd_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_sm_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_sk_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="14"
+            data-item-index="14"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Water Cooler"
+              aria-posinset="15"
+              aria-selected="false"
+              aria-setsize="100"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Water Cooler avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                WA
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Water Cooler"
+                  >
+                    Water Cooler
+                  </div>
+                  <div
+                    class="messagePreview"
+                    title="Last message in Water Cooler"
+                  >
+                    Last message in Water Cooler
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_st_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_sr_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_t4_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_t2_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="15"
+            data-item-index="15"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Feedback with 15 unread mentions."
+              aria-posinset="16"
+              aria-selected="false"
+              aria-setsize="100"
+              class="flex roomListItem mx_RoomListItemView bold"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Feedback avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                FE
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Feedback"
+                  >
+                    Feedback
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_tb_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_t9_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_ti_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_tg_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                >
+                  <div
+                    class="flex"
+                    data-testid="notification-decoration"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                  >
+                    <svg
+                      fill="var(--cpd-color-icon-accent-primary)"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
+                      />
+                    </svg>
+                    <span
+                      class="_unread-counter_1147r_8"
+                    >
+                      15
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="16"
+            data-item-index="16"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Ideas"
+              aria-posinset="17"
+              aria-selected="false"
+              aria-setsize="100"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Ideas avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                ID
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Ideas"
+                  >
+                    Ideas
+                  </div>
+                  <div
+                    class="messagePreview"
+                    title="Last message in Ideas"
+                  >
+                    Last message in Ideas
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_tp_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_tn_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_u0_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_tu_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="17"
+            data-item-index="17"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Bugs"
+              aria-posinset="18"
+              aria-selected="false"
+              aria-setsize="100"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Bugs avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                BU
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Bugs"
+                  >
+                    Bugs
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_u7_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_u5_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_ue_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_uc_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="18"
+            data-item-index="18"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Features"
+              aria-posinset="19"
+              aria-selected="false"
+              aria-setsize="100"
+              class="flex roomListItem mx_RoomListItemView bold"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Features avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                FE
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Features"
+                  >
+                    Features
+                  </div>
+                  <div
+                    class="messagePreview"
+                    title="Last message in Features"
+                  >
+                    Last message in Features
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_ul_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_uj_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_us_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_uq_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="19"
+            data-item-index="19"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Releases"
+              aria-posinset="20"
+              aria-selected="false"
+              aria-setsize="100"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Releases avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                RE
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Releases"
+                  >
+                    Releases
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_v3_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_v1_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_va_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_v8_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="20"
+            data-item-index="20"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room General with 20 unread mentions."
+              aria-posinset="21"
+              aria-selected="false"
+              aria-setsize="100"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="General avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                GE
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="General"
+                  >
+                    General
+                  </div>
+                  <div
+                    class="messagePreview"
+                    title="Last message in General"
+                  >
+                    Last message in General
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_vh_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_vf_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_vo_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_vm_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                >
+                  <div
+                    class="flex"
+                    data-testid="notification-decoration"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                  >
+                    <svg
+                      fill="var(--cpd-color-icon-accent-primary)"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
+                      />
+                    </svg>
+                    <span
+                      class="_unread-counter_1147r_8"
+                    >
+                      20
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="21"
+            data-item-index="21"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Random"
+              aria-posinset="22"
+              aria-selected="false"
+              aria-setsize="100"
+              class="flex roomListItem mx_RoomListItemView bold"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Random avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                RA
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Random"
+                  >
+                    Random
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_vv_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_vt_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_106_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_104_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="22"
+            data-item-index="22"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Engineering"
+              aria-posinset="23"
+              aria-selected="false"
+              aria-setsize="100"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Engineering avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                EN
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Engineering"
+                  >
+                    Engineering
+                  </div>
+                  <div
+                    class="messagePreview"
+                    title="Last message in Engineering"
+                  >
+                    Last message in Engineering
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_10d_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_10b_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_10k_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_10i_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="23"
+            data-item-index="23"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Design"
+              aria-posinset="24"
+              aria-selected="false"
+              aria-setsize="100"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Design avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                DE
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Design"
+                  >
+                    Design
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_10r_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_10p_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_112_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_110_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="24"
+            data-item-index="24"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Product"
+              aria-posinset="25"
+              aria-selected="false"
+              aria-setsize="100"
+              class="flex roomListItem mx_RoomListItemView bold"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Product avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                PR
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Product"
+                  >
+                    Product
+                  </div>
+                  <div
+                    class="messagePreview"
+                    title="Last message in Product"
+                  >
+                    Last message in Product
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_119_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_117_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_11g_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_11e_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="25"
+            data-item-index="25"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Marketing with 25 unread mentions."
+              aria-posinset="26"
+              aria-selected="false"
+              aria-setsize="100"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Marketing avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                MA
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Marketing"
+                  >
+                    Marketing
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_11n_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_11l_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_11u_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_11s_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                >
+                  <div
+                    class="flex"
+                    data-testid="notification-decoration"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                  >
+                    <svg
+                      fill="var(--cpd-color-icon-accent-primary)"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
+                      />
+                    </svg>
+                    <span
+                      class="_unread-counter_1147r_8"
+                    >
+                      25
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="26"
+            data-item-index="26"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Sales"
+              aria-posinset="27"
+              aria-selected="false"
+              aria-setsize="100"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Sales avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                SA
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Sales"
+                  >
+                    Sales
+                  </div>
+                  <div
+                    class="messagePreview"
+                    title="Last message in Sales"
+                  >
+                    Last message in Sales
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_125_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_123_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_12c_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_12a_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="27"
+            data-item-index="27"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Support"
+              aria-posinset="28"
+              aria-selected="false"
+              aria-setsize="100"
+              class="flex roomListItem mx_RoomListItemView bold"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Support avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                SU
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Support"
+                  >
+                    Support
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_12j_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_12h_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_12q_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_12o_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="28"
+            data-item-index="28"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Announcements"
+              aria-posinset="29"
+              aria-selected="false"
+              aria-setsize="100"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Announcements avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                AN
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Announcements"
+                  >
+                    Announcements
+                  </div>
+                  <div
+                    class="messagePreview"
+                    title="Last message in Announcements"
+                  >
+                    Last message in Announcements
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_131_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_12v_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_138_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_136_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="29"
+            data-item-index="29"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Off-topic"
+              aria-posinset="30"
+              aria-selected="false"
+              aria-setsize="100"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Off-topic avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                OF
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Off-topic"
+                  >
+                    Off-topic
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_13f_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_13d_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_13m_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_13k_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="30"
+            data-item-index="30"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Team Alpha with 30 unread mentions."
+              aria-posinset="31"
+              aria-selected="false"
+              aria-setsize="100"
+              class="flex roomListItem mx_RoomListItemView bold"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Team Alpha avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                TE
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Team Alpha"
+                  >
+                    Team Alpha
+                  </div>
+                  <div
+                    class="messagePreview"
+                    title="Last message in Team Alpha"
+                  >
+                    Last message in Team Alpha
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_13t_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_13r_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_144_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_142_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                >
+                  <div
+                    class="flex"
+                    data-testid="notification-decoration"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                  >
+                    <svg
+                      fill="var(--cpd-color-icon-accent-primary)"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
+                      />
+                    </svg>
+                    <span
+                      class="_unread-counter_1147r_8"
+                    >
+                      30
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="31"
+            data-item-index="31"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Team Beta"
+              aria-posinset="32"
+              aria-selected="false"
+              aria-setsize="100"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Team Beta avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                TE
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Team Beta"
+                  >
+                    Team Beta
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_14b_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_149_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_14i_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_14g_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="32"
+            data-item-index="32"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Project X"
+              aria-posinset="33"
+              aria-selected="false"
+              aria-setsize="100"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Project X avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                PR
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Project X"
+                  >
+                    Project X
+                  </div>
+                  <div
+                    class="messagePreview"
+                    title="Last message in Project X"
+                  >
+                    Last message in Project X
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_14p_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_14n_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_150_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_14u_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="33"
+            data-item-index="33"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Project Y"
+              aria-posinset="34"
+              aria-selected="false"
+              aria-setsize="100"
+              class="flex roomListItem mx_RoomListItemView bold"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Project Y avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                PR
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Project Y"
+                  >
+                    Project Y
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_157_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_155_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_15e_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_15c_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="34"
+            data-item-index="34"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Water Cooler"
+              aria-posinset="35"
+              aria-selected="false"
+              aria-setsize="100"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Water Cooler avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                WA
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Water Cooler"
+                  >
+                    Water Cooler
+                  </div>
+                  <div
+                    class="messagePreview"
+                    title="Last message in Water Cooler"
+                  >
+                    Last message in Water Cooler
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_15l_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_15j_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_15s_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_15q_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="35"
+            data-item-index="35"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Feedback with 35 unread mentions."
+              aria-posinset="36"
+              aria-selected="false"
+              aria-setsize="100"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Feedback avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                FE
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Feedback"
+                  >
+                    Feedback
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_163_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_161_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_16a_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_168_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                >
+                  <div
+                    class="flex"
+                    data-testid="notification-decoration"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                  >
+                    <svg
+                      fill="var(--cpd-color-icon-accent-primary)"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
+                      />
+                    </svg>
+                    <span
+                      class="_unread-counter_1147r_8"
+                    >
+                      35
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="36"
+            data-item-index="36"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Ideas"
+              aria-posinset="37"
+              aria-selected="false"
+              aria-setsize="100"
+              class="flex roomListItem mx_RoomListItemView bold"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Ideas avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                ID
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Ideas"
+                  >
+                    Ideas
+                  </div>
+                  <div
+                    class="messagePreview"
+                    title="Last message in Ideas"
+                  >
+                    Last message in Ideas
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_16h_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_16f_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_16o_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_16m_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="37"
+            data-item-index="37"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Bugs"
+              aria-posinset="38"
+              aria-selected="false"
+              aria-setsize="100"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Bugs avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                BU
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Bugs"
+                  >
+                    Bugs
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_16v_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_16t_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_176_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_174_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<RoomListView /> > renders Loading story 1`] = `
+<div>
+  <div
+    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
+  >
+    <div>
+      <div
+        class="flex roomListPrimaryFilters"
+        data-testid="primary-filters"
+        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+      >
+        <div
+          aria-label="Room list filters"
+          class="flex list"
+          id="_r_a1_"
+          role="listbox"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
+        >
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            Unreads
+          </button>
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            People
+          </button>
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            Rooms
+          </button>
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            Favourites
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      class="skeleton"
+    />
+  </div>
+</div>
+`;
+
+exports[`<RoomListView /> > renders SmallList story 1`] = `
+<div>
+  <div
+    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
+  >
+    <div>
+      <div
+        class="flex roomListPrimaryFilters"
+        data-testid="primary-filters"
+        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+      >
+        <div
+          aria-label="Room list filters"
+          class="flex list"
+          id="_r_k5_"
+          role="listbox"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
+        >
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            Unreads
+          </button>
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            People
+          </button>
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            Rooms
+          </button>
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            Favourites
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-label="Room list"
+      data-testid="room-list"
+      data-virtuoso-scroller="true"
+      role="listbox"
+      style="height: 100%; outline: none; overflow-y: auto; position: relative;"
+      tabindex="0"
+    >
+      <div
+        data-viewport-type="element"
+        style="height: 100%; position: absolute; top: 0px; width: 100%;"
+      >
+        <div
+          data-testid="virtuoso-item-list"
+          style="box-sizing: border-box; margin-top: 0px; padding-bottom: 0px; padding-top: 0px;"
+        >
+          <div
+            data-index="0"
+            data-item-index="0"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room General"
+              aria-posinset="1"
+              aria-selected="false"
+              aria-setsize="5"
+              class="flex roomListItem mx_RoomListItemView bold"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="General avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                GE
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="General"
+                  >
+                    General
+                  </div>
+                  <div
+                    class="messagePreview"
+                    title="Last message in General"
+                  >
+                    Last message in General
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_k8_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_k6_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_kf_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_kd_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                >
+                  <div
+                    class="flex"
+                    data-testid="notification-decoration"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                  >
+                    <svg
+                      fill="var(--cpd-color-icon-accent-primary)"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
+                      />
+                    </svg>
+                    <div
+                      class="_unread-counter_1147r_8"
+                    />
+                  </div>
+                </div>
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="1"
+            data-item-index="1"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Random"
+              aria-posinset="2"
+              aria-selected="false"
+              aria-setsize="5"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Random avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                RA
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Random"
+                  >
+                    Random
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_km_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_kk_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_kt_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_kr_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="2"
+            data-item-index="2"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Engineering"
+              aria-posinset="3"
+              aria-selected="false"
+              aria-setsize="5"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Engineering avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                EN
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Engineering"
+                  >
+                    Engineering
+                  </div>
+                  <div
+                    class="messagePreview"
+                    title="Last message in Engineering"
+                  >
+                    Last message in Engineering
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_l4_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_l2_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_lb_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_l9_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="3"
+            data-item-index="3"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Design"
+              aria-posinset="4"
+              aria-selected="false"
+              aria-setsize="5"
+              class="flex roomListItem mx_RoomListItemView bold"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Design avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                DE
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Design"
+                  >
+                    Design
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_li_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_lg_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_lp_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_ln_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="4"
+            data-item-index="4"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Product"
+              aria-posinset="5"
+              aria-selected="false"
+              aria-setsize="5"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Product avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                PR
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Product"
+                  >
+                    Product
+                  </div>
+                  <div
+                    class="messagePreview"
+                    title="Last message in Product"
+                  >
+                    Last message in Product
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_m0_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_lu_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_m7_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_m5_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
+<div>
+  <div
+    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
+  >
+    <div>
+      <div
+        class="flex roomListPrimaryFilters"
+        data-testid="primary-filters"
+        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+      >
+        <div
+          aria-label="Room list filters"
+          class="flex list"
+          id="_r_a4_"
+          role="listbox"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
+        >
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            Unreads
+          </button>
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            People
+          </button>
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            Rooms
+          </button>
+          <button
+            aria-hidden="false"
+            aria-selected="true"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            Favourites
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-label="Room list"
+      data-testid="room-list"
+      data-virtuoso-scroller="true"
+      role="listbox"
+      style="height: 100%; outline: none; overflow-y: auto; position: relative;"
+      tabindex="0"
+    >
+      <div
+        data-viewport-type="element"
+        style="height: 100%; position: absolute; top: 0px; width: 100%;"
+      >
+        <div
+          data-testid="virtuoso-item-list"
+          style="box-sizing: border-box; margin-top: 0px; padding-bottom: 0px; padding-top: 0px;"
+        >
+          <div
+            data-index="0"
+            data-item-index="0"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room General"
+              aria-posinset="1"
+              aria-selected="false"
+              aria-setsize="20"
+              class="flex roomListItem mx_RoomListItemView bold"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="General avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                GE
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="General"
+                  >
+                    General
+                  </div>
+                  <div
+                    class="messagePreview"
+                    title="Last message in General"
+                  >
+                    Last message in General
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_a7_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_a5_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_ae_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_ac_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                >
+                  <div
+                    class="flex"
+                    data-testid="notification-decoration"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                  >
+                    <svg
+                      fill="var(--cpd-color-icon-accent-primary)"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
+                      />
+                    </svg>
+                    <div
+                      class="_unread-counter_1147r_8"
+                    />
+                  </div>
+                </div>
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="1"
+            data-item-index="1"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Random"
+              aria-posinset="2"
+              aria-selected="false"
+              aria-setsize="20"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Random avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                RA
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Random"
+                  >
+                    Random
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_al_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_aj_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_as_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_aq_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="2"
+            data-item-index="2"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Engineering"
+              aria-posinset="3"
+              aria-selected="false"
+              aria-setsize="20"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Engineering avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                EN
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Engineering"
+                  >
+                    Engineering
+                  </div>
+                  <div
+                    class="messagePreview"
+                    title="Last message in Engineering"
+                  >
+                    Last message in Engineering
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_b3_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_b1_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_ba_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_b8_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="3"
+            data-item-index="3"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Design"
+              aria-posinset="4"
+              aria-selected="false"
+              aria-setsize="20"
+              class="flex roomListItem mx_RoomListItemView bold"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Design avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                DE
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Design"
+                  >
+                    Design
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_bh_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_bf_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_bo_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_bm_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="4"
+            data-item-index="4"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Product"
+              aria-posinset="5"
+              aria-selected="false"
+              aria-setsize="20"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Product avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                PR
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Product"
+                  >
+                    Product
+                  </div>
+                  <div
+                    class="messagePreview"
+                    title="Last message in Product"
+                  >
+                    Last message in Product
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_bv_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_bt_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_c6_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_c4_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="5"
+            data-item-index="5"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Marketing with 5 unread mentions."
+              aria-posinset="6"
+              aria-selected="false"
+              aria-setsize="20"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Marketing avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                MA
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Marketing"
+                  >
+                    Marketing
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_cd_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_cb_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_ck_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_ci_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                >
+                  <div
+                    class="flex"
+                    data-testid="notification-decoration"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                  >
+                    <svg
+                      fill="var(--cpd-color-icon-accent-primary)"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
+                      />
+                    </svg>
+                    <span
+                      class="_unread-counter_1147r_8"
+                    >
+                      5
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="6"
+            data-item-index="6"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Sales"
+              aria-posinset="7"
+              aria-selected="false"
+              aria-setsize="20"
+              class="flex roomListItem mx_RoomListItemView bold"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Sales avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                SA
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Sales"
+                  >
+                    Sales
+                  </div>
+                  <div
+                    class="messagePreview"
+                    title="Last message in Sales"
+                  >
+                    Last message in Sales
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_cr_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_cp_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_d2_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_d0_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="7"
+            data-item-index="7"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Support"
+              aria-posinset="8"
+              aria-selected="false"
+              aria-setsize="20"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Support avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                SU
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Support"
+                  >
+                    Support
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_d9_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_d7_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_dg_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_de_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="8"
+            data-item-index="8"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Announcements"
+              aria-posinset="9"
+              aria-selected="false"
+              aria-setsize="20"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Announcements avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                AN
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Announcements"
+                  >
+                    Announcements
+                  </div>
+                  <div
+                    class="messagePreview"
+                    title="Last message in Announcements"
+                  >
+                    Last message in Announcements
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_dn_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_dl_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_du_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_ds_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="9"
+            data-item-index="9"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Off-topic"
+              aria-posinset="10"
+              aria-selected="false"
+              aria-setsize="20"
+              class="flex roomListItem mx_RoomListItemView bold"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Off-topic avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                OF
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Off-topic"
+                  >
+                    Off-topic
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_e5_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_e3_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_ec_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_ea_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="10"
+            data-item-index="10"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Team Alpha with 10 unread mentions."
+              aria-posinset="11"
+              aria-selected="false"
+              aria-setsize="20"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Team Alpha avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                TE
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Team Alpha"
+                  >
+                    Team Alpha
+                  </div>
+                  <div
+                    class="messagePreview"
+                    title="Last message in Team Alpha"
+                  >
+                    Last message in Team Alpha
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_ej_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_eh_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_eq_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_eo_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                >
+                  <div
+                    class="flex"
+                    data-testid="notification-decoration"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                  >
+                    <svg
+                      fill="var(--cpd-color-icon-accent-primary)"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
+                      />
+                    </svg>
+                    <span
+                      class="_unread-counter_1147r_8"
+                    >
+                      10
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="11"
+            data-item-index="11"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Team Beta"
+              aria-posinset="12"
+              aria-selected="false"
+              aria-setsize="20"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Team Beta avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                TE
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Team Beta"
+                  >
+                    Team Beta
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_f1_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_ev_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_f8_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_f6_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="12"
+            data-item-index="12"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Project X"
+              aria-posinset="13"
+              aria-selected="false"
+              aria-setsize="20"
+              class="flex roomListItem mx_RoomListItemView bold"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Project X avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                PR
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Project X"
+                  >
+                    Project X
+                  </div>
+                  <div
+                    class="messagePreview"
+                    title="Last message in Project X"
+                  >
+                    Last message in Project X
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_ff_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_fd_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_fm_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_fk_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="13"
+            data-item-index="13"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Project Y"
+              aria-posinset="14"
+              aria-selected="false"
+              aria-setsize="20"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Project Y avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                PR
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Project Y"
+                  >
+                    Project Y
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_ft_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_fr_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_g4_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_g2_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="14"
+            data-item-index="14"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Water Cooler"
+              aria-posinset="15"
+              aria-selected="false"
+              aria-setsize="20"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Water Cooler avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                WA
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Water Cooler"
+                  >
+                    Water Cooler
+                  </div>
+                  <div
+                    class="messagePreview"
+                    title="Last message in Water Cooler"
+                  >
+                    Last message in Water Cooler
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_gb_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_g9_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_gi_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_gg_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="15"
+            data-item-index="15"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Feedback with 15 unread mentions."
+              aria-posinset="16"
+              aria-selected="false"
+              aria-setsize="20"
+              class="flex roomListItem mx_RoomListItemView bold"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Feedback avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                FE
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Feedback"
+                  >
+                    Feedback
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_gp_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_gn_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_h0_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_gu_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                >
+                  <div
+                    class="flex"
+                    data-testid="notification-decoration"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                  >
+                    <svg
+                      fill="var(--cpd-color-icon-accent-primary)"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
+                      />
+                    </svg>
+                    <span
+                      class="_unread-counter_1147r_8"
+                    >
+                      15
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="16"
+            data-item-index="16"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Ideas"
+              aria-posinset="17"
+              aria-selected="false"
+              aria-setsize="20"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Ideas avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                ID
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Ideas"
+                  >
+                    Ideas
+                  </div>
+                  <div
+                    class="messagePreview"
+                    title="Last message in Ideas"
+                  >
+                    Last message in Ideas
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_h7_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_h5_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_he_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_hc_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="17"
+            data-item-index="17"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Bugs"
+              aria-posinset="18"
+              aria-selected="false"
+              aria-setsize="20"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Bugs avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                BU
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Bugs"
+                  >
+                    Bugs
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_hl_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_hj_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_hs_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_hq_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="18"
+            data-item-index="18"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Features"
+              aria-posinset="19"
+              aria-selected="false"
+              aria-setsize="20"
+              class="flex roomListItem mx_RoomListItemView bold"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Features avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                FE
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Features"
+                  >
+                    Features
+                  </div>
+                  <div
+                    class="messagePreview"
+                    title="Last message in Features"
+                  >
+                    Last message in Features
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_i3_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_i1_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_ia_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_i8_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+          <div
+            data-index="19"
+            data-item-index="19"
+            data-known-size="48"
+            style="overflow-anchor: none;"
+          >
+            <button
+              aria-haspopup="menu"
+              aria-label="Open room Releases"
+              aria-posinset="20"
+              aria-selected="false"
+              aria-setsize="20"
+              class="flex roomListItem mx_RoomListItemView"
+              data-state="closed"
+              role="option"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              tabindex="-1"
+              type="button"
+            >
+              <div
+                aria-label="Releases avatar"
+                role="img"
+                style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+              >
+                RE
+              </div>
+              <div
+                class="flex content"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+              >
+                <div
+                  class="text"
+                >
+                  <div
+                    class="roomName"
+                    data-testid="room-name"
+                    title="Releases"
+                  >
+                    Releases
+                  </div>
+                </div>
+                <div
+                  class="flex hoverMenu"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="More Options"
+                    aria-labelledby="_r_ih_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_if_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                  <button
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    aria-haspopup="menu"
+                    aria-label="Notification options"
+                    aria-labelledby="_r_io_"
+                    class="_icon-button_1215g_8"
+                    data-kind="primary"
+                    data-state="closed"
+                    id="radix-_r_im_"
+                    role="button"
+                    style="--cpd-icon-button-size: 24px;"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="notificationDecoration"
+                />
+              </div>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/shared-components/src/room-list/RoomListView/assets/skeleton.svg b/packages/shared-components/src/room-list/RoomListView/assets/skeleton.svg
new file mode 100644
index 0000000000..adf56e4ed8
--- /dev/null
+++ b/packages/shared-components/src/room-list/RoomListView/assets/skeleton.svg
@@ -0,0 +1,14 @@
+<svg width="309" height="96" viewBox="0 0 309 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="8" y="8" width="32" height="32" rx="16" fill="#E1E6EC"/>
+<mask id="path-2-inside-1_1772_38931" fill="white">
+<path d="M52 0H309V48H52V0Z"/>
+</mask>
+<path d="M309 48V47.5H52V48V48.5H309V48Z" fill="#F0F2F5" mask="url(#path-2-inside-1_1772_38931)"/>
+<path d="M48.7 25.938C48.7 25.3073 48.8467 24.75 49.14 24.266C49.4187 23.7673 49.8073 23.3787 50.306 23.1C50.79 22.8067 51.3473 22.66 51.978 22.66H64.386C65.0167 22.66 65.574 22.8067 66.058 23.1C66.5567 23.3787 66.9453 23.7673 67.224 24.266C67.5173 24.75 67.664 25.3073 67.664 25.938V25.982C67.664 26.6127 67.5173 27.1773 67.224 27.676C66.9453 28.16 66.5567 28.5487 66.058 28.842C65.574 29.1207 65.0167 29.26 64.386 29.26H51.978C51.3473 29.26 50.79 29.1207 50.306 28.842C49.8073 28.5487 49.4187 28.16 49.14 27.676C48.8467 27.1773 48.7 26.6127 48.7 25.982V25.938ZM61.0535 25.938C61.0535 25.3073 61.2002 24.75 61.4935 24.266C61.7722 23.7673 62.1608 23.3787 62.6595 23.1C63.1435 22.8067 63.7008 22.66 64.3315 22.66H76.7395C77.3702 22.66 77.9275 22.8067 78.4115 23.1C78.9102 23.3787 79.2988 23.7673 79.5775 24.266C79.8708 24.75 80.0175 25.3073 80.0175 25.938V25.982C80.0175 26.6127 79.8708 27.1773 79.5775 27.676C79.2988 28.16 78.9102 28.5487 78.4115 28.842C77.9275 29.1207 77.3702 29.26 76.7395 29.26H64.3315C63.7008 29.26 63.1435 29.1207 62.6595 28.842C62.1608 28.5487 61.7722 28.16 61.4935 27.676C61.2002 27.1773 61.0535 26.6127 61.0535 25.982V25.938ZM73.407 25.938C73.407 25.3073 73.5537 24.75 73.847 24.266C74.1257 23.7673 74.5144 23.3787 75.013 23.1C75.497 22.8067 76.0544 22.66 76.685 22.66H89.093C89.7237 22.66 90.281 22.8067 90.765 23.1C91.2637 23.3787 91.6524 23.7673 91.931 24.266C92.2244 24.75 92.371 25.3073 92.371 25.938V25.982C92.371 26.6127 92.2244 27.1773 91.931 27.676C91.6524 28.16 91.2637 28.5487 90.765 28.842C90.281 29.1207 89.7237 29.26 89.093 29.26H76.685C76.0544 29.26 75.497 29.1207 75.013 28.842C74.5144 28.5487 74.1257 28.16 73.847 27.676C73.5537 27.1773 73.407 26.6127 73.407 25.982V25.938ZM85.7605 25.938C85.7605 25.3073 85.9072 24.75 86.2005 24.266C86.4792 23.7673 86.8679 23.3787 87.3665 23.1C87.8505 22.8067 88.4079 22.66 89.0385 22.66H101.447C102.077 22.66 102.635 22.8067 103.119 23.1C103.617 23.3787 104.006 23.7673 104.285 24.266C104.578 24.75 104.725 25.3073 104.725 25.938V25.982C104.725 26.6127 104.578 27.1773 104.285 27.676C104.006 28.16 103.617 28.5487 103.119 28.842C102.635 29.1207 102.077 29.26 101.447 29.26H89.0385C88.4079 29.26 87.8505 29.1207 87.3665 28.842C86.8679 28.5487 86.4792 28.16 86.2005 27.676C85.9072 27.1773 85.7605 26.6127 85.7605 25.982V25.938ZM98.1141 25.938C98.1141 25.3073 98.2607 24.75 98.5541 24.266C98.8327 23.7673 99.2214 23.3787 99.7201 23.1C100.204 22.8067 100.761 22.66 101.392 22.66H113.8C114.431 22.66 114.988 22.8067 115.472 23.1C115.971 23.3787 116.359 23.7673 116.638 24.266C116.931 24.75 117.078 25.3073 117.078 25.938V25.982C117.078 26.6127 116.931 27.1773 116.638 27.676C116.359 28.16 115.971 28.5487 115.472 28.842C114.988 29.1207 114.431 29.26 113.8 29.26H101.392C100.761 29.26 100.204 29.1207 99.7201 28.842C99.2214 28.5487 98.8327 28.16 98.5541 27.676C98.2607 27.1773 98.1141 26.6127 98.1141 25.982V25.938ZM110.468 25.938C110.468 25.3073 110.614 24.75 110.908 24.266C111.186 23.7673 111.575 23.3787 112.074 23.1C112.558 22.8067 113.115 22.66 113.746 22.66H126.154C126.784 22.66 127.342 22.8067 127.826 23.1C128.324 23.3787 128.713 23.7673 128.992 24.266C129.285 24.75 129.432 25.3073 129.432 25.938V25.982C129.432 26.6127 129.285 27.1773 128.992 27.676C128.713 28.16 128.324 28.5487 127.826 28.842C127.342 29.1207 126.784 29.26 126.154 29.26H113.746C113.115 29.26 112.558 29.1207 112.074 28.842C111.575 28.5487 111.186 28.16 110.908 27.676C110.614 27.1773 110.468 26.6127 110.468 25.982V25.938ZM122.821 25.938C122.821 25.3073 122.968 24.75 123.261 24.266C123.54 23.7673 123.928 23.3787 124.427 23.1C124.911 22.8067 125.468 22.66 126.099 22.66H138.507C139.138 22.66 139.695 22.8067 140.179 23.1C140.678 23.3787 141.066 23.7673 141.345 24.266C141.638 24.75 141.785 25.3073 141.785 25.938V25.982C141.785 26.6127 141.638 27.1773 141.345 27.676C141.066 28.16 140.678 28.5487 140.179 28.842C139.695 29.1207 139.138 29.26 138.507 29.26H126.099C125.468 29.26 124.911 29.1207 124.427 28.842C123.928 28.5487 123.54 28.16 123.261 27.676C122.968 27.1773 122.821 26.6127 122.821 25.982V25.938ZM135.175 25.938C135.175 25.3073 135.321 24.75 135.615 24.266C135.893 23.7673 136.282 23.3787 136.781 23.1C137.265 22.8067 137.822 22.66 138.453 22.66H150.861C151.491 22.66 152.049 22.8067 152.533 23.1C153.031 23.3787 153.42 23.7673 153.699 24.266C153.992 24.75 154.139 25.3073 154.139 25.938V25.982C154.139 26.6127 153.992 27.1773 153.699 27.676C153.42 28.16 153.031 28.5487 152.533 28.842C152.049 29.1207 151.491 29.26 150.861 29.26H138.453C137.822 29.26 137.265 29.1207 136.781 28.842C136.282 28.5487 135.893 28.16 135.615 27.676C135.321 27.1773 135.175 26.6127 135.175 25.982V25.938ZM160.72 25.938C160.72 25.3073 160.866 24.75 161.16 24.266C161.438 23.7673 161.827 23.3787 162.326 23.1C162.81 22.8067 163.367 22.66 163.998 22.66H176.406C177.036 22.66 177.594 22.8067 178.078 23.1C178.576 23.3787 178.965 23.7673 179.244 24.266C179.537 24.75 179.684 25.3073 179.684 25.938V25.982C179.684 26.6127 179.537 27.1773 179.244 27.676C178.965 28.16 178.576 28.5487 178.078 28.842C177.594 29.1207 177.036 29.26 176.406 29.26H163.998C163.367 29.26 162.81 29.1207 162.326 28.842C161.827 28.5487 161.438 28.16 161.16 27.676C160.866 27.1773 160.72 26.6127 160.72 25.982V25.938ZM173.073 25.938C173.073 25.3073 173.22 24.75 173.513 24.266C173.792 23.7673 174.18 23.3787 174.679 23.1C175.163 22.8067 175.72 22.66 176.351 22.66H182.687C183.318 22.66 183.875 22.8067 184.359 23.1C184.858 23.3787 185.246 23.7673 185.525 24.266C185.818 24.75 185.965 25.3073 185.965 25.938V25.982C185.965 26.6127 185.818 27.1773 185.525 27.676C185.246 28.16 184.858 28.5487 184.359 28.842C183.875 29.1207 183.318 29.26 182.687 29.26H176.351C175.72 29.26 175.163 29.1207 174.679 28.842C174.18 28.5487 173.792 28.16 173.513 27.676C173.22 27.1773 173.073 26.6127 173.073 25.982V25.938ZM179.368 25.938C179.368 25.3073 179.515 24.75 179.808 24.266C180.087 23.7673 180.475 23.3787 180.974 23.1C181.458 22.8067 182.015 22.66 182.646 22.66H195.054C195.685 22.66 196.242 22.8067 196.726 23.1C197.225 23.3787 197.613 23.7673 197.892 24.266C198.185 24.75 198.332 25.3073 198.332 25.938V25.982C198.332 26.6127 198.185 27.1773 197.892 27.676C197.613 28.16 197.225 28.5487 196.726 28.842C196.242 29.1207 195.685 29.26 195.054 29.26H182.646C182.015 29.26 181.458 29.1207 180.974 28.842C180.475 28.5487 180.087 28.16 179.808 27.676C179.515 27.1773 179.368 26.6127 179.368 25.982V25.938ZM191.721 25.938C191.721 25.3073 191.868 24.75 192.161 24.266C192.44 23.7673 192.829 23.3787 193.327 23.1C193.811 22.8067 194.369 22.66 194.999 22.66H207.407C208.038 22.66 208.595 22.8067 209.079 23.1C209.578 23.3787 209.967 23.7673 210.245 24.266C210.539 24.75 210.685 25.3073 210.685 25.938V25.982C210.685 26.6127 210.539 27.1773 210.245 27.676C209.967 28.16 209.578 28.5487 209.079 28.842C208.595 29.1207 208.038 29.26 207.407 29.26H194.999C194.369 29.26 193.811 29.1207 193.327 28.842C192.829 28.5487 192.44 28.16 192.161 27.676C191.868 27.1773 191.721 26.6127 191.721 25.982V25.938ZM204.075 25.938C204.075 25.3073 204.222 24.75 204.515 24.266C204.794 23.7673 205.182 23.3787 205.681 23.1C206.165 22.8067 206.722 22.66 207.353 22.66H219.761C220.392 22.66 220.949 22.8067 221.433 23.1C221.932 23.3787 222.32 23.7673 222.599 24.266C222.892 24.75 223.039 25.3073 223.039 25.938V25.982C223.039 26.6127 222.892 27.1773 222.599 27.676C222.32 28.16 221.932 28.5487 221.433 28.842C220.949 29.1207 220.392 29.26 219.761 29.26H207.353C206.722 29.26 206.165 29.1207 205.681 28.842C205.182 28.5487 204.794 28.16 204.515 27.676C204.222 27.1773 204.075 26.6127 204.075 25.982V25.938ZM216.429 25.938C216.429 25.3073 216.575 24.75 216.869 24.266C217.147 23.7673 217.536 23.3787 218.035 23.1C218.519 22.8067 219.076 22.66 219.707 22.66H226.043C226.673 22.66 227.231 22.8067 227.715 23.1C228.213 23.3787 228.602 23.7673 228.881 24.266C229.174 24.75 229.321 25.3073 229.321 25.938V25.982C229.321 26.6127 229.174 27.1773 228.881 27.676C228.602 28.16 228.213 28.5487 227.715 28.842C227.231 29.1207 226.673 29.26 226.043 29.26H219.707C219.076 29.26 218.519 29.1207 218.035 28.842C217.536 28.5487 217.147 28.16 216.869 27.676C216.575 27.1773 216.429 26.6127 216.429 25.982V25.938ZM222.723 25.938C222.723 25.3073 222.87 24.75 223.163 24.266C223.442 23.7673 223.831 23.3787 224.329 23.1C224.813 22.8067 225.371 22.66 226.001 22.66H232.337C232.968 22.66 233.525 22.8067 234.009 23.1C234.508 23.3787 234.897 23.7673 235.175 24.266C235.469 24.75 235.615 25.3073 235.615 25.938V25.982C235.615 26.6127 235.469 27.1773 235.175 27.676C234.897 28.16 234.508 28.5487 234.009 28.842C233.525 29.1207 232.968 29.26 232.337 29.26H226.001C225.371 29.26 224.813 29.1207 224.329 28.842C223.831 28.5487 223.442 28.16 223.163 27.676C222.87 27.1773 222.723 26.6127 222.723 25.982V25.938ZM229.018 25.938C229.018 25.3073 229.165 24.75 229.458 24.266C229.737 23.7673 230.126 23.3787 230.624 23.1C231.108 22.8067 231.666 22.66 232.296 22.66H238.632C239.263 22.66 239.82 22.8067 240.304 23.1C240.803 23.3787 241.192 23.7673 241.47 24.266C241.764 24.75 241.91 25.3073 241.91 25.938V25.982C241.91 26.6127 241.764 27.1773 241.47 27.676C241.192 28.16 240.803 28.5487 240.304 28.842C239.82 29.1207 239.263 29.26 238.632 29.26H232.296C231.666 29.26 231.108 29.1207 230.624 28.842C230.126 28.5487 229.737 28.16 229.458 27.676C229.165 27.1773 229.018 26.6127 229.018 25.982V25.938Z" fill="#F0F2F5"/>
+<rect x="8" y="56" width="32" height="32" rx="16" fill="#E1E6EC"/>
+<mask id="path-6-inside-2_1772_38931" fill="white">
+<path d="M52 48H309V96H52V48Z"/>
+</mask>
+<path d="M309 96V95.5H52V96V96.5H309V96Z" fill="#F0F2F5" mask="url(#path-6-inside-2_1772_38931)"/>
+<path d="M48.7 73.938C48.7 73.3073 48.8467 72.75 49.14 72.266C49.4187 71.7673 49.8073 71.3787 50.306 71.1C50.79 70.8067 51.3473 70.66 51.978 70.66H64.386C65.0167 70.66 65.574 70.8067 66.058 71.1C66.5567 71.3787 66.9453 71.7673 67.224 72.266C67.5173 72.75 67.664 73.3073 67.664 73.938V73.982C67.664 74.6127 67.5173 75.1773 67.224 75.676C66.9453 76.16 66.5567 76.5487 66.058 76.842C65.574 77.1207 65.0167 77.26 64.386 77.26H51.978C51.3473 77.26 50.79 77.1207 50.306 76.842C49.8073 76.5487 49.4187 76.16 49.14 75.676C48.8467 75.1773 48.7 74.6127 48.7 73.982V73.938ZM61.0535 73.938C61.0535 73.3073 61.2002 72.75 61.4935 72.266C61.7722 71.7673 62.1608 71.3787 62.6595 71.1C63.1435 70.8067 63.7008 70.66 64.3315 70.66H76.7395C77.3702 70.66 77.9275 70.8067 78.4115 71.1C78.9102 71.3787 79.2988 71.7673 79.5775 72.266C79.8708 72.75 80.0175 73.3073 80.0175 73.938V73.982C80.0175 74.6127 79.8708 75.1773 79.5775 75.676C79.2988 76.16 78.9102 76.5487 78.4115 76.842C77.9275 77.1207 77.3702 77.26 76.7395 77.26H64.3315C63.7008 77.26 63.1435 77.1207 62.6595 76.842C62.1608 76.5487 61.7722 76.16 61.4935 75.676C61.2002 75.1773 61.0535 74.6127 61.0535 73.982V73.938ZM73.407 73.938C73.407 73.3073 73.5537 72.75 73.847 72.266C74.1257 71.7673 74.5144 71.3787 75.013 71.1C75.497 70.8067 76.0544 70.66 76.685 70.66H89.093C89.7237 70.66 90.281 70.8067 90.765 71.1C91.2637 71.3787 91.6524 71.7673 91.931 72.266C92.2244 72.75 92.371 73.3073 92.371 73.938V73.982C92.371 74.6127 92.2244 75.1773 91.931 75.676C91.6524 76.16 91.2637 76.5487 90.765 76.842C90.281 77.1207 89.7237 77.26 89.093 77.26H76.685C76.0544 77.26 75.497 77.1207 75.013 76.842C74.5144 76.5487 74.1257 76.16 73.847 75.676C73.5537 75.1773 73.407 74.6127 73.407 73.982V73.938ZM85.7605 73.938C85.7605 73.3073 85.9072 72.75 86.2005 72.266C86.4792 71.7673 86.8679 71.3787 87.3665 71.1C87.8505 70.8067 88.4079 70.66 89.0385 70.66H101.447C102.077 70.66 102.635 70.8067 103.119 71.1C103.617 71.3787 104.006 71.7673 104.285 72.266C104.578 72.75 104.725 73.3073 104.725 73.938V73.982C104.725 74.6127 104.578 75.1773 104.285 75.676C104.006 76.16 103.617 76.5487 103.119 76.842C102.635 77.1207 102.077 77.26 101.447 77.26H89.0385C88.4079 77.26 87.8505 77.1207 87.3665 76.842C86.8679 76.5487 86.4792 76.16 86.2005 75.676C85.9072 75.1773 85.7605 74.6127 85.7605 73.982V73.938ZM111.305 73.938C111.305 73.3073 111.452 72.75 111.745 72.266C112.024 71.7673 112.413 71.3787 112.911 71.1C113.395 70.8067 113.953 70.66 114.583 70.66H126.991C127.622 70.66 128.179 70.8067 128.663 71.1C129.162 71.3787 129.551 71.7673 129.829 72.266C130.123 72.75 130.269 73.3073 130.269 73.938V73.982C130.269 74.6127 130.123 75.1773 129.829 75.676C129.551 76.16 129.162 76.5487 128.663 76.842C128.179 77.1207 127.622 77.26 126.991 77.26H114.583C113.953 77.26 113.395 77.1207 112.911 76.842C112.413 76.5487 112.024 76.16 111.745 75.676C111.452 75.1773 111.305 74.6127 111.305 73.982V73.938ZM123.659 73.938C123.659 73.3073 123.806 72.75 124.099 72.266C124.378 71.7673 124.766 71.3787 125.265 71.1C125.749 70.8067 126.306 70.66 126.937 70.66H133.273C133.904 70.66 134.461 70.8067 134.945 71.1C135.444 71.3787 135.832 71.7673 136.111 72.266C136.404 72.75 136.551 73.3073 136.551 73.938V73.982C136.551 74.6127 136.404 75.1773 136.111 75.676C135.832 76.16 135.444 76.5487 134.945 76.842C134.461 77.1207 133.904 77.26 133.273 77.26H126.937C126.306 77.26 125.749 77.1207 125.265 76.842C124.766 76.5487 124.378 76.16 124.099 75.676C123.806 75.1773 123.659 74.6127 123.659 73.982V73.938ZM129.954 73.938C129.954 73.3073 130.101 72.75 130.394 72.266C130.673 71.7673 131.061 71.3787 131.56 71.1C132.044 70.8067 132.601 70.66 133.232 70.66H145.64C146.271 70.66 146.828 70.8067 147.312 71.1C147.811 71.3787 148.199 71.7673 148.478 72.266C148.771 72.75 148.918 73.3073 148.918 73.938V73.982C148.918 74.6127 148.771 75.1773 148.478 75.676C148.199 76.16 147.811 76.5487 147.312 76.842C146.828 77.1207 146.271 77.26 145.64 77.26H133.232C132.601 77.26 132.044 77.1207 131.56 76.842C131.061 76.5487 130.673 76.16 130.394 75.676C130.101 75.1773 129.954 74.6127 129.954 73.982V73.938ZM142.307 73.938C142.307 73.3073 142.454 72.75 142.747 72.266C143.026 71.7673 143.415 71.3787 143.913 71.1C144.397 70.8067 144.955 70.66 145.585 70.66H157.993C158.624 70.66 159.181 70.8067 159.665 71.1C160.164 71.3787 160.553 71.7673 160.831 72.266C161.125 72.75 161.271 73.3073 161.271 73.938V73.982C161.271 74.6127 161.125 75.1773 160.831 75.676C160.553 76.16 160.164 76.5487 159.665 76.842C159.181 77.1207 158.624 77.26 157.993 77.26H145.585C144.955 77.26 144.397 77.1207 143.913 76.842C143.415 76.5487 143.026 76.16 142.747 75.676C142.454 75.1773 142.307 74.6127 142.307 73.982V73.938ZM154.661 73.938C154.661 73.3073 154.808 72.75 155.101 72.266C155.38 71.7673 155.768 71.3787 156.267 71.1C156.751 70.8067 157.308 70.66 157.939 70.66H170.347C170.978 70.66 171.535 70.8067 172.019 71.1C172.518 71.3787 172.906 71.7673 173.185 72.266C173.478 72.75 173.625 73.3073 173.625 73.938V73.982C173.625 74.6127 173.478 75.1773 173.185 75.676C172.906 76.16 172.518 76.5487 172.019 76.842C171.535 77.1207 170.978 77.26 170.347 77.26H157.939C157.308 77.26 156.751 77.1207 156.267 76.842C155.768 76.5487 155.38 76.16 155.101 75.676C154.808 75.1773 154.661 74.6127 154.661 73.982V73.938ZM167.014 73.938C167.014 73.3073 167.161 72.75 167.454 72.266C167.733 71.7673 168.122 71.3787 168.62 71.1C169.104 70.8067 169.662 70.66 170.292 70.66H176.628C177.259 70.66 177.816 70.8067 178.3 71.1C178.799 71.3787 179.188 71.7673 179.466 72.266C179.76 72.75 179.906 73.3073 179.906 73.938V73.982C179.906 74.6127 179.76 75.1773 179.466 75.676C179.188 76.16 178.799 76.5487 178.3 76.842C177.816 77.1207 177.259 77.26 176.628 77.26H170.292C169.662 77.26 169.104 77.1207 168.62 76.842C168.122 76.5487 167.733 76.16 167.454 75.676C167.161 75.1773 167.014 74.6127 167.014 73.982V73.938ZM173.309 73.938C173.309 73.3073 173.456 72.75 173.749 72.266C174.028 71.7673 174.417 71.3787 174.915 71.1C175.399 70.8067 175.957 70.66 176.587 70.66H182.923C183.554 70.66 184.111 70.8067 184.595 71.1C185.094 71.3787 185.483 71.7673 185.761 72.266C186.055 72.75 186.201 73.3073 186.201 73.938V73.982C186.201 74.6127 186.055 75.1773 185.761 75.676C185.483 76.16 185.094 76.5487 184.595 76.842C184.111 77.1207 183.554 77.26 182.923 77.26H176.587C175.957 77.26 175.399 77.1207 174.915 76.842C174.417 76.5487 174.028 76.16 173.749 75.676C173.456 75.1773 173.309 74.6127 173.309 73.982V73.938ZM179.604 73.938C179.604 73.3073 179.751 72.75 180.044 72.266C180.323 71.7673 180.712 71.3787 181.21 71.1C181.694 70.8067 182.252 70.66 182.882 70.66H189.218C189.849 70.66 190.406 70.8067 190.89 71.1C191.389 71.3787 191.778 71.7673 192.056 72.266C192.35 72.75 192.496 73.3073 192.496 73.938V73.982C192.496 74.6127 192.35 75.1773 192.056 75.676C191.778 76.16 191.389 76.5487 190.89 76.842C190.406 77.1207 189.849 77.26 189.218 77.26H182.882C182.252 77.26 181.694 77.1207 181.21 76.842C180.712 76.5487 180.323 76.16 180.044 75.676C179.751 75.1773 179.604 74.6127 179.604 73.982V73.938Z" fill="#F0F2F5"/>
+</svg>
diff --git a/packages/shared-components/src/room-list/RoomListView/index.tsx b/packages/shared-components/src/room-list/RoomListView/index.tsx
new file mode 100644
index 0000000000..ecfbb6d5a2
--- /dev/null
+++ b/packages/shared-components/src/room-list/RoomListView/index.tsx
@@ -0,0 +1,12 @@
+/*
+ * 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.
+ */
+
+export { RoomListView } from "./RoomListView";
+export type { RoomListViewProps, RoomListViewModel, RoomListSnapshot, RoomListViewActions } from "./RoomListView";
+export { RoomListLoadingSkeleton } from "./RoomListLoadingSkeleton";
+export { RoomListEmptyState } from "./RoomListEmptyState";
+export type { RoomListEmptyStateProps } from "./RoomListEmptyState";