diff --git a/apps/web/playwright/snapshots/crypto/crypto.spec.ts/RoomSummaryCard-with-verified-e2ee-linux.png b/apps/web/playwright/snapshots/crypto/crypto.spec.ts/RoomSummaryCard-with-verified-e2ee-linux.png
index 3be7831755..0a99a4cf86 100644
Binary files a/apps/web/playwright/snapshots/crypto/crypto.spec.ts/RoomSummaryCard-with-verified-e2ee-linux.png and b/apps/web/playwright/snapshots/crypto/crypto.spec.ts/RoomSummaryCard-with-verified-e2ee-linux.png differ
diff --git a/apps/web/playwright/snapshots/right-panel/right-panel.spec.ts/with-name-and-address-linux.png b/apps/web/playwright/snapshots/right-panel/right-panel.spec.ts/with-name-and-address-linux.png
index ada2b8a60e..7fb7e011bb 100644
Binary files a/apps/web/playwright/snapshots/right-panel/right-panel.spec.ts/with-name-and-address-linux.png and b/apps/web/playwright/snapshots/right-panel/right-panel.spec.ts/with-name-and-address-linux.png differ
diff --git a/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCardView-test.tsx.snap b/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCardView-test.tsx.snap
index d4fd8a3bda..0f707477cc 100644
--- a/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCardView-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCardView-test.tsx.snap
@@ -73,7 +73,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
         >
           <span
-            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8"
+            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_10dml_8"
             data-kind="blue"
           >
             <svg
@@ -91,7 +91,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             Public room
           </span>
           <span
-            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8"
+            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_10dml_8"
             data-kind="blue"
           >
             <svg
@@ -109,7 +109,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             Not encrypted
           </span>
           <span
-            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8"
+            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_10dml_8"
             data-kind="blue"
           >
             <svg
@@ -207,13 +207,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
       >
         <button
           aria-checked="false"
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitemcheckbox"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -225,7 +225,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Favourite
           </span>
@@ -246,13 +246,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           </div>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -264,13 +264,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Invite
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -289,13 +289,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           role="separator"
         />
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -313,13 +313,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             People
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -332,13 +332,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           </svg>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -353,13 +353,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Threads
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -372,13 +372,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           </svg>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -392,13 +392,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Pinned messages
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -416,13 +416,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           </span>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -434,13 +434,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Files
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -453,13 +453,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           </svg>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -471,13 +471,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Extensions
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -496,13 +496,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           role="separator"
         />
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -514,13 +514,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Copy link
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -533,13 +533,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           </svg>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -551,13 +551,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Polls
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -570,13 +570,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           </svg>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -588,13 +588,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Export Chat
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -607,13 +607,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           </svg>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -628,13 +628,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Settings
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -656,13 +656,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           class="mx_RoomSummaryCard_bottomOptions"
         >
           <button
-            class="_item_lqfwq_8 _interactive_lqfwq_26"
+            class="_item_bym9p_8 _interactive_bym9p_26"
             data-kind="critical"
             role="menuitem"
           >
             <svg
               aria-hidden="true"
-              class="_icon_lqfwq_50"
+              class="_icon_bym9p_51"
               fill="currentColor"
               height="24"
               viewBox="0 0 24 24"
@@ -674,13 +674,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
               />
             </svg>
             <span
-              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
             >
               Report room
             </span>
             <svg
               aria-hidden="true"
-              class="_nav-hint_lqfwq_59"
+              class="_nav-hint_bym9p_60"
               fill="currentColor"
               height="24"
               viewBox="8 0 8 24"
@@ -693,13 +693,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             </svg>
           </button>
           <button
-            class="mx_RoomSummaryCard_leave _item_lqfwq_8 _interactive_lqfwq_26"
+            class="mx_RoomSummaryCard_leave _item_bym9p_8 _interactive_bym9p_26"
             data-kind="critical"
             role="menuitem"
           >
             <svg
               aria-hidden="true"
-              class="_icon_lqfwq_50"
+              class="_icon_bym9p_51"
               fill="currentColor"
               height="24"
               viewBox="0 0 24 24"
@@ -714,13 +714,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
               />
             </svg>
             <span
-              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
             >
               Leave room
             </span>
             <svg
               aria-hidden="true"
-              class="_nav-hint_lqfwq_59"
+              class="_nav-hint_bym9p_60"
               fill="currentColor"
               height="24"
               viewBox="8 0 8 24"
@@ -812,7 +812,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
         >
           <span
-            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8"
+            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_10dml_8"
             data-kind="blue"
           >
             <svg
@@ -830,7 +830,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             Public room
           </span>
           <span
-            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8"
+            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_10dml_8"
             data-kind="blue"
           >
             <svg
@@ -848,7 +848,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             Not encrypted
           </span>
           <span
-            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8"
+            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_10dml_8"
             data-kind="blue"
           >
             <svg
@@ -904,13 +904,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
       >
         <button
           aria-checked="false"
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitemcheckbox"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -922,7 +922,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Favourite
           </span>
@@ -943,13 +943,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           </div>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -961,13 +961,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Invite
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -986,13 +986,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           role="separator"
         />
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1010,13 +1010,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             People
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1029,13 +1029,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           </svg>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1050,13 +1050,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Threads
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1069,13 +1069,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           </svg>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1089,13 +1089,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Pinned messages
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1113,13 +1113,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           </span>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1131,13 +1131,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Files
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1150,13 +1150,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           </svg>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1168,13 +1168,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Extensions
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1193,13 +1193,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           role="separator"
         />
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1211,13 +1211,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Copy link
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1230,13 +1230,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           </svg>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1248,13 +1248,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Polls
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1267,13 +1267,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           </svg>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1285,13 +1285,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Export Chat
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1304,13 +1304,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           </svg>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1325,13 +1325,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Settings
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1353,13 +1353,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           class="mx_RoomSummaryCard_bottomOptions"
         >
           <button
-            class="_item_lqfwq_8 _interactive_lqfwq_26"
+            class="_item_bym9p_8 _interactive_bym9p_26"
             data-kind="critical"
             role="menuitem"
           >
             <svg
               aria-hidden="true"
-              class="_icon_lqfwq_50"
+              class="_icon_bym9p_51"
               fill="currentColor"
               height="24"
               viewBox="0 0 24 24"
@@ -1371,13 +1371,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
               />
             </svg>
             <span
-              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
             >
               Report room
             </span>
             <svg
               aria-hidden="true"
-              class="_nav-hint_lqfwq_59"
+              class="_nav-hint_bym9p_60"
               fill="currentColor"
               height="24"
               viewBox="8 0 8 24"
@@ -1390,13 +1390,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             </svg>
           </button>
           <button
-            class="mx_RoomSummaryCard_leave _item_lqfwq_8 _interactive_lqfwq_26"
+            class="mx_RoomSummaryCard_leave _item_bym9p_8 _interactive_bym9p_26"
             data-kind="critical"
             role="menuitem"
           >
             <svg
               aria-hidden="true"
-              class="_icon_lqfwq_50"
+              class="_icon_bym9p_51"
               fill="currentColor"
               height="24"
               viewBox="0 0 24 24"
@@ -1411,13 +1411,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
               />
             </svg>
             <span
-              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
             >
               Leave room
             </span>
             <svg
               aria-hidden="true"
-              class="_nav-hint_lqfwq_59"
+              class="_nav-hint_bym9p_60"
               fill="currentColor"
               height="24"
               viewBox="8 0 8 24"
@@ -1509,7 +1509,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
         >
           <span
-            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8"
+            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_10dml_8"
             data-kind="blue"
           >
             <svg
@@ -1527,7 +1527,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             Public room
           </span>
           <span
-            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8"
+            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_10dml_8"
             data-kind="blue"
           >
             <svg
@@ -1545,7 +1545,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             Not encrypted
           </span>
           <span
-            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8"
+            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_10dml_8"
             data-kind="blue"
           >
             <svg
@@ -1643,13 +1643,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
       >
         <button
           aria-checked="false"
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitemcheckbox"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1661,7 +1661,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Favourite
           </span>
@@ -1682,13 +1682,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           </div>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1700,13 +1700,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Invite
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1725,13 +1725,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           role="separator"
         />
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1749,13 +1749,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             People
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1768,13 +1768,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           </svg>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1789,13 +1789,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Threads
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1808,13 +1808,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           </svg>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1828,13 +1828,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Pinned messages
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1852,13 +1852,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           </span>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1870,13 +1870,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Files
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1889,13 +1889,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           </svg>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1907,13 +1907,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Extensions
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1932,13 +1932,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           role="separator"
         />
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1950,13 +1950,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Copy link
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1969,13 +1969,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           </svg>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1987,13 +1987,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Polls
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -2006,13 +2006,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           </svg>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -2024,13 +2024,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Export Chat
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -2043,13 +2043,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           </svg>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -2064,13 +2064,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Settings
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -2092,13 +2092,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           class="mx_RoomSummaryCard_bottomOptions"
         >
           <button
-            class="_item_lqfwq_8 _interactive_lqfwq_26"
+            class="_item_bym9p_8 _interactive_bym9p_26"
             data-kind="critical"
             role="menuitem"
           >
             <svg
               aria-hidden="true"
-              class="_icon_lqfwq_50"
+              class="_icon_bym9p_51"
               fill="currentColor"
               height="24"
               viewBox="0 0 24 24"
@@ -2110,13 +2110,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
               />
             </svg>
             <span
-              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
             >
               Report room
             </span>
             <svg
               aria-hidden="true"
-              class="_nav-hint_lqfwq_59"
+              class="_nav-hint_bym9p_60"
               fill="currentColor"
               height="24"
               viewBox="8 0 8 24"
@@ -2129,13 +2129,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             </svg>
           </button>
           <button
-            class="mx_RoomSummaryCard_leave _item_lqfwq_8 _interactive_lqfwq_26"
+            class="mx_RoomSummaryCard_leave _item_bym9p_8 _interactive_bym9p_26"
             data-kind="critical"
             role="menuitem"
           >
             <svg
               aria-hidden="true"
-              class="_icon_lqfwq_50"
+              class="_icon_bym9p_51"
               fill="currentColor"
               height="24"
               viewBox="0 0 24 24"
@@ -2150,13 +2150,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
               />
             </svg>
             <span
-              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
             >
               Leave room
             </span>
             <svg
               aria-hidden="true"
-              class="_nav-hint_lqfwq_59"
+              class="_nav-hint_bym9p_60"
               fill="currentColor"
               height="24"
               viewBox="8 0 8 24"
diff --git a/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap b/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
index 31aa6cc54c..e03696b45c 100644
--- a/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
@@ -144,13 +144,13 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
         class="mx_UserInfo_container"
       >
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="button"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -162,13 +162,13 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Send message
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -181,14 +181,14 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
           </svg>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26 _disabled_lqfwq_118"
+          class="_item_bym9p_8 _interactive_bym9p_26 _disabled_bym9p_140"
           data-kind="primary"
           disabled=""
           role="button"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -200,13 +200,13 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Jump to read receipt
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -219,13 +219,13 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
           </svg>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="button"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -237,13 +237,13 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Share profile
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -260,13 +260,13 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
         class="mx_UserInfo_container"
       >
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="critical"
           role="button"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -278,13 +278,13 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Ignore
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -446,13 +446,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
         class="mx_UserInfo_container"
       >
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="button"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -464,13 +464,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Send message
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -483,14 +483,14 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
           </svg>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26 _disabled_lqfwq_118"
+          class="_item_bym9p_8 _interactive_bym9p_26 _disabled_bym9p_140"
           data-kind="primary"
           disabled=""
           role="button"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -502,13 +502,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Jump to read receipt
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -521,13 +521,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
           </svg>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="button"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -539,13 +539,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Share profile
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -562,13 +562,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
         class="mx_UserInfo_container"
       >
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="critical"
           role="button"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -580,13 +580,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Deactivate user
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -603,13 +603,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
         class="mx_UserInfo_container"
       >
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="critical"
           role="button"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -621,13 +621,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Ignore
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
diff --git a/apps/web/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoBasic-test.tsx.snap b/apps/web/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoBasic-test.tsx.snap
index f7fc1dfc99..ae8815ec50 100644
--- a/apps/web/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoBasic-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoBasic-test.tsx.snap
@@ -55,13 +55,13 @@ exports[`<UserInfoBasic /> should display the defaut values 1`] = `
       </div>
     </div>
     <button
-      class="_item_lqfwq_8 _interactive_lqfwq_26"
+      class="_item_bym9p_8 _interactive_bym9p_26"
       data-kind="primary"
       role="button"
     >
       <svg
         aria-hidden="true"
-        class="_icon_lqfwq_50"
+        class="_icon_bym9p_51"
         fill="currentColor"
         height="24"
         viewBox="0 0 24 24"
@@ -73,13 +73,13 @@ exports[`<UserInfoBasic /> should display the defaut values 1`] = `
         />
       </svg>
       <span
-        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
       >
         Send message
       </span>
       <svg
         aria-hidden="true"
-        class="_nav-hint_lqfwq_59"
+        class="_nav-hint_bym9p_60"
         fill="currentColor"
         height="24"
         viewBox="8 0 8 24"
@@ -92,13 +92,13 @@ exports[`<UserInfoBasic /> should display the defaut values 1`] = `
       </svg>
     </button>
     <button
-      class="_item_lqfwq_8 _interactive_lqfwq_26"
+      class="_item_bym9p_8 _interactive_bym9p_26"
       data-kind="primary"
       role="button"
     >
       <svg
         aria-hidden="true"
-        class="_icon_lqfwq_50"
+        class="_icon_bym9p_51"
         fill="currentColor"
         height="24"
         viewBox="0 0 24 24"
@@ -110,13 +110,13 @@ exports[`<UserInfoBasic /> should display the defaut values 1`] = `
         />
       </svg>
       <span
-        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
       >
         Invite
       </span>
       <svg
         aria-hidden="true"
-        class="_nav-hint_lqfwq_59"
+        class="_nav-hint_bym9p_60"
         fill="currentColor"
         height="24"
         viewBox="8 0 8 24"
@@ -129,14 +129,14 @@ exports[`<UserInfoBasic /> should display the defaut values 1`] = `
       </svg>
     </button>
     <button
-      class="_item_lqfwq_8 _interactive_lqfwq_26 _disabled_lqfwq_118"
+      class="_item_bym9p_8 _interactive_bym9p_26 _disabled_bym9p_140"
       data-kind="primary"
       disabled=""
       role="button"
     >
       <svg
         aria-hidden="true"
-        class="_icon_lqfwq_50"
+        class="_icon_bym9p_51"
         fill="currentColor"
         height="24"
         viewBox="0 0 24 24"
@@ -148,13 +148,13 @@ exports[`<UserInfoBasic /> should display the defaut values 1`] = `
         />
       </svg>
       <span
-        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
       >
         Jump to read receipt
       </span>
       <svg
         aria-hidden="true"
-        class="_nav-hint_lqfwq_59"
+        class="_nav-hint_bym9p_60"
         fill="currentColor"
         height="24"
         viewBox="8 0 8 24"
@@ -167,13 +167,13 @@ exports[`<UserInfoBasic /> should display the defaut values 1`] = `
       </svg>
     </button>
     <button
-      class="_item_lqfwq_8 _interactive_lqfwq_26"
+      class="_item_bym9p_8 _interactive_bym9p_26"
       data-kind="primary"
       role="button"
     >
       <svg
         aria-hidden="true"
-        class="_icon_lqfwq_50"
+        class="_icon_bym9p_51"
         fill="currentColor"
         height="24"
         viewBox="0 0 24 24"
@@ -185,13 +185,13 @@ exports[`<UserInfoBasic /> should display the defaut values 1`] = `
         />
       </svg>
       <span
-        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
       >
         Share profile
       </span>
       <svg
         aria-hidden="true"
-        class="_nav-hint_lqfwq_59"
+        class="_nav-hint_bym9p_60"
         fill="currentColor"
         height="24"
         viewBox="8 0 8 24"
@@ -204,13 +204,13 @@ exports[`<UserInfoBasic /> should display the defaut values 1`] = `
       </svg>
     </button>
     <button
-      class="_item_lqfwq_8 _interactive_lqfwq_26"
+      class="_item_bym9p_8 _interactive_bym9p_26"
       data-kind="primary"
       role="button"
     >
       <svg
         aria-hidden="true"
-        class="_icon_lqfwq_50"
+        class="_icon_bym9p_51"
         fill="currentColor"
         height="24"
         viewBox="0 0 24 24"
@@ -222,13 +222,13 @@ exports[`<UserInfoBasic /> should display the defaut values 1`] = `
         />
       </svg>
       <span
-        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
       >
         Mention
       </span>
       <svg
         aria-hidden="true"
-        class="_nav-hint_lqfwq_59"
+        class="_nav-hint_bym9p_60"
         fill="currentColor"
         height="24"
         viewBox="8 0 8 24"
@@ -245,13 +245,13 @@ exports[`<UserInfoBasic /> should display the defaut values 1`] = `
     class="mx_UserInfo_container"
   >
     <button
-      class="_item_lqfwq_8 _interactive_lqfwq_26"
+      class="_item_bym9p_8 _interactive_bym9p_26"
       data-kind="critical"
       role="button"
     >
       <svg
         aria-hidden="true"
-        class="_icon_lqfwq_50"
+        class="_icon_bym9p_51"
         fill="currentColor"
         height="24"
         viewBox="0 0 24 24"
@@ -263,13 +263,13 @@ exports[`<UserInfoBasic /> should display the defaut values 1`] = `
         />
       </svg>
       <span
-        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
       >
         Deactivate user
       </span>
       <svg
         aria-hidden="true"
-        class="_nav-hint_lqfwq_59"
+        class="_nav-hint_bym9p_60"
         fill="currentColor"
         height="24"
         viewBox="8 0 8 24"
@@ -286,13 +286,13 @@ exports[`<UserInfoBasic /> should display the defaut values 1`] = `
     class="mx_UserInfo_container"
   >
     <button
-      class="_item_lqfwq_8 _interactive_lqfwq_26"
+      class="_item_bym9p_8 _interactive_bym9p_26"
       data-kind="critical"
       role="button"
     >
       <svg
         aria-hidden="true"
-        class="_icon_lqfwq_50"
+        class="_icon_bym9p_51"
         fill="currentColor"
         height="24"
         viewBox="0 0 24 24"
@@ -304,13 +304,13 @@ exports[`<UserInfoBasic /> should display the defaut values 1`] = `
         />
       </svg>
       <span
-        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
       >
         Ignore
       </span>
       <svg
         aria-hidden="true"
-        class="_nav-hint_lqfwq_59"
+        class="_nav-hint_bym9p_60"
         fill="currentColor"
         height="24"
         viewBox="8 0 8 24"
diff --git a/apps/web/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoHeaderVerificationView-test.tsx.snap b/apps/web/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoHeaderVerificationView-test.tsx.snap
index 5788fe8bae..15f215a83d 100644
--- a/apps/web/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoHeaderVerificationView-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoHeaderVerificationView-test.tsx.snap
@@ -24,7 +24,7 @@ exports[`<UserInfoHeaderVerificationView /> renders verified badge when user is
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
   >
     <span
-      class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8 mx_UserInfo_verified_badge"
+      class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_10dml_8 mx_UserInfo_verified_badge"
       data-kind="green"
     >
       <svg
diff --git a/apps/web/test/unit-tests/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap b/apps/web/test/unit-tests/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap
index 73db7a3c36..e6f50861b8 100644
--- a/apps/web/test/unit-tests/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap
@@ -202,7 +202,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
   tabindex="-1"
 >
   <button
-    class="_item_lqfwq_8 _interactive_lqfwq_26"
+    class="_item_bym9p_8 _interactive_bym9p_26"
     data-kind="primary"
     data-orientation="vertical"
     data-radix-collection-item=""
@@ -211,7 +211,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="_icon_lqfwq_50"
+      class="_icon_bym9p_51"
       fill="currentColor"
       height="24"
       viewBox="0 0 24 24"
@@ -223,13 +223,13 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
       />
     </svg>
     <span
-      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
     >
       View in timeline
     </span>
     <svg
       aria-hidden="true"
-      class="_nav-hint_lqfwq_59"
+      class="_nav-hint_bym9p_60"
       fill="currentColor"
       height="24"
       viewBox="8 0 8 24"
@@ -242,7 +242,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
     </svg>
   </button>
   <button
-    class="_item_lqfwq_8 _interactive_lqfwq_26"
+    class="_item_bym9p_8 _interactive_bym9p_26"
     data-kind="primary"
     data-orientation="vertical"
     data-radix-collection-item=""
@@ -251,7 +251,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="_icon_lqfwq_50"
+      class="_icon_bym9p_51"
       fill="currentColor"
       height="24"
       viewBox="0 0 24 24"
@@ -268,13 +268,13 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
       />
     </svg>
     <span
-      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
     >
       Unpin
     </span>
     <svg
       aria-hidden="true"
-      class="_nav-hint_lqfwq_59"
+      class="_nav-hint_bym9p_60"
       fill="currentColor"
       height="24"
       viewBox="8 0 8 24"
@@ -287,7 +287,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
     </svg>
   </button>
   <button
-    class="_item_lqfwq_8 _interactive_lqfwq_26"
+    class="_item_bym9p_8 _interactive_bym9p_26"
     data-kind="primary"
     data-orientation="vertical"
     data-radix-collection-item=""
@@ -296,7 +296,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="_icon_lqfwq_50"
+      class="_icon_bym9p_51"
       fill="currentColor"
       height="24"
       viewBox="0 0 24 24"
@@ -308,13 +308,13 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
       />
     </svg>
     <span
-      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
     >
       Forward
     </span>
     <svg
       aria-hidden="true"
-      class="_nav-hint_lqfwq_59"
+      class="_nav-hint_bym9p_60"
       fill="currentColor"
       height="24"
       viewBox="8 0 8 24"
@@ -333,7 +333,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
     role="separator"
   />
   <button
-    class="_item_lqfwq_8 _interactive_lqfwq_26"
+    class="_item_bym9p_8 _interactive_bym9p_26"
     data-kind="critical"
     data-orientation="vertical"
     data-radix-collection-item=""
@@ -342,7 +342,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="_icon_lqfwq_50"
+      class="_icon_bym9p_51"
       fill="currentColor"
       height="24"
       viewBox="0 0 24 24"
@@ -354,13 +354,13 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
       />
     </svg>
     <span
-      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
     >
       Delete
     </span>
     <svg
       aria-hidden="true"
-      class="_nav-hint_lqfwq_59"
+      class="_nav-hint_bym9p_60"
       fill="currentColor"
       height="24"
       viewBox="8 0 8 24"
@@ -393,7 +393,7 @@ exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`]
   tabindex="-1"
 >
   <button
-    class="_item_lqfwq_8 _interactive_lqfwq_26"
+    class="_item_bym9p_8 _interactive_bym9p_26"
     data-kind="primary"
     data-orientation="vertical"
     data-radix-collection-item=""
@@ -402,7 +402,7 @@ exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`]
   >
     <svg
       aria-hidden="true"
-      class="_icon_lqfwq_50"
+      class="_icon_bym9p_51"
       fill="currentColor"
       height="24"
       viewBox="0 0 24 24"
@@ -414,13 +414,13 @@ exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`]
       />
     </svg>
     <span
-      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
     >
       View in timeline
     </span>
     <svg
       aria-hidden="true"
-      class="_nav-hint_lqfwq_59"
+      class="_nav-hint_bym9p_60"
       fill="currentColor"
       height="24"
       viewBox="8 0 8 24"
@@ -433,7 +433,7 @@ exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`]
     </svg>
   </button>
   <button
-    class="_item_lqfwq_8 _interactive_lqfwq_26"
+    class="_item_bym9p_8 _interactive_bym9p_26"
     data-kind="primary"
     data-orientation="vertical"
     data-radix-collection-item=""
@@ -442,7 +442,7 @@ exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`]
   >
     <svg
       aria-hidden="true"
-      class="_icon_lqfwq_50"
+      class="_icon_bym9p_51"
       fill="currentColor"
       height="24"
       viewBox="0 0 24 24"
@@ -454,13 +454,13 @@ exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`]
       />
     </svg>
     <span
-      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
     >
       Forward
     </span>
     <svg
       aria-hidden="true"
-      class="_nav-hint_lqfwq_59"
+      class="_nav-hint_bym9p_60"
       fill="currentColor"
       height="24"
       viewBox="8 0 8 24"
diff --git a/apps/web/test/unit-tests/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap b/apps/web/test/unit-tests/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap
index d1cfc177ac..f5e50fe4a9 100644
--- a/apps/web/test/unit-tests/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap
@@ -26,7 +26,7 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
     class="mx_ThreadsActivityCentre_rows"
   >
     <button
-      class="mx_ThreadsActivityCentreRow _item_lqfwq_8 _interactive_lqfwq_26"
+      class="mx_ThreadsActivityCentreRow _item_bym9p_8 _interactive_bym9p_26"
       data-kind="primary"
       data-orientation="vertical"
       data-radix-collection-item=""
@@ -34,7 +34,7 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
       tabindex="-1"
     >
       <div
-        class="mx_DecoratedRoomAvatar _icon_lqfwq_50"
+        class="mx_DecoratedRoomAvatar _icon_bym9p_51"
       >
         <span
           class="_avatar_7h2br_8 mx_BaseAvatar _avatar-imageless_7h2br_55"
@@ -48,13 +48,13 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
         </span>
       </div>
       <span
-        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
       >
         This is a real highlight
       </span>
       <svg
         aria-hidden="true"
-        class="_nav-hint_lqfwq_59"
+        class="_nav-hint_bym9p_60"
         fill="currentColor"
         height="24"
         viewBox="8 0 8 24"
@@ -74,7 +74,7 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
       </div>
     </button>
     <button
-      class="mx_ThreadsActivityCentreRow _item_lqfwq_8 _interactive_lqfwq_26"
+      class="mx_ThreadsActivityCentreRow _item_bym9p_8 _interactive_bym9p_26"
       data-kind="primary"
       data-orientation="vertical"
       data-radix-collection-item=""
@@ -82,7 +82,7 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
       tabindex="-1"
     >
       <div
-        class="mx_DecoratedRoomAvatar _icon_lqfwq_50"
+        class="mx_DecoratedRoomAvatar _icon_bym9p_51"
       >
         <span
           class="_avatar_7h2br_8 mx_BaseAvatar _avatar-imageless_7h2br_55"
@@ -96,13 +96,13 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
         </span>
       </div>
       <span
-        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
       >
         A notification
       </span>
       <svg
         aria-hidden="true"
-        class="_nav-hint_lqfwq_59"
+        class="_nav-hint_bym9p_60"
         fill="currentColor"
         height="24"
         viewBox="8 0 8 24"
@@ -185,7 +185,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
     class="mx_ThreadsActivityCentre_rows"
   >
     <button
-      class="mx_ThreadsActivityCentreRow _item_lqfwq_8 _interactive_lqfwq_26"
+      class="mx_ThreadsActivityCentreRow _item_bym9p_8 _interactive_bym9p_26"
       data-kind="primary"
       data-orientation="vertical"
       data-radix-collection-item=""
@@ -193,7 +193,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
       tabindex="-1"
     >
       <div
-        class="mx_DecoratedRoomAvatar _icon_lqfwq_50"
+        class="mx_DecoratedRoomAvatar _icon_bym9p_51"
       >
         <span
           class="_avatar_7h2br_8 mx_BaseAvatar _avatar-imageless_7h2br_55"
@@ -207,13 +207,13 @@ exports[`ThreadsActivityCentre should order the room with the same notification
         </span>
       </div>
       <span
-        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
       >
         This is a third real highlight
       </span>
       <svg
         aria-hidden="true"
-        class="_nav-hint_lqfwq_59"
+        class="_nav-hint_bym9p_60"
         fill="currentColor"
         height="24"
         viewBox="8 0 8 24"
@@ -233,7 +233,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
       </div>
     </button>
     <button
-      class="mx_ThreadsActivityCentreRow _item_lqfwq_8 _interactive_lqfwq_26"
+      class="mx_ThreadsActivityCentreRow _item_bym9p_8 _interactive_bym9p_26"
       data-kind="primary"
       data-orientation="vertical"
       data-radix-collection-item=""
@@ -241,7 +241,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
       tabindex="-1"
     >
       <div
-        class="mx_DecoratedRoomAvatar _icon_lqfwq_50"
+        class="mx_DecoratedRoomAvatar _icon_bym9p_51"
       >
         <span
           class="_avatar_7h2br_8 mx_BaseAvatar _avatar-imageless_7h2br_55"
@@ -255,13 +255,13 @@ exports[`ThreadsActivityCentre should order the room with the same notification
         </span>
       </div>
       <span
-        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
       >
         This is a real highlight
       </span>
       <svg
         aria-hidden="true"
-        class="_nav-hint_lqfwq_59"
+        class="_nav-hint_bym9p_60"
         fill="currentColor"
         height="24"
         viewBox="8 0 8 24"
@@ -281,7 +281,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
       </div>
     </button>
     <button
-      class="mx_ThreadsActivityCentreRow _item_lqfwq_8 _interactive_lqfwq_26"
+      class="mx_ThreadsActivityCentreRow _item_bym9p_8 _interactive_bym9p_26"
       data-kind="primary"
       data-orientation="vertical"
       data-radix-collection-item=""
@@ -289,7 +289,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
       tabindex="-1"
     >
       <div
-        class="mx_DecoratedRoomAvatar _icon_lqfwq_50"
+        class="mx_DecoratedRoomAvatar _icon_bym9p_51"
       >
         <span
           class="_avatar_7h2br_8 mx_BaseAvatar _avatar-imageless_7h2br_55"
@@ -303,13 +303,13 @@ exports[`ThreadsActivityCentre should order the room with the same notification
         </span>
       </div>
       <span
-        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
       >
         This is a second real highlight
       </span>
       <svg
         aria-hidden="true"
-        class="_nav-hint_lqfwq_59"
+        class="_nav-hint_bym9p_60"
         fill="currentColor"
         height="24"
         viewBox="8 0 8 24"
diff --git a/packages/shared-components/src/room/HistoryVisibilityBadge/__snapshots__/HistoryVisibilityBadge.test.tsx.snap b/packages/shared-components/src/room/HistoryVisibilityBadge/__snapshots__/HistoryVisibilityBadge.test.tsx.snap
index e284eb7a51..51459abcdc 100644
--- a/packages/shared-components/src/room/HistoryVisibilityBadge/__snapshots__/HistoryVisibilityBadge.test.tsx.snap
+++ b/packages/shared-components/src/room/HistoryVisibilityBadge/__snapshots__/HistoryVisibilityBadge.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`HistoryVisibilityBadge > renders the badge for invited 1`] = `
 <div>
   <span
-    class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8"
+    class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_10dml_8"
     data-kind="blue"
   >
     <svg
@@ -26,7 +26,7 @@ exports[`HistoryVisibilityBadge > renders the badge for invited 1`] = `
 exports[`HistoryVisibilityBadge > renders the badge for joined 1`] = `
 <div>
   <span
-    class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8"
+    class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_10dml_8"
     data-kind="blue"
   >
     <svg
@@ -49,7 +49,7 @@ exports[`HistoryVisibilityBadge > renders the badge for joined 1`] = `
 exports[`HistoryVisibilityBadge > renders the badge for shared 1`] = `
 <div>
   <span
-    class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8"
+    class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_10dml_8"
     data-kind="blue"
   >
     <svg
@@ -75,7 +75,7 @@ exports[`HistoryVisibilityBadge > renders the badge for shared 1`] = `
 exports[`HistoryVisibilityBadge > renders the badge for world_readable 1`] = `
 <div>
   <span
-    class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8"
+    class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_10dml_8"
     data-kind="blue"
   >
     <svg
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6798be6f3d..d14caf358c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -16,11 +16,11 @@ catalogs:
       specifier: 1.59.1
       version: 1.59.1
     '@vector-im/compound-design-tokens':
-      specifier: 8.0.0
-      version: 8.0.0
+      specifier: 10.1.0
+      version: 10.1.0
     '@vector-im/compound-web':
-      specifier: 9.0.1
-      version: 9.0.1
+      specifier: 9.1.0
+      version: 9.1.0
     matrix-web-i18n:
       specifier: 3.6.0
       version: 3.6.0
@@ -360,10 +360,10 @@ importers:
         version: 1.0.2
       '@vector-im/compound-design-tokens':
         specifier: 'catalog:'
-        version: 8.0.0(@types/react@19.2.10)(react@19.2.4)
+        version: 10.1.0(@types/react@19.2.10)(react@19.2.4)
       '@vector-im/compound-web':
         specifier: 'catalog:'
-        version: 9.0.1(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(@vector-im/compound-design-tokens@8.0.0(@types/react@19.2.10)(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+        version: 9.1.0(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(@vector-im/compound-design-tokens@10.1.0(@types/react@19.2.10)(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       '@vector-im/matrix-wysiwyg':
         specifier: 2.40.0
         version: 2.40.0(patch_hash=7bdf6150f2905bc2f055a6bcaa7b9d78fa7ffde82e800bcc454ac7b0096bd65e)(react@19.2.4)
@@ -974,7 +974,7 @@ importers:
         version: 1.16.0
       '@vector-im/compound-design-tokens':
         specifier: 'catalog:'
-        version: 8.0.0(@types/react@19.2.10)(react@19.2.4)
+        version: 10.1.0(@types/react@19.2.10)(react@19.2.4)
       classnames:
         specifier: ^2.5.1
         version: 2.5.1
@@ -1080,7 +1080,7 @@ importers:
         version: 8.58.0(eslint@8.57.1)(typescript@5.9.3)
       '@vector-im/compound-web':
         specifier: 'catalog:'
-        version: 9.0.1(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(@vector-im/compound-design-tokens@8.0.0(@types/react@19.2.10)(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+        version: 9.1.0(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(@vector-im/compound-design-tokens@10.1.0(@types/react@19.2.10)(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       '@vitest/browser-playwright':
         specifier: ^4.0.17
         version: 4.1.2(playwright@1.59.1)(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.2)
@@ -5824,8 +5824,8 @@ packages:
   '@upsetjs/venn.js@2.0.0':
     resolution: {integrity: sha512-WbBhLrooyePuQ1VZxrJjtLvTc4NVfpOyKx0sKqioq9bX1C1m7Jgykkn8gLrtwumBioXIqam8DLxp88Adbue6Hw==}
 
-  '@vector-im/compound-design-tokens@8.0.0':
-    resolution: {integrity: sha512-9CffdYzNZp9A2uQ/pcVZBNZuv7fyR9Ye8e6KuimBv1TOcgegFb7F55WUCcEEqj8kRRcWcaPbbM6kkTzSpsMSmg==}
+  '@vector-im/compound-design-tokens@10.1.0':
+    resolution: {integrity: sha512-o+7DGx+NygpT2NPE1Jo//7NZDuyjzRH06eRchS0ZlkJicKx/impEmShmHU/XiE4P84BIFOo9eZ1Ws+rAym6Tuw==}
     peerDependencies:
       '@types/react': ^19.2.10
       react: ^17 || ^18 || ^19.0.0
@@ -5835,8 +5835,8 @@ packages:
       react:
         optional: true
 
-  '@vector-im/compound-web@9.0.1':
-    resolution: {integrity: sha512-owGsQFXOQpY9brTA9AbVC/lj+JkmwaUCnlgpiPCIqhKUFVP2FxpqvVkKluQbZMxI2XKERd/Z+9vgb0YgePbPyQ==}
+  '@vector-im/compound-web@9.1.0':
+    resolution: {integrity: sha512-eKyGVp8E7erd2yCMpUS7sJSu/Pytezp/C8Yw6kHay+d5aPxKJ53Hy1OgeO7sjnhZTETck17Ypj6V2zfH+Bdbwg==}
     peerDependencies:
       '@fontsource/inconsolata': ^5
       '@fontsource/inter': ^5
@@ -18583,12 +18583,12 @@ snapshots:
       d3-selection: 3.0.0
       d3-transition: 3.0.1(d3-selection@3.0.0)
 
-  '@vector-im/compound-design-tokens@8.0.0(@types/react@19.2.10)(react@19.2.4)':
+  '@vector-im/compound-design-tokens@10.1.0(@types/react@19.2.10)(react@19.2.4)':
     optionalDependencies:
       '@types/react': 19.2.10
       react: 19.2.4
 
-  '@vector-im/compound-web@9.0.1(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(@vector-im/compound-design-tokens@8.0.0(@types/react@19.2.10)(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+  '@vector-im/compound-web@9.1.0(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(@vector-im/compound-design-tokens@10.1.0(@types/react@19.2.10)(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
     dependencies:
       '@floating-ui/react': 0.27.17(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       '@fontsource/inconsolata': 5.2.8
@@ -18599,7 +18599,7 @@ snapshots:
       '@radix-ui/react-progress': 1.1.8(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       '@radix-ui/react-separator': 1.1.8(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       '@radix-ui/react-slot': 1.2.4(@types/react@19.2.10)(react@19.2.4)
-      '@vector-im/compound-design-tokens': 8.0.0(@types/react@19.2.10)(react@19.2.4)
+      '@vector-im/compound-design-tokens': 10.1.0(@types/react@19.2.10)(react@19.2.4)
       classnames: 2.5.1
       react: 19.2.4
       vaul: 1.1.2(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 8997d39e56..8441dacc6c 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -18,8 +18,8 @@ catalog:
     # Module API
     "@element-hq/element-web-module-api": 1.13.0
     # Compound
-    "@vector-im/compound-design-tokens": 8.0.0
-    "@vector-im/compound-web": 9.0.1
+    "@vector-im/compound-design-tokens": 10.1.0
+    "@vector-im/compound-web": 9.1.0
     # i18n
     matrix-web-i18n: 3.6.0
     # fonts