diff --git a/package.json b/package.json
index f990a48548..84b7ab4d2c 100644
--- a/package.json
+++ b/package.json
@@ -69,7 +69,7 @@
         "@sentry/tracing": "^7.0.0",
         "@testing-library/react-hooks": "^8.0.1",
         "@vector-im/compound-design-tokens": "^0.0.5",
-        "@vector-im/compound-web": "^0.2.3",
+        "@vector-im/compound-web": "^0.4.0",
         "await-lock": "^2.1.0",
         "blurhash": "^1.1.3",
         "classnames": "^2.2.6",
diff --git a/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap b/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap
index 345a05ff67..f8acfdfe0e 100644
--- a/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap
+++ b/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap
@@ -22,7 +22,7 @@ exports[`RoomHeader does not show the face pile for DMs 1`] = `
     >
       <div
         aria-level="1"
-        class="_font-body-lg-semibold_1g2sj_89 mx_RoomHeader_heading"
+        class="_font-body-lg-semibold_1jx6b_83 mx_RoomHeader_heading"
         dir="auto"
         role="heading"
         title="!1:example.org"
@@ -35,7 +35,7 @@ exports[`RoomHeader does not show the face pile for DMs 1`] = `
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
     >
       <button
-        class="_icon-button_1k9cw_17"
+        class="_icon-button_1segd_17"
         data-state="closed"
         disabled=""
         style="--cpd-icon-button-size: 32px;"
@@ -44,7 +44,7 @@ exports[`RoomHeader does not show the face pile for DMs 1`] = `
         <div />
       </button>
       <button
-        class="_icon-button_1k9cw_17"
+        class="_icon-button_1segd_17"
         data-state="closed"
         disabled=""
         style="--cpd-icon-button-size: 32px;"
@@ -53,7 +53,7 @@ exports[`RoomHeader does not show the face pile for DMs 1`] = `
         <div />
       </button>
       <button
-        class="_icon-button_1k9cw_17"
+        class="_icon-button_1segd_17"
         data-state="closed"
         style="--cpd-icon-button-size: 32px;"
         title="Threads"
@@ -61,7 +61,7 @@ exports[`RoomHeader does not show the face pile for DMs 1`] = `
         <div />
       </button>
       <button
-        class="_icon-button_1k9cw_17"
+        class="_icon-button_1segd_17"
         data-state="closed"
         style="--cpd-icon-button-size: 32px;"
         title="Notifications"
diff --git a/yarn.lock b/yarn.lock
index 6f393f3955..1451cf2efb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3063,10 +3063,10 @@
   dependencies:
     svg2vectordrawable "^2.9.1"
 
-"@vector-im/compound-web@^0.2.3":
-  version "0.2.18"
-  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-0.2.18.tgz#b92bcfd5779b1e558dc431ad3d330960749049d9"
-  integrity sha512-fs+tQYZMA4/KxGFOdoDM9WKf7IpeNILI37q2uj4dJj8SkI33zwUnzHFuTD04YI33Dc3FCZHcCd/d0m/fCnRaFg==
+"@vector-im/compound-web@^0.4.0":
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-0.4.0.tgz#c4adf10785722c4b0fd5e20e72576ade2ef386d0"
+  integrity sha512-45pshpwpVBwOwIevKZrnWX718Z+qPvxnrSUv3KY4x4ej+PDMt8Qorxv1n98bB7fgF7vwBHK5PQdjq2kTFit+wQ==
   dependencies:
     "@radix-ui/react-form" "^0.0.3"
     "@radix-ui/react-tooltip" "^1.0.6"