diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-hover-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-hover-linux.png
index a5403f2d01..c3b5f34feb 100644
Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-hover-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-hover-linux.png differ
diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-hover-silent-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-hover-silent-linux.png
index 963caeacda..bc2085b205 100644
Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-hover-silent-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-hover-silent-linux.png differ
diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-more-options-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-more-options-linux.png
index bd9499c105..b44e61b3eb 100644
Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-more-options-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-more-options-linux.png differ
diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-linux.png
index 5624092cbf..c182c853b9 100644
Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-linux.png differ
diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-selection-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-selection-linux.png
index 498415e78b..f21e798adf 100644
Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-selection-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-selection-linux.png differ
diff --git a/res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss b/res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss
index 06ffe532d7..7ce6280331 100644
--- a/res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss
+++ b/res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss
@@ -28,6 +28,41 @@
     padding-left: var(--cpd-space-3x);
     font: var(--cpd-font-body-md-regular);
 
+    /*  Hide the menu by default  */
+    .mx_RoomListItemView_menu {
+        display: none;
+    }
+
+    &:hover,
+    &:focus-visible,
+    /* When the context menu is opened  */
+    &[data-state="open"],
+    /*  When the options and notifications menu are opened */
+    &:has(.mx_RoomListItemMenuView > button[data-state="open"]) {
+        background-color: var(--cpd-color-bg-action-secondary-hovered);
+
+        .mx_RoomListItemView_menu {
+            display: flex;
+        }
+
+        &.mx_RoomListItemView_has_menu {
+            /**
+             * The figma uses 16px padding (--cpd-space-4x) but due to https://github.com/element-hq/compound-web/issues/331
+             * the icon size of the menu is 18px instead of 20px with a different internal padding
+             * We need to use 18px to align the icon with the others icons
+             * 18px is not available in compound spacing
+             */
+            .mx_RoomListItemView_content {
+                padding-right: 18px;
+            }
+
+            /*  When the menu is visible, hide the notification decoration to avoid clutter */
+            .mx_RoomListItemView_notificationDecoration {
+                display: none;
+            }
+        }
+    }
+
     .mx_RoomListItemView_content {
         height: 100%;
         flex: 1;
@@ -57,20 +92,6 @@
     }
 }
 
-.mx_RoomListItemView_hover {
-    background-color: var(--cpd-color-bg-action-secondary-hovered);
-}
-
-.mx_RoomListItemView_menu_open .mx_RoomListItemView_content {
-    /**
-     * The figma uses 16px padding (--cpd-space-4x) but due to https://github.com/element-hq/compound-web/issues/331
-     * the icon size of the menu is 18px instead of 20px with a different internal padding
-     * We need to use 18px to align the icon with the others icons
-     * 18px is not available in compound spacing
-     */
-    padding-right: 18px;
-}
-
 .mx_RoomListItemView_selected {
     background-color: var(--cpd-color-bg-action-secondary-pressed);
 }
diff --git a/src/components/views/rooms/RoomListPanel/RoomListItemContextMenuView.tsx b/src/components/views/rooms/RoomListPanel/RoomListItemContextMenuView.tsx
index 0769d9e40a..f3ba4167e7 100644
--- a/src/components/views/rooms/RoomListPanel/RoomListItemContextMenuView.tsx
+++ b/src/components/views/rooms/RoomListPanel/RoomListItemContextMenuView.tsx
@@ -19,10 +19,6 @@ interface RoomListItemContextMenuViewProps {
      * The room to display the menu for.
      */
     room: Room;
-    /**
-     * Set the menu open state.
-     */
-    setMenuOpen: (isOpen: boolean) => void;
 }
 
 /**
@@ -30,7 +26,6 @@ interface RoomListItemContextMenuViewProps {
  */
 export function RoomListItemContextMenuView({
     room,
-    setMenuOpen,
     children,
 }: PropsWithChildren<RoomListItemContextMenuViewProps>): JSX.Element {
     const vm = useRoomListItemMenuViewModel(room);
@@ -42,7 +37,6 @@ export function RoomListItemContextMenuView({
             // To not mess with the roving tab index of the button
             hasAccessibleAlternative={true}
             trigger={children}
-            onOpenChange={setMenuOpen}
         >
             <MoreOptionContent vm={vm} />
         </ContextMenu>
diff --git a/src/components/views/rooms/RoomListPanel/RoomListItemMenuView.tsx b/src/components/views/rooms/RoomListPanel/RoomListItemMenuView.tsx
index ad92559f5c..1162d07e9a 100644
--- a/src/components/views/rooms/RoomListPanel/RoomListItemMenuView.tsx
+++ b/src/components/views/rooms/RoomListPanel/RoomListItemMenuView.tsx
@@ -5,8 +5,8 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import React, { type ComponentProps, type JSX, type Ref, useState } from "react";
-import { IconButton, Menu, MenuItem, Separator, ToggleMenuItem, Tooltip } from "@vector-im/compound-web";
+import React, { type JSX, useState } from "react";
+import { IconButton, Menu, MenuItem, Separator, ToggleMenuItem } from "@vector-im/compound-web";
 import MarkAsReadIcon from "@vector-im/compound-design-tokens/assets/web/icons/mark-as-read";
 import MarkAsUnreadIcon from "@vector-im/compound-design-tokens/assets/web/icons/mark-as-unread";
 import FavouriteIcon from "@vector-im/compound-design-tokens/assets/web/icons/favourite";
@@ -20,6 +20,7 @@ import NotificationOffIcon from "@vector-im/compound-design-tokens/assets/web/ic
 import CheckIcon from "@vector-im/compound-design-tokens/assets/web/icons/check";
 import { type Room } from "matrix-js-sdk/src/matrix";
 import { Flex } from "@element-hq/web-shared-components";
+import classNames from "classnames";
 
 import { _t } from "../../../../languageHandler";
 import {
@@ -29,26 +30,27 @@ import {
 import { RoomNotifState } from "../../../../RoomNotifs";
 
 interface RoomListItemMenuViewProps {
+    /**
+     * Additional class name for the root element.
+     */
+    className?: string;
+
     /**
      * The room to display the menu for.
      */
     room: Room;
-    /**
-     * Set the menu open state.
-     */
-    setMenuOpen: (isOpen: boolean) => void;
 }
 
 /**
  * A view for the room list item menu.
  */
-export function RoomListItemMenuView({ room, setMenuOpen }: RoomListItemMenuViewProps): JSX.Element {
+export function RoomListItemMenuView({ room, className }: RoomListItemMenuViewProps): JSX.Element {
     const vm = useRoomListItemMenuViewModel(room);
 
     return (
-        <Flex className="mx_RoomListItemMenuView" align="center" gap="var(--cpd-space-1x)">
-            {vm.showMoreOptionsMenu && <MoreOptionsMenu setMenuOpen={setMenuOpen} vm={vm} />}
-            {vm.showNotificationMenu && <NotificationMenu setMenuOpen={setMenuOpen} vm={vm} />}
+        <Flex className={classNames("mx_RoomListItemMenuView", className)} align="center" gap="var(--cpd-space-1x)">
+            {vm.showMoreOptionsMenu && <MoreOptionsMenu vm={vm} />}
+            {vm.showNotificationMenu && <NotificationMenu vm={vm} />}
         </Flex>
     );
 }
@@ -58,30 +60,30 @@ interface MoreOptionsMenuProps {
      * The view model state for the menu.
      */
     vm: RoomListItemMenuViewState;
-    /**
-     * Set the menu open state.
-     * @param isOpen
-     */
-    setMenuOpen: (isOpen: boolean) => void;
 }
 
 /**
  * The more options menu for the room list item.
  */
-function MoreOptionsMenu({ vm, setMenuOpen }: MoreOptionsMenuProps): JSX.Element {
+function MoreOptionsMenu({ vm }: MoreOptionsMenuProps): JSX.Element {
     const [open, setOpen] = useState(false);
 
     return (
         <Menu
             open={open}
-            onOpenChange={(isOpen) => {
-                setOpen(isOpen);
-                setMenuOpen(isOpen);
-            }}
+            onOpenChange={setOpen}
             title={_t("room_list|room|more_options")}
             showTitle={false}
             align="start"
-            trigger={<MoreOptionsButton size="24px" />}
+            trigger={
+                <IconButton
+                    tooltip={_t("room_list|room|more_options")}
+                    aria-label={_t("room_list|room|more_options")}
+                    size="24px"
+                >
+                    <OverflowIcon />
+                </IconButton>
+            }
         >
             <MoreOptionContent vm={vm} />
         </Menu>
@@ -164,55 +166,37 @@ export function MoreOptionContent({ vm }: MoreOptionContentProps): JSX.Element {
     );
 }
 
-interface MoreOptionsButtonProps extends ComponentProps<typeof IconButton> {
-    ref?: Ref<HTMLButtonElement>;
-}
-
-/**
- * A button to trigger the more options menu.
- */
-const MoreOptionsButton = function MoreOptionsButton(props: MoreOptionsButtonProps): JSX.Element {
-    return (
-        <Tooltip label={_t("room_list|room|more_options")}>
-            <IconButton aria-label={_t("room_list|room|more_options")} {...props}>
-                <OverflowIcon />
-            </IconButton>
-        </Tooltip>
-    );
-};
-
 interface NotificationMenuProps {
     /**
      * The view model state for the menu.
      */
     vm: RoomListItemMenuViewState;
-    /**
-     * Set the menu open state.
-     * @param isOpen
-     */
-    setMenuOpen: (isOpen: boolean) => void;
 }
 
-function NotificationMenu({ vm, setMenuOpen }: NotificationMenuProps): JSX.Element {
+function NotificationMenu({ vm }: NotificationMenuProps): JSX.Element {
     const [open, setOpen] = useState(false);
-
     const checkComponent = <CheckIcon width="24px" height="24px" color="var(--cpd-color-icon-primary)" />;
 
     return (
-        <div
-            // We don't want keyboard navigation events to bubble up to the ListView changing the focused item
-            onKeyDown={(e) => e.stopPropagation()}
+        <Menu
+            open={open}
+            onOpenChange={setOpen}
+            title={_t("room_list|notification_options")}
+            showTitle={false}
+            align="start"
+            trigger={
+                <IconButton
+                    size="24px"
+                    tooltip={_t("room_list|notification_options")}
+                    aria-label={_t("room_list|notification_options")}
+                >
+                    {vm.isNotificationMute ? <NotificationOffIcon /> : <NotificationIcon />}
+                </IconButton>
+            }
         >
-            <Menu
-                open={open}
-                onOpenChange={(isOpen) => {
-                    setOpen(isOpen);
-                    setMenuOpen(isOpen);
-                }}
-                title={_t("room_list|notification_options")}
-                showTitle={false}
-                align="start"
-                trigger={<NotificationButton isRoomMuted={vm.isNotificationMute} size="24px" />}
+            <div
+                // We don't want keyboard navigation events to bubble up to the ListView changing the focused item
+                onKeyDown={(e) => e.stopPropagation()}
             >
                 <MenuItem
                     aria-selected={vm.isNotificationAllMessage}
@@ -250,32 +234,7 @@ function NotificationMenu({ vm, setMenuOpen }: NotificationMenuProps): JSX.Eleme
                 >
                     {vm.isNotificationMute && checkComponent}
                 </MenuItem>
-            </Menu>
-        </div>
+            </div>
+        </Menu>
     );
 }
-
-interface NotificationButtonProps extends ComponentProps<typeof IconButton> {
-    /**
-     * Whether the room is muted.
-     */
-    isRoomMuted: boolean;
-    ref?: Ref<HTMLButtonElement>;
-}
-
-/**
- * A button to trigger the notification menu.
- */
-const NotificationButton = function MoreOptionsButton({
-    isRoomMuted,
-    ref,
-    ...props
-}: NotificationButtonProps): JSX.Element {
-    return (
-        <Tooltip label={_t("room_list|notification_options")}>
-            <IconButton aria-label={_t("room_list|notification_options")} {...props} ref={ref}>
-                {isRoomMuted ? <NotificationOffIcon /> : <NotificationIcon />}
-            </IconButton>
-        </Tooltip>
-    );
-};
diff --git a/src/components/views/rooms/RoomListPanel/RoomListItemView.tsx b/src/components/views/rooms/RoomListPanel/RoomListItemView.tsx
index 5db97397dc..d87da9c034 100644
--- a/src/components/views/rooms/RoomListPanel/RoomListItemView.tsx
+++ b/src/components/views/rooms/RoomListPanel/RoomListItemView.tsx
@@ -5,7 +5,7 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import React, { type JSX, memo, useCallback, useEffect, useRef, useState } from "react";
+import React, { type JSX, memo, useEffect, useRef } from "react";
 import { type Room } from "matrix-js-sdk/src/matrix";
 import classNames from "classnames";
 import { Flex } from "@element-hq/web-shared-components";
@@ -57,18 +57,6 @@ export const RoomListItemView = memo(function RoomListItemView({
 }: RoomListItemViewProps): JSX.Element {
     const ref = useRef<HTMLButtonElement>(null);
     const vm = useRoomListItemViewModel(room);
-    const [isHover, setHover] = useState(false);
-    const [isMenuOpen, setIsMenuOpen] = useState(false);
-    // The compound menu in RoomListItemMenuView needs to be rendered when the hover menu is shown
-    // Using display: none; and then display:flex when hovered in CSS causes the menu to be misaligned
-    const showHoverDecoration = isMenuOpen || isFocused || isHover;
-    const showHoverMenu = showHoverDecoration && vm.showHoverMenu;
-
-    const closeMenu = useCallback(() => {
-        // To avoid icon blinking when closing the menu, we delay the state update
-        // Also, let the focus move to the menu trigger before closing the menu
-        setTimeout(() => setIsMenuOpen(false), 10);
-    }, []);
 
     useEffect(() => {
         if (isFocused) {
@@ -81,8 +69,7 @@ export const RoomListItemView = memo(function RoomListItemView({
             as="button"
             ref={ref}
             className={classNames("mx_RoomListItemView", {
-                mx_RoomListItemView_hover: showHoverDecoration,
-                mx_RoomListItemView_menu_open: showHoverMenu,
+                mx_RoomListItemView_has_menu: vm.showHoverMenu,
                 mx_RoomListItemView_selected: isSelected,
                 mx_RoomListItemView_bold: vm.isBold,
             })}
@@ -96,8 +83,6 @@ export const RoomListItemView = memo(function RoomListItemView({
             aria-label={vm.a11yLabel}
             onClick={() => vm.openRoom()}
             onFocus={(e: React.FocusEvent<HTMLButtonElement>) => onFocus(room, e)}
-            onMouseOver={() => setHover(true)}
-            onMouseOut={() => setHover(false)}
             tabIndex={isFocused ? 0 : -1}
             {...props}
         >
@@ -119,44 +104,21 @@ export const RoomListItemView = memo(function RoomListItemView({
                         </div>
                     )}
                 </div>
-                {showHoverMenu ? (
-                    <RoomListItemMenuView
-                        room={room}
-                        setMenuOpen={(isOpen) => (isOpen ? setIsMenuOpen(true) : closeMenu())}
+                {vm.showHoverMenu && <RoomListItemMenuView className="mx_RoomListItemView_menu" room={room} />}
+
+                {/* aria-hidden because we summarise the unread count/notification status in a11yLabel variable */}
+                {vm.showNotificationDecoration && (
+                    <NotificationDecoration
+                        className="mx_RoomListItemView_notificationDecoration"
+                        notificationState={vm.notificationState}
+                        aria-hidden={true}
+                        callType={vm.callType}
                     />
-                ) : (
-                    <>
-                        {/* aria-hidden because we summarise the unread count/notification status in a11yLabel variable */}
-                        {vm.showNotificationDecoration && (
-                            <NotificationDecoration
-                                notificationState={vm.notificationState}
-                                aria-hidden={true}
-                                callType={vm.callType}
-                            />
-                        )}
-                    </>
                 )}
             </Flex>
         </Flex>
     );
 
-    // Rendering multiple context menus can causes crashes in radix upstream,
-    // See https://github.com/radix-ui/primitives/issues/2717.
     if (!vm.showContextMenu) return content;
-
-    return (
-        <RoomListItemContextMenuView
-            room={room}
-            setMenuOpen={(isOpen) => {
-                if (isOpen) {
-                    // To avoid icon blinking when the context menu is re-opened
-                    setTimeout(() => setIsMenuOpen(true), 0);
-                } else {
-                    closeMenu();
-                }
-            }}
-        >
-            {content}
-        </RoomListItemContextMenuView>
-    );
+    return <RoomListItemContextMenuView room={room}>{content}</RoomListItemContextMenuView>;
 });
diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/RoomListItemMenuView-test.tsx b/test/unit-tests/components/views/rooms/RoomListPanel/RoomListItemMenuView-test.tsx
index 4da783d10c..58ab0c672b 100644
--- a/test/unit-tests/components/views/rooms/RoomListPanel/RoomListItemMenuView-test.tsx
+++ b/test/unit-tests/components/views/rooms/RoomListPanel/RoomListItemMenuView-test.tsx
@@ -56,8 +56,8 @@ describe("<RoomListItemMenuView />", () => {
         room = mkRoom(matrixClient, "room1");
     });
 
-    function renderMenu(setMenuOpen = jest.fn()) {
-        return render(<RoomListItemMenuView room={room} setMenuOpen={setMenuOpen} />);
+    function renderMenu() {
+        return render(<RoomListItemMenuView room={room} />);
     }
 
     it("should render the more options menu", () => {
@@ -84,18 +84,6 @@ describe("<RoomListItemMenuView />", () => {
         expect(screen.queryByRole("button", { name: "Notification options" })).toBeNull();
     });
 
-    it.each([["More Options"], ["Notification options"]])(
-        "should call setMenuOpen when the menu is opened for %s menu",
-        async (label) => {
-            const user = userEvent.setup();
-            const setMenuOpen = jest.fn();
-            renderMenu(setMenuOpen);
-
-            await user.click(screen.getByRole("button", { name: label }));
-            expect(setMenuOpen).toHaveBeenCalledWith(true);
-        },
-    );
-
     it("should display all the buttons and have the actions linked for the more options menu", async () => {
         const user = userEvent.setup();
         renderMenu();
diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/RoomListItemView-test.tsx b/test/unit-tests/components/views/rooms/RoomListPanel/RoomListItemView-test.tsx
index 499573f8a7..d3a8fdfbeb 100644
--- a/test/unit-tests/components/views/rooms/RoomListPanel/RoomListItemView-test.tsx
+++ b/test/unit-tests/components/views/rooms/RoomListPanel/RoomListItemView-test.tsx
@@ -102,41 +102,6 @@ describe("<RoomListItemView />", () => {
         expect(defaultValue.openRoom).toHaveBeenCalled();
     });
 
-    test("should hover decoration if hovered", async () => {
-        mocked(useRoomListItemViewModel).mockReturnValue({ ...defaultValue, showHoverMenu: true });
-
-        const user = userEvent.setup();
-        renderRoomListItem();
-
-        const listItem = screen.getByRole("option", { name: `Open room ${room.name}` });
-        expect(screen.queryByRole("button", { name: "More Options" })).toBeNull();
-
-        await user.hover(listItem);
-        await waitFor(() => expect(screen.getByRole("button", { name: "More Options" })).toBeInTheDocument());
-    });
-
-    test("should hover decoration if focused", async () => {
-        const { rerender } = renderRoomListItem({
-            isFocused: true,
-        });
-
-        const listItem = screen.getByRole("option", { name: `Open room ${room.name}` });
-        expect(listItem).toHaveClass("_flex_4dswl_9 mx_RoomListItemView mx_RoomListItemView_hover");
-
-        rerender(
-            <RoomListItemView
-                room={room}
-                isSelected={false}
-                isFocused={false}
-                onFocus={jest.fn()}
-                roomIndex={0}
-                roomCount={1}
-            />,
-        );
-
-        await waitFor(() => expect(listItem).not.toHaveClass("flex mx_RoomListItemView mx_RoomListItemView_hover"));
-    });
-
     test("should be selected if isSelected=true", async () => {
         const { asFragment } = renderRoomListItem({
             isSelected: true,
diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomList-test.tsx.snap b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomList-test.tsx.snap
index 71bfd45578..4456a46f1c 100644
--- a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomList-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomList-test.tsx.snap
@@ -30,7 +30,7 @@ exports[`<RoomList /> should render a room list 1`] = `
             aria-posinset="1"
             aria-selected="false"
             aria-setsize="10"
-            class="_flex_4dswl_9 mx_RoomListItemView"
+            class="_flex_4dswl_9 mx_RoomListItemView mx_RoomListItemView_has_menu"
             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;"
@@ -70,506 +70,1186 @@ exports[`<RoomList /> should render a room list 1`] = `
                   room0
                 </div>
               </div>
+              <div
+                class="_flex_4dswl_9 mx_RoomListItemMenuView mx_RoomListItemView_menu"
+                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;"
+              />
             </div>
           </button>
-        </div>
-        <div
-          data-index="1"
-          data-item-index="1"
-          data-known-size="48"
-          style="overflow-anchor: none;"
-        >
           <button
+            aria-disabled="false"
+            aria-expanded="false"
             aria-haspopup="menu"
-            aria-label="Open room room1"
-            aria-posinset="2"
-            aria-selected="false"
-            aria-setsize="10"
-            class="_flex_4dswl_9 mx_RoomListItemView"
+            aria-label="More Options"
+            aria-labelledby="_r_2_"
+            class="_icon-button_1pz9o_8"
+            data-kind="primary"
             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"
+            id="radix-_r_0_"
+            role="button"
+            style="--cpd-icon-button-size: 24px;"
+            tabindex="0"
             type="button"
           >
-            <span
-              aria-label="Avatar"
-              class="_avatar_zysgz_8 mx_BaseAvatar"
-              data-color="3"
-              data-testid="avatar-img"
-              data-type="round"
-              style="--cpd-avatar-size: 32px;"
-            >
-              <img
-                alt=""
-                class="_image_zysgz_43"
-                data-type="round"
-                height="32px"
-                loading="lazy"
-                referrerpolicy="no-referrer"
-                src="http://this.is.a.url/avatar.url/room.png"
-                width="32px"
-              />
-            </span>
             <div
-              class="_flex_4dswl_9 mx_RoomListItemView_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;"
+              class="_indicator-icon_147l5_17"
+              style="--cpd-icon-button-size: 100%;"
             >
-              <div
-                class="mx_RoomListItemView_text"
+              <svg
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                <div
-                  class="mx_RoomListItemView_roomName"
-                  title="room1"
-                >
-                  room1
-                </div>
-              </div>
+                <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>
-        </div>
-        <div
-          data-index="2"
-          data-item-index="2"
-          data-known-size="48"
-          style="overflow-anchor: none;"
-        >
           <button
+            aria-disabled="false"
+            aria-expanded="false"
             aria-haspopup="menu"
-            aria-label="Open room room2"
-            aria-posinset="3"
-            aria-selected="false"
-            aria-setsize="10"
-            class="_flex_4dswl_9 mx_RoomListItemView"
+            aria-label="Notification options"
+            aria-labelledby="_r_9_"
+            class="_icon-button_1pz9o_8"
+            data-kind="primary"
             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"
+            id="radix-_r_7_"
+            role="button"
+            style="--cpd-icon-button-size: 24px;"
+            tabindex="0"
             type="button"
           >
-            <span
-              aria-label="Avatar"
-              class="_avatar_zysgz_8 mx_BaseAvatar"
-              data-color="4"
-              data-testid="avatar-img"
-              data-type="round"
-              style="--cpd-avatar-size: 32px;"
-            >
-              <img
-                alt=""
-                class="_image_zysgz_43"
-                data-type="round"
-                height="32px"
-                loading="lazy"
-                referrerpolicy="no-referrer"
-                src="http://this.is.a.url/avatar.url/room.png"
-                width="32px"
-              />
-            </span>
             <div
-              class="_flex_4dswl_9 mx_RoomListItemView_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;"
+              class="_indicator-icon_147l5_17"
+              style="--cpd-icon-button-size: 100%;"
             >
-              <div
-                class="mx_RoomListItemView_text"
+              <svg
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                <div
-                  class="mx_RoomListItemView_roomName"
-                  title="room2"
-                >
-                  room2
-                </div>
-              </div>
-            </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 room3"
-            aria-posinset="4"
-            aria-selected="false"
-            aria-setsize="10"
-            class="_flex_4dswl_9 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"
-          >
-            <span
-              aria-label="Avatar"
-              class="_avatar_zysgz_8 mx_BaseAvatar"
-              data-color="5"
-              data-testid="avatar-img"
-              data-type="round"
-              style="--cpd-avatar-size: 32px;"
-            >
-              <img
-                alt=""
-                class="_image_zysgz_43"
-                data-type="round"
-                height="32px"
-                loading="lazy"
-                referrerpolicy="no-referrer"
-                src="http://this.is.a.url/avatar.url/room.png"
-                width="32px"
-              />
-            </span>
-            <div
-              class="_flex_4dswl_9 mx_RoomListItemView_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="mx_RoomListItemView_text"
-              >
-                <div
-                  class="mx_RoomListItemView_roomName"
-                  title="room3"
-                >
-                  room3
-                </div>
-              </div>
-            </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 room4"
-            aria-posinset="5"
-            aria-selected="false"
-            aria-setsize="10"
-            class="_flex_4dswl_9 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"
-          >
-            <span
-              aria-label="Avatar"
-              class="_avatar_zysgz_8 mx_BaseAvatar"
-              data-color="6"
-              data-testid="avatar-img"
-              data-type="round"
-              style="--cpd-avatar-size: 32px;"
-            >
-              <img
-                alt=""
-                class="_image_zysgz_43"
-                data-type="round"
-                height="32px"
-                loading="lazy"
-                referrerpolicy="no-referrer"
-                src="http://this.is.a.url/avatar.url/room.png"
-                width="32px"
-              />
-            </span>
-            <div
-              class="_flex_4dswl_9 mx_RoomListItemView_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="mx_RoomListItemView_text"
-              >
-                <div
-                  class="mx_RoomListItemView_roomName"
-                  title="room4"
-                >
-                  room4
-                </div>
-              </div>
-            </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 room5"
-            aria-posinset="6"
-            aria-selected="false"
-            aria-setsize="10"
-            class="_flex_4dswl_9 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"
-          >
-            <span
-              aria-label="Avatar"
-              class="_avatar_zysgz_8 mx_BaseAvatar"
-              data-color="1"
-              data-testid="avatar-img"
-              data-type="round"
-              style="--cpd-avatar-size: 32px;"
-            >
-              <img
-                alt=""
-                class="_image_zysgz_43"
-                data-type="round"
-                height="32px"
-                loading="lazy"
-                referrerpolicy="no-referrer"
-                src="http://this.is.a.url/avatar.url/room.png"
-                width="32px"
-              />
-            </span>
-            <div
-              class="_flex_4dswl_9 mx_RoomListItemView_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="mx_RoomListItemView_text"
-              >
-                <div
-                  class="mx_RoomListItemView_roomName"
-                  title="room5"
-                >
-                  room5
-                </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 room6"
-            aria-posinset="7"
-            aria-selected="false"
-            aria-setsize="10"
-            class="_flex_4dswl_9 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"
-          >
-            <span
-              aria-label="Avatar"
-              class="_avatar_zysgz_8 mx_BaseAvatar"
-              data-color="2"
-              data-testid="avatar-img"
-              data-type="round"
-              style="--cpd-avatar-size: 32px;"
-            >
-              <img
-                alt=""
-                class="_image_zysgz_43"
-                data-type="round"
-                height="32px"
-                loading="lazy"
-                referrerpolicy="no-referrer"
-                src="http://this.is.a.url/avatar.url/room.png"
-                width="32px"
-              />
-            </span>
-            <div
-              class="_flex_4dswl_9 mx_RoomListItemView_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="mx_RoomListItemView_text"
-              >
-                <div
-                  class="mx_RoomListItemView_roomName"
-                  title="room6"
-                >
-                  room6
-                </div>
-              </div>
-            </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 room7"
-            aria-posinset="8"
-            aria-selected="false"
-            aria-setsize="10"
-            class="_flex_4dswl_9 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"
-          >
-            <span
-              aria-label="Avatar"
-              class="_avatar_zysgz_8 mx_BaseAvatar"
-              data-color="3"
-              data-testid="avatar-img"
-              data-type="round"
-              style="--cpd-avatar-size: 32px;"
-            >
-              <img
-                alt=""
-                class="_image_zysgz_43"
-                data-type="round"
-                height="32px"
-                loading="lazy"
-                referrerpolicy="no-referrer"
-                src="http://this.is.a.url/avatar.url/room.png"
-                width="32px"
-              />
-            </span>
-            <div
-              class="_flex_4dswl_9 mx_RoomListItemView_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="mx_RoomListItemView_text"
-              >
-                <div
-                  class="mx_RoomListItemView_roomName"
-                  title="room7"
-                >
-                  room7
-                </div>
-              </div>
-            </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 room8"
-            aria-posinset="9"
-            aria-selected="false"
-            aria-setsize="10"
-            class="_flex_4dswl_9 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"
-          >
-            <span
-              aria-label="Avatar"
-              class="_avatar_zysgz_8 mx_BaseAvatar"
-              data-color="4"
-              data-testid="avatar-img"
-              data-type="round"
-              style="--cpd-avatar-size: 32px;"
-            >
-              <img
-                alt=""
-                class="_image_zysgz_43"
-                data-type="round"
-                height="32px"
-                loading="lazy"
-                referrerpolicy="no-referrer"
-                src="http://this.is.a.url/avatar.url/room.png"
-                width="32px"
-              />
-            </span>
-            <div
-              class="_flex_4dswl_9 mx_RoomListItemView_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="mx_RoomListItemView_text"
-              >
-                <div
-                  class="mx_RoomListItemView_roomName"
-                  title="room8"
-                >
-                  room8
-                </div>
-              </div>
-            </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 room9"
-            aria-posinset="10"
-            aria-selected="false"
-            aria-setsize="10"
-            class="_flex_4dswl_9 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"
-          >
-            <span
-              aria-label="Avatar"
-              class="_avatar_zysgz_8 mx_BaseAvatar"
-              data-color="5"
-              data-testid="avatar-img"
-              data-type="round"
-              style="--cpd-avatar-size: 32px;"
-            >
-              <img
-                alt=""
-                class="_image_zysgz_43"
-                data-type="round"
-                height="32px"
-                loading="lazy"
-                referrerpolicy="no-referrer"
-                src="http://this.is.a.url/avatar.url/room.png"
-                width="32px"
-              />
-            </span>
-            <div
-              class="_flex_4dswl_9 mx_RoomListItemView_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="mx_RoomListItemView_text"
-              >
-                <div
-                  class="mx_RoomListItemView_roomName"
-                  title="room9"
-                >
-                  room9
-                </div>
-              </div>
+                <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>
     </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 room1"
+        aria-posinset="2"
+        aria-selected="false"
+        aria-setsize="10"
+        class="_flex_4dswl_9 mx_RoomListItemView mx_RoomListItemView_has_menu"
+        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"
+      >
+        <span
+          aria-label="Avatar"
+          class="_avatar_zysgz_8 mx_BaseAvatar"
+          data-color="3"
+          data-testid="avatar-img"
+          data-type="round"
+          style="--cpd-avatar-size: 32px;"
+        >
+          <img
+            alt=""
+            class="_image_zysgz_43"
+            data-type="round"
+            height="32px"
+            loading="lazy"
+            referrerpolicy="no-referrer"
+            src="http://this.is.a.url/avatar.url/room.png"
+            width="32px"
+          />
+        </span>
+        <div
+          class="_flex_4dswl_9 mx_RoomListItemView_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="mx_RoomListItemView_text"
+          >
+            <div
+              class="mx_RoomListItemView_roomName"
+              title="room1"
+            >
+              room1
+            </div>
+          </div>
+          <div
+            class="_flex_4dswl_9 mx_RoomListItemMenuView mx_RoomListItemView_menu"
+            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;"
+          />
+        </div>
+      </button>
+      <button
+        aria-disabled="false"
+        aria-expanded="false"
+        aria-haspopup="menu"
+        aria-label="More Options"
+        aria-labelledby="_r_g_"
+        class="_icon-button_1pz9o_8"
+        data-kind="primary"
+        data-state="closed"
+        id="radix-_r_e_"
+        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_n_"
+        class="_icon-button_1pz9o_8"
+        data-kind="primary"
+        data-state="closed"
+        id="radix-_r_l_"
+        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>
+  <div
+    data-index="2"
+    data-item-index="2"
+    data-known-size="48"
+    style="overflow-anchor: none;"
+  >
+    <button
+      aria-haspopup="menu"
+      aria-label="Open room room2"
+      aria-posinset="3"
+      aria-selected="false"
+      aria-setsize="10"
+      class="_flex_4dswl_9 mx_RoomListItemView mx_RoomListItemView_has_menu"
+      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"
+    >
+      <span
+        aria-label="Avatar"
+        class="_avatar_zysgz_8 mx_BaseAvatar"
+        data-color="4"
+        data-testid="avatar-img"
+        data-type="round"
+        style="--cpd-avatar-size: 32px;"
+      >
+        <img
+          alt=""
+          class="_image_zysgz_43"
+          data-type="round"
+          height="32px"
+          loading="lazy"
+          referrerpolicy="no-referrer"
+          src="http://this.is.a.url/avatar.url/room.png"
+          width="32px"
+        />
+      </span>
+      <div
+        class="_flex_4dswl_9 mx_RoomListItemView_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="mx_RoomListItemView_text"
+        >
+          <div
+            class="mx_RoomListItemView_roomName"
+            title="room2"
+          >
+            room2
+          </div>
+        </div>
+        <div
+          class="_flex_4dswl_9 mx_RoomListItemMenuView mx_RoomListItemView_menu"
+          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;"
+        />
+      </div>
+    </button>
+    <button
+      aria-disabled="false"
+      aria-expanded="false"
+      aria-haspopup="menu"
+      aria-label="More Options"
+      aria-labelledby="_r_u_"
+      class="_icon-button_1pz9o_8"
+      data-kind="primary"
+      data-state="closed"
+      id="radix-_r_s_"
+      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_15_"
+      class="_icon-button_1pz9o_8"
+      data-kind="primary"
+      data-state="closed"
+      id="radix-_r_13_"
+      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
+    data-index="3"
+    data-item-index="3"
+    data-known-size="48"
+    style="overflow-anchor: none;"
+  >
+    <button
+      aria-haspopup="menu"
+      aria-label="Open room room3"
+      aria-posinset="4"
+      aria-selected="false"
+      aria-setsize="10"
+      class="_flex_4dswl_9 mx_RoomListItemView mx_RoomListItemView_has_menu"
+      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"
+    >
+      <span
+        aria-label="Avatar"
+        class="_avatar_zysgz_8 mx_BaseAvatar"
+        data-color="5"
+        data-testid="avatar-img"
+        data-type="round"
+        style="--cpd-avatar-size: 32px;"
+      >
+        <img
+          alt=""
+          class="_image_zysgz_43"
+          data-type="round"
+          height="32px"
+          loading="lazy"
+          referrerpolicy="no-referrer"
+          src="http://this.is.a.url/avatar.url/room.png"
+          width="32px"
+        />
+      </span>
+      <div
+        class="_flex_4dswl_9 mx_RoomListItemView_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="mx_RoomListItemView_text"
+        >
+          <div
+            class="mx_RoomListItemView_roomName"
+            title="room3"
+          >
+            room3
+          </div>
+        </div>
+        <div
+          class="_flex_4dswl_9 mx_RoomListItemMenuView mx_RoomListItemView_menu"
+          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;"
+        />
+      </div>
+    </button>
+    <button
+      aria-disabled="false"
+      aria-expanded="false"
+      aria-haspopup="menu"
+      aria-label="More Options"
+      aria-labelledby="_r_1c_"
+      class="_icon-button_1pz9o_8"
+      data-kind="primary"
+      data-state="closed"
+      id="radix-_r_1a_"
+      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_1j_"
+      class="_icon-button_1pz9o_8"
+      data-kind="primary"
+      data-state="closed"
+      id="radix-_r_1h_"
+      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
+    data-index="4"
+    data-item-index="4"
+    data-known-size="48"
+    style="overflow-anchor: none;"
+  >
+    <button
+      aria-haspopup="menu"
+      aria-label="Open room room4"
+      aria-posinset="5"
+      aria-selected="false"
+      aria-setsize="10"
+      class="_flex_4dswl_9 mx_RoomListItemView mx_RoomListItemView_has_menu"
+      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"
+    >
+      <span
+        aria-label="Avatar"
+        class="_avatar_zysgz_8 mx_BaseAvatar"
+        data-color="6"
+        data-testid="avatar-img"
+        data-type="round"
+        style="--cpd-avatar-size: 32px;"
+      >
+        <img
+          alt=""
+          class="_image_zysgz_43"
+          data-type="round"
+          height="32px"
+          loading="lazy"
+          referrerpolicy="no-referrer"
+          src="http://this.is.a.url/avatar.url/room.png"
+          width="32px"
+        />
+      </span>
+      <div
+        class="_flex_4dswl_9 mx_RoomListItemView_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="mx_RoomListItemView_text"
+        >
+          <div
+            class="mx_RoomListItemView_roomName"
+            title="room4"
+          >
+            room4
+          </div>
+        </div>
+        <div
+          class="_flex_4dswl_9 mx_RoomListItemMenuView mx_RoomListItemView_menu"
+          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;"
+        />
+      </div>
+    </button>
+    <button
+      aria-disabled="false"
+      aria-expanded="false"
+      aria-haspopup="menu"
+      aria-label="More Options"
+      aria-labelledby="_r_1q_"
+      class="_icon-button_1pz9o_8"
+      data-kind="primary"
+      data-state="closed"
+      id="radix-_r_1o_"
+      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_21_"
+      class="_icon-button_1pz9o_8"
+      data-kind="primary"
+      data-state="closed"
+      id="radix-_r_1v_"
+      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
+    data-index="5"
+    data-item-index="5"
+    data-known-size="48"
+    style="overflow-anchor: none;"
+  >
+    <button
+      aria-haspopup="menu"
+      aria-label="Open room room5"
+      aria-posinset="6"
+      aria-selected="false"
+      aria-setsize="10"
+      class="_flex_4dswl_9 mx_RoomListItemView mx_RoomListItemView_has_menu"
+      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"
+    >
+      <span
+        aria-label="Avatar"
+        class="_avatar_zysgz_8 mx_BaseAvatar"
+        data-color="1"
+        data-testid="avatar-img"
+        data-type="round"
+        style="--cpd-avatar-size: 32px;"
+      >
+        <img
+          alt=""
+          class="_image_zysgz_43"
+          data-type="round"
+          height="32px"
+          loading="lazy"
+          referrerpolicy="no-referrer"
+          src="http://this.is.a.url/avatar.url/room.png"
+          width="32px"
+        />
+      </span>
+      <div
+        class="_flex_4dswl_9 mx_RoomListItemView_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="mx_RoomListItemView_text"
+        >
+          <div
+            class="mx_RoomListItemView_roomName"
+            title="room5"
+          >
+            room5
+          </div>
+        </div>
+        <div
+          class="_flex_4dswl_9 mx_RoomListItemMenuView mx_RoomListItemView_menu"
+          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;"
+        />
+      </div>
+    </button>
+    <button
+      aria-disabled="false"
+      aria-expanded="false"
+      aria-haspopup="menu"
+      aria-label="More Options"
+      aria-labelledby="_r_28_"
+      class="_icon-button_1pz9o_8"
+      data-kind="primary"
+      data-state="closed"
+      id="radix-_r_26_"
+      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_2f_"
+      class="_icon-button_1pz9o_8"
+      data-kind="primary"
+      data-state="closed"
+      id="radix-_r_2d_"
+      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
+    data-index="6"
+    data-item-index="6"
+    data-known-size="48"
+    style="overflow-anchor: none;"
+  >
+    <button
+      aria-haspopup="menu"
+      aria-label="Open room room6"
+      aria-posinset="7"
+      aria-selected="false"
+      aria-setsize="10"
+      class="_flex_4dswl_9 mx_RoomListItemView mx_RoomListItemView_has_menu"
+      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"
+    >
+      <span
+        aria-label="Avatar"
+        class="_avatar_zysgz_8 mx_BaseAvatar"
+        data-color="2"
+        data-testid="avatar-img"
+        data-type="round"
+        style="--cpd-avatar-size: 32px;"
+      >
+        <img
+          alt=""
+          class="_image_zysgz_43"
+          data-type="round"
+          height="32px"
+          loading="lazy"
+          referrerpolicy="no-referrer"
+          src="http://this.is.a.url/avatar.url/room.png"
+          width="32px"
+        />
+      </span>
+      <div
+        class="_flex_4dswl_9 mx_RoomListItemView_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="mx_RoomListItemView_text"
+        >
+          <div
+            class="mx_RoomListItemView_roomName"
+            title="room6"
+          >
+            room6
+          </div>
+        </div>
+        <div
+          class="_flex_4dswl_9 mx_RoomListItemMenuView mx_RoomListItemView_menu"
+          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;"
+        />
+      </div>
+    </button>
+    <button
+      aria-disabled="false"
+      aria-expanded="false"
+      aria-haspopup="menu"
+      aria-label="More Options"
+      aria-labelledby="_r_2m_"
+      class="_icon-button_1pz9o_8"
+      data-kind="primary"
+      data-state="closed"
+      id="radix-_r_2k_"
+      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_2t_"
+      class="_icon-button_1pz9o_8"
+      data-kind="primary"
+      data-state="closed"
+      id="radix-_r_2r_"
+      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
+    data-index="7"
+    data-item-index="7"
+    data-known-size="48"
+    style="overflow-anchor: none;"
+  >
+    <button
+      aria-haspopup="menu"
+      aria-label="Open room room7"
+      aria-posinset="8"
+      aria-selected="false"
+      aria-setsize="10"
+      class="_flex_4dswl_9 mx_RoomListItemView mx_RoomListItemView_has_menu"
+      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"
+    >
+      <span
+        aria-label="Avatar"
+        class="_avatar_zysgz_8 mx_BaseAvatar"
+        data-color="3"
+        data-testid="avatar-img"
+        data-type="round"
+        style="--cpd-avatar-size: 32px;"
+      >
+        <img
+          alt=""
+          class="_image_zysgz_43"
+          data-type="round"
+          height="32px"
+          loading="lazy"
+          referrerpolicy="no-referrer"
+          src="http://this.is.a.url/avatar.url/room.png"
+          width="32px"
+        />
+      </span>
+      <div
+        class="_flex_4dswl_9 mx_RoomListItemView_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="mx_RoomListItemView_text"
+        >
+          <div
+            class="mx_RoomListItemView_roomName"
+            title="room7"
+          >
+            room7
+          </div>
+        </div>
+        <div
+          class="_flex_4dswl_9 mx_RoomListItemMenuView mx_RoomListItemView_menu"
+          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;"
+        />
+      </div>
+    </button>
+    <button
+      aria-disabled="false"
+      aria-expanded="false"
+      aria-haspopup="menu"
+      aria-label="More Options"
+      aria-labelledby="_r_34_"
+      class="_icon-button_1pz9o_8"
+      data-kind="primary"
+      data-state="closed"
+      id="radix-_r_32_"
+      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_3b_"
+      class="_icon-button_1pz9o_8"
+      data-kind="primary"
+      data-state="closed"
+      id="radix-_r_39_"
+      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
+    data-index="8"
+    data-item-index="8"
+    data-known-size="48"
+    style="overflow-anchor: none;"
+  >
+    <button
+      aria-haspopup="menu"
+      aria-label="Open room room8"
+      aria-posinset="9"
+      aria-selected="false"
+      aria-setsize="10"
+      class="_flex_4dswl_9 mx_RoomListItemView mx_RoomListItemView_has_menu"
+      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"
+    >
+      <span
+        aria-label="Avatar"
+        class="_avatar_zysgz_8 mx_BaseAvatar"
+        data-color="4"
+        data-testid="avatar-img"
+        data-type="round"
+        style="--cpd-avatar-size: 32px;"
+      >
+        <img
+          alt=""
+          class="_image_zysgz_43"
+          data-type="round"
+          height="32px"
+          loading="lazy"
+          referrerpolicy="no-referrer"
+          src="http://this.is.a.url/avatar.url/room.png"
+          width="32px"
+        />
+      </span>
+      <div
+        class="_flex_4dswl_9 mx_RoomListItemView_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="mx_RoomListItemView_text"
+        >
+          <div
+            class="mx_RoomListItemView_roomName"
+            title="room8"
+          >
+            room8
+          </div>
+        </div>
+        <div
+          class="_flex_4dswl_9 mx_RoomListItemMenuView mx_RoomListItemView_menu"
+          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;"
+        />
+      </div>
+    </button>
+    <button
+      aria-disabled="false"
+      aria-expanded="false"
+      aria-haspopup="menu"
+      aria-label="More Options"
+      aria-labelledby="_r_3i_"
+      class="_icon-button_1pz9o_8"
+      data-kind="primary"
+      data-state="closed"
+      id="radix-_r_3g_"
+      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_3p_"
+      class="_icon-button_1pz9o_8"
+      data-kind="primary"
+      data-state="closed"
+      id="radix-_r_3n_"
+      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
+    data-index="9"
+    data-item-index="9"
+    data-known-size="48"
+    style="overflow-anchor: none;"
+  >
+    <button
+      aria-haspopup="menu"
+      aria-label="Open room room9"
+      aria-posinset="10"
+      aria-selected="false"
+      aria-setsize="10"
+      class="_flex_4dswl_9 mx_RoomListItemView mx_RoomListItemView_has_menu"
+      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"
+    >
+      <span
+        aria-label="Avatar"
+        class="_avatar_zysgz_8 mx_BaseAvatar"
+        data-color="5"
+        data-testid="avatar-img"
+        data-type="round"
+        style="--cpd-avatar-size: 32px;"
+      >
+        <img
+          alt=""
+          class="_image_zysgz_43"
+          data-type="round"
+          height="32px"
+          loading="lazy"
+          referrerpolicy="no-referrer"
+          src="http://this.is.a.url/avatar.url/room.png"
+          width="32px"
+        />
+      </span>
+      <div
+        class="_flex_4dswl_9 mx_RoomListItemView_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="mx_RoomListItemView_text"
+        >
+          <div
+            class="mx_RoomListItemView_roomName"
+            title="room9"
+          >
+            room9
+          </div>
+        </div>
+        <div
+          class="_flex_4dswl_9 mx_RoomListItemMenuView mx_RoomListItemView_menu"
+          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;"
+        />
+      </div>
+    </button>
+    <button
+      aria-disabled="false"
+      aria-expanded="false"
+      aria-haspopup="menu"
+      aria-label="More Options"
+      aria-labelledby="_r_40_"
+      class="_icon-button_1pz9o_8"
+      data-kind="primary"
+      data-state="closed"
+      id="radix-_r_3u_"
+      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_47_"
+      class="_icon-button_1pz9o_8"
+      data-kind="primary"
+      data-state="closed"
+      id="radix-_r_45_"
+      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>
 </DocumentFragment>
 `;
diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListItemMenuView-test.tsx.snap b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListItemMenuView-test.tsx.snap
index a5f199f767..91e687412f 100644
--- a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListItemMenuView-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListItemMenuView-test.tsx.snap
@@ -38,43 +38,41 @@ exports[`<RoomListItemMenuView /> should render the more options menu 1`] = `
         </svg>
       </div>
     </button>
-    <div>
-      <button
-        aria-disabled="false"
-        aria-expanded="false"
-        aria-haspopup="menu"
-        aria-label="Notification options"
-        aria-labelledby="_r_9_"
-        class="_icon-button_1pz9o_8"
-        data-kind="primary"
-        data-state="closed"
-        id="radix-_r_7_"
-        role="button"
-        style="--cpd-icon-button-size: 24px;"
-        tabindex="0"
-        type="button"
+    <button
+      aria-disabled="false"
+      aria-expanded="false"
+      aria-haspopup="menu"
+      aria-label="Notification options"
+      aria-labelledby="_r_9_"
+      class="_icon-button_1pz9o_8"
+      data-kind="primary"
+      data-state="closed"
+      id="radix-_r_7_"
+      role="button"
+      style="--cpd-icon-button-size: 24px;"
+      tabindex="0"
+      type="button"
+    >
+      <div
+        class="_indicator-icon_147l5_17"
+        style="--cpd-icon-button-size: 100%;"
       >
-        <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"
         >
-          <svg
-            fill="currentColor"
-            height="1em"
-            viewBox="0 0 24 24"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="m4.917 2.083 17 17a1 1 0 0 1-1.414 1.414L19.006 19H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-2.034 1.096-3.91L3.504 3.498a1 1 0 0 1 1.414-1.414M19 13.35 9.136 3.484C9.93 3.181 10.874 3 12 3c7 0 7 7 7 7z"
-            />
-            <path
-              d="M10 20h4a2 2 0 0 1-4 0"
-            />
-          </svg>
-        </div>
-      </button>
-    </div>
+          <path
+            d="m4.917 2.083 17 17a1 1 0 0 1-1.414 1.414L19.006 19H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-2.034 1.096-3.91L3.504 3.498a1 1 0 0 1 1.414-1.414M19 13.35 9.136 3.484C9.93 3.181 10.874 3 12 3c7 0 7 7 7 7z"
+          />
+          <path
+            d="M10 20h4a2 2 0 0 1-4 0"
+          />
+        </svg>
+      </div>
+    </button>
   </div>
 </DocumentFragment>
 `;
@@ -117,43 +115,41 @@ exports[`<RoomListItemMenuView /> should render the notification options menu 1`
         </svg>
       </div>
     </button>
-    <div>
-      <button
-        aria-disabled="false"
-        aria-expanded="false"
-        aria-haspopup="menu"
-        aria-label="Notification options"
-        aria-labelledby="_r_p_"
-        class="_icon-button_1pz9o_8"
-        data-kind="primary"
-        data-state="closed"
-        id="radix-_r_n_"
-        role="button"
-        style="--cpd-icon-button-size: 24px;"
-        tabindex="0"
-        type="button"
+    <button
+      aria-disabled="false"
+      aria-expanded="false"
+      aria-haspopup="menu"
+      aria-label="Notification options"
+      aria-labelledby="_r_p_"
+      class="_icon-button_1pz9o_8"
+      data-kind="primary"
+      data-state="closed"
+      id="radix-_r_n_"
+      role="button"
+      style="--cpd-icon-button-size: 24px;"
+      tabindex="0"
+      type="button"
+    >
+      <div
+        class="_indicator-icon_147l5_17"
+        style="--cpd-icon-button-size: 100%;"
       >
-        <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"
         >
-          <svg
-            fill="currentColor"
-            height="1em"
-            viewBox="0 0 24 24"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="m4.917 2.083 17 17a1 1 0 0 1-1.414 1.414L19.006 19H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-2.034 1.096-3.91L3.504 3.498a1 1 0 0 1 1.414-1.414M19 13.35 9.136 3.484C9.93 3.181 10.874 3 12 3c7 0 7 7 7 7z"
-            />
-            <path
-              d="M10 20h4a2 2 0 0 1-4 0"
-            />
-          </svg>
-        </div>
-      </button>
-    </div>
+          <path
+            d="m4.917 2.083 17 17a1 1 0 0 1-1.414 1.414L19.006 19H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-2.034 1.096-3.91L3.504 3.498a1 1 0 0 1 1.414-1.414M19 13.35 9.136 3.484C9.93 3.181 10.874 3 12 3c7 0 7 7 7 7z"
+          />
+          <path
+            d="M10 20h4a2 2 0 0 1-4 0"
+          />
+        </svg>
+      </div>
+    </button>
   </div>
 </DocumentFragment>
 `;
diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListItemView-test.tsx.snap b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListItemView-test.tsx.snap
index 9e84fc2d40..f46588370f 100644
--- a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListItemView-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListItemView-test.tsx.snap
@@ -99,7 +99,7 @@ exports[`<RoomListItemView /> should display notification decoration 1`] = `
       </div>
       <div
         aria-hidden="true"
-        class="_flex_4dswl_9"
+        class="_flex_4dswl_9 mx_RoomListItemView_notificationDecoration"
         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;"
       >