diff --git a/frontend/src/components/Client/__snapshots__/OAuth2ClientDetail.test.tsx.snap b/frontend/src/components/Client/__snapshots__/OAuth2ClientDetail.test.tsx.snap
index 2558267f6..d3a8be198 100644
--- a/frontend/src/components/Client/__snapshots__/OAuth2ClientDetail.test.tsx.snap
+++ b/frontend/src/components/Client/__snapshots__/OAuth2ClientDetail.test.tsx.snap
@@ -24,7 +24,7 @@ exports[`<OAuth2ClientDetail> > renders client details 1`] = `
       </h4>
       <div
         aria-orientation="horizontal"
-        class="_separator_162edc _section_162edc -mt-4"
+        class="_separator_59a6a1 _section_59a6a1 -mt-4"
         role="separator"
       />
       <ul
@@ -56,7 +56,7 @@ exports[`<OAuth2ClientDetail> > renders client details 1`] = `
             class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 text-ellipsis overflow-hidden"
           >
             <a
-              class="_link_1v5rz_8 _externalLink_a97355"
+              class="_link_1v5rz_8 _externalLink_94c115"
               data-kind="primary"
               data-size="medium"
               href="https://client.org/tos"
@@ -79,7 +79,7 @@ exports[`<OAuth2ClientDetail> > renders client details 1`] = `
             class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 text-ellipsis overflow-hidden"
           >
             <a
-              class="_link_1v5rz_8 _externalLink_a97355"
+              class="_link_1v5rz_8 _externalLink_94c115"
               data-kind="primary"
               data-size="medium"
               href="https://client.org/policy"
diff --git a/frontend/src/components/LoadingScreen/__snapshots__/LoadingScreen.test.tsx.snap b/frontend/src/components/LoadingScreen/__snapshots__/LoadingScreen.test.tsx.snap
index 27fd1dc73..77d2dd969 100644
--- a/frontend/src/components/LoadingScreen/__snapshots__/LoadingScreen.test.tsx.snap
+++ b/frontend/src/components/LoadingScreen/__snapshots__/LoadingScreen.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`LoadingScreen > render <LoadingScreen /> 1`] = `
 <DocumentFragment>
   <main
-    class="_loadingScreen_0642c6"
+    class="_loadingScreen_5dc073"
   >
     <div
       aria-busy="true"
@@ -11,7 +11,7 @@ exports[`LoadingScreen > render <LoadingScreen /> 1`] = `
       role="alert"
     >
       <svg
-        class="_loadingSpinnerInner_0c7436"
+        class="_loadingSpinnerInner_14d3fe"
         fill="none"
         role="img"
         viewBox="0 0 100 101"
diff --git a/frontend/src/components/Session/__snapshots__/ClientAvatar.test.tsx.snap b/frontend/src/components/Session/__snapshots__/ClientAvatar.test.tsx.snap
index 2d009998f..e7f8e45d9 100644
--- a/frontend/src/components/Session/__snapshots__/ClientAvatar.test.tsx.snap
+++ b/frontend/src/components/Session/__snapshots__/ClientAvatar.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`<ClientAvatar /> > renders client logo 1`] = `
 <div>
   <img
     alt="Test Client"
-    class="_avatar_39aee3"
+    class="_avatar_d3cd4c"
     referrerpolicy="no-referrer"
     src="https://www.testclient.com/logo.png"
     style="--mas-avatar-size: 10px;"
diff --git a/frontend/src/components/Session/__snapshots__/DeviceTypeIcon.test.tsx.snap b/frontend/src/components/Session/__snapshots__/DeviceTypeIcon.test.tsx.snap
index 746837d33..3c74d8070 100644
--- a/frontend/src/components/Session/__snapshots__/DeviceTypeIcon.test.tsx.snap
+++ b/frontend/src/components/Session/__snapshots__/DeviceTypeIcon.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`<DeviceTypeIcon /> > renders mobile device type 1`] = `
 <div>
   <svg
     aria-label="Mobile"
-    class="_deviceTypeIcon_e677aa"
+    class="_deviceTypeIcon_261d75"
     fill="currentColor"
     height="1em"
     viewBox="0 0 24 24"
@@ -22,7 +22,7 @@ exports[`<DeviceTypeIcon /> > renders pc device type 1`] = `
 <div>
   <svg
     aria-label="Computer"
-    class="_deviceTypeIcon_e677aa"
+    class="_deviceTypeIcon_261d75"
     fill="currentColor"
     height="1em"
     viewBox="0 0 24 24"
@@ -40,7 +40,7 @@ exports[`<DeviceTypeIcon /> > renders tablet device type 1`] = `
 <div>
   <svg
     aria-label="Tablet"
-    class="_deviceTypeIcon_e677aa"
+    class="_deviceTypeIcon_261d75"
     fill="currentColor"
     height="1em"
     viewBox="0 0 24 24"
@@ -58,7 +58,7 @@ exports[`<DeviceTypeIcon /> > renders unknown device type 1`] = `
 <div>
   <svg
     aria-label="Unknown device type"
-    class="_deviceTypeIcon_e677aa"
+    class="_deviceTypeIcon_261d75"
     fill="currentColor"
     height="1em"
     viewBox="0 0 24 24"
diff --git a/frontend/src/components/Session/__snapshots__/LastActive.test.tsx.snap b/frontend/src/components/Session/__snapshots__/LastActive.test.tsx.snap
index d82040c3c..483525bfd 100644
--- a/frontend/src/components/Session/__snapshots__/LastActive.test.tsx.snap
+++ b/frontend/src/components/Session/__snapshots__/LastActive.test.tsx.snap
@@ -23,7 +23,7 @@ exports[`<LastActive > renders a relative timestamp 1`] = `
 exports[`<LastActive > renders an 'active now' timestamp 1`] = `
 <div>
   <span
-    class="_active_04756f"
+    class="_active_f381d7"
     title="Mon, 18 Sept 2023, 01:12"
   >
     Active now
diff --git a/frontend/src/components/SessionDetail/__snapshots__/CompatSessionDetail.test.tsx.snap b/frontend/src/components/SessionDetail/__snapshots__/CompatSessionDetail.test.tsx.snap
index fbfd98192..8563e1abf 100644
--- a/frontend/src/components/SessionDetail/__snapshots__/CompatSessionDetail.test.tsx.snap
+++ b/frontend/src/components/SessionDetail/__snapshots__/CompatSessionDetail.test.tsx.snap
@@ -6,10 +6,10 @@ exports[`<CompatSessionDetail> > renders a compatability session details 1`] = `
     class="flex flex-col gap-10"
   >
     <header
-      class="_header_92353c"
+      class="_header_28c6f4"
     >
       <a
-        class="_backButton_92353c"
+        class="_backButton_28c6f4"
         href="/sessions"
       >
         <svg
@@ -71,7 +71,7 @@ exports[`<CompatSessionDetail> > renders a compatability session details 1`] = `
       </h4>
       <div
         aria-orientation="horizontal"
-        class="_separator_162edc _section_162edc -mt-4"
+        class="_separator_59a6a1 _section_59a6a1 -mt-4"
         role="separator"
       />
       <ul
@@ -230,7 +230,7 @@ exports[`<CompatSessionDetail> > renders a compatability session details 1`] = `
       </h4>
       <div
         aria-orientation="horizontal"
-        class="_separator_162edc _section_162edc -mt-4"
+        class="_separator_59a6a1 _section_59a6a1 -mt-4"
         role="separator"
       />
       <ul
@@ -302,10 +302,10 @@ exports[`<CompatSessionDetail> > renders a compatability session without an ssoL
     class="flex flex-col gap-10"
   >
     <header
-      class="_header_92353c"
+      class="_header_28c6f4"
     >
       <a
-        class="_backButton_92353c"
+        class="_backButton_28c6f4"
         href="/sessions"
       >
         <svg
@@ -367,7 +367,7 @@ exports[`<CompatSessionDetail> > renders a compatability session without an ssoL
       </h4>
       <div
         aria-orientation="horizontal"
-        class="_separator_162edc _section_162edc -mt-4"
+        class="_separator_59a6a1 _section_59a6a1 -mt-4"
         role="separator"
       />
       <ul
@@ -526,7 +526,7 @@ exports[`<CompatSessionDetail> > renders a compatability session without an ssoL
       </h4>
       <div
         aria-orientation="horizontal"
-        class="_separator_162edc _section_162edc -mt-4"
+        class="_separator_59a6a1 _section_59a6a1 -mt-4"
         role="separator"
       />
       <ul
@@ -584,10 +584,10 @@ exports[`<CompatSessionDetail> > renders a finished compatability session detail
     class="flex flex-col gap-10"
   >
     <header
-      class="_header_92353c"
+      class="_header_28c6f4"
     >
       <a
-        class="_backButton_92353c"
+        class="_backButton_28c6f4"
         href="/sessions"
       >
         <svg
@@ -649,7 +649,7 @@ exports[`<CompatSessionDetail> > renders a finished compatability session detail
       </h4>
       <div
         aria-orientation="horizontal"
-        class="_separator_162edc _section_162edc -mt-4"
+        class="_separator_59a6a1 _section_59a6a1 -mt-4"
         role="separator"
       />
       <ul
@@ -826,7 +826,7 @@ exports[`<CompatSessionDetail> > renders a finished compatability session detail
       </h4>
       <div
         aria-orientation="horizontal"
-        class="_separator_162edc _section_162edc -mt-4"
+        class="_separator_59a6a1 _section_59a6a1 -mt-4"
         role="separator"
       />
       <ul
diff --git a/frontend/src/components/SessionDetail/__snapshots__/OAuth2SessionDetail.test.tsx.snap b/frontend/src/components/SessionDetail/__snapshots__/OAuth2SessionDetail.test.tsx.snap
index 7f8a6039b..c64271293 100644
--- a/frontend/src/components/SessionDetail/__snapshots__/OAuth2SessionDetail.test.tsx.snap
+++ b/frontend/src/components/SessionDetail/__snapshots__/OAuth2SessionDetail.test.tsx.snap
@@ -6,10 +6,10 @@ exports[`<OAuth2SessionDetail> > renders a finished session details 1`] = `
     class="flex flex-col gap-10"
   >
     <header
-      class="_header_92353c"
+      class="_header_28c6f4"
     >
       <a
-        class="_backButton_92353c"
+        class="_backButton_28c6f4"
         href="/sessions"
       >
         <svg
@@ -71,7 +71,7 @@ exports[`<OAuth2SessionDetail> > renders a finished session details 1`] = `
       </h4>
       <div
         aria-orientation="horizontal"
-        class="_separator_162edc _section_162edc -mt-4"
+        class="_separator_59a6a1 _section_59a6a1 -mt-4"
         role="separator"
       />
       <ul
@@ -248,7 +248,7 @@ exports[`<OAuth2SessionDetail> > renders a finished session details 1`] = `
       </h4>
       <div
         aria-orientation="horizontal"
-        class="_separator_162edc _section_162edc -mt-4"
+        class="_separator_59a6a1 _section_59a6a1 -mt-4"
         role="separator"
       />
       <ul
@@ -316,10 +316,10 @@ exports[`<OAuth2SessionDetail> > renders session details 1`] = `
     class="flex flex-col gap-10"
   >
     <header
-      class="_header_92353c"
+      class="_header_28c6f4"
     >
       <a
-        class="_backButton_92353c"
+        class="_backButton_28c6f4"
         href="/sessions"
       >
         <svg
@@ -381,7 +381,7 @@ exports[`<OAuth2SessionDetail> > renders session details 1`] = `
       </h4>
       <div
         aria-orientation="horizontal"
-        class="_separator_162edc _section_162edc -mt-4"
+        class="_separator_59a6a1 _section_59a6a1 -mt-4"
         role="separator"
       />
       <ul
@@ -540,7 +540,7 @@ exports[`<OAuth2SessionDetail> > renders session details 1`] = `
       </h4>
       <div
         aria-orientation="horizontal"
-        class="_separator_162edc _section_162edc -mt-4"
+        class="_separator_59a6a1 _section_59a6a1 -mt-4"
         role="separator"
       />
       <ul
diff --git a/frontend/src/components/SessionDetail/__snapshots__/SessionHeader.test.tsx.snap b/frontend/src/components/SessionDetail/__snapshots__/SessionHeader.test.tsx.snap
index 06dbb95dd..943a25444 100644
--- a/frontend/src/components/SessionDetail/__snapshots__/SessionHeader.test.tsx.snap
+++ b/frontend/src/components/SessionDetail/__snapshots__/SessionHeader.test.tsx.snap
@@ -3,11 +3,11 @@
 exports[`<SessionHeader /> > renders a session header 1`] = `
 <div>
   <header
-    class="_header_92353c"
+    class="_header_28c6f4"
   >
     <a
       aria-current="page"
-      class="_backButton_92353c active"
+      class="_backButton_28c6f4 active"
       data-status="active"
       href="/"
     >
diff --git a/frontend/src/components/UserSessionsOverview/__snapshots__/BrowserSessionsOverview.test.tsx.snap b/frontend/src/components/UserSessionsOverview/__snapshots__/BrowserSessionsOverview.test.tsx.snap
index 32e056e81..05cafedc7 100644
--- a/frontend/src/components/UserSessionsOverview/__snapshots__/BrowserSessionsOverview.test.tsx.snap
+++ b/frontend/src/components/UserSessionsOverview/__snapshots__/BrowserSessionsOverview.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`BrowserSessionsOverview > renders with no browser sessions 1`] = `
 <div>
   <div
-    class="_browserSessionsOverview_c5c17e"
+    class="_browserSessionsOverview_5c5d1f"
   >
     <div
       class="flex flex-1 flex-col"
@@ -35,7 +35,7 @@ exports[`BrowserSessionsOverview > renders with no browser sessions 1`] = `
 exports[`BrowserSessionsOverview > renders with sessions 1`] = `
 <div>
   <div
-    class="_browserSessionsOverview_c5c17e"
+    class="_browserSessionsOverview_5c5d1f"
   >
     <div
       class="flex flex-1 flex-col"
diff --git a/frontend/src/components/__snapshots__/CompatSession.test.tsx.snap b/frontend/src/components/__snapshots__/CompatSession.test.tsx.snap
index 448495a0b..a75ff3b5c 100644
--- a/frontend/src/components/__snapshots__/CompatSession.test.tsx.snap
+++ b/frontend/src/components/__snapshots__/CompatSession.test.tsx.snap
@@ -3,20 +3,20 @@
 exports[`<CompatSession /> > renders a finished session 1`] = `
 <DocumentFragment>
   <section
-    class="_sessionCardRoot_e2909e"
+    class="_sessionCardRoot_6c1027"
   >
     <a
       aria-disabled="true"
-      class="_sessionCard_e2909e _disabled_e2909e"
+      class="_sessionCard_6c1027 _disabled_6c1027"
       disabled=""
       role="link"
     >
       <header
-        class="_cardHeader_e2909e"
+        class="_cardHeader_6c1027"
       >
         <svg
           aria-label="Unknown device type"
-          class="_deviceTypeIcon_e677aa"
+          class="_deviceTypeIcon_261d75"
           fill="currentColor"
           height="1em"
           viewBox="0 0 24 24"
@@ -31,31 +31,31 @@ exports[`<CompatSession /> > renders a finished session 1`] = `
           />
         </svg>
         <div
-          class="_content_e2909e"
+          class="_content_6c1027"
         >
           <div
-            class="_name_e2909e"
+            class="_name_6c1027"
           >
             Unknown device
           </div>
           <div
-            class="_client_e2909e"
+            class="_client_6c1027"
           >
             element.io
           </div>
         </div>
       </header>
       <ul
-        class="_metadata_e2909e"
+        class="_metadata_6c1027"
       >
         <li>
           <div
-            class="_key_e2909e"
+            class="_key_6c1027"
           >
             Signed in
           </div>
           <div
-            class="_value_e2909e"
+            class="_value_6c1027"
           >
             <time
               datetime="2023-06-29T03:35:17Z"
@@ -66,12 +66,12 @@ exports[`<CompatSession /> > renders a finished session 1`] = `
         </li>
         <li>
           <div
-            class="_key_e2909e"
+            class="_key_6c1027"
           >
             Device ID
           </div>
           <div
-            class="_value_e2909e"
+            class="_value_6c1027"
           >
             abcd1234
           </div>
@@ -85,18 +85,18 @@ exports[`<CompatSession /> > renders a finished session 1`] = `
 exports[`<CompatSession /> > renders an active session 1`] = `
 <DocumentFragment>
   <section
-    class="_sessionCardRoot_e2909e"
+    class="_sessionCardRoot_6c1027"
   >
     <a
-      class="_sessionCard_e2909e"
+      class="_sessionCard_6c1027"
       href="/sessions/session-id"
     >
       <header
-        class="_cardHeader_e2909e"
+        class="_cardHeader_6c1027"
       >
         <svg
           aria-label="Unknown device type"
-          class="_deviceTypeIcon_e677aa"
+          class="_deviceTypeIcon_261d75"
           fill="currentColor"
           height="1em"
           viewBox="0 0 24 24"
@@ -111,31 +111,31 @@ exports[`<CompatSession /> > renders an active session 1`] = `
           />
         </svg>
         <div
-          class="_content_e2909e"
+          class="_content_6c1027"
         >
           <div
-            class="_name_e2909e"
+            class="_name_6c1027"
           >
             Unknown device
           </div>
           <div
-            class="_client_e2909e"
+            class="_client_6c1027"
           >
             element.io
           </div>
         </div>
       </header>
       <ul
-        class="_metadata_e2909e"
+        class="_metadata_6c1027"
       >
         <li>
           <div
-            class="_key_e2909e"
+            class="_key_6c1027"
           >
             Signed in
           </div>
           <div
-            class="_value_e2909e"
+            class="_value_6c1027"
           >
             <time
               datetime="2023-06-29T03:35:17Z"
@@ -146,12 +146,12 @@ exports[`<CompatSession /> > renders an active session 1`] = `
         </li>
         <li>
           <div
-            class="_key_e2909e"
+            class="_key_6c1027"
           >
             Device ID
           </div>
           <div
-            class="_value_e2909e"
+            class="_value_6c1027"
           >
             abcd1234
           </div>
@@ -159,7 +159,7 @@ exports[`<CompatSession /> > renders an active session 1`] = `
       </ul>
     </a>
     <div
-      class="_action_e2909e"
+      class="_action_6c1027"
     >
       <button
         aria-controls="radix-«r0»"
diff --git a/frontend/src/components/__snapshots__/OAuth2Session.test.tsx.snap b/frontend/src/components/__snapshots__/OAuth2Session.test.tsx.snap
index b853407f8..870d4b07a 100644
--- a/frontend/src/components/__snapshots__/OAuth2Session.test.tsx.snap
+++ b/frontend/src/components/__snapshots__/OAuth2Session.test.tsx.snap
@@ -3,20 +3,20 @@
 exports[`<OAuth2Session /> > renders a finished session 1`] = `
 <DocumentFragment>
   <section
-    class="_sessionCardRoot_e2909e"
+    class="_sessionCardRoot_6c1027"
   >
     <a
       aria-disabled="true"
-      class="_sessionCard_e2909e _disabled_e2909e"
+      class="_sessionCard_6c1027 _disabled_6c1027"
       disabled=""
       role="link"
     >
       <header
-        class="_cardHeader_e2909e"
+        class="_cardHeader_6c1027"
       >
         <svg
           aria-label="Computer"
-          class="_deviceTypeIcon_e677aa"
+          class="_deviceTypeIcon_261d75"
           fill="currentColor"
           height="1em"
           viewBox="0 0 24 24"
@@ -28,31 +28,31 @@ exports[`<OAuth2Session /> > renders a finished session 1`] = `
           />
         </svg>
         <div
-          class="_content_e2909e"
+          class="_content_6c1027"
         >
           <div
-            class="_name_e2909e"
+            class="_name_6c1027"
           >
             Unknown device
           </div>
           <div
-            class="_client_e2909e"
+            class="_client_6c1027"
           >
             Element
           </div>
         </div>
       </header>
       <ul
-        class="_metadata_e2909e"
+        class="_metadata_6c1027"
       >
         <li>
           <div
-            class="_key_e2909e"
+            class="_key_6c1027"
           >
             Signed in
           </div>
           <div
-            class="_value_e2909e"
+            class="_value_6c1027"
           >
             <time
               datetime="2023-06-29T03:35:17Z"
@@ -63,12 +63,12 @@ exports[`<OAuth2Session /> > renders a finished session 1`] = `
         </li>
         <li>
           <div
-            class="_key_e2909e"
+            class="_key_6c1027"
           >
             Device ID
           </div>
           <div
-            class="_value_e2909e"
+            class="_value_6c1027"
           >
             abcd1234
           </div>
@@ -82,18 +82,18 @@ exports[`<OAuth2Session /> > renders a finished session 1`] = `
 exports[`<OAuth2Session /> > renders an active session 1`] = `
 <DocumentFragment>
   <section
-    class="_sessionCardRoot_e2909e"
+    class="_sessionCardRoot_6c1027"
   >
     <a
-      class="_sessionCard_e2909e"
+      class="_sessionCard_6c1027"
       href="/sessions/session-id"
     >
       <header
-        class="_cardHeader_e2909e"
+        class="_cardHeader_6c1027"
       >
         <svg
           aria-label="Computer"
-          class="_deviceTypeIcon_e677aa"
+          class="_deviceTypeIcon_261d75"
           fill="currentColor"
           height="1em"
           viewBox="0 0 24 24"
@@ -105,31 +105,31 @@ exports[`<OAuth2Session /> > renders an active session 1`] = `
           />
         </svg>
         <div
-          class="_content_e2909e"
+          class="_content_6c1027"
         >
           <div
-            class="_name_e2909e"
+            class="_name_6c1027"
           >
             Unknown device
           </div>
           <div
-            class="_client_e2909e"
+            class="_client_6c1027"
           >
             Element
           </div>
         </div>
       </header>
       <ul
-        class="_metadata_e2909e"
+        class="_metadata_6c1027"
       >
         <li>
           <div
-            class="_key_e2909e"
+            class="_key_6c1027"
           >
             Signed in
           </div>
           <div
-            class="_value_e2909e"
+            class="_value_6c1027"
           >
             <time
               datetime="2023-06-29T03:35:17Z"
@@ -140,12 +140,12 @@ exports[`<OAuth2Session /> > renders an active session 1`] = `
         </li>
         <li>
           <div
-            class="_key_e2909e"
+            class="_key_6c1027"
           >
             Device ID
           </div>
           <div
-            class="_value_e2909e"
+            class="_value_6c1027"
           >
             abcd1234
           </div>
@@ -153,7 +153,7 @@ exports[`<OAuth2Session /> > renders an active session 1`] = `
       </ul>
     </a>
     <div
-      class="_action_e2909e"
+      class="_action_6c1027"
     >
       <button
         aria-controls="radix-«r0»"
@@ -189,20 +189,20 @@ exports[`<OAuth2Session /> > renders an active session 1`] = `
 exports[`<OAuth2Session /> > renders correct icon for a native session 1`] = `
 <DocumentFragment>
   <section
-    class="_sessionCardRoot_e2909e"
+    class="_sessionCardRoot_6c1027"
   >
     <a
       aria-disabled="true"
-      class="_sessionCard_e2909e _disabled_e2909e"
+      class="_sessionCard_6c1027 _disabled_6c1027"
       disabled=""
       role="link"
     >
       <header
-        class="_cardHeader_e2909e"
+        class="_cardHeader_6c1027"
       >
         <svg
           aria-label="Mobile"
-          class="_deviceTypeIcon_e677aa"
+          class="_deviceTypeIcon_261d75"
           fill="currentColor"
           height="1em"
           viewBox="0 0 24 24"
@@ -214,31 +214,31 @@ exports[`<OAuth2Session /> > renders correct icon for a native session 1`] = `
           />
         </svg>
         <div
-          class="_content_e2909e"
+          class="_content_6c1027"
         >
           <div
-            class="_name_e2909e"
+            class="_name_6c1027"
           >
             Unknown device
           </div>
           <div
-            class="_client_e2909e"
+            class="_client_6c1027"
           >
             Element
           </div>
         </div>
       </header>
       <ul
-        class="_metadata_e2909e"
+        class="_metadata_6c1027"
       >
         <li>
           <div
-            class="_key_e2909e"
+            class="_key_6c1027"
           >
             Signed in
           </div>
           <div
-            class="_value_e2909e"
+            class="_value_6c1027"
           >
             <time
               datetime="2023-06-29T03:35:17Z"
@@ -249,12 +249,12 @@ exports[`<OAuth2Session /> > renders correct icon for a native session 1`] = `
         </li>
         <li>
           <div
-            class="_key_e2909e"
+            class="_key_6c1027"
           >
             Device ID
           </div>
           <div
-            class="_value_e2909e"
+            class="_value_6c1027"
           >
             abcd1234
           </div>
diff --git a/frontend/tests/routes/__snapshots__/reset-cross-signing.test.tsx.snap b/frontend/tests/routes/__snapshots__/reset-cross-signing.test.tsx.snap
index 2b13c2cd4..35ec9d823 100644
--- a/frontend/tests/routes/__snapshots__/reset-cross-signing.test.tsx.snap
+++ b/frontend/tests/routes/__snapshots__/reset-cross-signing.test.tsx.snap
@@ -3,13 +3,13 @@
 exports[`Reset cross signing > renders the cancelled page 1`] = `
 <DocumentFragment>
   <div
-    class="_layoutContainer_0c8bf9"
+    class="_layoutContainer_4402d3"
   >
     <header
-      class="_pageHeading_c10486"
+      class="_pageHeading_5ba6c3"
     >
       <div
-        class="_icon_c10486 _invalid_c10486"
+        class="_icon_5ba6c3 _invalid_5ba6c3"
       >
         <svg
           fill="currentColor"
@@ -24,10 +24,10 @@ exports[`Reset cross signing > renders the cancelled page 1`] = `
         </svg>
       </div>
       <div
-        class="_header_c10486"
+        class="_header_5ba6c3"
       >
         <h1
-          class="_title_c10486"
+          class="_title_5ba6c3"
         >
           Identity reset cancelled.
         </h1>
@@ -44,7 +44,7 @@ exports[`Reset cross signing > renders the cancelled page 1`] = `
       If you're signed out everywhere and don't remember your recovery code, you'll still need to reset your identity.
     </p>
     <footer
-      class="_legalFooter_eb428f"
+      class="_legalFooter_acfd2c"
     >
       <nav>
         <a
@@ -59,7 +59,7 @@ exports[`Reset cross signing > renders the cancelled page 1`] = `
         </a>
         <div
           aria-hidden="true"
-          class="_separator_eb428f"
+          class="_separator_acfd2c"
         >
           •
         </div>
@@ -75,7 +75,7 @@ exports[`Reset cross signing > renders the cancelled page 1`] = `
         </a>
       </nav>
       <p
-        class="_imprint_eb428f"
+        class="_imprint_acfd2c"
       >
         All Rights Reserved. The Super Chat name, logo and device are registered trade marks of BigCorp Ltd.
       </p>
@@ -87,13 +87,13 @@ exports[`Reset cross signing > renders the cancelled page 1`] = `
 exports[`Reset cross signing > renders the deep link page 1`] = `
 <DocumentFragment>
   <div
-    class="_layoutContainer_0c8bf9"
+    class="_layoutContainer_4402d3"
   >
     <header
-      class="_pageHeading_c10486"
+      class="_pageHeading_5ba6c3"
     >
       <div
-        class="_icon_c10486 _invalid_c10486"
+        class="_icon_5ba6c3 _invalid_5ba6c3"
       >
         <svg
           fill="currentColor"
@@ -108,10 +108,10 @@ exports[`Reset cross signing > renders the deep link page 1`] = `
         </svg>
       </div>
       <div
-        class="_header_c10486"
+        class="_header_5ba6c3"
       >
         <h1
-          class="_title_c10486"
+          class="_title_5ba6c3"
         >
           Reset your identity in case you can't confirm another way
         </h1>
@@ -207,7 +207,7 @@ exports[`Reset cross signing > renders the deep link page 1`] = `
     </button>
     <a
       aria-disabled="false"
-      class="_button_vczzf_8 _buttonLink_42cda0"
+      class="_button_vczzf_8 _buttonLink_014cb0"
       data-kind="tertiary"
       data-size="lg"
       href="/reset-cross-signing/cancelled"
@@ -217,7 +217,7 @@ exports[`Reset cross signing > renders the deep link page 1`] = `
       Cancel
     </a>
     <footer
-      class="_legalFooter_eb428f"
+      class="_legalFooter_acfd2c"
     >
       <nav>
         <a
@@ -232,7 +232,7 @@ exports[`Reset cross signing > renders the deep link page 1`] = `
         </a>
         <div
           aria-hidden="true"
-          class="_separator_eb428f"
+          class="_separator_acfd2c"
         >
           •
         </div>
@@ -248,7 +248,7 @@ exports[`Reset cross signing > renders the deep link page 1`] = `
         </a>
       </nav>
       <p
-        class="_imprint_eb428f"
+        class="_imprint_acfd2c"
       >
         All Rights Reserved. The Super Chat name, logo and device are registered trade marks of BigCorp Ltd.
       </p>
@@ -260,13 +260,13 @@ exports[`Reset cross signing > renders the deep link page 1`] = `
 exports[`Reset cross signing > renders the errored page 1`] = `
 <DocumentFragment>
   <div
-    class="_layoutContainer_0c8bf9"
+    class="_layoutContainer_4402d3"
   >
     <header
-      class="_pageHeading_c10486"
+      class="_pageHeading_5ba6c3"
     >
       <div
-        class="_icon_c10486 _invalid_c10486"
+        class="_icon_5ba6c3 _invalid_5ba6c3"
       >
         <svg
           fill="currentColor"
@@ -281,10 +281,10 @@ exports[`Reset cross signing > renders the errored page 1`] = `
         </svg>
       </div>
       <div
-        class="_header_c10486"
+        class="_header_5ba6c3"
       >
         <h1
-          class="_title_c10486"
+          class="_title_5ba6c3"
         >
           Failed to allow crypto identity reset
         </h1>
@@ -305,7 +305,7 @@ exports[`Reset cross signing > renders the errored page 1`] = `
       Back
     </button>
     <footer
-      class="_legalFooter_eb428f"
+      class="_legalFooter_acfd2c"
     >
       <nav>
         <a
@@ -320,7 +320,7 @@ exports[`Reset cross signing > renders the errored page 1`] = `
         </a>
         <div
           aria-hidden="true"
-          class="_separator_eb428f"
+          class="_separator_acfd2c"
         >
           •
         </div>
@@ -336,7 +336,7 @@ exports[`Reset cross signing > renders the errored page 1`] = `
         </a>
       </nav>
       <p
-        class="_imprint_eb428f"
+        class="_imprint_acfd2c"
       >
         All Rights Reserved. The Super Chat name, logo and device are registered trade marks of BigCorp Ltd.
       </p>
@@ -348,13 +348,13 @@ exports[`Reset cross signing > renders the errored page 1`] = `
 exports[`Reset cross signing > renders the page 1`] = `
 <DocumentFragment>
   <div
-    class="_layoutContainer_0c8bf9"
+    class="_layoutContainer_4402d3"
   >
     <header
-      class="_pageHeading_c10486"
+      class="_pageHeading_5ba6c3"
     >
       <div
-        class="_icon_c10486 _invalid_c10486"
+        class="_icon_5ba6c3 _invalid_5ba6c3"
       >
         <svg
           fill="currentColor"
@@ -369,10 +369,10 @@ exports[`Reset cross signing > renders the page 1`] = `
         </svg>
       </div>
       <div
-        class="_header_c10486"
+        class="_header_5ba6c3"
       >
         <h1
-          class="_title_c10486"
+          class="_title_5ba6c3"
         >
           Reset your identity in case you can't confirm another way
         </h1>
@@ -468,7 +468,7 @@ exports[`Reset cross signing > renders the page 1`] = `
     </button>
     <a
       aria-disabled="false"
-      class="_button_vczzf_8 _buttonLink_42cda0"
+      class="_button_vczzf_8 _buttonLink_014cb0"
       data-kind="tertiary"
       data-size="lg"
       href="/"
@@ -478,7 +478,7 @@ exports[`Reset cross signing > renders the page 1`] = `
       Back
     </a>
     <footer
-      class="_legalFooter_eb428f"
+      class="_legalFooter_acfd2c"
     >
       <nav>
         <a
@@ -493,7 +493,7 @@ exports[`Reset cross signing > renders the page 1`] = `
         </a>
         <div
           aria-hidden="true"
-          class="_separator_eb428f"
+          class="_separator_acfd2c"
         >
           •
         </div>
@@ -509,7 +509,7 @@ exports[`Reset cross signing > renders the page 1`] = `
         </a>
       </nav>
       <p
-        class="_imprint_eb428f"
+        class="_imprint_acfd2c"
       >
         All Rights Reserved. The Super Chat name, logo and device are registered trade marks of BigCorp Ltd.
       </p>
@@ -521,13 +521,13 @@ exports[`Reset cross signing > renders the page 1`] = `
 exports[`Reset cross signing > renders the success page 1`] = `
 <DocumentFragment>
   <div
-    class="_layoutContainer_0c8bf9"
+    class="_layoutContainer_4402d3"
   >
     <header
-      class="_pageHeading_c10486"
+      class="_pageHeading_5ba6c3"
     >
       <div
-        class="_icon_c10486 _success_c10486"
+        class="_icon_5ba6c3 _success_5ba6c3"
       >
         <svg
           fill="currentColor"
@@ -542,10 +542,10 @@ exports[`Reset cross signing > renders the success page 1`] = `
         </svg>
       </div>
       <div
-        class="_header_c10486"
+        class="_header_5ba6c3"
       >
         <h1
-          class="_title_c10486"
+          class="_title_5ba6c3"
         >
           Identity reset successfully. Go back to the app to finish the process.
         </h1>
@@ -563,13 +563,13 @@ exports[`Reset cross signing > renders the success page 1`] = `
 exports[`Reset cross signing > renders the success page 2`] = `
 <DocumentFragment>
   <div
-    class="_layoutContainer_0c8bf9"
+    class="_layoutContainer_4402d3"
   >
     <header
-      class="_pageHeading_c10486"
+      class="_pageHeading_5ba6c3"
     >
       <div
-        class="_icon_c10486 _success_c10486"
+        class="_icon_5ba6c3 _success_5ba6c3"
       >
         <svg
           fill="currentColor"
@@ -584,10 +584,10 @@ exports[`Reset cross signing > renders the success page 2`] = `
         </svg>
       </div>
       <div
-        class="_header_c10486"
+        class="_header_5ba6c3"
       >
         <h1
-          class="_title_c10486"
+          class="_title_5ba6c3"
         >
           Identity reset successfully. Go back to the app to finish the process.
         </h1>
diff --git a/frontend/tests/routes/account/__snapshots__/index.test.tsx.snap b/frontend/tests/routes/account/__snapshots__/index.test.tsx.snap
index ee61e974c..781350fcb 100644
--- a/frontend/tests/routes/account/__snapshots__/index.test.tsx.snap
+++ b/frontend/tests/routes/account/__snapshots__/index.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Account home page > display name edit box > displays an error if the di
 <div
   aria-describedby="radix-«r86»"
   aria-labelledby="radix-«r85»"
-  class="_body_9cf7b0"
+  class="_body_820528"
   data-state="open"
   id="radix-«r84»"
   role="dialog"
@@ -12,7 +12,7 @@ exports[`Account home page > display name edit box > displays an error if the di
   tabindex="-1"
 >
   <h2
-    class="_title_9cf7b0"
+    class="_title_820528"
     id="radix-«r85»"
   >
     Edit profile
@@ -31,7 +31,7 @@ exports[`Account home page > display name edit box > displays an error if the di
     class="_root_19upo_16"
   >
     <div
-      class="_dialogForm_66f22a"
+      class="_dialogForm_0d9d49"
     >
       <div
         class="_field_19upo_26"
@@ -130,7 +130,7 @@ exports[`Account home page > display name edit box > displays an error if the di
   </button>
   <button
     aria-labelledby="«ra2»"
-    class="_close_9cf7b0"
+    class="_close_820528"
     type="button"
   >
     <svg
@@ -152,7 +152,7 @@ exports[`Account home page > display name edit box > lets edit the display name
 <div
   aria-describedby="radix-«r1n»"
   aria-labelledby="radix-«r1m»"
-  class="_body_9cf7b0"
+  class="_body_820528"
   data-state="open"
   id="radix-«r1l»"
   role="dialog"
@@ -160,7 +160,7 @@ exports[`Account home page > display name edit box > lets edit the display name
   tabindex="-1"
 >
   <h2
-    class="_title_9cf7b0"
+    class="_title_820528"
     id="radix-«r1m»"
   >
     Edit profile
@@ -179,7 +179,7 @@ exports[`Account home page > display name edit box > lets edit the display name
     class="_root_19upo_16"
   >
     <div
-      class="_dialogForm_66f22a"
+      class="_dialogForm_0d9d49"
     >
       <div
         class="_field_19upo_26"
@@ -274,7 +274,7 @@ exports[`Account home page > display name edit box > lets edit the display name
   </button>
   <button
     aria-labelledby="«r3j»"
-    class="_close_9cf7b0"
+    class="_close_820528"
     type="button"
   >
     <svg
@@ -295,7 +295,7 @@ exports[`Account home page > display name edit box > lets edit the display name
 exports[`Account home page > renders the page 1`] = `
 <DocumentFragment>
   <div
-    class="_layoutContainer_0c8bf9 _wide_0c8bf9"
+    class="_layoutContainer_4402d3 _wide_4402d3"
   >
     <div
       class="flex flex-col gap-10"
@@ -309,11 +309,11 @@ exports[`Account home page > renders the page 1`] = `
         class="flex flex-col gap-4"
       >
         <div
-          class="_user_66f22a"
+          class="_user_0d9d49"
         >
           <span
             aria-label="@alice:example.com"
-            class="_avatar_1qbcf_8 _avatar_66f22a _avatar-imageless_1qbcf_52"
+            class="_avatar_1qbcf_8 _avatar_0d9d49 _avatar-imageless_1qbcf_52"
             data-color="6"
             data-type="round"
             role="img"
@@ -322,7 +322,7 @@ exports[`Account home page > renders the page 1`] = `
             A
           </span>
           <div
-            class="_meta_66f22a"
+            class="_meta_0d9d49"
           >
             <p
               class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74"
@@ -330,7 +330,7 @@ exports[`Account home page > renders the page 1`] = `
               Alice
             </p>
             <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 _mxid_66f22a"
+              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 _mxid_0d9d49"
             >
               @alice:example.com
             </p>
@@ -340,7 +340,7 @@ exports[`Account home page > renders the page 1`] = `
             aria-expanded="false"
             aria-haspopup="dialog"
             aria-labelledby="«r3»"
-            class="_icon-button_m2erp_8 _editButton_66f22a"
+            class="_icon-button_m2erp_8 _editButton_0d9d49"
             data-state="closed"
             role="button"
             style="--cpd-icon-button-size: var(--cpd-space-6x);"
@@ -368,17 +368,17 @@ exports[`Account home page > renders the page 1`] = `
           </button>
         </div>
         <nav
-          class="_navBar_214497"
+          class="_navBar_6d152a"
         >
           <ul
-            class="_navBarItems_214497"
+            class="_navBarItems_6d152a"
           >
             <li
-              class="_navTab_8603fc"
+              class="_navTab_a2fe1e"
             >
               <a
                 aria-current="page"
-                class="_navItem_8603fc"
+                class="_navItem_a2fe1e"
                 data-status="active"
                 href="/"
               >
@@ -386,10 +386,10 @@ exports[`Account home page > renders the page 1`] = `
               </a>
             </li>
             <li
-              class="_navTab_8603fc"
+              class="_navTab_a2fe1e"
             >
               <a
-                class="_navItem_8603fc"
+                class="_navItem_a2fe1e"
                 href="/sessions"
               >
                 Devices
@@ -404,17 +404,17 @@ exports[`Account home page > renders the page 1`] = `
     >
       <section
         aria-labelledby="«r8»"
-        class="_root_f1daaa"
+        class="_root_a44bb3"
         data-state="open"
       >
         <header
-          class="_heading_f1daaa"
+          class="_heading_a44bb3"
         >
           <div
-            class="_trigger_f1daaa"
+            class="_trigger_a44bb3"
           >
             <h4
-              class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93 _triggerTitle_f1daaa"
+              class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93 _triggerTitle_a44bb3"
               id="«r8»"
             >
               Contact info
@@ -423,7 +423,7 @@ exports[`Account home page > renders the page 1`] = `
               aria-controls="radix-«ra»"
               aria-expanded="true"
               aria-labelledby="«rb»"
-              class="_icon-button_m2erp_8 _triggerIcon_f1daaa"
+              class="_icon-button_m2erp_8 _triggerIcon_a44bb3"
               data-state="open"
               role="button"
               style="--cpd-icon-button-size: 32px;"
@@ -450,7 +450,7 @@ exports[`Account home page > renders the page 1`] = `
           </div>
         </header>
         <article
-          class="_content_f1daaa"
+          class="_content_a44bb3"
           data-state="open"
           id="radix-«ra»"
           style="transition-duration: 0s; animation-name: none;"
@@ -471,7 +471,7 @@ exports[`Account home page > renders the page 1`] = `
                 class="flex items-center gap-2"
               >
                 <input
-                  class="_control_sqdq4_10 _userEmailField_e2a518"
+                  class="_control_sqdq4_10 _userEmailField_06c85d"
                   id="radix-«rj»"
                   name="email"
                   readonly=""
@@ -519,22 +519,22 @@ exports[`Account home page > renders the page 1`] = `
       </section>
       <div
         aria-orientation="horizontal"
-        class="_separator_162edc _section_162edc"
+        class="_separator_59a6a1 _section_59a6a1"
         role="separator"
       />
       <section
         aria-labelledby="«rp»"
-        class="_root_f1daaa"
+        class="_root_a44bb3"
         data-state="open"
       >
         <header
-          class="_heading_f1daaa"
+          class="_heading_a44bb3"
         >
           <div
-            class="_trigger_f1daaa"
+            class="_trigger_a44bb3"
           >
             <h4
-              class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93 _triggerTitle_f1daaa"
+              class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93 _triggerTitle_a44bb3"
               id="«rp»"
             >
               Account password
@@ -543,7 +543,7 @@ exports[`Account home page > renders the page 1`] = `
               aria-controls="radix-«rr»"
               aria-expanded="true"
               aria-labelledby="«rs»"
-              class="_icon-button_m2erp_8 _triggerIcon_f1daaa"
+              class="_icon-button_m2erp_8 _triggerIcon_a44bb3"
               data-state="open"
               role="button"
               style="--cpd-icon-button-size: 32px;"
@@ -570,7 +570,7 @@ exports[`Account home page > renders the page 1`] = `
           </div>
         </header>
         <article
-          class="_content_f1daaa"
+          class="_content_a44bb3"
           data-state="open"
           id="radix-«rr»"
           style="transition-duration: 0s; animation-name: none;"
@@ -602,7 +602,7 @@ exports[`Account home page > renders the page 1`] = `
                 id="radix-«r12»"
               >
                 <a
-                  class="_link_7634c3"
+                  class="_link_2a6fa3"
                   href="/password/change"
                 >
                   Change password
@@ -614,22 +614,22 @@ exports[`Account home page > renders the page 1`] = `
       </section>
       <div
         aria-orientation="horizontal"
-        class="_separator_162edc _section_162edc"
+        class="_separator_59a6a1 _section_59a6a1"
         role="separator"
       />
       <section
         aria-labelledby="«r13»"
-        class="_root_f1daaa"
+        class="_root_a44bb3"
         data-state="closed"
       >
         <header
-          class="_heading_f1daaa"
+          class="_heading_a44bb3"
         >
           <div
-            class="_trigger_f1daaa"
+            class="_trigger_a44bb3"
           >
             <h4
-              class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93 _triggerTitle_f1daaa"
+              class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93 _triggerTitle_a44bb3"
               id="«r13»"
             >
               End-to-end encryption
@@ -638,7 +638,7 @@ exports[`Account home page > renders the page 1`] = `
               aria-controls="radix-«r15»"
               aria-expanded="false"
               aria-labelledby="«r16»"
-              class="_icon-button_m2erp_8 _triggerIcon_f1daaa"
+              class="_icon-button_m2erp_8 _triggerIcon_a44bb3"
               data-state="closed"
               role="button"
               style="--cpd-icon-button-size: 32px;"
@@ -667,7 +667,7 @@ exports[`Account home page > renders the page 1`] = `
       </section>
       <div
         aria-orientation="horizontal"
-        class="_separator_162edc _section_162edc"
+        class="_separator_59a6a1 _section_59a6a1"
         role="separator"
       />
       <button
@@ -698,7 +698,7 @@ exports[`Account home page > renders the page 1`] = `
       </button>
       <div
         aria-orientation="horizontal"
-        class="_separator_162edc"
+        class="_separator_59a6a1"
         role="separator"
       />
       <button
@@ -729,12 +729,12 @@ exports[`Account home page > renders the page 1`] = `
       </button>
       <div
         aria-orientation="horizontal"
-        class="_separator_162edc"
+        class="_separator_59a6a1"
         role="separator"
       />
     </div>
     <footer
-      class="_legalFooter_eb428f"
+      class="_legalFooter_acfd2c"
     >
       <nav>
         <a
@@ -749,7 +749,7 @@ exports[`Account home page > renders the page 1`] = `
         </a>
         <div
           aria-hidden="true"
-          class="_separator_eb428f"
+          class="_separator_acfd2c"
         >
           •
         </div>
@@ -765,7 +765,7 @@ exports[`Account home page > renders the page 1`] = `
         </a>
       </nav>
       <p
-        class="_imprint_eb428f"
+        class="_imprint_acfd2c"
       >
         All Rights Reserved. The Super Chat name, logo and device are registered trade marks of BigCorp Ltd.
       </p>