diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 121032c0f..99a08dd5c 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -19,7 +19,7 @@
         "@urql/exchange-refocus": "^1.1.0",
         "@urql/exchange-request-policy": "^1.2.0",
         "@vector-im/compound-design-tokens": "1.8.0",
-        "@vector-im/compound-web": "^6.3.2",
+        "@vector-im/compound-web": "^7.1.0",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
         "classnames": "^2.5.1",
@@ -6280,10 +6280,9 @@
       }
     },
     "node_modules/@vector-im/compound-web": {
-      "version": "6.3.2",
-      "resolved": "https://registry.npmjs.org/@vector-im/compound-web/-/compound-web-6.3.2.tgz",
-      "integrity": "sha512-l1Bz+QFdgnwzJ17fpC9gzbDMHBsfwdb1AX53LOS1p91tdo2pypElGAJDWpaCy90UT900tKjZd+0qwMapdkuQmg==",
-      "license": "Apache-2.0",
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@vector-im/compound-web/-/compound-web-7.1.0.tgz",
+      "integrity": "sha512-b2q5lSemKnWCA0rHTWyfw5I+ZsQzAJCTL6Zya79vArptaQBxLksjAubErsOG80uRqwAiNUZUx+13eaxKXZI1Sw==",
       "dependencies": {
         "@floating-ui/react": "^0.26.24",
         "@radix-ui/react-context-menu": "^2.2.1",
diff --git a/frontend/package.json b/frontend/package.json
index 47061aec4..22777556d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -28,7 +28,7 @@
     "@urql/exchange-refocus": "^1.1.0",
     "@urql/exchange-request-policy": "^1.2.0",
     "@vector-im/compound-design-tokens": "1.8.0",
-    "@vector-im/compound-web": "^6.3.2",
+    "@vector-im/compound-web": "^7.1.0",
     "@zxcvbn-ts/core": "^3.0.4",
     "@zxcvbn-ts/language-common": "^3.0.4",
     "classnames": "^2.5.1",
diff --git a/frontend/src/components/BrowserSession.tsx b/frontend/src/components/BrowserSession.tsx
index 6a1491147..fb1078fe6 100644
--- a/frontend/src/components/BrowserSession.tsx
+++ b/frontend/src/components/BrowserSession.tsx
@@ -156,7 +156,7 @@ const BrowserSession: React.FC<Props> = ({ session, isCurrent }) => {
           </Card.Info>
 
           {isCurrent && (
-            <Badge kind="success" className="self-center">
+            <Badge kind="green" className="self-center">
               {t("frontend.session.current")}
             </Badge>
           )}
diff --git a/frontend/src/components/SessionDetail/BrowserSessionDetail.tsx b/frontend/src/components/SessionDetail/BrowserSessionDetail.tsx
index 2a0ef794e..f5009e829 100644
--- a/frontend/src/components/SessionDetail/BrowserSessionDetail.tsx
+++ b/frontend/src/components/SessionDetail/BrowserSessionDetail.tsx
@@ -77,7 +77,7 @@ const BrowserSessionDetail: React.FC<Props> = ({ session, isCurrent }) => {
   return (
     <BlockList>
       {isCurrent && (
-        <Badge className={styles.currentBadge} kind="success">
+        <Badge className={styles.currentBadge} kind="green">
           {t("frontend.browser_session_details.current_badge")}
         </Badge>
       )}