diff --git a/frontend/.prettierignore b/frontend/.prettierignore
new file mode 100644
index 000000000..ef6d00ba2
--- /dev/null
+++ b/frontend/.prettierignore
@@ -0,0 +1,4 @@
+.storybook/locales.ts
+locales/*.json
+src/routeTree.gen.ts
+src/gql/*
diff --git a/frontend/index.html b/frontend/index.html
index d274775bd..5dc65ea88 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -16,14 +16,16 @@ limitations under the License.
 
 <!-- Must be kept in sync with templates/app.html -->
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>matrix-authentication-service</title>
     <script type="application/javascript">
-      window.APP_CONFIG = JSON.parse('{"root": "/account/", "graphqlEndpoint": "/graphql", "branding": {}}');
+      window.APP_CONFIG = JSON.parse(
+        '{"root": "/account/", "graphqlEndpoint": "/graphql", "branding": {}}',
+      );
       (function () {
         const query = window.matchMedia("(prefers-color-scheme: dark)");
         function handleChange(list) {
diff --git a/frontend/src/components/Block/Block.module.css b/frontend/src/components/Block/Block.module.css
index 4ce50d83e..87e63466b 100644
--- a/frontend/src/components/Block/Block.module.css
+++ b/frontend/src/components/Block/Block.module.css
@@ -14,13 +14,13 @@
  */
 
 .block {
-    width: 100%;
-    color: var(--cpd-color-text-primary);
-    padding-bottom: var(--cpd-space-5x);
+  width: 100%;
+  color: var(--cpd-color-text-primary);
+  padding-bottom: var(--cpd-space-5x);
 
-    &:last-child {
-        border-bottom: none;
-    }
+  &:last-child {
+    border-bottom: none;
+  }
 }
 
 .title {
diff --git a/frontend/src/components/BlockList/BlockList.module.css b/frontend/src/components/BlockList/BlockList.module.css
index e024ad39d..644deeec9 100644
--- a/frontend/src/components/BlockList/BlockList.module.css
+++ b/frontend/src/components/BlockList/BlockList.module.css
@@ -14,8 +14,8 @@
  */
 
 .block-list {
-    display: flex;
-    flex-direction: column;
-    align-content: flex-start;
-    gap: var(--cpd-space-8x);
+  display: flex;
+  flex-direction: column;
+  align-content: flex-start;
+  gap: var(--cpd-space-8x);
 }
diff --git a/frontend/src/components/Client/OAuth2ClientDetail.module.css b/frontend/src/components/Client/OAuth2ClientDetail.module.css
index a15e77063..3000727df 100644
--- a/frontend/src/components/Client/OAuth2ClientDetail.module.css
+++ b/frontend/src/components/Client/OAuth2ClientDetail.module.css
@@ -13,10 +13,10 @@
  * limitations under the License.
  */
 
- .header {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    gap: var(--cpd-space-2x);
+.header {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  gap: var(--cpd-space-2x);
 }
diff --git a/frontend/src/components/Dialog/Dialog.module.css b/frontend/src/components/Dialog/Dialog.module.css
index 0011bd29e..4203364d1 100644
--- a/frontend/src/components/Dialog/Dialog.module.css
+++ b/frontend/src/components/Dialog/Dialog.module.css
@@ -15,128 +15,133 @@
 
 .overlay,
 .scroll-container {
-    position: fixed;
-    inset: 0;
-    background: rgba(3 12 27 / 52.8%);
+  position: fixed;
+  inset: 0;
+  background: rgba(3 12 27 / 52.8%);
 }
 
 .scroll-container {
-    overflow-y: auto;
+  overflow-y: auto;
 }
 
 .container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 100svh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100svh;
 }
 
 .dialog {
-    /* To position the close icon */
-    position: relative;
-    margin: var(--cpd-space-4x);
-    min-width: 0;
-    flex: 0 1 520px;
+  /* To position the close icon */
+  position: relative;
+  margin: var(--cpd-space-4x);
+  min-width: 0;
+  flex: 0 1 520px;
 }
 
 .body {
-    display: flex;
-    flex-direction: column;
-    gap: var(--cpd-space-4x);
-    background: var(--cpd-color-bg-canvas-default);
+  display: flex;
+  flex-direction: column;
+  gap: var(--cpd-space-4x);
+  background: var(--cpd-color-bg-canvas-default);
 }
 
 .title {
-    font: var(--cpd-font-heading-md-semibold);
-    letter-spacing: var(--cpd-font-letter-spacing-heading-md);
-    color: var(--cpd-color-text-primary);
-    margin-block-start: var(--cpd-space-4x);
+  font: var(--cpd-font-heading-md-semibold);
+  letter-spacing: var(--cpd-font-letter-spacing-heading-md);
+  color: var(--cpd-color-text-primary);
+  margin-block-start: var(--cpd-space-4x);
 }
 
 .dialog .body {
-    padding: var(--cpd-space-4x) var(--cpd-space-10x) var(--cpd-space-10x);
+  padding: var(--cpd-space-4x) var(--cpd-space-10x) var(--cpd-space-10x);
 }
 
 .dialog .title {
-    /* This adds a padding to the title to make sure it overflows correctly
+  /* This adds a padding to the title to make sure it overflows correctly
      * and not behind the close button */
-    padding-inline-end: var(--cpd-space-7x);
+  padding-inline-end: var(--cpd-space-7x);
 }
 
 .dialog .close {
-    position: absolute;
-    inset-block-start: var(--cpd-space-7x);
-    inset-inline-end: var(--cpd-space-7x);
-    padding: var(--cpd-space-1x);
-    border-radius: var(--cpd-radius-pill-effect);
-    background: var(--cpd-color-bg-subtle-secondary);
-    color: var(--cpd-color-icon-secondary);
+  position: absolute;
+  inset-block-start: var(--cpd-space-7x);
+  inset-inline-end: var(--cpd-space-7x);
+  padding: var(--cpd-space-1x);
+  border-radius: var(--cpd-radius-pill-effect);
+  background: var(--cpd-color-bg-subtle-secondary);
+  color: var(--cpd-color-icon-secondary);
 
-    &>svg {
-        inline-size: var(--cpd-space-5x);
-        block-size: var(--cpd-space-5x);
-    }
+  & > svg {
+    inline-size: var(--cpd-space-5x);
+    block-size: var(--cpd-space-5x);
+  }
 
-    &:hover {
-        background: var(--cpd-color-bg-subtle-primary);
-        color: var(--cpd-color-icon-primary);
-    }
+  &:hover {
+    background: var(--cpd-color-bg-subtle-primary);
+    color: var(--cpd-color-icon-primary);
+  }
 }
 
 .drawer {
-    position: fixed;
-    background: var(--cpd-color-bg-canvas-default);
-    inset-block-end: 0;
-    inset-inline: 0;
+  position: fixed;
+  background: var(--cpd-color-bg-canvas-default);
+  inset-block-end: 0;
+  inset-inline: 0;
 
-    /* Cap the inline content size at 520px, filling the rest of the space with
+  /* Cap the inline content size at 520px, filling the rest of the space with
   padding */
-    padding-inline: max(0px, calc((100% - 520px) / 2));
-    border-start-start-radius: var(--border-radius);
-    border-start-end-radius: var(--border-radius);
-    display: flex;
-    flex-direction: column;
+  padding-inline: max(0px, calc((100% - 520px) / 2));
+  border-start-start-radius: var(--border-radius);
+  border-start-end-radius: var(--border-radius);
+  display: flex;
+  flex-direction: column;
 
-    /* Drawer comes in the Android style by default */
-    --border-radius: 28px;
-    --handle-block-size: 4px;
-    --handle-inline-size: 32px;
-    --handle-inset-block-start: var(--cpd-space-4x);
-    --handle-inset-block-end: 0px;
-    --content-inset-block-start: calc(var(--handle-inset-block-start) + var(--handle-block-size) + var(--handle-inset-block-end));
+  /* Drawer comes in the Android style by default */
+  --border-radius: 28px;
+  --handle-block-size: 4px;
+  --handle-inline-size: 32px;
+  --handle-inset-block-start: var(--cpd-space-4x);
+  --handle-inset-block-end: 0px;
+  --content-inset-block-start: calc(
+    var(--handle-inset-block-start) + var(--handle-block-size) +
+      var(--handle-inset-block-end)
+  );
 }
 
 .drawer[data-platform="ios"] {
-    --border-radius: 10px;
-    --handle-block-size: 5px;
-    --handle-inline-size: 36px;
-    --handle-inset-block-start: var(--cpd-space-1-5x);
-    --handle-inset-block-end: 1px;
+  --border-radius: 10px;
+  --handle-block-size: 5px;
+  --handle-inline-size: 36px;
+  --handle-inset-block-start: var(--cpd-space-1-5x);
+  --handle-inset-block-end: 1px;
 }
 
 .drawer .body {
-    padding-inline: var(--cpd-space-4x);
-    padding-block-start: calc(var(--content-inset-block-start) + var(--cpd-space-6x));
-    padding-block-end: var(--cpd-space-12x);
-    border-start-start-radius: var(--border-radius);
-    border-start-end-radius: var(--border-radius);
+  padding-inline: var(--cpd-space-4x);
+  padding-block-start: calc(
+    var(--content-inset-block-start) + var(--cpd-space-6x)
+  );
+  padding-block-end: var(--cpd-space-12x);
+  border-start-start-radius: var(--border-radius);
+  border-start-end-radius: var(--border-radius);
 
-    /* Even with overflow: auto, the content can still overflow at the corners
+  /* Even with overflow: auto, the content can still overflow at the corners
   where it meets with the curved border. A contain: paint fixes that. */
-    contain: paint;
-    overflow: auto;
-    scrollbar-width: none;
+  contain: paint;
+  overflow: auto;
+  scrollbar-width: none;
 
-    --cpd-separator-spacing: 0;
-    --cpd-separator-inset: var(--cpd-space-4x);
+  --cpd-separator-spacing: 0;
+  --cpd-separator-inset: var(--cpd-space-4x);
 }
 
 .drawer .body::before {
-    content: "";
-    position: absolute;
-    block-size: var(--handle-block-size);
-    inset-inline: calc((100% - var(--handle-inline-size)) / 2);
-    inset-block-start: var(--handle-inset-block-start);
-    background: var(--cpd-color-icon-secondary);
-    border-radius: var(--cpd-radius-pill-effect);
+  content: "";
+  position: absolute;
+  block-size: var(--handle-block-size);
+  inset-inline: calc((100% - var(--handle-inline-size)) / 2);
+  inset-block-start: var(--handle-inset-block-start);
+  background: var(--cpd-color-icon-secondary);
+  border-radius: var(--cpd-radius-pill-effect);
 }
diff --git a/frontend/src/components/ExternalLink/ExternalLink.module.css b/frontend/src/components/ExternalLink/ExternalLink.module.css
index e4a0f52bd..e4e70bbbd 100644
--- a/frontend/src/components/ExternalLink/ExternalLink.module.css
+++ b/frontend/src/components/ExternalLink/ExternalLink.module.css
@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
- .external-link {
-    /* override compound style */
-    color: var(--cpd-color-text-link-external) !important;
-}
\ No newline at end of file
+.external-link {
+  /* override compound style */
+  color: var(--cpd-color-text-link-external) !important;
+}
diff --git a/frontend/src/components/GenericError.module.css b/frontend/src/components/GenericError.module.css
index 22a34c9c7..f0bdc2e4e 100644
--- a/frontend/src/components/GenericError.module.css
+++ b/frontend/src/components/GenericError.module.css
@@ -14,9 +14,9 @@
  */
 
 .details {
-    font: var(--cpd-font-body-sm-regular);
-    background: var(--cpd-color-bg-critical-subtle);
-    border: 1px solid var(--cpd-color-border-critical-subtle);
-    padding: var(--cpd-space-4x);
-    text-align: initial;
+  font: var(--cpd-font-body-sm-regular);
+  background: var(--cpd-color-bg-critical-subtle);
+  border: 1px solid var(--cpd-color-border-critical-subtle);
+  padding: var(--cpd-space-4x);
+  text-align: initial;
 }
diff --git a/frontend/src/components/LoadingScreen/LoadingScreen.module.css b/frontend/src/components/LoadingScreen/LoadingScreen.module.css
index aa2706b54..83dfba13b 100644
--- a/frontend/src/components/LoadingScreen/LoadingScreen.module.css
+++ b/frontend/src/components/LoadingScreen/LoadingScreen.module.css
@@ -14,12 +14,12 @@
  */
 
 .loading-screen {
-    display: flex;
+  display: flex;
 
-    /* Fallback for browsers that do not support 100svh */
-    min-height: 100vh;
-    min-height: 100svh;
+  /* Fallback for browsers that do not support 100svh */
+  min-height: 100vh;
+  min-height: 100svh;
 
-    justify-content: center;
-    align-items: center;
+  justify-content: center;
+  align-items: center;
 }
diff --git a/frontend/src/components/LoadingSpinner/LoadingSpinner.module.css b/frontend/src/components/LoadingSpinner/LoadingSpinner.module.css
index 6ae0c12a7..26ff4e8e2 100644
--- a/frontend/src/components/LoadingSpinner/LoadingSpinner.module.css
+++ b/frontend/src/components/LoadingSpinner/LoadingSpinner.module.css
@@ -14,29 +14,29 @@
  */
 
 @keyframes spin {
-    to {
-        transform: rotate(360deg);
-    }
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 :root {
-    --size: var(--cpd-space-16x);
+  --size: var(--cpd-space-16x);
 }
 
 .inline {
-    display: inline;
-    margin-right: var(--cpd-space-4x);
-    
-    .loading-spinner-inner {
-        height: var(--cpd-space-4x);
-        width: var(--cpd-space-4x);
-    }
+  display: inline;
+  margin-right: var(--cpd-space-4x);
+
+  .loading-spinner-inner {
+    height: var(--cpd-space-4x);
+    width: var(--cpd-space-4x);
+  }
 }
 
 .loading-spinner-inner {
-    height: var(--cpd-space-16x);
-    width: var(--cpd-space-16x);
-    display: inline;
-    animation: spin 1s linear infinite;
-    fill: var(--cpd-color-icon-primary);
+  height: var(--cpd-space-16x);
+  width: var(--cpd-space-16x);
+  display: inline;
+  animation: spin 1s linear infinite;
+  fill: var(--cpd-color-icon-primary);
 }
diff --git a/frontend/src/components/NavBar/NavBar.module.css b/frontend/src/components/NavBar/NavBar.module.css
index 9e07c393a..f92d7e551 100644
--- a/frontend/src/components/NavBar/NavBar.module.css
+++ b/frontend/src/components/NavBar/NavBar.module.css
@@ -14,13 +14,13 @@
  */
 
 .nav-bar {
-    border-bottom: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
+  border-bottom: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
 }
 
 .nav-bar-items {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    gap: var(--cpd-space-3x);
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  gap: var(--cpd-space-3x);
 }
diff --git a/frontend/src/components/NavItem/NavItem.module.css b/frontend/src/components/NavItem/NavItem.module.css
index 2a53d58c3..2fd9f2ce9 100644
--- a/frontend/src/components/NavItem/NavItem.module.css
+++ b/frontend/src/components/NavItem/NavItem.module.css
@@ -14,57 +14,56 @@
  */
 
 .nav-tab {
-    padding: var(--cpd-space-4x) 0;
-    position: relative;
+  padding: var(--cpd-space-4x) 0;
+  position: relative;
 }
 
 /* Underline effect */
 .nav-tab::before {
-    content: "";
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 0;
-    border-radius: var(--cpd-radius-pill-effect) var(--cpd-radius-pill-effect) 0 0;
-    background-color: var(--cpd-color-bg-action-primary-rest);
-    transition: height 0.1s ease-in-out;
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 0;
+  border-radius: var(--cpd-radius-pill-effect) var(--cpd-radius-pill-effect) 0 0;
+  background-color: var(--cpd-color-bg-action-primary-rest);
+  transition: height 0.1s ease-in-out;
 }
 
 .nav-tab:has(.nav-item[aria-current="page"])::before {
-    /* This is not exactly right: designs says 3px, but there are no variables for that */
-    height: var(--cpd-border-width-4);
+  /* This is not exactly right: designs says 3px, but there are no variables for that */
+  height: var(--cpd-border-width-4);
 }
 
-
 .nav-item {
-    padding: var(--cpd-space-1x) var(--cpd-space-2x);
-    color: var(--cpd-color-text-secondary);
-    line-height: var(--cpd-space-6x);
-    border-radius: var(--cpd-radius-pill-effect);
-    border: transparent var(--cpd-border-width-2) solid;
+  padding: var(--cpd-space-1x) var(--cpd-space-2x);
+  color: var(--cpd-color-text-secondary);
+  line-height: var(--cpd-space-6x);
+  border-radius: var(--cpd-radius-pill-effect);
+  border: transparent var(--cpd-border-width-2) solid;
 }
 
 .nav-item.external-link {
-    text-decoration: underline;
-    color: var(--cpd-color-text-primary);
+  text-decoration: underline;
+  color: var(--cpd-color-text-primary);
 }
 
 .nav-item:hover {
-    color: var(--cpd-color-text-primary);
-    background-color: var(--cpd-color-bg-subtle-secondary);
+  color: var(--cpd-color-text-primary);
+  background-color: var(--cpd-color-bg-subtle-secondary);
 }
 
 .nav-item:active {
-    color: var(--cpd-color-text-primary);
-    background-color: var(--cpd-color-bg-subtle-primary);
+  color: var(--cpd-color-text-primary);
+  background-color: var(--cpd-color-bg-subtle-primary);
 }
 
 .nav-item:focus {
-    outline: none;
-    border-color: var(--cpd-color-border-focused);
+  outline: none;
+  border-color: var(--cpd-color-border-focused);
 }
 
 .nav-item[aria-current="page"] {
-    color: var(--cpd-color-text-primary);
+  color: var(--cpd-color-text-primary);
 }
diff --git a/frontend/src/components/PageHeading/PageHeading.module.css b/frontend/src/components/PageHeading/PageHeading.module.css
index 04b529b54..559934a57 100644
--- a/frontend/src/components/PageHeading/PageHeading.module.css
+++ b/frontend/src/components/PageHeading/PageHeading.module.css
@@ -14,71 +14,70 @@
  */
 
 .page-heading {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cpd-space-4x);
+
+  /* Layout already has 6x padding, and we need 10x */
+  margin-block-start: var(--cpd-space-4x);
+
+  & .icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    align-self: center;
+    height: var(--cpd-space-16x);
+    width: var(--cpd-space-16x);
+    padding: var(--cpd-space-2x);
+    background-color: var(--cpd-color-bg-subtle-secondary);
+    border-radius: var(--cpd-space-2x);
+
+    &.invalid {
+      background-color: var(--cpd-color-bg-critical-subtle);
+
+      & svg {
+        color: var(--cpd-color-icon-critical-primary);
+      }
+    }
+
+    &.success {
+      background-color: var(--cpd-color-bg-success-subtle);
+
+      & svg {
+        color: var(--cpd-color-icon-success-primary);
+      }
+    }
+
+    & svg {
+      height: var(--cpd-space-10x);
+      width: var(--cpd-space-10x);
+      color: var(--cpd-color-icon-secondary);
+    }
+  }
+
+  & .header {
     display: flex;
     flex-direction: column;
-    gap: var(--cpd-space-4x);
+    gap: var(--cpd-space-2x);
+    text-align: center;
 
-    /* Layout already has 6x padding, and we need 10x */
-    margin-block-start: var(--cpd-space-4x);
-
-    & .icon {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        align-self: center;
-        height: var(--cpd-space-16x);
-        width: var(--cpd-space-16x);
-        padding: var(--cpd-space-2x);
-        background-color: var(--cpd-color-bg-subtle-secondary);
-        border-radius: var(--cpd-space-2x);
-
-        &.invalid {
-            background-color: var(--cpd-color-bg-critical-subtle);
-
-            & svg {
-                color: var(--cpd-color-icon-critical-primary);
-            }
-        }
-
-        &.success {
-            background-color: var(--cpd-color-bg-success-subtle);
-
-            & svg {
-                color: var(--cpd-color-icon-success-primary);
-            }
-        }
-
-
-        & svg {
-            height: var(--cpd-space-10x);
-            width: var(--cpd-space-10x);
-            color: var(--cpd-color-icon-secondary);
-        }
+    & .title {
+      font: var(--cpd-font-heading-lg-semibold);
+      letter-spacing: var(--cpd-font-letter-spacing-heading-xl);
+      color: var(--cpd-color-text-primary);
     }
 
-    & .header {
-        display: flex;
-        flex-direction: column;
-        gap: var(--cpd-space-2x);
-        text-align: center;
+    & .text {
+      font: var(--cpd-font-body-lg-regular);
+      letter-spacing: var(--cpd-font-letter-spacing-body-lg);
+      color: var(--cpd-color-text-secondary);
+      text-wrap: balance;
 
-        & .title {
-            font: var(--cpd-font-heading-lg-semibold);
-            letter-spacing: var(--cpd-font-letter-spacing-heading-xl);
-            color: var(--cpd-color-text-primary);
-        }
-
-        & .text {
-            font: var(--cpd-font-body-lg-regular);
-            letter-spacing: var(--cpd-font-letter-spacing-body-lg);
-            color: var(--cpd-color-text-secondary);
-            text-wrap: balance;
-
-            & em {
-                font-style: normal;
-                color: var(--cpd-color-text-primary);
-            }
-        }
+      & em {
+        font-style: normal;
+        color: var(--cpd-color-text-primary);
+      }
     }
+  }
 }
diff --git a/frontend/src/components/Session/ClientAvatar.module.css b/frontend/src/components/Session/ClientAvatar.module.css
index 6bb66a982..966a4ba5b 100644
--- a/frontend/src/components/Session/ClientAvatar.module.css
+++ b/frontend/src/components/Session/ClientAvatar.module.css
@@ -14,10 +14,10 @@
  */
 
 .avatar {
-    object-fit: cover;
-    overflow: hidden;
-    aspect-ratio: 1 / 1;
-    width: var(--mas-avatar-size);
-    border-radius: 50%;
-    display: inline-block;
-}
\ No newline at end of file
+  object-fit: cover;
+  overflow: hidden;
+  aspect-ratio: 1 / 1;
+  width: var(--mas-avatar-size);
+  border-radius: 50%;
+  display: inline-block;
+}
diff --git a/frontend/src/components/Session/DeviceTypeIcon.module.css b/frontend/src/components/Session/DeviceTypeIcon.module.css
index c2340bfae..a12287d66 100644
--- a/frontend/src/components/Session/DeviceTypeIcon.module.css
+++ b/frontend/src/components/Session/DeviceTypeIcon.module.css
@@ -14,11 +14,11 @@
  */
 
 .device-type-icon {
-    color: var(--cpd-color-icon-secondary);
-    background-color: var(--cpd-color-bg-subtle-secondary);
-    box-sizing: content-box;
-    height: var(--cpd-space-6x);
-    width: var(--cpd-space-6x);
-    padding: var(--cpd-space-2x);
-    border-radius: var(--cpd-space-2x);
+  color: var(--cpd-color-icon-secondary);
+  background-color: var(--cpd-color-bg-subtle-secondary);
+  box-sizing: content-box;
+  height: var(--cpd-space-6x);
+  width: var(--cpd-space-6x);
+  padding: var(--cpd-space-2x);
+  border-radius: var(--cpd-space-2x);
 }
diff --git a/frontend/src/components/Session/LastActive.module.css b/frontend/src/components/Session/LastActive.module.css
index 009277598..b7475ef3b 100644
--- a/frontend/src/components/Session/LastActive.module.css
+++ b/frontend/src/components/Session/LastActive.module.css
@@ -14,5 +14,5 @@
  */
 
 .active {
-    color: var(--cpd-color-text-success-primary);
-}
\ No newline at end of file
+  color: var(--cpd-color-text-success-primary);
+}
diff --git a/frontend/src/components/SessionCard/SessionCard.module.css b/frontend/src/components/SessionCard/SessionCard.module.css
index ead3fe75a..ec24f4326 100644
--- a/frontend/src/components/SessionCard/SessionCard.module.css
+++ b/frontend/src/components/SessionCard/SessionCard.module.css
@@ -14,12 +14,12 @@
  */
 
 .session-card-root {
-    position: relative;
+  position: relative;
 }
 
 @media screen and (min-width: 768px) {
-    .session-card-root:has(.action) .session-card .card-header {
-        /* We can't exactly know the width of the action button,
+  .session-card-root:has(.action) .session-card .card-header {
+    /* We can't exactly know the width of the action button,
          * so we use a somewhat arbitrary safe value:
          *  - the button padding is 4x + 5x
          *  - the icon is 5x wide
@@ -28,13 +28,13 @@
          *
          *  Of course that depends on the translation, but it's a good start
          */
-        padding-inline-end: calc(var(--cpd-space-16x) + 10ch);
-    }
+    padding-inline-end: calc(var(--cpd-space-16x) + 10ch);
+  }
 }
 
 @media screen and (max-width: 767px) {
-    .session-card-root:has(.action) .session-card {
-        /* On small screen, the action button is at the bottom, and we can accurately
+  .session-card-root:has(.action) .session-card {
+    /* On small screen, the action button is at the bottom, and we can accurately
          * calculate the height of the button:
          *
          *  - the button padding is 1x + 1x
@@ -43,128 +43,131 @@
          *  - the 4x margin on top of the button
          *  - the regular 6x padding
          */
-        padding-block-end: calc(var(--cpd-space-9x) + var(--cpd-space-6x) + var(--cpd-space-6x));
-    }
+    padding-block-end: calc(
+      var(--cpd-space-9x) + var(--cpd-space-6x) + var(--cpd-space-6x)
+    );
+  }
 }
 
 .session-card {
+  display: flex;
+  gap: var(--cpd-space-4x);
+  flex-direction: column;
+  text-align: start;
+
+  border-radius: var(--cpd-space-4x);
+  background-color: var(--cpd-color-bg-canvas-default);
+  outline: 1px solid var(--cpd-color-border-interactive-secondary);
+  outline-offset: -1px;
+  box-shadow: 0px 1.2px 2.4px 0px rgba(0, 0, 0, 0.15);
+  padding: var(--cpd-space-6x);
+
+  &.disabled {
+    outline-color: var(--cpd-color-border-disabled);
+    background-color: var(--cpd-color-bg-canvas-disabled);
+    box-shadow: none;
+  }
+
+  &.compact {
+    box-shadow: none;
+    padding: var(--cpd-space-3x);
+  }
+
+  & .card-header {
     display: flex;
     gap: var(--cpd-space-4x);
-    flex-direction: column;
-    text-align: start;
+    align-items: center;
 
-    border-radius: var(--cpd-space-4x);
-    background-color: var(--cpd-color-bg-canvas-default);
-    outline: 1px solid var(--cpd-color-border-interactive-secondary);
-    outline-offset: -1px;
-    box-shadow: 0px 1.2px 2.4px 0px rgba(0, 0, 0, 0.15);
-    padding: var(--cpd-space-6x);
+    & .content {
+      display: flex;
+      flex-direction: column;
 
-    &.disabled {
-        outline-color: var(--cpd-color-border-disabled);
-        background-color: var(--cpd-color-bg-canvas-disabled);
-        box-shadow: none;
-    }
+      /* This makes sure it can shrink, and that the text doesn't overflow */
+      flex: 0 1 auto;
+      min-width: 0;
 
-    &.compact {
-        box-shadow: none;
-        padding: var(--cpd-space-3x);
-    }
+      &.auto div:first-child,
+      & .name {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        font: var(--cpd-font-body-md-semibold);
+        letter-spacing: var(--cpd-font-letter-spacing-body-md);
+        color: var(--cpd-color-text-primary);
+      }
 
-    & .card-header {
-        display: flex;
-        gap: var(--cpd-space-4x);
-        align-items: center;
+      &.auto div:not(:first-child),
+      & .client {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        font: var(--cpd-font-body-sm-regular);
+        letter-spacing: var(--cpd-font-letter-spacing-body-sm);
+        color: var(--cpd-color-text-secondary);
 
-        & .content {
-            display: flex;
-            flex-direction: column;
-
-            /* This makes sure it can shrink, and that the text doesn't overflow */
-            flex: 0 1 auto;
-            min-width: 0;
-
-            &.auto div:first-child,
-            & .name {
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-                font: var(--cpd-font-body-md-semibold);
-                letter-spacing: var(--cpd-font-letter-spacing-body-md);
-                color: var(--cpd-color-text-primary);
-            }
-
-            &.auto div:not(:first-child),
-            & .client {
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-                font: var(--cpd-font-body-sm-regular);
-                letter-spacing: var(--cpd-font-letter-spacing-body-sm);
-                color: var(--cpd-color-text-secondary);
-
-                & img {
-                    margin-inline-end: var(--cpd-space-1x);
-                }
-            }
+        & img {
+          margin-inline-end: var(--cpd-space-1x);
         }
+      }
+    }
+  }
+
+  & .metadata {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--cpd-space-4x) var(--cpd-space-10x);
+
+    & .key {
+      font: var(--cpd-font-body-sm-regular);
+      letter-spacing: var(--cpd-font-letter-spacing-body-sm);
+      color: var(--cpd-color-text-secondary);
     }
 
-    & .metadata {
-        display: flex;
-        flex-wrap: wrap;
-        gap: var(--cpd-space-4x) var(--cpd-space-10x);
-
-        & .key {
-            font: var(--cpd-font-body-sm-regular);
-            letter-spacing: var(--cpd-font-letter-spacing-body-sm);
-            color: var(--cpd-color-text-secondary);
-        }
-
-        & .value {
-            font: var(--cpd-font-body-md-regular);
-            letter-spacing: var(--cpd-font-letter-spacing-body-md);
-            color: var(--cpd-color-text-primary);
-        }
+    & .value {
+      font: var(--cpd-font-body-md-regular);
+      letter-spacing: var(--cpd-font-letter-spacing-body-md);
+      color: var(--cpd-color-text-primary);
     }
+  }
 }
 
 a.session-card:not(.disabled) {
-    transition-property: outline-color, box-shadow;
-    transition-duration: 0.1s;
-    transition-timing-function: linear;
+  transition-property: outline-color, box-shadow;
+  transition-duration: 0.1s;
+  transition-timing-function: linear;
 
-    &:hover,
-    &:focus-visible {
-        box-shadow: none;
-        outline: 2px solid var(--cpd-color-border-interactive-hovered);
-        outline-offset: -2px;
-    }
+  &:hover,
+  &:focus-visible {
+    box-shadow: none;
+    outline: 2px solid var(--cpd-color-border-interactive-hovered);
+    outline-offset: -2px;
+  }
 
-    &:focus-visible {
-        outline-color: var(--cpd-color-border-focused);
-    }
+  &:focus-visible {
+    outline-color: var(--cpd-color-border-focused);
+  }
 }
 
 .session-card-root {
-    @media screen and (min-width: 768px) {
-        .action {
-            position: absolute;
-            /* This padding creates a safe area for the action button */
-            padding: var(--cpd-space-6x) var(--cpd-space-6x) var(--cpd-space-2x) var(--cpd-space-2x);
-            inset-block-start: 0;
-            inset-inline-end: 0;
-        }
+  @media screen and (min-width: 768px) {
+    .action {
+      position: absolute;
+      /* This padding creates a safe area for the action button */
+      padding: var(--cpd-space-6x) var(--cpd-space-6x) var(--cpd-space-2x)
+        var(--cpd-space-2x);
+      inset-block-start: 0;
+      inset-inline-end: 0;
     }
+  }
 
-    @media screen and (max-width: 767px) {
-        .action {
-            display: flex;
-            flex-direction: column;
-            position: absolute;
-            padding: var(--cpd-space-6x);
-            inset-block-end: 0;
-            inset-inline: 0;
-        }
+  @media screen and (max-width: 767px) {
+    .action {
+      display: flex;
+      flex-direction: column;
+      position: absolute;
+      padding: var(--cpd-space-6x);
+      inset-block-end: 0;
+      inset-inline: 0;
     }
+  }
 }
diff --git a/frontend/src/components/SessionDetail/BrowserSessionDetail.module.css b/frontend/src/components/SessionDetail/BrowserSessionDetail.module.css
index 23b3f4ad5..a200fffbb 100644
--- a/frontend/src/components/SessionDetail/BrowserSessionDetail.module.css
+++ b/frontend/src/components/SessionDetail/BrowserSessionDetail.module.css
@@ -14,5 +14,5 @@
  */
 
 .current-badge {
-   align-self: flex-start;
-}
\ No newline at end of file
+  align-self: flex-start;
+}
diff --git a/frontend/src/components/SessionDetail/SessionHeader.module.css b/frontend/src/components/SessionDetail/SessionHeader.module.css
index 1c19e86a8..2f12aac52 100644
--- a/frontend/src/components/SessionDetail/SessionHeader.module.css
+++ b/frontend/src/components/SessionDetail/SessionHeader.module.css
@@ -14,39 +14,39 @@
  */
 
 .header {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    gap: var(--cpd-space-4x);
-    align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  gap: var(--cpd-space-4x);
+  align-items: center;
 }
 
 .back-button {
-    display: block;
-    inline-size: var(--cpd-space-7x);
-    block-size: var(--cpd-space-7x);
+  display: block;
+  inline-size: var(--cpd-space-7x);
+  block-size: var(--cpd-space-7x);
 
-    /* the icon is 0.75 the size of the button, so add padding to put it in the middle */
-    padding: var(--cpd-space-1x);
-    aspect-ratio: 1 / 1;
-    color: var(--cpd-color-icon-tertiary);
-    border: 0;
-    appearance: none;
-    cursor: pointer;
-    border-radius: 50%;
-    position: relative;
-    background-color: var(--cpd-color-bg-subtle-secondary);
-    line-height: 0px;
+  /* the icon is 0.75 the size of the button, so add padding to put it in the middle */
+  padding: var(--cpd-space-1x);
+  aspect-ratio: 1 / 1;
+  color: var(--cpd-color-icon-tertiary);
+  border: 0;
+  appearance: none;
+  cursor: pointer;
+  border-radius: 50%;
+  position: relative;
+  background-color: var(--cpd-color-bg-subtle-secondary);
+  line-height: 0px;
 }
 
 .back-button svg {
-    inline-size: var(--cpd-space-5x);
-    block-size: var(--cpd-space-5x);
+  inline-size: var(--cpd-space-5x);
+  block-size: var(--cpd-space-5x);
 }
 
 .back-button[aria-disabled="true"] {
-    color: var(--cpd-color-icon-disabled);
-    cursor: not-allowed;
+  color: var(--cpd-color-icon-disabled);
+  cursor: not-allowed;
 }
 
 /**
@@ -54,13 +54,13 @@
  */
 
 @media (hover) {
-    .back-button:not([aria-disabled="true"]):hover {
-        color: var(--cpd-color-icon-primary);
-        background: var(--cpd-color-bg-subtle-primary);
-    }
+  .back-button:not([aria-disabled="true"]):hover {
+    color: var(--cpd-color-icon-primary);
+    background: var(--cpd-color-bg-subtle-primary);
+  }
 }
 
 .back-button:not([aria-disabled="true"]):active {
-    color: var(--cpd-color-icon-primary);
-    background: var(--cpd-color-bg-subtle-primary);
+  color: var(--cpd-color-icon-primary);
+  background: var(--cpd-color-bg-subtle-primary);
 }
diff --git a/frontend/src/components/UserEmail/UserEmail.module.css b/frontend/src/components/UserEmail/UserEmail.module.css
index 36eaa295b..6fa41565a 100644
--- a/frontend/src/components/UserEmail/UserEmail.module.css
+++ b/frontend/src/components/UserEmail/UserEmail.module.css
@@ -50,7 +50,7 @@ button[disabled] .user-email-delete-icon {
   padding: var(--cpd-space-3x);
   font: var(--cpd-font-body-md-semibold);
 
-  &>svg {
+  & > svg {
     color: var(--cpd-color-icon-secondary);
     background-color: var(--cpd-color-bg-subtle-secondary);
     padding: var(--cpd-space-2x);
diff --git a/frontend/src/components/UserGreeting/UserGreeting.module.css b/frontend/src/components/UserGreeting/UserGreeting.module.css
index c7009199a..979fdee73 100644
--- a/frontend/src/components/UserGreeting/UserGreeting.module.css
+++ b/frontend/src/components/UserGreeting/UserGreeting.module.css
@@ -14,43 +14,43 @@
  */
 
 .user {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: var(--cpd-space-4x);
-    outline: 1px solid var(--cpd-color-gray-400);
-    outline-offset: -1px;
-    border-radius: var(--cpd-space-3x);
-    padding: var(--cpd-space-4x)
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--cpd-space-4x);
+  outline: 1px solid var(--cpd-color-gray-400);
+  outline-offset: -1px;
+  border-radius: var(--cpd-space-3x);
+  padding: var(--cpd-space-4x);
 }
 
 .meta {
-    flex: 1 1;
+  flex: 1 1;
 
-    /* Make sure the text properly truncates */
-    min-width: 0;
+  /* Make sure the text properly truncates */
+  min-width: 0;
 
-    & p {
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-    }
+  & p {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
 }
 
 .edit-button {
-    align-self: flex-start;
+  align-self: flex-start;
 }
 
 .mxid {
-    color: var(--cpd-color-text-secondary);
+  color: var(--cpd-color-text-secondary);
 }
 
 .dialog-form {
-    display: flex;
-    flex-direction: column;
-    gap: var(--cpd-space-4x);
-    align-self: center;
-    max-width: 378px;
-    width: 100%;
-    margin-block-end: var(--cpd-space-9x);
+  display: flex;
+  flex-direction: column;
+  gap: var(--cpd-space-4x);
+  align-self: center;
+  max-width: 378px;
+  width: 100%;
+  margin-block-end: var(--cpd-space-9x);
 }
diff --git a/frontend/src/components/UserProfile/EditInPlace.module.css b/frontend/src/components/UserProfile/EditInPlace.module.css
index 5c1fa3517..4afae9d29 100644
--- a/frontend/src/components/UserProfile/EditInPlace.module.css
+++ b/frontend/src/components/UserProfile/EditInPlace.module.css
@@ -14,60 +14,60 @@
  */
 
 .container {
-    display: flex;
-    gap: var(--cpd-space-2x);
+  display: flex;
+  gap: var(--cpd-space-2x);
 }
 
 button.save,
 button.cancel {
-    height: var(--cpd-space-9x);
-    width: var(--cpd-space-9x);
-    padding: calc(var(--cpd-space-2x) - 1px);
-    border-style: solid;
-    border-width: 1px;
-    border-radius: var(--cpd-radius-pill-effect);
-    transition-duration: 0.1s;
-    transition-property: color, background-color, border-color, box-shadow;
+  height: var(--cpd-space-9x);
+  width: var(--cpd-space-9x);
+  padding: calc(var(--cpd-space-2x) - 1px);
+  border-style: solid;
+  border-width: 1px;
+  border-radius: var(--cpd-radius-pill-effect);
+  transition-duration: 0.1s;
+  transition-property: color, background-color, border-color, box-shadow;
 
-    &>svg {
-        height: var(--cpd-space-5x);
-        width: var(--cpd-space-5x);
-    }
+  & > svg {
+    height: var(--cpd-space-5x);
+    width: var(--cpd-space-5x);
+  }
 }
 
 button.save {
-    background-color: var(--cpd-color-bg-action-primary-rest);
-    border-color: var(--cpd-color-bg-action-primary-rest);
-    color: var(--cpd-color-text-on-solid-primary);
+  background-color: var(--cpd-color-bg-action-primary-rest);
+  border-color: var(--cpd-color-bg-action-primary-rest);
+  color: var(--cpd-color-text-on-solid-primary);
 
-    &:hover {
-        background-color: var(--cpd-color-bg-action-primary-hovered);
-        border-color: var(--cpd-color-bg-action-primary-hovered);
-    }
+  &:hover {
+    background-color: var(--cpd-color-bg-action-primary-hovered);
+    border-color: var(--cpd-color-bg-action-primary-hovered);
+  }
 
-    &:active {
-        background-color: var(--cpd-color-bg-action-primary-pressed);
-        border-color: var(--cpd-color-bg-action-primary-pressed);
-    }
+  &:active {
+    background-color: var(--cpd-color-bg-action-primary-pressed);
+    border-color: var(--cpd-color-bg-action-primary-pressed);
+  }
 }
 
 button.cancel {
-    background-color: var(--cpd-color-bg-action-secondary-rest);
-    border-color: var(--cpd-color-border-interactive-secondary);
-    color: var(--cpd-color-icon-primary);
+  background-color: var(--cpd-color-bg-action-secondary-rest);
+  border-color: var(--cpd-color-border-interactive-secondary);
+  color: var(--cpd-color-icon-primary);
 
-    /** TODO: have the shadow in the design tokens */
-    box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);
+  /** TODO: have the shadow in the design tokens */
+  box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);
 
-    &:hover {
-        background-color: var(--cpd-color-bg-action-secondary-hovered);
-        border-color: var(--cpd-color-border-interactive-hovered);
-        box-shadow: none;
-    }
+  &:hover {
+    background-color: var(--cpd-color-bg-action-secondary-hovered);
+    border-color: var(--cpd-color-border-interactive-hovered);
+    box-shadow: none;
+  }
 
-    &:active {
-        background-color: var(--cpd-color-bg-action-secondary-pressed);
-        border-color: var(--cpd-color-border-interactive-hovered);
-        box-shadow: none;
-    }
+  &:active {
+    background-color: var(--cpd-color-bg-action-secondary-pressed);
+    border-color: var(--cpd-color-border-interactive-hovered);
+    box-shadow: none;
+  }
 }
diff --git a/frontend/src/components/UserSessionsOverview/BrowserSessionsOverview.module.css b/frontend/src/components/UserSessionsOverview/BrowserSessionsOverview.module.css
index b7a53fdc7..f8135776c 100644
--- a/frontend/src/components/UserSessionsOverview/BrowserSessionsOverview.module.css
+++ b/frontend/src/components/UserSessionsOverview/BrowserSessionsOverview.module.css
@@ -14,14 +14,14 @@
  */
 
 .session-list-block {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: flex-start;
-    gap: var(--cpd-space-1x);
- }
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--cpd-space-1x);
+}
 
 .session-list-block-info {
-    display: flex;
-    flex-direction: column;
- }
\ No newline at end of file
+  display: flex;
+  flex-direction: column;
+}
diff --git a/frontend/src/styles/cpd-checkbox-control.css b/frontend/src/styles/cpd-checkbox-control.css
index 49fa66fe6..6b8814acb 100644
--- a/frontend/src/styles/cpd-checkbox-control.css
+++ b/frontend/src/styles/cpd-checkbox-control.css
@@ -88,7 +88,8 @@
 }
 
 @media (hover) {
-  .cpd-checkbox-input:not([disabled], [readonly], :checked):hover + .cpd-checkbox-ui {
+  .cpd-checkbox-input:not([disabled], [readonly], :checked):hover
+    + .cpd-checkbox-ui {
     color: var(--cpd-color-icon-quaternary);
     border-color: var(--cpd-color-border-interactive-hovered);
 
@@ -96,22 +97,26 @@
     box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);
   }
 
-  .cpd-checkbox-input:not([disabled], [readonly]):checked:hover + .cpd-checkbox-ui {
+  .cpd-checkbox-input:not([disabled], [readonly]):checked:hover
+    + .cpd-checkbox-ui {
     border-color: var(--cpd-color-bg-action-primary-hovered);
     background: var(--cpd-color-bg-action-primary-hovered);
   }
 
-  .cpd-checkbox-input[data-invalid]:not([disabled], [readonly]):checked:hover + .cpd-checkbox-ui {
+  .cpd-checkbox-input[data-invalid]:not([disabled], [readonly]):checked:hover
+    + .cpd-checkbox-ui {
     border-color: var(--cpd-color-bg-critical-hovered);
     background: var(--cpd-color-bg-critical-hovered);
   }
 }
 
-.cpd-checkbox-input[data-invalid]:not([disabled], :checked, [readonly]) + .cpd-checkbox-ui {
+.cpd-checkbox-input[data-invalid]:not([disabled], :checked, [readonly])
+  + .cpd-checkbox-ui {
   border-color: var(--cpd-color-border-critical-primary);
 }
 
-.cpd-checkbox-input[data-invalid]:not([disabled], [readonly]):checked + .cpd-checkbox-ui {
+.cpd-checkbox-input[data-invalid]:not([disabled], [readonly]):checked
+  + .cpd-checkbox-ui {
   background-color: var(--cpd-color-bg-critical-primary);
   border-color: var(--cpd-color-bg-critical-primary);
 }
diff --git a/frontend/src/styles/cpd-link.css b/frontend/src/styles/cpd-link.css
index 17f29a635..159b0cb0f 100644
--- a/frontend/src/styles/cpd-link.css
+++ b/frontend/src/styles/cpd-link.css
@@ -50,4 +50,4 @@
 
 .cpd-link[data-kind="critical"]:active {
   background: var(--cpd-color-text-critical-primary);
-}
\ No newline at end of file
+}
diff --git a/frontend/src/styles/cpd-mfa-control.css b/frontend/src/styles/cpd-mfa-control.css
index 990345374..43d6b4206 100644
--- a/frontend/src/styles/cpd-mfa-control.css
+++ b/frontend/src/styles/cpd-mfa-control.css
@@ -68,7 +68,7 @@
 }
 
 @media (hover) {
-  .cpd-mfa-control:hover~.cpd-mfa-digit {
+  .cpd-mfa-control:hover ~ .cpd-mfa-digit {
     border-color: var(--cpd-color-border-interactive-hovered);
 
     /** TODO: have the shadow in the design tokens */
@@ -81,7 +81,7 @@
   cursor: not-allowed;
 }
 
-.cpd-mfa-control:disabled~.cpd-mfa-digit {
+.cpd-mfa-control:disabled ~ .cpd-mfa-digit {
   box-shadow: none;
   background: var(--cpd-color-bg-canvas-disabled);
   border-color: var(--cpd-color-border-disabled);
@@ -91,17 +91,17 @@
   color: var(--cpd-color-text-secondary);
 }
 
-.cpd-mfa-control[readonly]~.cpd-mfa-digit {
+.cpd-mfa-control[readonly] ~ .cpd-mfa-digit {
   box-shadow: none;
   background: var(--cpd-color-bg-subtle-secondary);
   border-color: var(--cpd-color-bg-subtle-secondary);
 }
 
-.cpd-mfa-control[data-invalid]~.cpd-mfa-digit {
+.cpd-mfa-control[data-invalid] ~ .cpd-mfa-digit {
   border-color: var(--cpd-color-text-critical-primary);
 }
 
-.cpd-mfa-control:focus~.cpd-mfa-digit:not([data-filled]) {
+.cpd-mfa-control:focus ~ .cpd-mfa-digit:not([data-filled]) {
   outline: 2px solid var(--cpd-color-border-focused);
   border-color: transparent;
 }
diff --git a/frontend/src/templates.css b/frontend/src/templates.css
index bfefc8299..58144b640 100644
--- a/frontend/src/templates.css
+++ b/frontend/src/templates.css
@@ -98,7 +98,7 @@
     flex-direction: column;
     gap: var(--cpd-space-1x);
 
-    &>li {
+    & > li {
       font: var(--cpd-font-body-md-regular);
       letter-spacing: var(--cpd-font-letter-spacing-body-md);
       color: var(--cpd-color-text-primary);
@@ -119,11 +119,11 @@
         border-bottom-right-radius: var(--border-radius);
       }
 
-      &>p {
+      & > p {
         flex: 1;
       }
 
-      &>svg {
+      & > svg {
         display: block;
         height: var(--cpd-space-6x);
         width: var(--cpd-space-6x);
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index eecbb01ab..fcd7628ef 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -2,11 +2,7 @@
   "compilerOptions": {
     "target": "ESNext",
     "useDefineForClassFields": true,
-    "lib": [
-      "DOM",
-      "DOM.Iterable",
-      "ESNext"
-    ],
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "types": ["vite/client", "vitest/importMeta"],
     "allowJs": false,
     "skipLibCheck": true,
@@ -21,11 +17,7 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": [
-    "src",
-    "locales",
-    ".storybook/preview.tsx"
-  ],
+  "include": ["src", "locales", ".storybook/preview.tsx"],
   "references": [
     {
       "path": "./tsconfig.node.json"
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index b2e01e115..00e2859f9 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -31,7 +31,7 @@ function i18nHotReload(): PluginOption {
     handleHotUpdate({ file, server }): void {
       if (file.includes("locales") && file.endsWith(".json")) {
         console.log("Locale file updated");
-        server.ws.send({
+        server.hot.send({
           type: "custom",
           event: "locales-update",
         });