Polish all forms and add nice page headings to most screens

2025-11-21 23:00:50 +03:00 · 2023-10-27 12:09:23 +02:00
parent 8984cc703b
commit a404398c2c
42 changed files with 1490 additions and 388 deletions
--- a/.editorconfig
+++ b/.editorconfig
@@ -4,7 +4,7 @@ root = true
 charset=utf-8
 end_of_line = lf

-[*.{ts,tsx}]
+[*.{ts,tsx,css}]
 indent_size = 2
 insert_final_newline = true
 trim_trailing_whitespace = true
--- a/crates/handlers/src/upstream_oauth2/link.rs
+++ b/crates/handlers/src/upstream_oauth2/link.rs
@@ -111,8 +111,8 @@ impl IntoResponse for RouteError {
                    .with_details(details);
                FancyError::new(ctx).into_response()
            }
-            Self::Internal(e) => (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()).into_response(),
-            e => (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()).into_response(),
+            Self::Internal(e) => FancyError::from(e).into_response(),
+            e => FancyError::from(e).into_response(),
        };

        (SentryEventID::from(event_id), response).into_response()
--- a/crates/templates/src/functions.rs
+++ b/crates/templates/src/functions.rs
@@ -21,7 +21,7 @@ use std::{
    collections::{BTreeSet, HashMap},
    fmt::Formatter,
    str::FromStr,
-    sync::Arc,
+    sync::{atomic::AtomicUsize, Arc},
 };

 use camino::Utf8Path;
@@ -49,6 +49,7 @@ pub fn register(
    env.add_filter("add_slashes", filter_add_slashes);
    env.add_filter("split", filter_split);
    env.add_function("add_params_to_url", function_add_params_to_url);
+    env.add_function("counter", || Ok(Value::from_object(Counter::default())));
    env.add_global(
        "include_asset",
        Value::from_object(IncludeAsset {
@@ -377,3 +378,45 @@ impl Object for IncludeAsset {
        Ok(Value::from_safe_string(tags.join("\n")))
    }
 }
+
+#[derive(Debug, Default)]
+struct Counter {
+    count: AtomicUsize,
+}
+
+impl std::fmt::Display for Counter {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        write!(
+            f,
+            "{}",
+            self.count.load(std::sync::atomic::Ordering::Relaxed)
+        )
+    }
+}
+
+impl Object for Counter {
+    fn call_method(&self, _state: &State, name: &str, args: &[Value]) -> Result<Value, Error> {
+        // None of the methods take any arguments
+        from_args::<()>(args)?;
+
+        match name {
+            "reset" => {
+                self.count.store(0, std::sync::atomic::Ordering::Relaxed);
+                Ok(Value::UNDEFINED)
+            }
+            "next" => {
+                let old = self
+                    .count
+                    .fetch_add(1, std::sync::atomic::Ordering::Relaxed);
+                Ok(Value::from(old))
+            }
+            "peek" => Ok(Value::from(
+                self.count.load(std::sync::atomic::Ordering::Relaxed),
+            )),
+            _ => Err(Error::new(
+                ErrorKind::InvalidOperation,
+                "Invalid method on counter",
+            )),
+        }
+    }
+}
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,6 +9,7 @@
      "version": "0.0.0",
      "dependencies": {
        "@emotion/react": "^11.11.1",
+        "@fontsource/inconsolata": "^5.0.15",
        "@fontsource/inter": "^5.0.15",
        "@radix-ui/react-alert-dialog": "^1.0.5",
        "@types/ua-parser-js": "^0.7.38",
@@ -18,7 +19,7 @@
        "@urql/exchange-refocus": "^1.0.2",
        "@urql/exchange-request-policy": "^1.0.2",
        "@vector-im/compound-design-tokens": "^0.0.6",
-        "@vector-im/compound-web": "^0.5.4",
+        "@vector-im/compound-web": "^0.6.0",
        "classnames": "^2.3.2",
        "date-fns": "^2.30.0",
        "graphql": "^16.8.1",
@@ -61,6 +62,7 @@
        "happy-dom": "^12.9.1",
        "i18next-parser": "^8.9.0",
        "postcss": "^8.4.31",
+        "postcss-modules": "^6.0.0",
        "prettier": "3.0.3",
        "react-test-renderer": "^18.2.0",
        "rimraf": "^5.0.5",
@@ -3179,6 +3181,11 @@
      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
      "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
    },
+    "node_modules/@fontsource/inconsolata": {
+      "version": "5.0.15",
+      "resolved": "https://registry.npmjs.org/@fontsource/inconsolata/-/inconsolata-5.0.15.tgz",
+      "integrity": "sha512-xqFvxBMaYvRSwam5oc7ofc80yvEMkYgrPOpqS9WL+FKTp0jEHCwYaWxHmyJyFcuDcKwo3EnrsAm000L3vS+vMw=="
+    },
    "node_modules/@fontsource/inter": {
      "version": "5.0.15",
      "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-5.0.15.tgz",
@@ -9448,9 +9455,9 @@
      }
    },
    "node_modules/@vector-im/compound-web": {
-      "version": "0.5.4",
-      "resolved": "https://registry.npmjs.org/@vector-im/compound-web/-/compound-web-0.5.4.tgz",
-      "integrity": "sha512-w4Nwzid5Y89Dt9GaxKO+kWPTjSitLpkmoAjMYHVUajNMCfUxluzu4eOgjPRCpubPH5lZUB6/95y43wOI+pEC1Q==",
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@vector-im/compound-web/-/compound-web-0.6.0.tgz",
+      "integrity": "sha512-eGbl3FofxR9hC2dCs531o/5DleKyh0ANY1v1C9cuF5kfBaQHwwt+e9tJoTqiVRDwH4widJ+o4tluDYEGIDGaHg==",
      "dependencies": {
        "@radix-ui/react-form": "^0.0.3",
        "@radix-ui/react-tooltip": "^1.0.6",
@@ -9458,6 +9465,7 @@
        "graphemer": "^1.4.0"
      },
      "peerDependencies": {
+        "@fontsource/inconsolata": "^5",
        "@fontsource/inter": "^5",
        "@types/react": "*",
        "@types/react-dom": "*",
@@ -15083,6 +15091,15 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/generic-names": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/generic-names/-/generic-names-4.0.0.tgz",
+      "integrity": "sha512-ySFolZQfw9FoDb3ed9d80Cm9f0+r7qj+HJkWjeD9RBfpxEVTlVhol+gvaQB/78WbwYfbnNh8nWHHBSlg072y6A==",
+      "dev": true,
+      "dependencies": {
+        "loader-utils": "^3.2.0"
+      }
+    },
    "node_modules/gensync": {
      "version": "1.0.0-beta.2",
      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -16355,6 +16372,18 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/icss-utils": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
+      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
+      "dev": true,
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
    "node_modules/ieee754": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -18169,6 +18198,15 @@
        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
      }
    },
+    "node_modules/loader-utils": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-3.2.1.tgz",
+      "integrity": "sha512-ZvFw1KWS3GVyYBYb7qkmRM/WwL2TQQBxgCK62rlvm4WpVQ23Nb4tYjApUlfjrEGvOs7KHEsmyUn75OHZrJMWPw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 12.13.0"
+      }
+    },
    "node_modules/local-pkg": {
      "version": "0.4.3",
      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.3.tgz",
@@ -18202,6 +18240,12 @@
      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
      "dev": true
    },
+    "node_modules/lodash.camelcase": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
+      "integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==",
+      "dev": true
+    },
    "node_modules/lodash.curry": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/lodash.curry/-/lodash.curry-4.1.1.tgz",
@@ -19775,6 +19819,84 @@
        }
      }
    },
+    "node_modules/postcss-modules": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules/-/postcss-modules-6.0.0.tgz",
+      "integrity": "sha512-7DGfnlyi/ju82BRzTIjWS5C4Tafmzl3R79YP/PASiocj+aa6yYphHhhKUOEoXQToId5rgyFgJ88+ccOUydjBXQ==",
+      "dev": true,
+      "dependencies": {
+        "generic-names": "^4.0.0",
+        "icss-utils": "^5.1.0",
+        "lodash.camelcase": "^4.3.0",
+        "postcss-modules-extract-imports": "^3.0.0",
+        "postcss-modules-local-by-default": "^4.0.0",
+        "postcss-modules-scope": "^3.0.0",
+        "postcss-modules-values": "^4.0.0",
+        "string-hash": "^1.1.1"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-modules-extract-imports": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
+      "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
+      "dev": true,
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-modules-local-by-default": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.3.tgz",
+      "integrity": "sha512-2/u2zraspoACtrbFRnTijMiQtb4GW4BvatjaG/bCjYQo8kLTdevCUlwuBHx2sCnSyrI3x3qj4ZK1j5LQBgzmwA==",
+      "dev": true,
+      "dependencies": {
+        "icss-utils": "^5.0.0",
+        "postcss-selector-parser": "^6.0.2",
+        "postcss-value-parser": "^4.1.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-modules-scope": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz",
+      "integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==",
+      "dev": true,
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.4"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-modules-values": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
+      "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
+      "dev": true,
+      "dependencies": {
+        "icss-utils": "^5.0.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
    "node_modules/postcss-nested": {
      "version": "6.0.1",
      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
@@ -21805,6 +21927,12 @@
      "integrity": "sha512-78lwMoCcn0nNu8LszbP1UA7g55OeE4v7rCeWnM5B453rnNr4aq+5it3FEYtZrSEiMvHZOZ9Jlqb0OD0M2VInqg==",
      "dev": true
    },
+    "node_modules/string-hash": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/string-hash/-/string-hash-1.1.3.tgz",
+      "integrity": "sha512-kJUvRUFK49aub+a7T1nNE66EJbZBMnBgoC1UbCZ5n6bsZKBRga4KgBRTMn/pFkeCZSYtNeSyMxPDM0AXWELk2A==",
+      "dev": true
+    },
    "node_modules/string-natural-compare": {
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/string-natural-compare/-/string-natural-compare-3.0.1.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,6 +17,7 @@
  },
  "dependencies": {
    "@emotion/react": "^11.11.1",
+    "@fontsource/inconsolata": "^5.0.15",
    "@fontsource/inter": "^5.0.15",
    "@radix-ui/react-alert-dialog": "^1.0.5",
    "@types/ua-parser-js": "^0.7.38",
@@ -26,7 +27,7 @@
    "@urql/exchange-refocus": "^1.0.2",
    "@urql/exchange-request-policy": "^1.0.2",
    "@vector-im/compound-design-tokens": "^0.0.6",
-    "@vector-im/compound-web": "^0.5.4",
+    "@vector-im/compound-web": "^0.6.0",
    "classnames": "^2.3.2",
    "date-fns": "^2.30.0",
    "graphql": "^16.8.1",
@@ -69,6 +70,7 @@
    "happy-dom": "^12.9.1",
    "i18next-parser": "^8.9.0",
    "postcss": "^8.4.31",
+    "postcss-modules": "^6.0.0",
    "prettier": "3.0.3",
    "react-test-renderer": "^18.2.0",
    "rimraf": "^5.0.5",
--- a/frontend/src/components/ConfirmationModal/snapshots/ConfirmationModal.test.tsx.snap
+++ b/frontend/src/components/ConfirmationModal/snapshots/ConfirmationModal.test.tsx.snap
@@ -25,7 +25,7 @@ exports[`<ConfirmationModal /> > opens modal on clicking trigger 1`] = `
    class="_buttons_6bc2cb"
  >
    <button
-      class="_button_1ukgx_17"
+      class="_button_1t47t_17"
      data-kind="tertiary"
      data-size="sm"
      role="button"
@@ -35,7 +35,7 @@ exports[`<ConfirmationModal /> > opens modal on clicking trigger 1`] = `
      Cancel
    </button>
    <button
-      class="_button_1ukgx_17"
+      class="_button_1t47t_17"
      data-kind="destructive"
      data-size="sm"
      role="button"
--- a/frontend/src/components/Footer/Footer.module.css
+++ b/frontend/src/components/Footer/Footer.module.css
@@ -17,6 +17,7 @@
  display: flex;
  flex-direction: column;
  gap: var(--cpd-space-2x);
+  margin-block-start: auto;

  font: var(--cpd-font-body-sm-regular);
  letter-spacing: var(--cpd-font-letter-spacing-body-sm);
--- a/frontend/src/components/Layout/Layout.module.css
+++ b/frontend/src/components/Layout/Layout.module.css
@@ -18,9 +18,17 @@
  display: flex;
  flex-direction: column;

-  max-width: calc(420px + var(--cpd-space-6x) * 2);
+  max-width: calc(420px + var(--cpd-space-5x) * 2);
  min-height: 100vh;
  margin: 0 auto;
-  padding: var(--cpd-space-6x);
-  gap: var(--cpd-space-6x);
+  padding-inline: var(--cpd-space-5x);
+  padding-block: var(--cpd-space-12x);
+  gap: var(--cpd-space-8x);
+}
+
+@media screen and (min-width: 768px) {
+  .layout-container {
+    padding-block-start: var(--cpd-space-20x);
+    padding-block-end: var(--cpd-space-10x);
+  }
 }
--- a/frontend/src/components/Layout/snapshots/Layout.test.tsx.snap
+++ b/frontend/src/components/Layout/snapshots/Layout.test.tsx.snap
--- a/frontend/src/components/Session/SelectableSession.tsx
+++ b/frontend/src/components/Session/SelectableSession.tsx
@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.

-import { Checkbox } from "@vector-im/compound-web";
+import { CheckboxInput } from "@vector-im/compound-web";
 import { useTranslation } from "react-i18next";

 import styles from "./SelectableSession.module.css";
@@ -33,9 +33,8 @@ const SelectableSession: React.FC<React.PropsWithChildren<Props>> = ({
  const { t } = useTranslation();
  return (
    <div className={styles.selectableSession}>
-      <Checkbox
+      <CheckboxInput
        className={styles.checkbox}
-        kind="primary"
        onChange={onSelect}
        aria-label={t("frontend.selectable_session.label")}
        checked={isSelected}
--- a/frontend/src/components/Session/snapshots/DeviceTypeIcon.test.tsx.snap
+++ b/frontend/src/components/Session/snapshots/DeviceTypeIcon.test.tsx.snap
@@ -73,7 +73,7 @@ exports[`<DeviceTypeIcon /> > renders unknown device type 1`] = `
      fill="currentColor"
    />
    <path
-      d="M11 10C11 9.44772 11.4477 9 12 9C12.5523 9 13 9.44772 13 10C13 10.3772 12.7915 10.7072 12.4788 10.8784C12.1685 11.0482 11.8204 11.2907 11.5387 11.6191C11.2528 11.9526 11 12.4196 11 13C11 13.5523 11.4477 14 12 14C12.5502 14 12.9966 13.5556 13 13.0062C13.0038 12.9954 13.017 12.9676 13.0569 12.9211C13.1336 12.8316 13.265 12.7281 13.4392 12.6327C14.3671 12.1247 15 11.137 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 10.5523 9.44772 11 10 11C10.5523 11 11 10.5523 11 10ZM12.9986 13.0115C12.9986 13.0115 12.9992 13.0101 12.9996 13.0074L12.9986 13.0115Z"
+      d="M11 10C11 9.44772 11.4477 9 12 9C12.5523 9 13 9.44772 13 10C13 10.3772 12.7915 10.7072 12.4788 10.8784C12.1685 11.0482 11.8204 11.2907 11.5387 11.6191C11.2528 11.9526 11 12.4196 11 13C11 13.5523 11.4477 14 12 14C12.5502 14 12.9966 13.5556 13 13.0062C13.0038 12.9954 13.017 12.9676 13.0569 12.9211C13.1336 12.8316 13.265 12.7281 13.4392 12.6327C14.3671 12.1247 15 11.137 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 10.5523 9.44772 11 10 11C10.5523 11 11 10.5523 11 10ZM12.9986 13.0115V13.0115C12.9986 13.0115 12.9992 13.0101 12.9996 13.0074L12.9986 13.0115Z"
      fill="currentColor"
    />
    <path
--- a/frontend/src/components/Session/snapshots/SelectableSession.test.tsx.snap
+++ b/frontend/src/components/Session/snapshots/SelectableSession.test.tsx.snap
@@ -6,18 +6,19 @@ exports[`<SelectableSession /> > renders an unselected session 1`] = `
    class="_selectableSession_3b8f53"
  >
    <div
-      class="_checkbox_1q844_17 _checkbox_3b8f53"
-      data-kind="primary"
+      class="_container_1jek6_18 _checkbox_3b8f53"
    >
      <input
        aria-label="Select session"
+        class="_input_1jek6_26"
        type="checkbox"
      />
      <div
-        class="_checkbox-ui_1q844_37"
+        class="_ui_1jek6_27"
      >
        <svg
          aria-hidden="true"
+          class="cpd-icon"
          fill="none"
          height="1em"
          viewBox="0 0 24 24"
--- a/frontend/src/components/Session/snapshots/Session.test.tsx.snap
+++ b/frontend/src/components/Session/snapshots/Session.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`<Session /> > renders a finished session 1`] = `
      fill="currentColor"
    />
    <path
-      d="M11 10C11 9.44772 11.4477 9 12 9C12.5523 9 13 9.44772 13 10C13 10.3772 12.7915 10.7072 12.4788 10.8784C12.1685 11.0482 11.8204 11.2907 11.5387 11.6191C11.2528 11.9526 11 12.4196 11 13C11 13.5523 11.4477 14 12 14C12.5502 14 12.9966 13.5556 13 13.0062C13.0038 12.9954 13.017 12.9676 13.0569 12.9211C13.1336 12.8316 13.265 12.7281 13.4392 12.6327C14.3671 12.1247 15 11.137 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 10.5523 9.44772 11 10 11C10.5523 11 11 10.5523 11 10ZM12.9986 13.0115C12.9986 13.0115 12.9992 13.0101 12.9996 13.0074L12.9986 13.0115Z"
+      d="M11 10C11 9.44772 11.4477 9 12 9C12.5523 9 13 9.44772 13 10C13 10.3772 12.7915 10.7072 12.4788 10.8784C12.1685 11.0482 11.8204 11.2907 11.5387 11.6191C11.2528 11.9526 11 12.4196 11 13C11 13.5523 11.4477 14 12 14C12.5502 14 12.9966 13.5556 13 13.0062C13.0038 12.9954 13.017 12.9676 13.0569 12.9211C13.1336 12.8316 13.265 12.7281 13.4392 12.6327C14.3671 12.1247 15 11.137 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 10.5523 9.44772 11 10 11C10.5523 11 11 10.5523 11 10ZM12.9986 13.0115V13.0115C12.9986 13.0115 12.9992 13.0101 12.9996 13.0074L12.9986 13.0115Z"
      fill="currentColor"
    />
    <path
@@ -78,7 +78,7 @@ exports[`<Session /> > renders an active session 1`] = `
      fill="currentColor"
    />
    <path
-      d="M11 10C11 9.44772 11.4477 9 12 9C12.5523 9 13 9.44772 13 10C13 10.3772 12.7915 10.7072 12.4788 10.8784C12.1685 11.0482 11.8204 11.2907 11.5387 11.6191C11.2528 11.9526 11 12.4196 11 13C11 13.5523 11.4477 14 12 14C12.5502 14 12.9966 13.5556 13 13.0062C13.0038 12.9954 13.017 12.9676 13.0569 12.9211C13.1336 12.8316 13.265 12.7281 13.4392 12.6327C14.3671 12.1247 15 11.137 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 10.5523 9.44772 11 10 11C10.5523 11 11 10.5523 11 10ZM12.9986 13.0115C12.9986 13.0115 12.9992 13.0101 12.9996 13.0074L12.9986 13.0115Z"
+      d="M11 10C11 9.44772 11.4477 9 12 9C12.5523 9 13 9.44772 13 10C13 10.3772 12.7915 10.7072 12.4788 10.8784C12.1685 11.0482 11.8204 11.2907 11.5387 11.6191C11.2528 11.9526 11 12.4196 11 13C11 13.5523 11.4477 14 12 14C12.5502 14 12.9966 13.5556 13 13.0062C13.0038 12.9954 13.017 12.9676 13.0569 12.9211C13.1336 12.8316 13.265 12.7281 13.4392 12.6327C14.3671 12.1247 15 11.137 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 10.5523 9.44772 11 10 11C10.5523 11 11 10.5523 11 10ZM12.9986 13.0115V13.0115C12.9986 13.0115 12.9992 13.0101 12.9996 13.0074L12.9986 13.0115Z"
      fill="currentColor"
    />
    <path
@@ -127,7 +127,7 @@ exports[`<Session /> > renders ip address 1`] = `
      fill="currentColor"
    />
    <path
-      d="M11 10C11 9.44772 11.4477 9 12 9C12.5523 9 13 9.44772 13 10C13 10.3772 12.7915 10.7072 12.4788 10.8784C12.1685 11.0482 11.8204 11.2907 11.5387 11.6191C11.2528 11.9526 11 12.4196 11 13C11 13.5523 11.4477 14 12 14C12.5502 14 12.9966 13.5556 13 13.0062C13.0038 12.9954 13.017 12.9676 13.0569 12.9211C13.1336 12.8316 13.265 12.7281 13.4392 12.6327C14.3671 12.1247 15 11.137 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 10.5523 9.44772 11 10 11C10.5523 11 11 10.5523 11 10ZM12.9986 13.0115C12.9986 13.0115 12.9992 13.0101 12.9996 13.0074L12.9986 13.0115Z"
+      d="M11 10C11 9.44772 11.4477 9 12 9C12.5523 9 13 9.44772 13 10C13 10.3772 12.7915 10.7072 12.4788 10.8784C12.1685 11.0482 11.8204 11.2907 11.5387 11.6191C11.2528 11.9526 11 12.4196 11 13C11 13.5523 11.4477 14 12 14C12.5502 14 12.9966 13.5556 13 13.0062C13.0038 12.9954 13.017 12.9676 13.0569 12.9211C13.1336 12.8316 13.265 12.7281 13.4392 12.6327C14.3671 12.1247 15 11.137 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 10.5523 9.44772 11 10 11C10.5523 11 11 10.5523 11 10ZM12.9986 13.0115V13.0115C12.9986 13.0115 12.9992 13.0101 12.9996 13.0074L12.9986 13.0115Z"
      fill="currentColor"
    />
    <path
@@ -202,7 +202,7 @@ exports[`<Session /> > uses client name when truthy 1`] = `
      fill="currentColor"
    />
    <path
-      d="M11 10C11 9.44772 11.4477 9 12 9C12.5523 9 13 9.44772 13 10C13 10.3772 12.7915 10.7072 12.4788 10.8784C12.1685 11.0482 11.8204 11.2907 11.5387 11.6191C11.2528 11.9526 11 12.4196 11 13C11 13.5523 11.4477 14 12 14C12.5502 14 12.9966 13.5556 13 13.0062C13.0038 12.9954 13.017 12.9676 13.0569 12.9211C13.1336 12.8316 13.265 12.7281 13.4392 12.6327C14.3671 12.1247 15 11.137 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 10.5523 9.44772 11 10 11C10.5523 11 11 10.5523 11 10ZM12.9986 13.0115C12.9986 13.0115 12.9992 13.0101 12.9996 13.0074L12.9986 13.0115Z"
+      d="M11 10C11 9.44772 11.4477 9 12 9C12.5523 9 13 9.44772 13 10C13 10.3772 12.7915 10.7072 12.4788 10.8784C12.1685 11.0482 11.8204 11.2907 11.5387 11.6191C11.2528 11.9526 11 12.4196 11 13C11 13.5523 11.4477 14 12 14C12.5502 14 12.9966 13.5556 13 13.0062C13.0038 12.9954 13.017 12.9676 13.0569 12.9211C13.1336 12.8316 13.265 12.7281 13.4392 12.6327C14.3671 12.1247 15 11.137 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 10.5523 9.44772 11 10 11C10.5523 11 11 10.5523 11 10ZM12.9986 13.0115V13.0115C12.9986 13.0115 12.9992 13.0101 12.9996 13.0074L12.9986 13.0115Z"
      fill="currentColor"
    />
    <path
@@ -283,7 +283,7 @@ exports[`<Session /> > uses session name when truthy 1`] = `
      fill="currentColor"
    />
    <path
-      d="M11 10C11 9.44772 11.4477 9 12 9C12.5523 9 13 9.44772 13 10C13 10.3772 12.7915 10.7072 12.4788 10.8784C12.1685 11.0482 11.8204 11.2907 11.5387 11.6191C11.2528 11.9526 11 12.4196 11 13C11 13.5523 11.4477 14 12 14C12.5502 14 12.9966 13.5556 13 13.0062C13.0038 12.9954 13.017 12.9676 13.0569 12.9211C13.1336 12.8316 13.265 12.7281 13.4392 12.6327C14.3671 12.1247 15 11.137 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 10.5523 9.44772 11 10 11C10.5523 11 11 10.5523 11 10ZM12.9986 13.0115C12.9986 13.0115 12.9992 13.0101 12.9996 13.0074L12.9986 13.0115Z"
+      d="M11 10C11 9.44772 11.4477 9 12 9C12.5523 9 13 9.44772 13 10C13 10.3772 12.7915 10.7072 12.4788 10.8784C12.1685 11.0482 11.8204 11.2907 11.5387 11.6191C11.2528 11.9526 11 12.4196 11 13C11 13.5523 11.4477 14 12 14C12.5502 14 12.9966 13.5556 13 13.0062C13.0038 12.9954 13.017 12.9676 13.0569 12.9211C13.1336 12.8316 13.265 12.7281 13.4392 12.6327C14.3671 12.1247 15 11.137 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 10.5523 9.44772 11 10 11C10.5523 11 11 10.5523 11 10ZM12.9986 13.0115V13.0115C12.9986 13.0115 12.9992 13.0101 12.9996 13.0074L12.9986 13.0115Z"
      fill="currentColor"
    />
    <path
--- a/frontend/src/components/SessionDetail/snapshots/CompatSessionDetail.test.tsx.snap
+++ b/frontend/src/components/SessionDetail/snapshots/CompatSessionDetail.test.tsx.snap
@@ -183,7 +183,7 @@ exports[`<CompatSessionDetail> > renders a compatability session details 1`] = `
      aria-controls="radix-:r0:"
      aria-expanded="false"
      aria-haspopup="dialog"
-      class="_button_1ukgx_17"
+      class="_button_1t47t_17"
      data-kind="destructive"
      data-size="sm"
      data-state="closed"
@@ -331,7 +331,7 @@ exports[`<CompatSessionDetail> > renders a compatability session without an ssoL
      aria-controls="radix-:r3:"
      aria-expanded="false"
      aria-haspopup="dialog"
-      class="_button_1ukgx_17"
+      class="_button_1t47t_17"
      data-kind="destructive"
      data-size="sm"
      data-state="closed"
--- a/frontend/src/components/SessionDetail/snapshots/OAuth2SessionDetail.test.tsx.snap
+++ b/frontend/src/components/SessionDetail/snapshots/OAuth2SessionDetail.test.tsx.snap
@@ -225,7 +225,7 @@ exports[`<OAuth2SessionDetail> > renders session details 1`] = `
      aria-controls="radix-:r0:"
      aria-expanded="false"
      aria-haspopup="dialog"
-      class="_button_1ukgx_17"
+      class="_button_1t47t_17"
      data-kind="destructive"
      data-size="sm"
      data-state="closed"
--- a/frontend/src/components/SessionList/snapshots/SessionListHeader.test.tsx.snap
+++ b/frontend/src/components/SessionList/snapshots/SessionListHeader.test.tsx.snap
@@ -32,7 +32,7 @@ exports[`<SessionListHeader /> > renders a header with actions 1`] = `
        Apps
      </h5>
      <button
-        class="_button_1ukgx_17"
+        class="_button_1t47t_17"
        data-kind="destructive"
        data-size="sm"
        role="button"
--- a/frontend/src/components/snapshots/CompatSession.test.tsx.snap
+++ b/frontend/src/components/snapshots/CompatSession.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`<CompatSession /> > renders a finished session 1`] = `
      fill="currentColor"
    />
    <path
-      d="M11 10C11 9.44772 11.4477 9 12 9C12.5523 9 13 9.44772 13 10C13 10.3772 12.7915 10.7072 12.4788 10.8784C12.1685 11.0482 11.8204 11.2907 11.5387 11.6191C11.2528 11.9526 11 12.4196 11 13C11 13.5523 11.4477 14 12 14C12.5502 14 12.9966 13.5556 13 13.0062C13.0038 12.9954 13.017 12.9676 13.0569 12.9211C13.1336 12.8316 13.265 12.7281 13.4392 12.6327C14.3671 12.1247 15 11.137 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 10.5523 9.44772 11 10 11C10.5523 11 11 10.5523 11 10ZM12.9986 13.0115C12.9986 13.0115 12.9992 13.0101 12.9996 13.0074L12.9986 13.0115Z"
+      d="M11 10C11 9.44772 11.4477 9 12 9C12.5523 9 13 9.44772 13 10C13 10.3772 12.7915 10.7072 12.4788 10.8784C12.1685 11.0482 11.8204 11.2907 11.5387 11.6191C11.2528 11.9526 11 12.4196 11 13C11 13.5523 11.4477 14 12 14C12.5502 14 12.9966 13.5556 13 13.0062C13.0038 12.9954 13.017 12.9676 13.0569 12.9211C13.1336 12.8316 13.265 12.7281 13.4392 12.6327C14.3671 12.1247 15 11.137 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 10.5523 9.44772 11 10 11C10.5523 11 11 10.5523 11 10ZM12.9986 13.0115V13.0115C12.9986 13.0115 12.9992 13.0101 12.9996 13.0074L12.9986 13.0115Z"
      fill="currentColor"
    />
    <path
@@ -99,7 +99,7 @@ exports[`<CompatSession /> > renders an active session 1`] = `
      fill="currentColor"
    />
    <path
-      d="M11 10C11 9.44772 11.4477 9 12 9C12.5523 9 13 9.44772 13 10C13 10.3772 12.7915 10.7072 12.4788 10.8784C12.1685 11.0482 11.8204 11.2907 11.5387 11.6191C11.2528 11.9526 11 12.4196 11 13C11 13.5523 11.4477 14 12 14C12.5502 14 12.9966 13.5556 13 13.0062C13.0038 12.9954 13.017 12.9676 13.0569 12.9211C13.1336 12.8316 13.265 12.7281 13.4392 12.6327C14.3671 12.1247 15 11.137 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 10.5523 9.44772 11 10 11C10.5523 11 11 10.5523 11 10ZM12.9986 13.0115C12.9986 13.0115 12.9992 13.0101 12.9996 13.0074L12.9986 13.0115Z"
+      d="M11 10C11 9.44772 11.4477 9 12 9C12.5523 9 13 9.44772 13 10C13 10.3772 12.7915 10.7072 12.4788 10.8784C12.1685 11.0482 11.8204 11.2907 11.5387 11.6191C11.2528 11.9526 11 12.4196 11 13C11 13.5523 11.4477 14 12 14C12.5502 14 12.9966 13.5556 13 13.0062C13.0038 12.9954 13.017 12.9676 13.0569 12.9211C13.1336 12.8316 13.265 12.7281 13.4392 12.6327C14.3671 12.1247 15 11.137 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 10.5523 9.44772 11 10 11C10.5523 11 11 10.5523 11 10ZM12.9986 13.0115V13.0115C12.9986 13.0115 12.9992 13.0101 12.9996 13.0074L12.9986 13.0115Z"
      fill="currentColor"
    />
    <path
@@ -154,7 +154,7 @@ exports[`<CompatSession /> > renders an active session 1`] = `
        aria-controls="radix-:r0:"
        aria-expanded={false}
        aria-haspopup="dialog"
-        className="_button_1ukgx_17"
+        className="_button_1t47t_17"
        data-kind="destructive"
        data-size="sm"
        data-state="closed"
--- a/frontend/src/components/snapshots/OAuth2Session.test.tsx.snap
+++ b/frontend/src/components/snapshots/OAuth2Session.test.tsx.snap
@@ -138,7 +138,7 @@ exports[`<OAuth2Session /> > renders an active session 1`] = `
        aria-controls="radix-:r0:"
        aria-expanded={false}
        aria-haspopup="dialog"
-        className="_button_1ukgx_17"
+        className="_button_1t47t_17"
        data-kind="destructive"
        data-size="sm"
        data-state="closed"
--- a/frontend/src/main.css
+++ b/frontend/src/main.css
@@ -17,6 +17,8 @@
@import "@fontsource/inter/500.css";
@import "@fontsource/inter/600.css";
@import "@fontsource/inter/700.css";
+@import "@fontsource/inconsolata/400.css";
+@import "@fontsource/inconsolata/700.css";
@import "@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css";
@import "@vector-im/compound-web/dist/style.css";

--- a/frontend/src/styles/cpd-button.css
+++ b/frontend/src/styles/cpd-button.css
@@ -22,6 +22,7 @@
  justify-content: center;
  gap: var(--cpd-space-2x);
  box-sizing: border-box;
+  font: var(--cpd-font-body-md-semibold);
 }

 .cpd-button[disabled] {
@@ -34,7 +35,6 @@
 */

 .cpd-button[data-size="lg"] {
-  font: var(--cpd-font-body-lg-semibold);
  padding-block: var(--cpd-space-2x);
  padding-inline: var(--cpd-space-8x);
  min-block-size: var(--cpd-space-12x);
@@ -45,7 +45,6 @@
 }

 .cpd-button[data-size="sm"] {
-  font: var(--cpd-font-body-md-semibold);
  padding-block: var(--cpd-space-1x);
  padding-inline: var(--cpd-space-6x);
  min-block-size: var(--cpd-space-9x);
--- a/frontend/src/styles/cpd-checkbox-control.css
+++ b/frontend/src/styles/cpd-checkbox-control.css
@@ -0,0 +1,117 @@
+/* Copyright 2023 The Matrix.org Foundation C.I.C.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.cpd-checkbox-container {
+  --size: 20px;
+
+  display: grid;
+  inline-size: var(--size);
+  block-size: var(--size);
+}
+
+.cpd-checkbox-input,
+.cpd-checkbox-ui {
+  box-sizing: border-box;
+  grid-area: 1/1;
+  inline-size: var(--size);
+  block-size: var(--size);
+}
+
+.cpd-checkbox-input {
+  opacity: 0;
+  margin: 0;
+  cursor: pointer;
+}
+
+.cpd-checkbox-ui {
+  pointer-events: none;
+  border-radius: 4px; /* TODO: Ought to be a token */
+  border: 1px solid;
+  border-color: var(--cpd-color-border-interactive-primary);
+
+  /** Default, rest state */
+  color: transparent;
+}
+
+.cpd-checkbox-ui svg {
+  inline-size: var(--size);
+  block-size: var(--size);
+
+  /* compensate for the parent border */
+  margin: -1px;
+}
+
+.cpd-checkbox-input:checked + .cpd-checkbox-ui {
+  color: var(--cpd-color-icon-on-solid-primary);
+  background-color: var(--cpd-color-bg-action-primary-rest);
+  border-color: var(--cpd-color-bg-action-primary-rest);
+}
+
+.cpd-checkbox-input:focus-visible + .cpd-checkbox-ui {
+  outline: 2px solid var(--cpd-color-border-focused);
+  outline-offset: 1px;
+}
+
+.cpd-checkbox-input[disabled] + .cpd-checkbox-ui {
+  border-color: var(--cpd-color-border-disabled);
+  background: var(--cpd-color-bg-canvas-disabled);
+}
+
+.cpd-checkbox-input[readonly] {
+  pointer-events: none;
+}
+
+.cpd-checkbox-input[readonly] + .cpd-checkbox-ui {
+  border-color: var(--cpd-color-border-interactive-secondary);
+  background: var(--cpd-color-bg-subtle-secondary);
+}
+
+.cpd-checkbox-input[disabled]:checked + .cpd-checkbox-ui {
+  border-color: var(--cpd-color-bg-action-primary-disabled);
+  background: var(--cpd-color-bg-action-primary-disabled);
+}
+
+.cpd-checkbox-input[readonly]:checked + .cpd-checkbox-ui {
+  color: var(--cpd-color-icon-secondary);
+}
+
+@media (hover) {
+  .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);
+
+    /** TODO: have the shadow in the design tokens */
+    box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);
+  }
+
+  .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 {
+    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 {
+  border-color: var(--cpd-color-border-critical-primary);
+}
+
+.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);
+}
--- a/frontend/src/styles/cpd-form.css
+++ b/frontend/src/styles/cpd-form.css
@@ -1,10 +1,10 @@
-/* Copyright 2023 The Matrix.org Foundation C.I.C.
+/* Copyright 2023 The Matrix.cpd-form-org Foundation C.cpd-form-I.cpd-form-C.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
- *     http://www.apache.org/licenses/LICENSE-2.0
+ *     http://www.cpd-form-apache.cpd-form-org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
@@ -13,82 +13,116 @@
 * limitations under the License.
 */

+/**
+ * ROOT: Form Element
+ */
+
+.cpd-form-root {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cpd-space-5x);
+}
+
 /**
 * FIELD: Wrapper around label, control and message
 */

-.cpd-field {
+.cpd-form-field {
  display: flex;
  flex-direction: column;
+  gap: var(--cpd-space-1x);
+}
+
+.cpd-form-inline-field {
+  display: flex;
+  flex-direction: row;
+  gap: var(--cpd-space-3x);
+}
+
+.cpd-form-inline-field-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.cpd-form-inline-field-control {
+  /* The control should have the same height as the label */
+  block-size: calc(
+    var(--cpd-font-size-body-md) * var(--cpd-font-line-height-regular)
+  );
+
+  /* Align the control in the middle of the label */
+  display: flex;
+  align-items: center;
 }

 /**
 * LABEL
 */

-.cpd-label {
-  font-weight: var(--cpd-font-weight-medium);
+.cpd-form-label {
+  font: var(--cpd-font-body-md-medium);
+  letter-spacing: var(--cpd-font-letter-spacing-body-md);
 }

-.cpd-label[for] {
+.cpd-form-label[for] {
  cursor: pointer;
 }

-.cpd-label[data-invalid] {
+.cpd-form-label[data-invalid] {
  color: var(--cpd-color-text-critical-primary);
 }

+.cpd-form-inline-field-body .cpd-form-label {
+  /* When the label is inline, it should be using regular font weight, not medium */
+  font: var(--cpd-font-body-md-regular);
+}
+
 /* Currently working everywhere but on Firefox (only behind a labs flag)
-https://developer.mozilla.org/en-US/docs/Web/CSS/:has#browser_compatibility */
-.cpd-label:has(~ .cpd-control[disabled]) {
+https://developer.cpd-form-mozilla.cpd-form-org/en-US/docs/Web/CSS/:has#browser_compatibility */
+.cpd-form-label:has(~ * input[disabled]),
+.cpd-form-label:has(~ input[disabled]),
+.cpd-form-inline-field-control:has(input[disabled])
+  ~ .cpd-form-inline-field-body
+  .cpd-form-label {
  color: var(--cpd-color-text-disabled);
  cursor: not-allowed;
 }

 /**
- * CONTROL
+ * Help and error messages
 */

-.cpd-control {
-  border: 1px solid var(--cpd-color-border-interactive-primary);
-  background: var(--cpd-color-bg-canvas-default);
-  border-radius: 0.5rem;
-  padding: var(--cpd-space-3x) var(--cpd-space-4x);
-  box-sizing: border-box;
+.cpd-form-message {
+  font: var(--cpd-font-body-sm-regular);
+  letter-spacing: var(--cpd-font-letter-spacing-body-sm);
+  margin-block-start: var(--cpd-space-1x);
 }

-/* Disabling the descending specificity rule to allow for selectors like below
- * It is using the "fake" element hack to style checkboxes, radio, mfa codes ...
- */
-
-/* stylelint-disable no-descending-specificity */
-@media (hover) {
-  .cpd-control:hover,
-  input:hover ~ .cpd-control {
-    border-color: var(--cpd-color-border-interactive-hovered);
-  }
+.cpd-form-help-message {
+  color: var(--cpd-color-text-secondary);
 }

-.cpd-control:active,
-input:active ~ .cpd-control {
-  border-color: var(--cpd-color-border-interactive-hovered);
+.cpd-form-error-message {
+  color: var(--cpd-color-text-critical-primary);
 }

-.cpd-control:focus,
-input:focus ~ .cpd-control {
-  outline: 2px solid var(--cpd-color-border-focused);
-  border-color: transparent;
-}
-
-.cpd-control[data-invalid],
-input[data-invalid] ~ .cpd-control {
-  border-color: var(--cpd-color-text-critical-primary);
-}
-
-.cpd-control:disabled,
-input:disabled ~ .cpd-control {
-  background: var(--cpd-color-bg-canvas-disabled);
-  border-color: var(--cpd-color-border-disabled);
+/* Currently working everywhere but on Firefox (only behind a labs flag)
+https://developer.cpd-form-mozilla.cpd-form-org/en-US/docs/Web/CSS/:has#browser_compatibility */
+input[disabled] ~ .cpd-form-message,
+*:has(input[disabled]) ~ .cpd-form-message,
+.cpd-form-inline-field-control:has(input[disabled])
+  ~ .cpd-form-inline-field-body
+  .cpd-form-message {
  color: var(--cpd-color-text-disabled);
-  cursor: not-allowed;
+}
+
+.cpd-form-message > svg {
+  display: inline-block;
+  vertical-align: bottom;
+  margin-inline-end: var(--cpd-space-2x);
+
+  /* Calculate the size of the icon based on the font size and line height */
+  block-size: calc(1em * var(--cpd-font-line-height-regular));
+  inline-size: calc(1em * var(--cpd-font-line-height-regular));
 }
--- a/frontend/src/styles/cpd-mfa-control.css
+++ b/frontend/src/styles/cpd-mfa-control.css
@@ -0,0 +1,107 @@
+/* Copyright 2023 The Matrix.org Foundation C.I.C.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.cpd-mfa-container {
+  --gap: var(--cpd-space-3x);
+  --digit-size: var(--cpd-space-10x);
+  --digit-height: var(--cpd-space-12x);
+
+  display: flex;
+  inline-size: fit-content;
+  flex-direction: row;
+  gap: var(--gap);
+
+  /* The input is positioned absolutely
+     so the container needs to be positioned relatively */
+  position: relative;
+}
+
+.cpd-mfa-control {
+  all: unset;
+
+  /** TODO: semantic token */
+  font-family: var(--cpd-font-family-mono), ui-monospace, monospace;
+  font-weight: 700;
+
+  /* Position the input to fill the container */
+  position: absolute;
+  inset: 0;
+
+  /* Spacing between digits is set to the gap
+     plus the size of one digit box
+     minus the size of one character */
+  letter-spacing: calc(var(--gap) + var(--digit-size) - 1ch);
+  line-height: var(--digit-height);
+
+  /* The padding at the start positions the first digit at the middle of the digit box */
+  padding-inline-start: calc(var(--cpd-space-10x) / 2 - (1ch / 2));
+
+  /* The negative margin at the end is to keep space for the cursor when the input is full */
+  margin-inline-end: calc(-1 * (var(--cpd-space-10x) + var(--cpd-space-3x)));
+}
+
+.cpd-mfa-digit {
+  box-sizing: border-box;
+  inline-size: var(--cpd-space-10x);
+  block-size: var(--cpd-space-12x);
+  border: 1px solid var(--cpd-color-border-interactive-primary);
+  background: var(--cpd-color-bg-canvas-default);
+  border-radius: 0.5rem;
+  padding: var(--cpd-space-3x) var(--cpd-space-4x);
+}
+
+@media (hover) {
+  .cpd-mfa-control:hover ~ .cpd-mfa-digit {
+    border-color: var(--cpd-color-border-interactive-hovered);
+
+    /** TODO: have the shadow in the design tokens */
+    box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);
+  }
+}
+
+.cpd-mfa-control:disabled {
+  color: var(--cpd-color-text-disabled);
+  cursor: not-allowed;
+}
+
+.cpd-mfa-control:disabled ~ .cpd-mfa-digit {
+  box-shadow: none;
+  background: var(--cpd-color-bg-canvas-disabled);
+  border-color: var(--cpd-color-border-disabled);
+}
+
+.cpd-mfa-control[readonly] {
+  color: var(--cpd-color-text-secondary);
+}
+
+.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 {
+  border-color: var(--cpd-color-text-critical-primary);
+}
+
+.cpd-mfa-control:focus ~ .cpd-mfa-digit:not([data-filled]) {
+  outline: 2px solid var(--cpd-color-border-focused);
+  border-color: transparent;
+}
+
+.cpd-mfa-digit[data-selected] {
+  border-color: var(--cpd-color-border-focused);
+  background-color: var(--cpd-color-bg-info-subtle);
+}
--- a/frontend/src/styles/cpd-text-control.css
+++ b/frontend/src/styles/cpd-text-control.css
@@ -0,0 +1,59 @@
+/* Copyright 2023 The Matrix.org Foundation C.I.C.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.cpd-text-control {
+  border: 1px solid var(--cpd-color-border-interactive-primary);
+  background: var(--cpd-color-bg-canvas-default);
+  border-radius: 0.5rem;
+  padding: var(--cpd-space-3x) var(--cpd-space-4x);
+  box-sizing: border-box;
+}
+
+@media (hover) {
+  .cpd-text-control:hover {
+    border-color: var(--cpd-color-border-interactive-hovered);
+
+    /** TODO: have the shadow in the design tokens */
+    box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);
+  }
+}
+
+.cpd-text-control:active {
+  border-color: var(--cpd-color-border-interactive-hovered);
+}
+
+.cpd-text-control:focus {
+  outline: 2px solid var(--cpd-color-border-focused);
+  border-color: transparent;
+}
+
+.cpd-text-control[data-invalid] {
+  border-color: var(--cpd-color-text-critical-primary);
+}
+
+.cpd-text-control:disabled {
+  box-shadow: none;
+  background: var(--cpd-color-bg-canvas-disabled);
+  border-color: var(--cpd-color-border-disabled);
+  color: var(--cpd-color-text-disabled);
+  cursor: not-allowed;
+}
+
+.cpd-text-control[readonly] {
+  box-shadow: none;
+  background: var(--cpd-color-bg-subtle-secondary);
+  border-color: var(--cpd-color-bg-subtle-secondary);
+  color: var(--cpd-color-text-secondary);
+}
--- a/frontend/src/templates.css
+++ b/frontend/src/templates.css
@@ -17,11 +17,17 @@
@import "@fontsource/inter/500.css";
@import "@fontsource/inter/600.css";
@import "@fontsource/inter/700.css";
+@import "@fontsource/inconsolata/400.css";
+@import "@fontsource/inconsolata/700.css";
@import "@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css";
@import "@vector-im/compound-web/dist/style.css";
+
@import "./styles/cpd-button.css";
@import "./styles/cpd-form.css";
@import "./styles/cpd-link.css";
+@import "./styles/cpd-text-control.css";
+@import "./styles/cpd-mfa-control.css";
+@import "./styles/cpd-checkbox-control.css";

@import "./components/Layout/Layout.module.css";
@import "./components/Footer/Footer.module.css";
@@ -141,3 +147,63 @@
    color: var(--cpd-color-text-primary);
  }
 }
+
+.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);
+      }
+    }
+
+    & 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-2x);
+    text-align: center;
+
+    & .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);
+
+      & em {
+        font-style: normal;
+        color: var(--cpd-color-text-primary);
+      }
+    }
+  }
+}
--- a/templates/components/field.html
+++ b/templates/components/field.html
@@ -14,19 +14,22 @@ See the License for the specific language governing permissions and
 limitations under the License.
 #}

-{% macro input(label, name, type="text", form_state=false, autocomplete=false, class="", inputmode="text", autocorrect=false, autocapitalize=false, disabled=false, required=false) %}
-  {% if not form_state %}
-    {% set form_state = {"errors": [], "fields": {}} %}
-  {% endif %}
+{% set cnt = counter() %}

-  {% set state = form_state.fields[name] | default({"errors": [], "value": ""}) %}
+{% macro new_id() -%}
+  form-{{- cnt.next() -}}
+{%- endmacro %}

-  <div class="flex flex-col cpd-field {{ class }}">
-    <div class="cpd-label"{% if state.errors is not empty %} data-invalid{% endif %}>{{ label }}</div>
-    <input name="{{ name }}"
-      class="cpd-control"
-      {% if state.errors is not empty %} data-invalid {% endif %}
-      {% if state.value %} value="{{ state.value }}" {% endif %}
+{% macro attributes(field) -%}
+  name="{{ field.name }}" id="{{ field.id }}"
+  {%- if field.errors is not empty %} data-invalid{% endif %}
+  {%- if field.value %} value="{{ field.value }}" {% endif %}
+{%- endmacro %}
+
+{% macro input(label, name, type="text", form_state=false, autocomplete=false, class="", inputmode="text", autocorrect=false, autocapitalize=false, disabled=false, required=false, readonly=false) %}
+  {% call(field) field(label=label, name=name, form_state=form_state, class=class) %}
+    <input {{ attributes(field) }}
+      class="cpd-text-control"
      type="{{ type }}"
      inputmode="{{ inputmode }}"
      {% if required %} required {% endif %}
@@ -34,15 +37,39 @@ limitations under the License.
      {% if autocomplete %} autocomplete="{{ autocomplete }}" {% endif %} 
      {% if autocorrect %} autocorrect="{{ autocorrect }}" {% endif %}
      {% if autocapitalize %} autocapitalize="{{ autocapitalize }}" {% endif %}
+      {% if readonly %} readonly {% endif %}
      />
+  {% endcall %}
+{% endmacro %}

-    {% if state.errors is not empty %}
-      {% for error in state.errors %}
+{% macro field(label, name, form_state=false, class="") %}
+  {% set field_id = new_id() %}
+  {% if not form_state %}
+    {% set form_state = {"fields": {}} %}
+  {% endif %}
+
+  {% set state = form_state.fields[name] | default({"errors": [], "value": ""}) %}
+  {% set field = {
+    "id": new_id(),
+    "name": name,
+    "errors": state.errors,
+    "value": state.value,
+  } %}
+
+  <div class="cpd-form-field {{ class }}">
+    <label class="cpd-form-label" for="{{ field.id }}"
+      {%- if field.errors is not empty %} data-invalid{% endif -%}
+    >{{ label }}</label>
+
+    {{ caller(field) }}
+
+    {% if field.errors is not empty %}
+      {% for error in field.errors %}
        {% if error.kind != "unspecified" %}
-          <div class="text-sm text-critical">
+          <div class="cpd-form-error-message">
            {% if error.kind == "required" %}
              {{ _("mas.errors.field_required") }}
-            {% elif error.kind == "exists" and name == "username" %}
+            {% elif error.kind == "exists" and field.name == "username" %}
              {{ _("mas.errors.username_taken") }}
            {% elif error.kind == "policy" %}
              {{ _("mas.errors.denied_policy", message=error.message) }}
@@ -56,6 +83,7 @@ limitations under the License.
  </div>
 {% endmacro %}

+
 {% macro separator() %}
  <div class="separator">
    <hr />
--- a/templates/components/icon.html
+++ b/templates/components/icon.html
@@ -75,39 +75,51 @@ done
 </svg>
 {% endmacro %}

-{% macro check_circle() %}
+{% macro check_circle_solid() %}
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M10.6 13.8L8.45 11.65C8.26667 11.4667 8.03333 11.375 7.75 11.375C7.46667 11.375 7.23333 11.4667 7.05 11.65C6.86667 11.8333 6.775 12.0667 6.775 12.35C6.775 12.6333 6.86667 12.8667 7.05 13.05L9.9 15.9C10.1 16.1 10.3333 16.2 10.6 16.2C10.8667 16.2 11.1 16.1 11.3 15.9L16.95 10.25C17.1333 10.0667 17.225 9.83333 17.225 9.55C17.225 9.26667 17.1333 9.03333 16.95 8.85C16.7667 8.66667 16.5333 8.575 16.25 8.575C15.9667 8.575 15.7333 8.66667 15.55 8.85L10.6 13.8ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22Z" fill="currentColor"/>
 </svg>
 {% endmacro %}

+{% macro check_circle() %}
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10.6 13.8L8.45 11.65C8.26667 11.4667 8.03333 11.375 7.75 11.375C7.46667 11.375 7.23333 11.4667 7.05 11.65C6.86667 11.8333 6.775 12.0667 6.775 12.35C6.775 12.6333 6.86667 12.8667 7.05 13.05L9.9 15.9C10.1 16.1 10.3333 16.2 10.6 16.2C10.8667 16.2 11.1 16.1 11.3 15.9L16.95 10.25C17.1333 10.0667 17.225 9.83333 17.225 9.55C17.225 9.26667 17.1333 9.03333 16.95 8.85C16.7667 8.66667 16.5333 8.575 16.25 8.575C15.9667 8.575 15.7333 8.66667 15.55 8.85L10.6 13.8ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20Z" fill="currentColor"/>
+</svg>
+{% endmacro %}
+
 {% macro check() %}
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M9.55003 17.575C9.4167 17.575 9.2917 17.5542 9.17503 17.5125C9.05836 17.4709 8.95003 17.4 8.85003 17.3L4.55003 13C4.3667 12.8167 4.2792 12.5792 4.28753 12.2875C4.29586 11.9959 4.3917 11.7584 4.57503 11.575C4.75836 11.3917 4.9917 11.3 5.27503 11.3C5.55836 11.3 5.7917 11.3917 5.97503 11.575L9.55003 15.15L18.025 6.67502C18.2084 6.49169 18.4459 6.40002 18.7375 6.40002C19.0292 6.40002 19.2667 6.49169 19.45 6.67502C19.6334 6.85836 19.725 7.09586 19.725 7.38752C19.725 7.67919 19.6334 7.91669 19.45 8.10002L10.25 17.3C10.15 17.4 10.0417 17.4709 9.92503 17.5125C9.80836 17.5542 9.68336 17.575 9.55003 17.575Z" fill="currentColor"/>
+  <path d="M9.54991 17.5749C9.41658 17.5749 9.29158 17.5541 9.17491 17.5124C9.05824 17.4707 8.94991 17.3999 8.84991 17.2999L4.54991 12.9999C4.36658 12.8166 4.27908 12.5791 4.28741 12.2874C4.29574 11.9957 4.39158 11.7582 4.57491 11.5749C4.75824 11.3916 4.99158 11.2999 5.27491 11.2999C5.55824 11.2999 5.79158 11.3916 5.97491 11.5749L9.54991 15.1499L18.0249 6.6749C18.2082 6.49157 18.4457 6.3999 18.7374 6.3999C19.0291 6.3999 19.2666 6.49157 19.4499 6.6749C19.6332 6.85824 19.7249 7.09574 19.7249 7.3874C19.7249 7.67907 19.6332 7.91657 19.4499 8.0999L10.2499 17.2999C10.1499 17.3999 10.0416 17.4707 9.92491 17.5124C9.80824 17.5541 9.68324 17.5749 9.54991 17.5749Z" fill="currentColor"/>
 </svg>
 {% endmacro %}

 {% macro chevron_down() %}
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M12 14.95C11.8667 14.95 11.7417 14.9292 11.625 14.8875C11.5084 14.8458 11.4 14.775 11.3 14.675L6.67503 10.05C6.4917 9.86667 6.4042 9.63751 6.41253 9.36251C6.42086 9.08751 6.5167 8.85834 6.70003 8.67501C6.88336 8.49167 7.1167 8.40001 7.40003 8.40001C7.68336 8.40001 7.9167 8.49167 8.10003 8.67501L12 12.575L15.925 8.65001C16.1084 8.46667 16.3375 8.37917 16.6125 8.38751C16.8875 8.39584 17.1167 8.49167 17.3 8.67501C17.4834 8.85834 17.575 9.09167 17.575 9.37501C17.575 9.65834 17.4834 9.89167 17.3 10.075L12.7 14.675C12.6 14.775 12.4917 14.8458 12.375 14.8875C12.2584 14.9292 12.1334 14.95 12 14.95Z" fill="currentColor"/>
+  <path d="M12 14.9499C11.8667 14.9499 11.7417 14.9291 11.625 14.8874C11.5084 14.8457 11.4 14.7749 11.3 14.6749L6.70005 10.0749C6.51672 9.89157 6.42505 9.65824 6.42505 9.3749C6.42505 9.09157 6.51672 8.85824 6.70005 8.6749C6.88338 8.49157 7.11672 8.3999 7.40005 8.3999C7.68338 8.3999 7.91672 8.49157 8.10005 8.6749L12 12.5749L15.9 8.6749C16.0834 8.49157 16.3167 8.3999 16.6 8.3999C16.8834 8.3999 17.1167 8.49157 17.3 8.6749C17.4834 8.85824 17.575 9.09157 17.575 9.3749C17.575 9.65824 17.4834 9.89157 17.3 10.0749L12.7 14.6749C12.6 14.7749 12.4917 14.8457 12.375 14.8874C12.2584 14.9291 12.1334 14.9499 12 14.9499Z" fill="currentColor"/>
 </svg>
 {% endmacro %}

 {% macro chevron_left() %}
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M13.3 17.3L8.69999 12.7C8.59999 12.6 8.52915 12.4917 8.48749 12.375C8.44582 12.2584 8.42499 12.1334 8.42499 12C8.42499 11.8667 8.44582 11.7417 8.48749 11.625C8.52915 11.5084 8.59999 11.4 8.69999 11.3L13.3 6.70005C13.4833 6.51672 13.7167 6.42505 14 6.42505C14.2833 6.42505 14.5167 6.51672 14.7 6.70005C14.8833 6.88338 14.975 7.11672 14.975 7.40005C14.975 7.68338 14.8833 7.91672 14.7 8.10005L10.8 12L14.7 15.9C14.8833 16.0834 14.975 16.3167 14.975 16.6C14.975 16.8834 14.8833 17.1167 14.7 17.3C14.5167 17.4834 14.2833 17.575 14 17.575C13.7167 17.575 13.4833 17.4834 13.3 17.3Z" fill="currentColor"/>
+  <path d="M13.3 17.3L8.70005 12.7C8.60005 12.6 8.52922 12.4917 8.48755 12.375C8.44588 12.2584 8.42505 12.1334 8.42505 12C8.42505 11.8667 8.44588 11.7417 8.48755 11.625C8.52922 11.5084 8.60005 11.4 8.70005 11.3L13.3 6.70005C13.4834 6.51672 13.7167 6.42505 14 6.42505C14.2834 6.42505 14.5167 6.51672 14.7 6.70005C14.8834 6.88338 14.975 7.11672 14.975 7.40005C14.975 7.68338 14.8834 7.91672 14.7 8.10005L10.8 12L14.7 15.9C14.8834 16.0834 14.975 16.3167 14.975 16.6C14.975 16.8834 14.8834 17.1167 14.7 17.3C14.5167 17.4834 14.2834 17.575 14 17.575C13.7167 17.575 13.4834 17.4834 13.3 17.3Z" fill="currentColor"/>
 </svg>
 {% endmacro %}

 {% macro chevron_right() %}
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M8.69999 17.3C8.51665 17.1167 8.42499 16.8834 8.42499 16.6C8.42499 16.3167 8.51665 16.0834 8.69999 15.9L12.6 12L8.69999 8.10005C8.51665 7.91672 8.42499 7.68338 8.42499 7.40005C8.42499 7.11672 8.51665 6.88338 8.69999 6.70005C8.88332 6.51672 9.11665 6.42505 9.39999 6.42505C9.68332 6.42505 9.91665 6.51672 10.1 6.70005L14.7 11.3C14.8 11.4 14.8708 11.5084 14.9125 11.625C14.9542 11.7417 14.975 11.8667 14.975 12C14.975 12.1334 14.9542 12.2584 14.9125 12.375C14.8708 12.4917 14.8 12.6 14.7 12.7L10.1 17.3C9.91665 17.4834 9.68332 17.575 9.39999 17.575C9.11665 17.575 8.88332 17.4834 8.69999 17.3Z" fill="currentColor"/>
+  <path d="M8.70005 17.3C8.51672 17.1167 8.42505 16.8834 8.42505 16.6C8.42505 16.3167 8.51672 16.0834 8.70005 15.9L12.6 12L8.70005 8.10005C8.51672 7.91672 8.42505 7.68338 8.42505 7.40005C8.42505 7.11672 8.51672 6.88338 8.70005 6.70005C8.88338 6.51672 9.11672 6.42505 9.40005 6.42505C9.68338 6.42505 9.91672 6.51672 10.1 6.70005L14.7 11.3C14.8 11.4 14.8709 11.5084 14.9125 11.625C14.9542 11.7417 14.975 11.8667 14.975 12C14.975 12.1334 14.9542 12.2584 14.9125 12.375C14.8709 12.4917 14.8 12.6 14.7 12.7L10.1 17.3C9.91672 17.4834 9.68338 17.575 9.40005 17.575C9.11672 17.575 8.88338 17.4834 8.70005 17.3Z" fill="currentColor"/>
 </svg>
 {% endmacro %}

 {% macro chevron_up_down() %}
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M8.22495 8.32502C8.04162 8.14169 7.94995 7.90002 7.94995 7.60002C7.94995 7.30002 8.04162 7.05836 8.22495 6.87502L11.3 3.80002C11.4 3.70002 11.5083 3.62919 11.625 3.58752C11.7416 3.54586 11.8666 3.52502 12 3.52502C12.1333 3.52502 12.2625 3.54586 12.3875 3.58752C12.5125 3.62919 12.6166 3.70002 12.7 3.80002L15.8 6.90002C15.9833 7.08336 16.0708 7.32086 16.0625 7.61252C16.0541 7.90419 15.9583 8.14169 15.775 8.32502C15.5916 8.50836 15.35 8.60002 15.05 8.60002C14.75 8.60002 14.5083 8.50836 14.325 8.32502L12 6.00002L9.64995 8.35002C9.46662 8.53336 9.22912 8.62086 8.93745 8.61252C8.64578 8.60419 8.40828 8.50836 8.22495 8.32502ZM12 20.575C11.8666 20.575 11.7416 20.55 11.625 20.5C11.5083 20.45 11.4 20.3834 11.3 20.3L8.22495 17.225C8.04162 17.0417 7.94995 16.8 7.94995 16.5C7.94995 16.2 8.04162 15.9584 8.22495 15.775C8.40828 15.5917 8.64995 15.5 8.94995 15.5C9.24995 15.5 9.49162 15.5917 9.67495 15.775L12 18.1L14.35 15.75C14.5333 15.5667 14.7708 15.4792 15.0625 15.4875C15.3541 15.4959 15.5916 15.5917 15.775 15.775C15.9583 15.9584 16.05 16.2 16.05 16.5C16.05 16.8 15.9583 17.0417 15.775 17.225L12.7 20.3C12.6166 20.3834 12.5125 20.45 12.3875 20.5C12.2625 20.55 12.1333 20.575 12 20.575Z" fill="currentColor"/>
+  <path d="M8.22495 8.3249C8.04162 8.14157 7.94995 7.8999 7.94995 7.5999C7.94995 7.2999 8.04162 7.05824 8.22495 6.8749L11.3 3.7999C11.4 3.6999 11.5083 3.62907 11.625 3.5874C11.7416 3.54574 11.8666 3.5249 12 3.5249C12.1333 3.5249 12.2625 3.54574 12.3875 3.5874C12.5125 3.62907 12.6166 3.6999 12.7 3.7999L15.8 6.8999C15.9833 7.08324 16.0708 7.32074 16.0625 7.6124C16.0541 7.90407 15.9583 8.14157 15.775 8.3249C15.5916 8.50824 15.35 8.5999 15.05 8.5999C14.75 8.5999 14.5083 8.50824 14.325 8.3249L12 5.9999L9.64995 8.3499C9.46662 8.53324 9.22912 8.62074 8.93745 8.6124C8.64578 8.60407 8.40828 8.50824 8.22495 8.3249ZM12 20.5749C11.8666 20.5749 11.7416 20.5499 11.625 20.4999C11.5083 20.4499 11.4 20.3832 11.3 20.2999L8.22495 17.2249C8.04162 17.0416 7.94995 16.7999 7.94995 16.4999C7.94995 16.1999 8.04162 15.9582 8.22495 15.7749C8.40828 15.5916 8.64995 15.4999 8.94995 15.4999C9.24995 15.4999 9.49162 15.5916 9.67495 15.7749L12 18.0999L14.35 15.7499C14.5333 15.5666 14.7708 15.4791 15.0625 15.4874C15.3541 15.4957 15.5916 15.5916 15.775 15.7749C15.9583 15.9582 16.05 16.1999 16.05 16.4999C16.05 16.7999 15.9583 17.0416 15.775 17.2249L12.7 20.2999C12.6166 20.3832 12.5125 20.4499 12.3875 20.4999C12.2625 20.5499 12.1333 20.5749 12 20.5749Z" fill="currentColor"/>
+</svg>
+{% endmacro %}
+
+{% macro chevron_up() %}
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12 10.775L8.09995 14.675C7.91662 14.8583 7.68328 14.95 7.39995 14.95C7.11662 14.95 6.88328 14.8583 6.69995 14.675C6.51662 14.4916 6.42495 14.2583 6.42495 13.975C6.42495 13.6916 6.51662 13.4583 6.69995 13.275L11.3 8.67495C11.4 8.57495 11.5083 8.50412 11.625 8.46245C11.7416 8.42078 11.8666 8.39995 12 8.39995C12.1333 8.39995 12.2583 8.42078 12.375 8.46245C12.4916 8.50412 12.6 8.57495 12.7 8.67495L17.3 13.275C17.4833 13.4583 17.575 13.6916 17.575 13.975C17.575 14.2583 17.4833 14.4916 17.3 14.675C17.1166 14.8583 16.8833 14.95 16.6 14.95C16.3166 14.95 16.0833 14.8583 15.9 14.675L12 10.775Z" fill="currentColor"/>
 </svg>
 {% endmacro %}

@@ -123,12 +135,31 @@ done
 </svg>
 {% endmacro %}

+{% macro collapse() %}
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12.0001 11.0342C12.0004 11.1687 12.0274 11.2969 12.0759 11.414C12.1244 11.531 12.196 11.6408 12.2908 11.7362L12.2951 11.7404C12.4759 11.9201 12.725 12.0312 13 12.0312H21.0001C21.5523 12.0312 22.0001 11.5835 22.0001 11.0312C22.0001 10.4789 21.5523 10.0312 21.0001 10.0312H15.4143L22.0002 3.44539C22.3907 3.05486 22.3907 2.4217 22.0002 2.03117C21.6096 1.64065 20.9765 1.64065 20.586 2.03117L14 8.61696V3.03117C14 2.47889 13.5523 2.03117 13 2.03117C12.4478 2.03117 12 2.47889 12 3.03117V11.0305L12.0001 11.0342Z" fill="currentColor"/>
+  <path d="M12 12.9969C11.9996 12.8624 11.9727 12.7342 11.9242 12.6171C11.8757 12.5001 11.8041 12.3903 11.7093 12.2949L11.705 12.2907C11.5242 12.111 11.2751 11.9999 11 11.9999H3.00004C2.44775 11.9999 2.00004 12.4476 2.00004 12.9999C2.00004 13.5522 2.44775 13.9999 3.00004 13.9999H8.58583L1.99992 20.5857C1.6094 20.9762 1.6094 21.6094 1.99992 21.9999C2.39045 22.3904 3.02361 22.3904 3.41414 21.9999L10 15.4141V20.9999C10 21.5522 10.4478 21.9999 11 21.9999C11.5523 21.9999 12 21.5522 12 20.9999V13.0006L12 12.9969Z" fill="currentColor"/>
+</svg>
+{% endmacro %}
+
+{% macro company() %}
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M14 7H19C20.1046 7 21 7.89543 21 9V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3H12C13.1046 3 14 3.89543 14 5V7ZM12 5H5V7H8C8.55228 7 9 7.44772 9 8C9 8.55228 8.55228 9 8 9H5V11H8C8.55228 11 9 11.4477 9 12C9 12.5523 8.55228 13 8 13H5V15H8C8.55228 15 9 15.4477 9 16C9 16.5523 8.55228 17 8 17H5V19H12V5ZM14 9V11H16C16.5523 11 17 11.4477 17 12C17 12.5523 16.5523 13 16 13H14V15H16C16.5523 15 17 15.4477 17 16C17 16.5523 16.5523 17 16 17H14V19H19V9H14Z" fill="currentColor"/>
+</svg>
+{% endmacro %}
+
 {% macro computer() %}
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M4 18C3.45 18 2.97917 17.8042 2.5875 17.4125C2.19583 17.0208 2 16.55 2 16V5C2 4.45 2.19583 3.97917 2.5875 3.5875C2.97917 3.19583 3.45 3 4 3H20C20.55 3 21.0208 3.19583 21.4125 3.5875C21.8042 3.97917 22 4.45 22 5V16C22 16.55 21.8042 17.0208 21.4125 17.4125C21.0208 17.8042 20.55 18 20 18H4ZM4 16H20V5H4V16ZM2 21C1.71667 21 1.47917 20.9042 1.2875 20.7125C1.09583 20.5208 1 20.2833 1 20C1 19.7167 1.09583 19.4792 1.2875 19.2875C1.47917 19.0958 1.71667 19 2 19H22C22.2833 19 22.5208 19.0958 22.7125 19.2875C22.9042 19.4792 23 19.7167 23 20C23 20.2833 22.9042 20.5208 22.7125 20.7125C22.5208 20.9042 22.2833 21 22 21H2Z" fill="currentColor"/>
 </svg>
 {% endmacro %}

+{% macro dark_mode() %}
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M17.9834 17.3107C13.3317 15.6585 10 11.2203 10 6C10 5.39571 10.0448 4.80105 10.1315 4.21939C6.61451 5.06091 4 8.22513 4 12C4 16.4183 7.58172 20 12 20C14.3786 20 16.5161 18.9628 17.9834 17.3107ZM19.803 15.7579C20.4714 15.9077 20.8972 16.6208 20.5401 17.2054C18.7837 20.0807 15.616 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C12.4017 2 12.6526 2.41625 12.524 2.79683C12.1842 3.80243 12 4.8797 12 6C12 10.768 15.337 14.7567 19.803 15.7579Z" fill="currentColor"/>
+</svg>
+{% endmacro %}
+
 {% macro delete() %}
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M7 21C6.45 21 5.97917 20.8042 5.5875 20.4125C5.19583 20.0208 5 19.55 5 19V6C4.71667 6 4.47917 5.90417 4.2875 5.7125C4.09583 5.52083 4 5.28333 4 5C4 4.71667 4.09583 4.47917 4.2875 4.2875C4.47917 4.09583 4.71667 4 5 4H9C9 3.71667 9.09583 3.47917 9.2875 3.2875C9.47917 3.09583 9.71667 3 10 3H14C14.2833 3 14.5208 3.09583 14.7125 3.2875C14.9042 3.47917 15 3.71667 15 4H19C19.2833 4 19.5208 4.09583 19.7125 4.2875C19.9042 4.47917 20 4.71667 20 5C20 5.28333 19.9042 5.52083 19.7125 5.7125C19.5208 5.90417 19.2833 6 19 6V19C19 19.55 18.8042 20.0208 18.4125 20.4125C18.0208 20.8042 17.55 21 17 21H7ZM7 6V19H17V6H7ZM9 16C9 16.2833 9.09583 16.5208 9.2875 16.7125C9.47917 16.9042 9.71667 17 10 17C10.2833 17 10.5208 16.9042 10.7125 16.7125C10.9042 16.5208 11 16.2833 11 16V9C11 8.71667 10.9042 8.47917 10.7125 8.2875C10.5208 8.09583 10.2833 8 10 8C9.71667 8 9.47917 8.09583 9.2875 8.2875C9.09583 8.47917 9 8.71667 9 9V16ZM13 16C13 16.2833 13.0958 16.5208 13.2875 16.7125C13.4792 16.9042 13.7167 17 14 17C14.2833 17 14.5208 16.9042 14.7125 16.7125C14.9042 16.5208 15 16.2833 15 16V9C15 8.71667 14.9042 8.47917 14.7125 8.2875C14.5208 8.09583 14.2833 8 14 8C13.7167 8 13.4792 8.09583 13.2875 8.2875C13.0958 8.47917 13 8.71667 13 9V16Z" fill="currentColor"/>
@@ -153,9 +184,29 @@ done
 </svg>
 {% endmacro %}

+{% macro edit() %}
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M5 3H11C11.5523 3 12 3.44772 12 4C12 4.55228 11.5523 5 11 5H5V19H19V13C19 12.4477 19.4477 12 20 12C20.5523 12 21 12.4477 21 13V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3Z" fill="currentColor"/>
+  <path d="M20.233 3.76701C19.6472 3.18122 18.6975 3.18122 18.1117 3.76701L17.6571 4.22158L19.7784 6.3429L20.233 5.88833C20.8188 5.30254 20.8188 4.35279 20.233 3.76701Z" fill="currentColor"/>
+  <path d="M19.0208 7.10051L16.8995 4.97919L8 13.8787V16H10.1213L19.0208 7.10051Z" fill="currentColor"/>
+</svg>
+{% endmacro %}
+
+{% macro email_solid() %}
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M2 6C2 4.89543 2.89543 4 4 4H19.9375C21.0421 4 21.9375 4.89543 21.9375 6V18C21.9375 19.1046 21.0421 20 19.9375 20H4C2.89543 20 2 19.1046 2 18V6ZM4 6.80484V18H19.9375V6.86725L13.4142 13.3906C12.6331 14.1716 11.3668 14.1716 10.5857 13.3906L4 6.80484Z" fill="currentColor"/>
+</svg>
+{% endmacro %}
+
+{% macro email() %}
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M2 6C2 4.89543 2.89543 4 4 4H19.9375C21.0421 4 21.9375 4.89543 21.9375 6V18C21.9375 19.1046 21.0421 20 19.9375 20H4C2.89543 20 2 19.1046 2 18V6ZM17.9763 6H6.02359L12 11.9764L17.9763 6ZM4 6.80484V18H19.9375V6.86725L13.4142 13.3906C12.6331 14.1716 11.3668 14.1716 10.5857 13.3906L4 6.80484Z" fill="currentColor"/>
+</svg>
+{% endmacro %}
+
 {% macro end_call() %}
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M0.295301 14.6039L2.7651 17.02C2.96197 17.2169 3.19016 17.3243 3.44966 17.3422C3.70917 17.3601 3.94631 17.2885 4.16107 17.1274L7.27517 14.765C7.41834 14.6576 7.52573 14.5323 7.59731 14.3891C7.6689 14.246 7.7047 14.0849 7.7047 13.9059L7.7047 11.6353C8.40268 11.4027 9.10962 11.2282 9.8255 11.1118C10.5414 10.9955 12 10.9373 12 10.9373C12 10.9373 13.4586 10.9955 14.1745 11.1118C14.8904 11.2282 15.5973 11.4027 16.2953 11.6353V13.9059C16.2953 14.0849 16.3311 14.246 16.4027 14.3891C16.4743 14.5323 16.5817 14.6576 16.7248 14.765L19.8389 17.1274C20.0537 17.2885 20.2908 17.3601 20.5503 17.3422C20.8098 17.3243 21.038 17.2169 21.2349 17.02L23.7047 14.6039C23.9016 14.407 24 14.1565 24 13.8522C24 13.548 23.9016 13.2974 23.7047 13.1005C22.1834 11.4719 20.4116 10.2146 18.3893 9.32874C16.3669 8.44283 14.2371 7.99988 12 7.99988C9.76286 7.99988 7.63311 8.43836 5.61074 9.31531C3.58837 10.1923 1.81655 11.454 0.295301 13.1005C0.0984333 13.2974 0 13.548 0 13.8522C0 14.1565 0.0984334 14.407 0.295301 14.6039Z" fill="currentColor"/>
+  <path d="M2.7651 16.0201L0.295301 13.604C0.0984326 13.4072 0 13.1566 0 12.8524C0 12.5481 0.0984326 12.2975 0.295301 12.1007C1.81655 10.4541 3.58837 9.19239 5.61074 8.31544C7.63311 7.43848 9.76286 7 12 7C14.2371 7 16.3669 7.44295 18.3893 8.32886C20.4116 9.21477 22.1834 10.472 23.7047 12.1007C23.9016 12.2975 24 12.5481 24 12.8524C24 13.1566 23.9016 13.4072 23.7047 13.604L21.2349 16.0201C21.038 16.217 20.8098 16.3244 20.5503 16.3423C20.2908 16.3602 20.0537 16.2886 19.8389 16.1275L16.7248 13.7651C16.5817 13.6577 16.4743 13.5324 16.4027 13.3893C16.3311 13.2461 16.2953 13.085 16.2953 12.906V10.6354C15.5973 10.4028 14.8904 10.2283 14.1745 10.112C13.4586 9.99562 12 9.93745 12 9.93745C12 9.93745 10.5414 9.99562 9.8255 10.112C9.10962 10.2283 8.40268 10.4028 7.7047 10.6354L7.7047 12.906C7.7047 13.085 7.6689 13.2461 7.59731 13.3893C7.52573 13.5324 7.41834 13.6577 7.27517 13.7651L4.16107 16.1275C3.94631 16.2886 3.70917 16.3602 3.44966 16.3423C3.19016 16.3244 2.96197 16.217 2.7651 16.0201Z" fill="currentColor"/>
 </svg>
 {% endmacro %}

@@ -165,6 +216,12 @@ done
 </svg>
 {% endmacro %}

+{% macro expand() %}
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M21 3.997C20.9996 3.8625 20.9727 3.73425 20.9241 3.61722C20.8757 3.50014 20.8041 3.3904 20.7092 3.29502L20.705 3.29078C20.5242 3.11106 20.2751 3 20 3H12C11.4477 3 11 3.44772 11 4C11 4.55228 11.4477 5 12 5H17.5858L5 17.5858V12C5 11.4477 4.55229 11 4 11C3.44771 11 3 11.4477 3 12V19.9993L3 20.003C3.0004 20.1375 3.02735 20.2657 3.07588 20.3828C3.12432 20.4999 3.19595 20.6096 3.29078 20.705L3.29502 20.7092C3.47581 20.8889 3.72494 21 4 21H12C12.5523 21 13 20.5523 13 20C13 19.4477 12.5523 19 12 19H6.41421L19 6.41421V12C19 12.5523 19.4477 13 20 13C20.5523 13 21 12.5523 21 12V4.00069L21 3.997Z" fill="currentColor"/>
+</svg>
+{% endmacro %}
+
 {% macro export_archive() %}
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V6.5C3 6.25 3.04167 6.025 3.125 5.825C3.20833 5.625 3.31667 5.43333 3.45 5.25L4.85 3.55C4.98333 3.36667 5.15 3.22917 5.35 3.1375C5.55 3.04583 5.76667 3 6 3H18C18.2333 3 18.45 3.04583 18.65 3.1375C18.85 3.22917 19.0167 3.36667 19.15 3.55L20.55 5.25C20.6833 5.43333 20.7917 5.625 20.875 5.825C20.9583 6.025 21 6.25 21 6.5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5.4 6H18.6L17.75 5H6.25L5.4 6ZM5 19H19V8H5V19ZM12 17.575C12.1333 17.575 12.2583 17.5542 12.375 17.5125C12.4917 17.4708 12.6 17.4 12.7 17.3L15.3 14.7C15.4833 14.5167 15.575 14.2833 15.575 14C15.575 13.7167 15.4833 13.4833 15.3 13.3C15.1167 13.1167 14.8833 13.025 14.6 13.025C14.3167 13.025 14.0833 13.1167 13.9 13.3L13 14.2V11C13 10.7167 12.9042 10.4792 12.7125 10.2875C12.5208 10.0958 12.2833 10 12 10C11.7167 10 11.4792 10.0958 11.2875 10.2875C11.0958 10.4792 11 10.7167 11 11V14.2L10.1 13.3C9.91667 13.1167 9.68333 13.025 9.4 13.025C9.11667 13.025 8.88333 13.1167 8.7 13.3C8.51667 13.4833 8.425 13.7167 8.425 14C8.425 14.2833 8.51667 14.5167 8.7 14.7L11.3 17.3C11.4 17.4 11.5083 17.4708 11.625 17.5125C11.7417 17.5542 11.8667 17.575 12 17.575Z" fill="currentColor"/>
@@ -181,14 +238,14 @@ done
 {% endmacro %}

 {% macro favourite_off() %}
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M13.9047 9.37839L12 5.51907L10.0953 9.37839L5.83627 9.99726L8.91812 13.0013L8.1906 17.2431L12 15.2404L15.8093 17.2431L15.0818 13.0013L18.1637 9.99726L13.9047 9.37839ZM8.76715 7.55038L11.1032 2.81696C11.47 2.07371 12.5299 2.07371 12.8967 2.81696L15.2328 7.55038L20.4564 8.30942C21.2766 8.4286 21.6042 9.43657 21.0106 10.0151L17.2308 13.6996L18.1231 18.9021C18.2632 19.719 17.4058 20.342 16.6721 19.9563L12 17.5L7.32781 19.9563C6.59418 20.342 5.73675 19.719 5.87686 18.9021L6.76916 13.6996L2.9893 10.0151C2.39578 9.43657 2.72329 8.4286 3.54351 8.30942L8.76715 7.55038Z" fill="currentColor"/>
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M28.4735 17.8428L38.4764 19.2963L31.2382 26.3518L32.9469 36.3143L24.0001 31.6106L15.0532 36.3143L16.7619 26.3518L9.52371 19.2963L19.5266 17.8428L24.0001 8.77859L28.4735 17.8428ZM17.5344 15.1008L7.08715 16.6188C5.44671 16.8572 4.79169 18.8731 5.97872 20.0302L13.5384 27.3991L11.7538 37.8042C11.4736 39.438 13.1885 40.6839 14.6557 39.9125L24.0001 34.9999L33.3444 39.9125C34.8116 40.6839 36.5265 39.438 36.2463 37.8042L34.4617 27.3991L42.0214 20.0302C43.2084 18.8731 42.5534 16.8572 40.913 16.6188L30.4657 15.1008L25.7935 5.63391C25.0599 4.14742 22.9402 4.14742 22.2066 5.63391L17.5344 15.1008Z" fill="currentColor"/>
 </svg>
 {% endmacro %}

 {% macro favourite_on() %}
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M12.8968 2.81696L15.2329 7.55038L20.4565 8.30942C21.2767 8.4286 21.6042 9.43657 21.0107 10.0151L17.2308 13.6996L18.1231 18.9021C18.2633 19.719 17.4058 20.342 16.6722 19.9563L12 17.5L7.32787 19.9563C6.59424 20.342 5.73681 19.719 5.87692 18.9021L6.76922 13.6996L2.98936 10.0151C2.39584 9.43657 2.72335 8.4286 3.54357 8.30942L8.76721 7.55038L11.1033 2.81696C11.4701 2.07371 12.53 2.07371 12.8968 2.81696Z" fill="currentColor"/>
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M25.7935 5.63391L30.4657 15.1008L40.913 16.6188C42.5534 16.8572 43.2084 18.8731 42.0214 20.0302L34.4617 27.3991L36.2463 37.8042C36.5265 39.438 34.8116 40.6839 33.3444 39.9125L24.0001 34.9999L14.6557 39.9125C13.1885 40.6839 11.4736 39.438 11.7538 37.8042L13.5384 27.3991L5.97872 20.0302C4.79169 18.8731 5.44671 16.8572 7.08715 16.6188L17.5344 15.1008L22.2066 5.63391C22.9402 4.14742 25.0599 4.14742 25.7935 5.63391Z" fill="currentColor"/>
 </svg>
 {% endmacro %}

@@ -215,12 +272,57 @@ done
 </svg>
 {% endmacro %}

-{% macro info() %}
+{% macro grid() %}
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M4 11C3.71667 11 3.47917 10.9042 3.2875 10.7125C3.09583 10.5208 3 10.2833 3 10V4C3 3.71667 3.09583 3.47917 3.2875 3.2875C3.47917 3.09583 3.71667 3 4 3H10C10.2833 3 10.5208 3.09583 10.7125 3.2875C10.9042 3.47917 11 3.71667 11 4V10C11 10.2833 10.9042 10.5208 10.7125 10.7125C10.5208 10.9042 10.2833 11 10 11H4ZM9 9V5H5V9H9Z" fill="currentColor"/>
+  <path d="M14 21C13.7167 21 13.4792 20.9042 13.2875 20.7125C13.0958 20.5208 13 20.2833 13 20V14C13 13.7167 13.0958 13.4792 13.2875 13.2875C13.4792 13.0958 13.7167 13 14 13H20C20.2833 13 20.5208 13.0958 20.7125 13.2875C20.9042 13.4792 21 13.7167 21 14V20C21 20.2833 20.9042 20.5208 20.7125 20.7125C20.5208 20.9042 20.2833 21 20 21H14ZM19 19V15H15V19H19Z" fill="currentColor"/>
+  <path d="M4 21C3.71667 21 3.47917 20.9042 3.2875 20.7125C3.09583 20.5208 3 20.2833 3 20V14C3 13.7167 3.09583 13.4792 3.2875 13.2875C3.47917 13.0958 3.71667 13 4 13H10C10.2833 13 10.5208 13.0958 10.7125 13.2875C10.9042 13.4792 11 13.7167 11 14V20C11 20.2833 10.9042 20.5208 10.7125 20.7125C10.5208 20.9042 10.2833 21 10 21H4ZM9 19V15H5V19H9Z" fill="currentColor"/>
+  <path d="M14 11C13.7167 11 13.4792 10.9042 13.2875 10.7125C13.0958 10.5208 13 10.2833 13 10V4C13 3.71667 13.0958 3.47917 13.2875 3.2875C13.4792 3.09583 13.7167 3 14 3H20C20.2833 3 20.5208 3.09583 20.7125 3.2875C20.9042 3.47917 21 3.71667 21 4V10C21 10.2833 20.9042 10.5208 20.7125 10.7125C20.5208 10.9042 20.2833 11 20 11H14ZM19 9V5H15V9H19Z" fill="currentColor"/>
+</svg>
+{% endmacro %}
+
+{% macro help_solid() %}
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12 22C13.3833 22 14.6833 21.7375 15.9 21.2125C17.1167 20.6875 18.175 19.975 19.075 19.075C19.975 18.175 20.6875 17.1167 21.2125 15.9C21.7375 14.6833 22 13.3833 22 12C22 10.6167 21.7375 9.31667 21.2125 8.1C20.6875 6.88333 19.975 5.825 19.075 4.925C18.175 4.025 17.1167 3.3125 15.9 2.7875C14.6833 2.2625 13.3833 2 12 2C10.6167 2 9.31667 2.2625 8.1 2.7875C6.88333 3.3125 5.825 4.025 4.925 4.925C4.025 5.825 3.3125 6.88333 2.7875 8.1C2.2625 9.31667 2 10.6167 2 12C2 13.3833 2.2625 14.6833 2.7875 15.9C3.3125 17.1167 4.025 18.175 4.925 19.075C5.825 19.975 6.88333 20.6875 8.1 21.2125C9.31667 21.7375 10.6167 22 12 22ZM12 8C11.1716 8 10.5 8.67157 10.5 9.5C10.5 10.0523 10.0523 10.5 9.5 10.5C8.94772 10.5 8.5 10.0523 8.5 9.5C8.5 7.567 10.067 6 12 6C13.933 6 15.5 7.567 15.5 9.5C15.5 10.4478 15.122 11.3093 14.5106 11.9386C14.3876 12.0653 14.2702 12.1825 14.1583 12.2944C13.8705 12.5819 13.6184 12.8338 13.3972 13.118C13.1052 13.4932 13 13.769 13 14C13 14.5523 12.5523 15 12 15C11.4477 15 11 14.5523 11 14C11 13.1264 11.4067 12.4192 11.8189 11.8896C12.1239 11.4977 12.5073 11.1151 12.8184 10.8046C12.9122 10.7109 12.9995 10.6238 13.0761 10.545C13.3394 10.2739 13.5 9.90673 13.5 9.5C13.5 8.67157 12.8284 8 12 8ZM13 17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17C11 16.4477 11.4477 16 12 16C12.5523 16 13 16.4477 13 17Z" fill="currentColor"/>
+</svg>
+{% endmacro %}
+
+{% macro help() %}
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12 8C11.1716 8 10.5 8.67157 10.5 9.5C10.5 10.0523 10.0523 10.5 9.5 10.5C8.94772 10.5 8.5 10.0523 8.5 9.5C8.5 7.567 10.067 6 12 6C13.933 6 15.5 7.567 15.5 9.5C15.5 10.4478 15.122 11.3093 14.5106 11.9386C14.3876 12.0653 14.2702 12.1825 14.1583 12.2944C13.8705 12.5819 13.6184 12.8338 13.3972 13.118C13.1052 13.4932 13 13.769 13 14C13 14.5523 12.5523 15 12 15C11.4477 15 11 14.5523 11 14C11 13.1264 11.4067 12.4192 11.8189 11.8896C12.1239 11.4977 12.5073 11.1151 12.8184 10.8046C12.9122 10.7109 12.9995 10.6238 13.0761 10.545C13.3394 10.2739 13.5 9.90673 13.5 9.5C13.5 8.67157 12.8284 8 12 8Z" fill="currentColor"/>
+  <path d="M13 17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17C11 16.4477 11.4477 16 12 16C12.5523 16 13 16.4477 13 17Z" fill="currentColor"/>
+  <path d="M8.1 21.2125C9.31667 21.7375 10.6167 22 12 22C13.3833 22 14.6833 21.7375 15.9 21.2125C17.1167 20.6875 18.175 19.975 19.075 19.075C19.975 18.175 20.6875 17.1167 21.2125 15.9C21.7375 14.6833 22 13.3833 22 12C22 10.6167 21.7375 9.31667 21.2125 8.1C20.6875 6.88333 19.975 5.825 19.075 4.925C18.175 4.025 17.1167 3.3125 15.9 2.7875C14.6833 2.2625 13.3833 2 12 2C10.6167 2 9.31667 2.2625 8.1 2.7875C6.88333 3.3125 5.825 4.025 4.925 4.925C4.025 5.825 3.3125 6.88333 2.7875 8.1C2.2625 9.31667 2 10.6167 2 12C2 13.3833 2.2625 14.6833 2.7875 15.9C3.3125 17.1167 4.025 18.175 4.925 19.075C5.825 19.975 6.88333 20.6875 8.1 21.2125ZM17.675 17.675C16.125 19.225 14.2333 20 12 20C9.76667 20 7.875 19.225 6.325 17.675C4.775 16.125 4 14.2333 4 12C4 9.76667 4.775 7.875 6.325 6.325C7.875 4.775 9.76667 4 12 4C14.2333 4 16.125 4.775 17.675 6.325C19.225 7.875 20 9.76667 20 12C20 14.2333 19.225 16.125 17.675 17.675Z" fill="currentColor"/>
+</svg>
+{% endmacro %}
+
+{% macro host() %}
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M16.7125 6.7125C16.5208 6.90417 16.2833 7 16 7C15.7167 7 15.4792 6.90417 15.2875 6.7125C15.0958 6.52083 15 6.28333 15 6C15 5.71667 15.0958 5.47917 15.2875 5.2875C15.4792 5.09583 15.7167 5 16 5C16.2833 5 16.5208 5.09583 16.7125 5.2875C16.9042 5.47917 17 5.71667 17 6C17 6.28333 16.9042 6.52083 16.7125 6.7125Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M6 2C4.89543 2 4 2.89543 4 4V20C4 21.1046 4.89543 22 6 22H18C19.1046 22 20 21.1046 20 20V4C20 2.89543 19.1046 2 18 2H6ZM18 4H6V8H18V4ZM6 12V10H18V12H6ZM6 14V16H18V14H6ZM6 20V18H18V20H6Z" fill="currentColor"/>
+</svg>
+{% endmacro %}
+
+{% macro image() %}
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M17 9C17 10.1046 16.1046 11 15 11C13.8954 11 13 10.1046 13 9C13 7.89543 13.8954 7 15 7C16.1046 7 17 7.89543 17 9Z" fill="currentColor"/>
+  <path d="M5 3C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3H5ZM19 5V19L5 19V15.8284L9 11.8284L16.1716 18.9999L19 19L10.4142 10.4142C9.63316 9.63311 8.36684 9.63311 7.58579 10.4142L5 12.9999V5H19Z" fill="currentColor"/>
+</svg>
+{% endmacro %}
+
+{% macro info_solid() %}
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M12 17C12.2833 17 12.5208 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16V12C13 11.7167 12.9042 11.4792 12.7125 11.2875C12.5208 11.0958 12.2833 11 12 11C11.7167 11 11.4792 11.0958 11.2875 11.2875C11.0958 11.4792 11 11.7167 11 12V16C11 16.2833 11.0958 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM12 9C12.2833 9 12.5208 8.90417 12.7125 8.7125C12.9042 8.52083 13 8.28333 13 8C13 7.71667 12.9042 7.47917 12.7125 7.2875C12.5208 7.09583 12.2833 7 12 7C11.7167 7 11.4792 7.09583 11.2875 7.2875C11.0958 7.47917 11 7.71667 11 8C11 8.28333 11.0958 8.52083 11.2875 8.7125C11.4792 8.90417 11.7167 9 12 9ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22Z" fill="currentColor"/>
 </svg>
 {% endmacro %}

+{% macro info() %}
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M11.2875 7.2875C11.4792 7.09583 11.7167 7 12 7C12.2833 7 12.5208 7.09583 12.7125 7.2875C12.9042 7.47917 13 7.71667 13 8C13 8.28333 12.9042 8.52083 12.7125 8.7125C12.5208 8.90417 12.2833 9 12 9C11.7167 9 11.4792 8.90417 11.2875 8.7125C11.0958 8.52083 11 8.28333 11 8C11 7.71667 11.0958 7.47917 11.2875 7.2875Z" fill="currentColor"/>
+  <path d="M11.2875 11.2875C11.4792 11.0958 11.7167 11 12 11C12.2833 11 12.5208 11.0958 12.7125 11.2875C12.9042 11.4792 13 11.7167 13 12V16C13 16.2833 12.9042 16.5208 12.7125 16.7125C12.5208 16.9042 12.2833 17 12 17C11.7167 17 11.4792 16.9042 11.2875 16.7125C11.0958 16.5208 11 16.2833 11 16V12C11 11.7167 11.0958 11.4792 11.2875 11.2875Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12Z" fill="currentColor"/>
+</svg>
+{% endmacro %}
+
 {% macro leave() %}
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M14 12.9999C14.2833 12.9999 14.5208 12.904 14.7125 12.7124C14.9042 12.5207 15 12.2832 15 11.9999C15 11.7165 14.9042 11.479 14.7125 11.2874C14.5208 11.0957 14.2833 10.9999 14 10.9999C13.7167 10.9999 13.4792 11.0957 13.2875 11.2874C13.0958 11.479 13 11.7165 13 11.9999C13 12.2832 13.0958 12.5207 13.2875 12.7124C13.4792 12.904 13.7167 12.9999 14 12.9999Z" fill="currentColor"/>
@@ -261,6 +363,12 @@ done
 </svg>
 {% endmacro %}

+{% macro menu() %}
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M4 8C4 7.44772 4.44772 7 5 7H19C19.5523 7 20 7.44772 20 8C20 8.55229 19.5523 9 19 9L5 9C4.44772 9 4 8.55228 4 8ZM4 12C4 11.4477 4.44772 11 5 11L19 11C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13L5 13C4.44772 13 4 12.5523 4 12ZM5 15C4.44772 15 4 15.4477 4 16C4 16.5523 4.44772 17 5 17L19 17C19.5523 17 20 16.5523 20 16C20 15.4477 19.5523 15 19 15L5 15Z" fill="currentColor"/>
+</svg>
+{% endmacro %}
+
 {% macro mic_off_outline() %}
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M8 7.99986V7.9943L10 9.9943V9.99986L13.4143 13.4141L13.4171 13.4114L14.8313 14.8256L14.8285 14.8284L16.2427 16.2426L16.2455 16.2398L17.6597 17.654L17.6569 17.6568L20.5001 20.5C20.8906 20.8905 20.8906 21.5236 20.5001 21.9142C20.1096 22.3047 19.4764 22.3047 19.0859 21.9142L16.064 18.8923C15.1448 19.4355 14.1076 19.8 13 19.9381V21C13 21.5523 12.5523 22 12 22C11.4477 22 11 21.5523 11 21V19.9381C7.05369 19.446 4 16.0796 4 12C4 11.4477 4.44772 11 5 11C5.55228 11 6 11.4477 6 12C6 15.3137 8.68629 18 12 18C12.9263 18 13.8036 17.7901 14.5869 17.4152L13.0362 15.8645C12.7057 15.9529 12.3584 16 12 16C9.79086 16 8 14.2091 8 12V10.8283L2.08586 4.91414C1.69534 4.52361 1.69534 3.89045 2.08586 3.49992C2.47639 3.1094 3.10955 3.1094 3.50008 3.49993L8 7.99986Z" fill="currentColor"/>
@@ -315,21 +423,21 @@ done

 {% macro notifications_solid() %}
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M20.2929 17.2929C20.9229 17.9229 20.4767 19 19.5858 19H4.41424C3.52333 19 3.07716 17.9229 3.70713 17.2929L5.00002 16V10C5.00002 10 5.00002 3 12 3C19 3 19 10 19 10V16L20.2929 17.2929Z" fill="currentColor"/>
-  <path d="M12 22C10.8954 22 10 21.1046 10 20H14C14 21.1046 13.1046 22 12 22Z" fill="currentColor"/>
+  <path d="M20.2928 17.2929C20.9228 17.9229 20.4766 19 19.5857 19H4.41411C3.52321 19 3.07704 17.9229 3.70701 17.2929L4.9999 16V10C4.9999 10 4.9999 3 11.9999 3C18.9999 3 18.9999 10 18.9999 10V16L20.2928 17.2929Z" fill="currentColor"/>
+  <path d="M11.9999 22C10.8953 22 9.99988 21.1046 9.99988 20H13.9999C13.9999 21.1046 13.1044 22 11.9999 22Z" fill="currentColor"/>
 </svg>
 {% endmacro %}

 {% macro notifications() %}
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M12 3C19 3 19 10 19 10V16L20.2929 17.2929C20.9229 17.9229 20.4767 19 19.5858 19H4.41424C3.52333 19 3.07716 17.9229 3.70713 17.2929L5.00002 16V10C5.00002 10 5.00002 3 12 3ZM17 10.0104L16.9994 9.98802C16.9985 9.96033 16.9963 9.91049 16.9914 9.84171C16.9816 9.70348 16.9608 9.49294 16.9179 9.23505C16.8303 8.70978 16.659 8.04 16.3362 7.39443C16.0173 6.75669 15.5704 6.17979 14.9375 5.75785C14.3171 5.34426 13.4001 5 12 5C10.6 5 9.68293 5.34426 9.06255 5.75785C8.42964 6.17979 7.98275 6.75669 7.66388 7.39443C7.34109 8.04 7.16973 8.70978 7.08218 9.23505C7.0392 9.49294 7.01849 9.70348 7.00861 9.84171C7.0037 9.91049 7.00154 9.96033 7.00062 9.98802L7.00002 10.0104V16.8284L6.82845 17H17.1716L17 16.8284V10.0104Z" fill="currentColor"/>
-  <path d="M12 22C10.8954 22 10 21.1046 10 20H14C14 21.1046 13.1046 22 12 22Z" fill="currentColor"/>
+  <path d="M11.9999 3C18.9999 3 18.9999 10 18.9999 10V16L20.2928 17.2929C20.9228 17.9229 20.4766 19 19.5857 19H4.41411C3.52321 19 3.07704 17.9229 3.70701 17.2929L4.9999 16V10C4.9999 10 4.9999 3 11.9999 3ZM16.9999 10.0104L16.9993 9.98802C16.9984 9.96033 16.9962 9.91049 16.9913 9.84171C16.9814 9.70348 16.9607 9.49294 16.9177 9.23505C16.8302 8.70978 16.6588 8.04 16.336 7.39443C16.0172 6.75669 15.5703 6.17979 14.9374 5.75785C14.317 5.34426 13.3999 5 11.9999 5C10.5999 5 9.68281 5.34426 9.06243 5.75785C8.42952 6.17979 7.98262 6.75669 7.66375 7.39443C7.34097 8.04 7.16961 8.70978 7.08206 9.23505C7.03908 9.49294 7.01836 9.70348 7.00849 9.84171C7.00358 9.91049 7.00142 9.96033 7.0005 9.98802L6.9999 10.0104V16.8284L6.82833 17H17.1715L16.9999 16.8284V10.0104Z" fill="currentColor"/>
+  <path d="M11.9999 22C10.8953 22 9.99988 21.1046 9.99988 20H13.9999C13.9999 21.1046 13.1044 22 11.9999 22Z" fill="currentColor"/>
 </svg>
 {% endmacro %}

 {% macro offline() %}
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M19.1 21.9L17.15 20H6.5C4.96667 20 3.66667 19.4666 2.6 18.4C1.53333 17.3333 1 16.0333 1 14.5C1 13.2166 1.39583 12.075 2.1875 11.075C2.97917 10.075 4 9.43331 5.25 9.14998C5.3 9.01664 5.35 8.88748 5.4 8.76248C5.45 8.63748 5.5 8.49998 5.55 8.34998L2.1 4.89998C1.91667 4.71664 1.825 4.48331 1.825 4.19998C1.825 3.91664 1.91667 3.68331 2.1 3.49998C2.28333 3.31664 2.51667 3.22498 2.8 3.22498C3.08333 3.22498 3.31667 3.31664 3.5 3.49998L20.5 20.5C20.6833 20.6833 20.775 20.9166 20.775 21.2C20.775 21.4833 20.6833 21.7166 20.5 21.9C20.3167 22.0833 20.0833 22.1791 19.8 22.1875C19.5167 22.1958 19.2833 22.1 19.1 21.9ZM21.6 18.75L8.05 5.22498C8.63333 4.82498 9.25417 4.52081 9.9125 4.31248C10.5708 4.10414 11.2667 3.99998 12 3.99998C13.95 3.99998 15.6042 4.67914 16.9625 6.03748C18.3208 7.39581 19 9.04998 19 11C20.15 11.1333 21.1042 11.6291 21.8625 12.4875C22.6208 13.3458 23 14.35 23 15.5C23 16.15 22.875 16.7541 22.625 17.3125C22.375 17.8708 22.0333 18.35 21.6 18.75Z" fill="currentColor"/>
+  <path d="M19.1 21.9001L17.15 20.0001H6.5C4.96667 20.0001 3.66667 19.4668 2.6 18.4001C1.53333 17.3334 1 16.0334 1 14.5001C1 13.2168 1.39583 12.0751 2.1875 11.0751C2.97917 10.0751 4 9.43343 5.25 9.1501C5.3 9.01676 5.35 8.8876 5.4 8.7626C5.45 8.6376 5.5 8.5001 5.55 8.3501L2.1 4.9001C1.91667 4.71676 1.825 4.48343 1.825 4.2001C1.825 3.91676 1.91667 3.68343 2.1 3.5001C2.28333 3.31676 2.51667 3.2251 2.8 3.2251C3.08333 3.2251 3.31667 3.31676 3.5 3.5001L20.5 20.5001C20.6833 20.6834 20.775 20.9168 20.775 21.2001C20.775 21.4834 20.6833 21.7168 20.5 21.9001C20.3167 22.0834 20.0833 22.1793 19.8 22.1876C19.5167 22.1959 19.2833 22.1001 19.1 21.9001ZM21.6 18.7501L8.05 5.2251C8.63333 4.8251 9.25417 4.52093 9.9125 4.3126C10.5708 4.10426 11.2667 4.0001 12 4.0001C13.95 4.0001 15.6042 4.67926 16.9625 6.0376C18.3208 7.39593 19 9.0501 19 11.0001C20.15 11.1334 21.1042 11.6293 21.8625 12.4876C22.6208 13.3459 23 14.3501 23 15.5001C23 16.1501 22.875 16.7543 22.625 17.3126C22.375 17.8709 22.0333 18.3501 21.6 18.7501Z" fill="currentColor"/>
 </svg>
 {% endmacro %}

@@ -345,6 +453,34 @@ done
 </svg>
 {% endmacro %}

+{% macro pin_off() %}
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.11905 2C5.67135 2 5.4493 2.54322 5.7688 2.85683L7.85025 4.89988C7.94604 4.99391 8 5.12249 8 5.25671V9.74371C8 9.87768 7.94623 10.0061 7.85076 10.1L4.14924 13.7437C4.05377 13.8377 4 13.9661 4 14.1V15.5C4 15.7761 4.22386 16 4.5 16H11L11 22C11 22.5523 11.4477 23 12 23C12.5523 23 13 22.5523 13 22V16H19.5C19.7761 16 20 15.7761 20 15.5V14.1C20 13.9661 19.9462 13.8377 19.8508 13.7437L16.1492 10.1C16.0538 10.0061 16 9.87768 16 9.74371V5.25671C16 5.12249 16.054 4.99391 16.1498 4.89988L18.2312 2.85683C18.5507 2.54322 18.3286 2 17.8809 2H6.11905ZM10 4H14V9.74371C14 10.4136 14.2688 11.0554 14.7462 11.5253L17.2601 14H6.73985L9.25379 11.5253C9.73117 11.0554 10 10.4136 10 9.74371L10 4Z" fill="currentColor"/>
+</svg>
+{% endmacro %}
+
+{% macro pin_on() %}
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M5.7688 2.85683C5.4493 2.54322 5.67135 2 6.11905 2H17.8809C18.3286 2 18.5507 2.54322 18.2312 2.85683L16.1498 4.89988C16.054 4.99391 16 5.12249 16 5.25671V9.74371C16 9.87768 16.0538 10.0061 16.1492 10.1L19.8508 13.7437C19.9462 13.8377 20 13.9661 20 14.1V15.5C20 15.7761 19.7761 16 19.5 16H13V22C13 22.5523 12.5523 23 12 23C11.4477 23 11 22.5523 11 22L11 16H4.5C4.22386 16 4 15.7761 4 15.5V14.1C4 13.9661 4.05377 13.8377 4.14924 13.7437L7.85076 10.1C7.94623 10.0061 8 9.87768 8 9.74371V5.25671C8 5.12249 7.94604 4.99391 7.85025 4.89988L5.7688 2.85683Z" fill="currentColor"/>
+</svg>
+{% endmacro %}
+
+{% macro plus() %}
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z" fill="currentColor"/>
+</svg>
+{% endmacro %}
+
+{% macro polls_end() %}
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M18.7071 7.70711L22.7071 3.70711C23.0976 3.31658 23.0976 2.68342 22.7071 2.29289C22.3166 1.90237 21.6834 1.90237 21.2929 2.29289L18 5.58579L16.7071 4.29289C16.3166 3.90237 15.6834 3.90237 15.2929 4.29289C14.9024 4.68342 14.9024 5.31658 15.2929 5.70711L17.2929 7.70711C17.6834 8.09763 18.3166 8.09763 18.7071 7.70711Z" fill="currentColor"/>
+  <path d="M21 19V10.6586C20.3744 10.8797 19.7013 11 19 11V19H5V5L13 5C13 4.29873 13.1203 3.62556 13.3414 3H5C4.45 3 3.97917 3.19583 3.5875 3.5875C3.19583 3.97917 3 4.45 3 5V19C3 19.55 3.19583 20.0208 3.5875 20.4125C3.97917 20.8042 4.45 21 5 21H19C19.55 21 20.0208 20.8042 20.4125 20.4125C20.8042 20.0208 21 19.55 21 19Z" fill="currentColor"/>
+  <path d="M8 17C8.28333 17 8.52083 16.9042 8.7125 16.7125C8.90417 16.5208 9 16.2833 9 16V11C9 10.7167 8.90417 10.4792 8.7125 10.2875C8.52083 10.0958 8.28333 10 8 10C7.71667 10 7.47917 10.0958 7.2875 10.2875C7.09583 10.4792 7 10.7167 7 11V16C7 16.2833 7.09583 16.5208 7.2875 16.7125C7.47917 16.9042 7.71667 17 8 17Z" fill="currentColor"/>
+  <path d="M12 17C12.2833 17 12.5208 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16V8C13 7.71667 12.9042 7.47917 12.7125 7.2875C12.5208 7.09583 12.2833 7 12 7C11.7167 7 11.4792 7.09583 11.2875 7.2875C11.0958 7.47917 11 7.71667 11 8V16C11 16.2833 11.0958 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17Z" fill="currentColor"/>
+  <path d="M16 17C16.2833 17 16.5208 16.9042 16.7125 16.7125C16.9042 16.5208 17 16.2833 17 16V14C17 13.7167 16.9042 13.4792 16.7125 13.2875C16.5208 13.0958 16.2833 13 16 13C15.7167 13 15.4792 13.0958 15.2875 13.2875C15.0958 13.4792 15 13.7167 15 14V16C15 16.2833 15.0958 16.5208 15.2875 16.7125C15.4792 16.9042 15.7167 17 16 17Z" fill="currentColor"/>
+</svg>
+{% endmacro %}
+
 {% macro polls() %}
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M8 17C8.28333 17 8.52083 16.9042 8.7125 16.7125C8.90417 16.5208 9 16.2833 9 16V11C9 10.7167 8.90417 10.4792 8.7125 10.2875C8.52083 10.0958 8.28333 10 8 10C7.71667 10 7.47917 10.0958 7.2875 10.2875C7.09583 10.4792 7 10.7167 7 11V16C7 16.2833 7.09583 16.5208 7.2875 16.7125C7.47917 16.9042 7.71667 17 8 17ZM12 17C12.2833 17 12.5208 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16V8C13 7.71667 12.9042 7.47917 12.7125 7.2875C12.5208 7.09583 12.2833 7 12 7C11.7167 7 11.4792 7.09583 11.2875 7.2875C11.0958 7.47917 11 7.71667 11 8V16C11 16.2833 11.0958 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM16 17C16.2833 17 16.5208 16.9042 16.7125 16.7125C16.9042 16.5208 17 16.2833 17 16V14C17 13.7167 16.9042 13.4792 16.7125 13.2875C16.5208 13.0958 16.2833 13 16 13C15.7167 13 15.4792 13.0958 15.2875 13.2875C15.0958 13.4792 15 13.7167 15 14V16C15 16.2833 15.0958 16.5208 15.2875 16.7125C15.4792 16.9042 15.7167 17 16 17ZM5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V5H5V19Z" fill="currentColor"/>
@@ -364,12 +500,31 @@ done
 </svg>
 {% endmacro %}

+{% macro room_admin() %}
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M14.7125 14.7125C14.5208 14.9042 14.2833 15 14 15H10C9.71667 15 9.47917 14.9042 9.2875 14.7125C9.09583 14.5208 9 14.2833 9 14V11C9 10.7167 9.09583 10.4792 9.2875 10.2875C9.47917 10.0958 9.71667 10 10 10V9C10 8.45 10.1958 7.97917 10.5875 7.5875C10.9792 7.19583 11.45 7 12 7C12.55 7 13.0208 7.19583 13.4125 7.5875C13.8042 7.97917 14 8.45 14 9V10C14.2833 10 14.5208 10.0958 14.7125 10.2875C14.9042 10.4792 15 10.7167 15 11V14C15 14.2833 14.9042 14.5208 14.7125 14.7125ZM11 9V10H13V9C13 8.71667 12.9042 8.47917 12.7125 8.2875C12.5208 8.09583 12.2833 8 12 8C11.7167 8 11.4792 8.09583 11.2875 8.2875C11.0958 8.47917 11 8.71667 11 9Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.8944 2.44723C12.3314 2.1657 11.6686 2.1657 11.1056 2.44723L5.10557 5.44723C4.428 5.78601 4 6.47854 4 7.23608V12C4 18.7425 9.77252 21.2458 11.5106 21.8468C11.8303 21.9573 12.1697 21.9573 12.4894 21.8468C14.2275 21.2458 20 18.7425 20 12V7.23608C20 6.47854 19.572 5.78601 18.8944 5.44723L12.8944 2.44723ZM6 7.23608L12 4.23608L18 7.23608V12C18 17.1564 13.7613 19.2544 12 19.8982C10.2387 19.2544 6 17.1564 6 12V7.23608Z" fill="currentColor"/>
+</svg>
+{% endmacro %}
+
 {% macro search() %}
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M15.0491 16.4633C13.7873 17.4274 12.2105 18 10.5 18C6.35786 18 3 14.6421 3 10.5C3 6.35786 6.35786 3 10.5 3C14.6421 3 18 6.35786 18 10.5C18 12.2105 17.4274 13.7873 16.4633 15.0491L19.7071 18.2929C20.0976 18.6834 20.0976 19.3166 19.7071 19.7071C19.3166 20.0977 18.6834 20.0977 18.2929 19.7071L15.0491 16.4633ZM16 10.5C16 7.46243 13.5376 5 10.5 5C7.46243 5 5 7.46243 5 10.5C5 13.5376 7.46243 16 10.5 16C13.5376 16 16 13.5376 16 10.5Z" fill="currentColor"/>
 </svg>
 {% endmacro %}

+{% macro send_solid() %}
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M20.2111 12.8946L4.07005 20.9651C3.2862 21.357 2.41319 20.6227 2.66501 19.7833L4.69997 13.0001L11.25 13.0001C11.8023 13.0001 12.25 12.5524 12.25 12.0001C12.25 11.4479 11.8023 11.0001 11.25 11.0001L4.69997 11.0001L2.66501 4.21697C2.41319 3.37755 3.2862 2.64327 4.07005 3.03519L20.2111 11.1057C20.9482 11.4742 20.9482 12.526 20.2111 12.8946Z" fill="currentColor"/>
+</svg>
+{% endmacro %}
+
+{% macro send() %}
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M4.07005 20.9651L20.2111 12.8946C20.9482 12.526 20.9482 11.4742 20.2111 11.1057L4.07005 3.03519C3.2862 2.64327 2.41319 3.37755 2.66501 4.21697L4.91376 11.7128C4.96999 11.9002 4.96999 12.1001 4.91376 12.2875L2.66501 19.7833C2.41319 20.6227 3.2862 21.357 4.07005 20.9651ZM5.24571 5.85909L17.5278 12.0001L5.24571 18.1412L6.78803 13.0001L11.25 13.0001C11.8023 13.0001 12.25 12.5524 12.25 12.0001C12.25 11.4479 11.8023 11.0001 11.25 11.0001L6.78803 11.0001L5.24571 5.85909Z" fill="currentColor"/>
+</svg>
+{% endmacro %}
+
 {% macro settings_solid() %}
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M12.7314 2C13.432 2 14 2.56797 14 3.2686C14 3.84744 14.3963 4.34302 14.9348 4.55546C15.02 4.58907 15.1045 4.62411 15.1882 4.66054C15.7192 4.89152 16.3502 4.82141 16.7596 4.41194C17.2552 3.91642 18.0586 3.91642 18.5541 4.41194L19.5881 5.44592C20.0836 5.94144 20.0836 6.74485 19.5881 7.24037C19.1786 7.64983 19.1085 8.28077 19.3395 8.81177C19.3759 8.89551 19.4109 8.98 19.4445 9.0652C19.657 9.60365 20.1526 10 20.7314 10C21.432 10 22 10.568 22 11.2686V12.7314C22 13.432 21.432 14 20.7314 14C20.1526 14 19.657 14.3963 19.4445 14.9348C19.4109 15.02 19.3759 15.1045 19.3395 15.1882C19.1085 15.7192 19.1786 16.3502 19.5881 16.7596C20.0836 17.2552 20.0836 18.0586 19.5881 18.5541L18.5541 19.5881C18.0586 20.0836 17.2552 20.0836 16.7596 19.5881C16.3502 19.1786 15.7192 19.1085 15.1882 19.3395C15.1045 19.3759 15.02 19.4109 14.9348 19.4445C14.3963 19.657 14 20.1526 14 20.7314C14 21.432 13.432 22 12.7314 22H11.2686C10.568 22 10 21.432 10 20.7314C10 20.1526 9.60365 19.657 9.0652 19.4445C8.98 19.4109 8.89551 19.3759 8.81177 19.3395C8.28077 19.1085 7.64983 19.1786 7.24037 19.5881C6.74485 20.0836 5.94144 20.0836 5.44592 19.5881L4.41194 18.5541C3.91642 18.0586 3.91642 17.2552 4.41194 16.7596C4.82141 16.3502 4.89152 15.7192 4.66054 15.1882C4.62411 15.1045 4.58907 15.02 4.55546 14.9348C4.34302 14.3963 3.84744 14 3.2686 14C2.56797 14 2 13.432 2 12.7314V11.2686C2 10.568 2.56797 10 3.2686 10C3.84745 10 4.34302 9.60365 4.55546 9.0652C4.58908 8.98 4.62411 8.89551 4.66054 8.81177C4.89152 8.28077 4.82141 7.64983 4.41194 7.24037C3.91642 6.74485 3.91642 5.94144 4.41194 5.44592L5.44592 4.41194C5.94144 3.91642 6.74485 3.91642 7.24037 4.41194C7.64983 4.82141 8.28077 4.89152 8.81177 4.66054C8.89551 4.62411 8.98 4.58907 9.0652 4.55546C9.60365 4.34302 10 3.84744 10 3.2686C10 2.56797 10.568 2 11.2686 2H12.7314ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z" fill="currentColor"/>
@@ -417,6 +572,20 @@ done
 </svg>
 {% endmacro %}

+{% macro spotlight() %}
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M5 5H19V13H14C13.4477 13 13 13.4477 13 14V19H5L5 5ZM15 19V15H19V19H15ZM5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21Z" fill="currentColor"/>
+</svg>
+{% endmacro %}
+
+{% macro switch_camera_solid() %}
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M15.7929 2.29289C16.1834 1.90237 16.8166 1.90237 17.2071 2.29289L19.2071 4.29289C19.5976 4.68342 19.5976 5.31658 19.2071 5.70711L17.2071 7.70711C16.8166 8.09763 16.1834 8.09763 15.7929 7.70711C15.4024 7.31658 15.4024 6.68342 15.7929 6.29289L16.0858 6H5.5C4.39543 6 3.5 6.89543 3.5 8V15C3.5 15.5523 3.05228 16 2.5 16C1.94772 16 1.5 15.5523 1.5 15V8C1.5 5.79086 3.29086 4 5.5 4H16.0858L15.7929 3.70711C15.4024 3.31658 15.4024 2.68342 15.7929 2.29289Z" fill="currentColor"/>
+  <path d="M17.5 18H6.91421L7.20711 17.7071C7.59763 17.3166 7.59763 16.6834 7.20711 16.2929C6.81658 15.9024 6.18342 15.9024 5.79289 16.2929L3.79289 18.2929C3.40237 18.6834 3.40237 19.3166 3.79289 19.7071L5.79289 21.7071C6.18342 22.0976 6.81658 22.0976 7.20711 21.7071C7.59763 21.3166 7.59763 20.6834 7.20711 20.2929L6.91421 20H17.5C19.7091 20 21.5 18.2091 21.5 16V9C21.5 8.44772 21.0523 8 20.5 8C19.9477 8 19.5 8.44772 19.5 9V16C19.5 17.1046 18.6046 18 17.5 18Z" fill="currentColor"/>
+  <path d="M11.5 15C13.1569 15 14.5 13.6569 14.5 12C14.5 10.3431 13.1569 9 11.5 9C9.84315 9 8.5 10.3431 8.5 12C8.5 13.6569 9.84315 15 11.5 15Z" fill="currentColor"/>
+</svg>
+{% endmacro %}
+
 {% macro thread() %}
 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 18 18"><path fill="currentColor" d="M5 5.25a.75.75 0 0 0 0 1.5h8a.75.75 0 0 0 0-1.5H5ZM5 8.25a.75.75 0 0 0 0 1.5h4a.75.75 0 1 0 0-1.5H5Z"/><path fill="currentColor" fill-rule="evenodd" d="M3 .25A2.75 2.75 0 0 0 .25 3v14a.75.75 0 0 0 1.2.6L4.916 15c.217-.162.48-.25.75-.25H15A2.75 2.75 0 0 0 17.75 12V3A2.75 2.75 0 0 0 15 .25H3ZM1.75 3c0-.69.56-1.25 1.25-1.25h12c.69 0 1.25.56 1.25 1.25v9c0 .69-.56 1.25-1.25 1.25H5.666a2.75 2.75 0 0 0-1.65.55L1.75 15.5V3Z" clip-rule="evenodd"/></svg>
 {% endmacro %}
@@ -435,6 +604,21 @@ done
 </svg>
 {% endmacro %}

+{% macro unknown_solid() %}
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12.9986 13.0115C12.9986 13.0115 12.9992 13.0101 12.9996 13.0074L12.9986 13.0115Z" fill="currentColor"/>
+  <path d="M3.5875 20.4125C3.97917 20.8042 4.45 21 5 21H19C19.55 21 20.0208 20.8042 20.4125 20.4125C20.8042 20.0208 21 19.55 21 19V5C21 4.45 20.8042 3.97917 20.4125 3.5875C20.0208 3.19583 19.55 3 19 3H5C4.45 3 3.97917 3.19583 3.5875 3.5875C3.19583 3.97917 3 4.45 3 5V19C3 19.55 3.19583 20.0208 3.5875 20.4125ZM12 9C11.4477 9 11 9.44772 11 10C11 10.5523 10.5523 11 10 11C9.44772 11 9 10.5523 9 10C9 8.34315 10.3431 7 12 7C13.6569 7 15 8.34315 15 10C15 11.137 14.3671 12.1247 13.4391 12.6327C13.265 12.7281 13.1336 12.8316 13.0569 12.9211C13.017 12.9676 13.0038 12.9954 13 13.0062C12.9966 13.5556 12.5502 14 12 14C11.4477 14 11 13.5523 11 13C11 12.4196 11.2528 11.9526 11.5387 11.6191C11.8204 11.2907 12.1685 11.0482 12.4788 10.8784C12.7915 10.7072 13 10.3772 13 10C13 9.44772 12.5523 9 12 9ZM13 16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16C11 15.4477 11.4477 15 12 15C12.5523 15 13 15.4477 13 16Z" fill="currentColor"/>
+</svg>
+{% endmacro %}
+
+{% macro unknown() %}
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V5H5V19Z" fill="currentColor"/>
+  <path d="M11 10C11 9.44772 11.4477 9 12 9C12.5523 9 13 9.44772 13 10C13 10.3772 12.7915 10.7072 12.4788 10.8784C12.1685 11.0482 11.8204 11.2907 11.5387 11.6191C11.2528 11.9526 11 12.4196 11 13C11 13.5523 11.4477 14 12 14C12.5502 14 12.9966 13.5556 13 13.0062C13.0038 12.9954 13.017 12.9676 13.0569 12.9211C13.1336 12.8316 13.265 12.7281 13.4392 12.6327C14.3671 12.1247 15 11.137 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 10.5523 9.44772 11 10 11C10.5523 11 11 10.5523 11 10ZM12.9986 13.0115V13.0115C12.9986 13.0115 12.9992 13.0101 12.9996 13.0074L12.9986 13.0115Z" fill="currentColor"/>
+  <path d="M12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15C11.4477 15 11 15.4477 11 16C11 16.5523 11.4477 17 12 17Z" fill="currentColor"/>
+</svg>
+{% endmacro %}
+
 {% macro user_add_solid() %}
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M19 14C18.7167 14 18.4792 13.9042 18.2875 13.7125C18.0958 13.5208 18 13.2833 18 13V11H16C15.7167 11 15.4792 10.9042 15.2875 10.7125C15.0958 10.5208 15 10.2833 15 10C15 9.71667 15.0958 9.47917 15.2875 9.2875C15.4792 9.09583 15.7167 9 16 9H18V7C18 6.71667 18.0958 6.47917 18.2875 6.2875C18.4792 6.09583 18.7167 6 19 6C19.2833 6 19.5208 6.09583 19.7125 6.2875C19.9042 6.47917 20 6.71667 20 7V9H22C22.2833 9 22.5208 9.09583 22.7125 9.2875C22.9042 9.47917 23 9.71667 23 10C23 10.2833 22.9042 10.5208 22.7125 10.7125C22.5208 10.9042 22.2833 11 22 11H20V13C20 13.2833 19.9042 13.5208 19.7125 13.7125C19.5208 13.9042 19.2833 14 19 14ZM9 12C7.9 12 6.95833 11.6083 6.175 10.825C5.39167 10.0417 5 9.1 5 8C5 6.9 5.39167 5.95833 6.175 5.175C6.95833 4.39167 7.9 4 9 4C10.1 4 11.0417 4.39167 11.825 5.175C12.6083 5.95833 13 6.9 13 8C13 9.1 12.6083 10.0417 11.825 10.825C11.0417 11.6083 10.1 12 9 12ZM2 20C1.71667 20 1.47917 19.9042 1.2875 19.7125C1.09583 19.5208 1 19.2833 1 19V17.2C1 16.6333 1.14583 16.1125 1.4375 15.6375C1.72917 15.1625 2.11667 14.8 2.6 14.55C3.63333 14.0333 4.68333 13.6458 5.75 13.3875C6.81667 13.1292 7.9 13 9 13C10.1 13 11.1833 13.1292 12.25 13.3875C13.3167 13.6458 14.3667 14.0333 15.4 14.55C15.8833 14.8 16.2708 15.1625 16.5625 15.6375C16.8542 16.1125 17 16.6333 17 17.2V19C17 19.2833 16.9042 19.5208 16.7125 19.7125C16.5208 19.9042 16.2833 20 16 20H2Z" fill="currentColor"/>
@@ -447,6 +631,13 @@ done
 </svg>
 {% endmacro %}

+{% macro user_profile_solid() %}
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12 15C10.9 15 9.95833 14.6083 9.175 13.825C8.39167 13.0417 8 12.1 8 11C8 9.9 8.39167 8.95833 9.175 8.175C9.95833 7.39167 10.9 7 12 7C13.1 7 14.0417 7.39167 14.825 8.175C15.6083 8.95833 16 9.9 16 11C16 12.1 15.6083 13.0417 14.825 13.825C14.0417 14.6083 13.1 15 12 15Z" fill="currentColor"/>
+  <path d="M19.5281 18.5826C21.0673 16.8238 22 14.5208 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 14.5208 2.93275 16.8238 4.47194 18.5826C6.30493 20.6772 8.99799 22 12 22C15.002 22 17.6951 20.6772 19.5281 18.5826ZM8.75 16.3875C7.83474 16.6092 6.93176 16.9259 6.04104 17.3378C4.77189 15.9219 4 14.0511 4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12C20 14.0511 19.2281 15.9219 17.959 17.3378C17.0682 16.9259 16.1653 16.6092 15.25 16.3875C14.1833 16.1292 13.1 16 12 16C10.9 16 9.81667 16.1292 8.75 16.3875Z" fill="currentColor"/>
+</svg>
+{% endmacro %}
+
 {% macro user_profile() %}
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M9.175 13.825C9.95833 14.6083 10.9 15 12 15C13.1 15 14.0417 14.6083 14.825 13.825C15.6083 13.0417 16 12.1 16 11C16 9.9 15.6083 8.95833 14.825 8.175C14.0417 7.39167 13.1 7 12 7C10.9 7 9.95833 7.39167 9.175 8.175C8.39167 8.95833 8 9.9 8 11C8 12.1 8.39167 13.0417 9.175 13.825ZM13.4125 12.4125C13.0208 12.8042 12.55 13 12 13C11.45 13 10.9792 12.8042 10.5875 12.4125C10.1958 12.0208 10 11.55 10 11C10 10.45 10.1958 9.97917 10.5875 9.5875C10.9792 9.19583 11.45 9 12 9C12.55 9 13.0208 9.19583 13.4125 9.5875C13.8042 9.97917 14 10.45 14 11C14 11.55 13.8042 12.0208 13.4125 12.4125Z" fill="currentColor"/>
@@ -463,7 +654,13 @@ done

 {% macro verified() %}
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M8.14995 21.75L6.69995 19.3L3.94995 18.7C3.69995 18.65 3.49995 18.5208 3.34995 18.3125C3.19995 18.1042 3.14162 17.875 3.17495 17.625L3.44995 14.8L1.57495 12.65C1.40828 12.4667 1.32495 12.25 1.32495 12C1.32495 11.75 1.40828 11.5333 1.57495 11.35L3.44995 9.2L3.17495 6.375C3.14162 6.125 3.19995 5.89583 3.34995 5.6875C3.49995 5.47916 3.69995 5.35 3.94995 5.3L6.69995 4.7L8.14995 2.25C8.28328 2.03333 8.46662 1.8875 8.69995 1.8125C8.93328 1.7375 9.16662 1.75 9.39995 1.85L12 2.95L14.6 1.85C14.8333 1.75 15.0666 1.7375 15.3 1.8125C15.5333 1.8875 15.7166 2.03333 15.85 2.25L17.3 4.7L20.05 5.3C20.3 5.35 20.5 5.47916 20.65 5.6875C20.8 5.89583 20.8583 6.125 20.825 6.375L20.55 9.2L22.425 11.35C22.5916 11.5333 22.675 11.75 22.675 12C22.675 12.25 22.5916 12.4667 22.425 12.65L20.55 14.8L20.825 17.625C20.8583 17.875 20.8 18.1042 20.65 18.3125C20.5 18.5208 20.3 18.65 20.05 18.7L17.3 19.3L15.85 21.75C15.7166 21.9667 15.5333 22.1125 15.3 22.1875C15.0666 22.2625 14.8333 22.25 14.6 22.15L12 21.05L9.39995 22.15C9.16662 22.25 8.93328 22.2625 8.69995 22.1875C8.46662 22.1125 8.28328 21.9667 8.14995 21.75ZM10.95 12.7L9.49995 11.275C9.31662 11.0917 9.08745 11 8.81245 11C8.53745 11 8.29995 11.1 8.09995 11.3C7.91662 11.4833 7.82495 11.7167 7.82495 12C7.82495 12.2833 7.91662 12.5167 8.09995 12.7L10.25 14.85C10.45 15.05 10.6833 15.15 10.95 15.15C11.2166 15.15 11.45 15.05 11.65 14.85L15.9 10.6C16.1 10.4 16.1958 10.1667 16.1875 9.9C16.1791 9.63333 16.0833 9.4 15.9 9.2C15.7 9 15.4625 8.89583 15.1875 8.8875C14.9125 8.87916 14.675 8.975 14.475 9.175L10.95 12.7Z" fill="currentColor"/>
+  <path d="M8.14995 21.7501L6.69995 19.3001L3.94995 18.7001C3.69995 18.6501 3.49995 18.521 3.34995 18.3126C3.19995 18.1043 3.14162 17.8751 3.17495 17.6251L3.44995 14.8001L1.57495 12.6501C1.40828 12.4668 1.32495 12.2501 1.32495 12.0001C1.32495 11.7501 1.40828 11.5335 1.57495 11.3501L3.44995 9.20012L3.17495 6.37512C3.14162 6.12512 3.19995 5.89595 3.34995 5.68762C3.49995 5.47929 3.69995 5.35012 3.94995 5.30012L6.69995 4.70012L8.14995 2.25012C8.28328 2.03345 8.46662 1.88762 8.69995 1.81262C8.93328 1.73762 9.16662 1.75012 9.39995 1.85012L12 2.95012L14.6 1.85012C14.8333 1.75012 15.0666 1.73762 15.3 1.81262C15.5333 1.88762 15.7166 2.03345 15.85 2.25012L17.3 4.70012L20.05 5.30012C20.3 5.35012 20.5 5.47929 20.65 5.68762C20.8 5.89595 20.8583 6.12512 20.825 6.37512L20.55 9.20012L22.425 11.3501C22.5916 11.5335 22.675 11.7501 22.675 12.0001C22.675 12.2501 22.5916 12.4668 22.425 12.6501L20.55 14.8001L20.825 17.6251C20.8583 17.8751 20.8 18.1043 20.65 18.3126C20.5 18.521 20.3 18.6501 20.05 18.7001L17.3 19.3001L15.85 21.7501C15.7166 21.9668 15.5333 22.1126 15.3 22.1876C15.0666 22.2626 14.8333 22.2501 14.6 22.1501L12 21.0501L9.39995 22.1501C9.16662 22.2501 8.93328 22.2626 8.69995 22.1876C8.46662 22.1126 8.28328 21.9668 8.14995 21.7501ZM10.95 12.7001L9.49995 11.2751C9.31662 11.0918 9.08745 11.0001 8.81245 11.0001C8.53745 11.0001 8.29995 11.1001 8.09995 11.3001C7.91662 11.4835 7.82495 11.7168 7.82495 12.0001C7.82495 12.2835 7.91662 12.5168 8.09995 12.7001L10.25 14.8501C10.45 15.0501 10.6833 15.1501 10.95 15.1501C11.2166 15.1501 11.45 15.0501 11.65 14.8501L15.9 10.6001C16.1 10.4001 16.1958 10.1668 16.1875 9.90012C16.1791 9.63345 16.0833 9.40012 15.9 9.20012C15.7 9.00012 15.4625 8.89595 15.1875 8.88762C14.9125 8.87929 14.675 8.97512 14.475 9.17512L10.95 12.7001Z" fill="#007A61"/>
+</svg>
+{% endmacro %}
+
+{% macro video_call_declined_solid() %}
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M2 8C2 5.79086 3.79086 4 6 4H16C17.1046 4 18 4.89543 18 6V10.2857L21.3492 7.41496C21.9979 6.85896 23 7.31987 23 8.17422V15.8258C23 16.6801 21.9979 17.141 21.3492 16.585L18 13.7143V18C18 19.1046 17.1046 20 16 20H6C3.79086 20 2 18.2091 2 16V8ZM12.8284 14.8284C13.0288 14.6281 13.1289 14.3924 13.1289 14.1213C13.1289 13.8503 13.0288 13.6146 12.8284 13.4142L11.4142 12L12.8284 10.5858C13.0288 10.3854 13.1289 10.1497 13.1289 9.87868C13.1289 9.60762 13.0288 9.37192 12.8284 9.17157C12.6281 8.97123 12.3924 8.87105 12.1213 8.87105C11.8503 8.87105 11.6146 8.97123 11.4142 9.17157L9.99999 10.5858L8.58578 9.17157C8.38543 8.97123 8.14973 8.87105 7.87867 8.87105C7.60762 8.87105 7.37191 8.97123 7.17157 9.17157C6.97122 9.37192 6.87105 9.60762 6.87105 9.87868C6.87105 10.1497 6.97122 10.3854 7.17157 10.5858L8.58578 12L7.17157 13.4142C6.97122 13.6146 6.87105 13.8503 6.87105 14.1213C6.87105 14.3924 6.97122 14.6281 7.17157 14.8284C7.37191 15.0288 7.60762 15.1289 7.87867 15.1289C8.14973 15.1289 8.38543 15.0288 8.58578 14.8284L9.99999 13.4142L11.4142 14.8284C11.6146 15.0288 11.8503 15.1289 12.1213 15.1289C12.3924 15.1289 12.6281 15.0288 12.8284 14.8284Z" fill="currentColor"/>
 </svg>
 {% endmacro %}

@@ -473,25 +670,43 @@ done
 </svg>
 {% endmacro %}

+{% macro video_call_missed_solid() %}
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M2 8C2 5.79086 3.79086 4 6 4H16C17.1046 4 18 4.89543 18 6V10.2857L21.3492 7.41496C21.9979 6.85896 23 7.31987 23 8.17422V15.8258C23 16.6801 21.9979 17.141 21.3492 16.585L18 13.7143V18C18 19.1046 17.1046 20 16 20H6C3.79086 20 2 18.2091 2 16V8ZM10.7 13.15L8.5 11H9C9.28333 11 9.52083 10.9042 9.7125 10.7125C9.90417 10.5208 10 10.2833 10 10C10 9.71667 9.90417 9.47917 9.7125 9.2875C9.52083 9.09583 9.28333 9 9 9H6C5.71667 9 5.47917 9.09583 5.2875 9.2875C5.09583 9.47917 5 9.71667 5 10V13C5 13.2833 5.09583 13.5208 5.2875 13.7125C5.47917 13.9042 5.71667 14 6 14C6.28333 14 6.52083 13.9042 6.7125 13.7125C6.90417 13.5208 7 13.2833 7 13V12.3L10 15.3C10.0833 15.3833 10.1875 15.45 10.3125 15.5C10.4375 15.55 10.5667 15.575 10.7 15.575C10.8333 15.575 10.9625 15.55 11.0875 15.5C11.2125 15.45 11.3167 15.375 11.4 15.275L14.525 12.125C14.7083 11.9417 14.8 11.7167 14.8 11.45C14.8 11.1833 14.7 10.95 14.5 10.75C14.3167 10.5667 14.0833 10.475 13.8 10.475C13.5167 10.475 13.2833 10.5667 13.1 10.75L10.7 13.15Z" fill="currentColor"/>
+</svg>
+{% endmacro %}
+
 {% macro video_call_missed() %}
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M2 8C2 5.79086 3.79086 4 6 4H16C17.1046 4 18 4.89543 18 6V10.2857L21.3492 7.41496C21.9979 6.85896 23 7.31987 23 8.17422V15.8258C23 16.6801 21.9979 17.141 21.3492 16.585L18 13.7143V18C18 19.1046 17.1046 20 16 20H6C3.79086 20 2 18.2091 2 16V8ZM10.7 13.15L8.5 11H9C9.28333 11 9.52083 10.9042 9.7125 10.7125C9.90417 10.5208 10 10.2833 10 10C10 9.71667 9.90417 9.47917 9.7125 9.2875C9.52083 9.09583 9.28333 9 9 9H6C5.71667 9 5.47917 9.09583 5.2875 9.2875C5.09583 9.47917 5 9.71667 5 10V13C5 13.2833 5.09583 13.5208 5.2875 13.7125C5.47917 13.9042 5.71667 14 6 14C6.28333 14 6.52083 13.9042 6.7125 13.7125C6.90417 13.5208 7 13.2833 7 13V12.3L10 15.3C10.0833 15.3833 10.1875 15.45 10.3125 15.5C10.4375 15.55 10.5667 15.575 10.7 15.575C10.8333 15.575 10.9625 15.55 11.0875 15.5C11.2125 15.45 11.3167 15.375 11.4 15.275L14.525 12.125C14.7083 11.9417 14.8 11.7167 14.8 11.45C14.8 11.1833 14.7 10.95 14.5 10.75C14.3167 10.5667 14.0833 10.475 13.8 10.475C13.5167 10.475 13.2833 10.5667 13.1 10.75L10.7 13.15Z" fill="currentColor"/>
 </svg>
 {% endmacro %}

-{% macro video_call_off() %}
+{% macro video_call_off_solid() %}
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M2.74715 2.75285L4.34956 4.35527C4.35221 4.35407 4.35486 4.35287 4.35751 4.35168L18 17.9942V18L18 18.0058L21.2471 21.2529C21.6377 21.6434 21.6377 22.2766 21.2471 22.6671C20.8566 23.0576 20.2235 23.0576 19.8329 22.6671L16.9345 19.7687C16.6556 19.9163 16.3376 20 16 20H6.00005C3.79091 20 2.00005 18.2091 2.00005 16V7.99996C2.00005 7.10818 2.29188 6.28456 2.78525 5.61939L1.33293 4.16707C0.942408 3.77654 0.942408 3.14338 1.33293 2.75285C1.72346 2.36233 2.35662 2.36233 2.74715 2.75285Z" fill="currentColor"/>
  <path d="M18 15.1658L6.83423 3.99996H16C17.1046 3.99996 18 4.89539 18 5.99996V10.2857L21.3493 7.41493C21.9979 6.85892 23 7.31983 23 8.17418V15.8257C23 16.6801 21.9979 17.141 21.3493 16.585L18 13.7142V15.1658Z" fill="currentColor"/>
 </svg>
 {% endmacro %}

-{% macro video_call() %}
+{% macro video_call_off() %}
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M2.74715 2.75285L4.34956 4.35527C4.35221 4.35407 4.35486 4.35287 4.35751 4.35168L6.0058 5.99996H6.00005L5.99426 5.99997L16 16.0058V15.9942L18 17.9942V18L18 18.0058L21.2471 21.2529C21.6377 21.6434 21.6377 22.2766 21.2471 22.6671C20.8566 23.0576 20.2235 23.0576 19.8329 22.6671L16.9345 19.7687C16.6556 19.9163 16.3376 20 16 20H6.00005C3.79091 20 2.00005 18.2091 2.00005 16V7.99996C2.00005 7.10818 2.29188 6.28456 2.78525 5.61939L1.33293 4.16707C0.942408 3.77654 0.942408 3.14338 1.33293 2.75285C1.72346 2.36233 2.35662 2.36233 2.74715 2.75285ZM4.23133 7.06548C4.08367 7.34438 4.00005 7.66241 4.00005 7.99996V16C4.00005 17.1045 4.89548 18 6.00005 18H15.1658L4.23133 7.06548ZM16 5.99996H8.83423L6.83423 3.99996H16C17.1046 3.99996 18 4.89539 18 5.99996V10.2857L21.3493 7.41493C21.9979 6.85892 23 7.31983 23 8.17418V15.8257C23 16.6801 21.9979 17.141 21.3493 16.585L18 13.7142V15.1658L16 13.1658V5.99996ZM21 13.6515V10.3484L19.0732 12L21 13.6515Z" fill="currentColor"/>
+</svg>
+{% endmacro %}
+
+{% macro video_call_solid() %}
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M6 4H16C17.1046 4 18 4.89543 18 6V10.2857L21.3492 7.41496C21.9979 6.85896 23 7.31987 23 8.17422V15.8258C23 16.6801 21.9979 17.141 21.3492 16.585L18 13.7143V18C18 19.1046 17.1046 20 16 20H6C3.79086 20 2 18.2091 2 16V8C2 5.79086 3.79086 4 6 4Z" fill="currentColor"/>
 </svg>
 {% endmacro %}

+{% macro video_call() %}
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M2 8C2 5.79086 3.79086 4 6 4H16C17.1046 4 18 4.89543 18 6V10.2858L21.3492 7.41504C21.9979 6.85903 23 7.31994 23 8.1743V15.8259C23 16.6802 21.9979 17.1411 21.3492 16.5851L18 13.7144V18C18 19.1046 17.1046 20 16 20H6C3.79086 20 2 18.2091 2 16V8ZM6 6C4.89543 6 4 6.89543 4 8V16C4 17.1046 4.89543 18 6 18H16V6H6ZM21 13.6516V10.3485L19.0732 12.0001L21 13.6516Z" fill="currentColor"/>
+</svg>
+{% endmacro %}
+
 {% macro visibility_invisible() %}
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
  <path fill="currentColor" d="m19.3 16.5-3.2-3.2c.133-.283.233-.57.3-.863.067-.291.1-.604.1-.937 0-1.25-.438-2.312-1.313-3.187C14.313 7.438 13.25 7 12 7a4.2 4.2 0 0 0-.938.1 4.24 4.24 0 0 0-.862.3L7.65 4.85A11.08 11.08 0 0 1 12 4c2.383 0 4.525.63 6.425 1.888 1.9 1.258 3.325 2.895 4.275 4.912.05.083.083.188.1.313s.025.254.025.387a1.972 1.972 0 0 1-.125.7 11.49 11.49 0 0 1-1.438 2.375A10.467 10.467 0 0 1 19.3 16.5Zm-.2 5.4-3.5-3.45c-.583.183-1.17.32-1.762.413-.592.091-1.205.137-1.838.137-2.383 0-4.525-.63-6.425-1.887-1.9-1.259-3.325-2.896-4.275-4.913a.812.812 0 0 1-.1-.313 2.93 2.93 0 0 1 0-.762.796.796 0 0 1 .1-.3c.35-.75.767-1.442 1.25-2.075A13.291 13.291 0 0 1 4.15 7L2.075 4.9a.933.933 0 0 1-.275-.687c0-.275.1-.513.3-.713a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l17 17c.183.183.28.413.288.688a.93.93 0 0 1-.288.712.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275ZM12 16a4.9 4.9 0 0 0 .512-.025c.159-.017.33-.05.513-.1l-5.4-5.4c-.05.183-.083.354-.1.513a4.81 4.81 0 0 0-.025.512c0 1.25.438 2.313 1.313 3.188C9.687 15.562 10.75 16 12 16Zm2.65-4.15-3-3c.95-.15 1.725.117 2.325.8.6.683.825 1.417.675 2.2Z"/>
@@ -500,7 +715,7 @@ done

 {% macro visibility_off() %}
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M16.1 13.3L14.65 11.85C14.8 11.0666 14.575 10.3333 13.975 9.64998C13.375 8.96664 12.6 8.69998 11.65 8.84998L10.2 7.39998C10.4834 7.26664 10.7709 7.16664 11.0625 7.09998C11.3542 7.03331 11.6667 6.99998 12 6.99998C13.25 6.99998 14.3125 7.43748 15.1875 8.31248C16.0625 9.18748 16.5 10.25 16.5 11.5C16.5 11.8333 16.4667 12.1458 16.4 12.4375C16.3334 12.7291 16.2334 13.0166 16.1 13.3ZM19.3 16.45L17.85 15.05C18.4834 14.5666 19.0459 14.0375 19.5375 13.4625C20.0292 12.8875 20.45 12.2333 20.8 11.5C19.9667 9.81664 18.7709 8.47914 17.2125 7.48748C15.6542 6.49581 13.9167 5.99998 12 5.99998C11.5167 5.99998 11.0417 6.03331 10.575 6.09998C10.1084 6.16664 9.65005 6.26664 9.20005 6.39998L7.65005 4.84998C8.33338 4.56664 9.03338 4.35414 9.75005 4.21248C10.4667 4.07081 11.2167 3.99998 12 3.99998C14.3834 3.99998 16.525 4.62914 18.425 5.88748C20.325 7.14581 21.75 8.78331 22.7 10.8C22.75 10.8833 22.7834 10.9875 22.8 11.1125C22.8167 11.2375 22.825 11.3666 22.825 11.5C22.825 11.6333 22.8125 11.7625 22.7875 11.8875C22.7625 12.0125 22.7334 12.1166 22.7 12.2C22.3167 13.05 21.8375 13.8333 21.2625 14.55C20.6875 15.2666 20.0334 15.9 19.3 16.45ZM19.1 21.9L15.6 18.45C15.0167 18.6333 14.4292 18.7708 13.8375 18.8625C13.2459 18.9541 12.6334 19 12 19C9.61672 19 7.47505 18.3708 5.57505 17.1125C3.67505 15.8541 2.25005 14.2166 1.30005 12.2C1.25005 12.1166 1.21672 12.0125 1.20005 11.8875C1.18338 11.7625 1.17505 11.6333 1.17505 11.5C1.17505 11.3666 1.18338 11.2416 1.20005 11.125C1.21672 11.0083 1.25005 10.9083 1.30005 10.825C1.65005 10.075 2.06672 9.38331 2.55005 8.74998C3.03338 8.11664 3.56672 7.53331 4.15005 6.99998L2.07505 4.89998C1.89172 4.71664 1.80005 4.48748 1.80005 4.21248C1.80005 3.93748 1.90005 3.69998 2.10005 3.49998C2.28338 3.31664 2.51672 3.22498 2.80005 3.22498C3.08338 3.22498 3.31672 3.31664 3.50005 3.49998L20.5 20.5C20.6834 20.6833 20.7792 20.9125 20.7875 21.1875C20.7959 21.4625 20.7 21.7 20.5 21.9C20.3167 22.0833 20.0834 22.175 19.8 22.175C19.5167 22.175 19.2834 22.0833 19.1 21.9ZM5.55005 8.39998C5.06672 8.83331 4.62505 9.30831 4.22505 9.82498C3.82505 10.3416 3.48338 10.9 3.20005 11.5C4.03338 13.1833 5.22922 14.5208 6.78755 15.5125C8.34588 16.5041 10.0834 17 12 17C12.3334 17 12.6584 16.9791 12.975 16.9375C13.2917 16.8958 13.6167 16.85 13.95 16.8L13.05 15.85C12.8667 15.9 12.6917 15.9375 12.525 15.9625C12.3584 15.9875 12.1834 16 12 16C10.75 16 9.68755 15.5625 8.81255 14.6875C7.93755 13.8125 7.50005 12.75 7.50005 11.5C7.50005 11.3166 7.51255 11.1416 7.53755 10.975C7.56255 10.8083 7.60005 10.6333 7.65005 10.45L5.55005 8.39998Z" fill="currentColor"/>
+  <path d="M16.1 13.3001L14.65 11.8501C14.8 11.0668 14.575 10.3334 13.975 9.6501C13.375 8.96676 12.6 8.7001 11.65 8.8501L10.2 7.4001C10.4834 7.26676 10.7709 7.16676 11.0625 7.1001C11.3542 7.03343 11.6667 7.0001 12 7.0001C13.25 7.0001 14.3125 7.4376 15.1875 8.3126C16.0625 9.1876 16.5 10.2501 16.5 11.5001C16.5 11.8334 16.4667 12.1459 16.4 12.4376C16.3334 12.7293 16.2334 13.0168 16.1 13.3001ZM19.3 16.4501L17.85 15.0501C18.4834 14.5668 19.0459 14.0376 19.5375 13.4626C20.0292 12.8876 20.45 12.2334 20.8 11.5001C19.9667 9.81676 18.7709 8.47926 17.2125 7.4876C15.6542 6.49593 13.9167 6.0001 12 6.0001C11.5167 6.0001 11.0417 6.03343 10.575 6.1001C10.1084 6.16676 9.65005 6.26676 9.20005 6.4001L7.65005 4.8501C8.33338 4.56676 9.03338 4.35426 9.75005 4.2126C10.4667 4.07093 11.2167 4.0001 12 4.0001C14.3834 4.0001 16.525 4.62926 18.425 5.8876C20.325 7.14593 21.75 8.78343 22.7 10.8001C22.75 10.8834 22.7834 10.9876 22.8 11.1126C22.8167 11.2376 22.825 11.3668 22.825 11.5001C22.825 11.6334 22.8125 11.7626 22.7875 11.8876C22.7625 12.0126 22.7334 12.1168 22.7 12.2001C22.3167 13.0501 21.8375 13.8334 21.2625 14.5501C20.6875 15.2668 20.0334 15.9001 19.3 16.4501ZM19.1 21.9001L15.6 18.4501C15.0167 18.6334 14.4292 18.7709 13.8375 18.8626C13.2459 18.9543 12.6334 19.0001 12 19.0001C9.61672 19.0001 7.47505 18.3709 5.57505 17.1126C3.67505 15.8543 2.25005 14.2168 1.30005 12.2001C1.25005 12.1168 1.21672 12.0126 1.20005 11.8876C1.18338 11.7626 1.17505 11.6334 1.17505 11.5001C1.17505 11.3668 1.18338 11.2418 1.20005 11.1251C1.21672 11.0084 1.25005 10.9084 1.30005 10.8251C1.65005 10.0751 2.06672 9.38343 2.55005 8.7501C3.03338 8.11676 3.56672 7.53343 4.15005 7.0001L2.07505 4.9001C1.89172 4.71676 1.80005 4.4876 1.80005 4.2126C1.80005 3.9376 1.90005 3.7001 2.10005 3.5001C2.28338 3.31676 2.51672 3.2251 2.80005 3.2251C3.08338 3.2251 3.31672 3.31676 3.50005 3.5001L20.5 20.5001C20.6834 20.6834 20.7792 20.9126 20.7875 21.1876C20.7959 21.4626 20.7 21.7001 20.5 21.9001C20.3167 22.0834 20.0834 22.1751 19.8 22.1751C19.5167 22.1751 19.2834 22.0834 19.1 21.9001ZM5.55005 8.4001C5.06672 8.83343 4.62505 9.30843 4.22505 9.8251C3.82505 10.3418 3.48338 10.9001 3.20005 11.5001C4.03338 13.1834 5.22922 14.5209 6.78755 15.5126C8.34588 16.5043 10.0834 17.0001 12 17.0001C12.3334 17.0001 12.6584 16.9793 12.975 16.9376C13.2917 16.8959 13.6167 16.8501 13.95 16.8001L13.05 15.8501C12.8667 15.9001 12.6917 15.9376 12.525 15.9626C12.3584 15.9876 12.1834 16.0001 12 16.0001C10.75 16.0001 9.68755 15.5626 8.81255 14.6876C7.93755 13.8126 7.50005 12.7501 7.50005 11.5001C7.50005 11.3168 7.51255 11.1418 7.53755 10.9751C7.56255 10.8084 7.60005 10.6334 7.65005 10.4501L5.55005 8.4001Z" fill="currentColor"/>
 </svg>
 {% endmacro %}

@@ -522,6 +737,48 @@ done
 </svg>
 {% endmacro %}

+{% macro volume_off_solid() %}
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3.50008 3.49993C3.10955 3.1094 2.47639 3.1094 2.08586 3.49992C1.69534 3.89045 1.69534 4.52361 2.08586 4.91414L5.17156 7.99984H5.00006C3.89549 7.99984 3.00006 8.89527 3.00006 9.99984V13.9998C3.00006 15.1044 3.89549 15.9998 5.00006 15.9998H7.00006L10.293 19.2927C10.9229 19.9227 12.0001 19.4765 12.0001 18.5856V14.8284L19.0859 21.9142C19.4764 22.3047 20.1096 22.3047 20.5001 21.9142C20.8906 21.5236 20.8906 20.8905 20.5001 20.5L18.364 18.3639L18.3669 18.3609L16.9527 16.9467L16.9499 16.9495L15.5356 15.5355L15.5385 15.5325L14.1243 14.1183L14.1216 14.1211L12.0001 11.9999V11.9941L7.50296 7.49695L7.50002 7.49988L3.50008 3.49993Z" fill="currentColor"/>
+  <path d="M14.996 12.1616L16.6572 13.8228C16.8786 13.2579 17.0003 12.6428 17.0003 11.9998C17.0003 10.6193 16.4395 9.36797 15.5358 8.46425C15.1453 8.07372 14.5121 8.07372 14.1216 8.46424C13.7311 8.85476 13.7311 9.48792 14.1216 9.87845C14.6656 10.4224 15.0003 11.1711 15.0003 11.9998C15.0003 12.054 14.9988 12.108 14.996 12.1616Z" fill="currentColor"/>
+  <path d="M18.1609 15.3265L19.6221 16.7877C20.4947 15.4011 21.0001 13.759 21.0001 11.9998C21.0001 9.5148 19.9917 7.26346 18.3642 5.63588C17.9736 5.24535 17.3405 5.24534 16.9499 5.63587C16.5594 6.02639 16.5594 6.65955 16.9499 7.05008C18.2177 8.31792 19.0001 10.0665 19.0001 11.9998C19.0001 13.2042 18.6965 14.337 18.1609 15.3265Z" fill="currentColor"/>
+  <path d="M8.91717 6.08273L12.0001 9.16563V5.41405C12.0001 4.52315 10.9229 4.07698 10.293 4.70695L8.91717 6.08273Z" fill="currentColor"/>
+</svg>
+{% endmacro %}
+
+{% macro volume_off() %}
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3.50008 3.49993L7.50002 7.49988L7.50296 7.49695L8.91717 8.91116L8.91423 8.91409L10.0001 9.99992V9.99405L12.0001 11.9941V11.9999L14.1216 14.1211L14.1243 14.1183L15.5385 15.5325L15.5356 15.5355L16.9499 16.9495L16.9527 16.9467L18.3669 18.3609L18.364 18.3639L20.5001 20.5C20.8906 20.8905 20.8906 21.5236 20.5001 21.9142C20.1096 22.3047 19.4764 22.3047 19.0859 21.9142L12.0001 14.8284V18.5856C12.0001 19.4765 10.9229 19.9227 10.293 19.2927L7.00006 15.9998H5.00006C3.89549 15.9998 3.00006 15.1044 3.00006 13.9998V9.99984C3.00006 8.89527 3.89549 7.99984 5.00006 7.99984H5.17156L2.08586 4.91414C1.69534 4.52361 1.69534 3.89045 2.08586 3.49992C2.47639 3.1094 3.10955 3.1094 3.50008 3.49993ZM7.17155 9.99984H5.00006V13.9998H7.82849L10.0001 16.1714V12.8284L7.17155 9.99984Z" fill="currentColor"/>
+  <path d="M14.996 12.1616L16.6572 13.8228C16.8786 13.2579 17.0003 12.6428 17.0003 11.9998C17.0003 10.6193 16.4395 9.36797 15.5358 8.46425C15.1453 8.07372 14.5121 8.07372 14.1216 8.46424C13.7311 8.85476 13.7311 9.48792 14.1216 9.87845C14.6656 10.4224 15.0003 11.1711 15.0003 11.9998C15.0003 12.054 14.9988 12.108 14.996 12.1616Z" fill="currentColor"/>
+  <path d="M18.1609 15.3265L19.6221 16.7877C20.4947 15.4011 21.0001 13.759 21.0001 11.9998C21.0001 9.5148 19.9917 7.26346 18.3642 5.63588C17.9736 5.24535 17.3405 5.24534 16.9499 5.63587C16.5594 6.02639 16.5594 6.65955 16.9499 7.05008C18.2177 8.31792 19.0001 10.0665 19.0001 11.9998C19.0001 13.2042 18.6965 14.337 18.1609 15.3265Z" fill="currentColor"/>
+  <path d="M8.91717 6.08273L12.0001 9.16563V5.41405C12.0001 4.52315 10.9229 4.07698 10.293 4.70695L8.91717 6.08273Z" fill="currentColor"/>
+</svg>
+{% endmacro %}
+
+{% macro volume_on_solid() %}
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3 13.9999V9.9999C3 8.89533 3.89543 7.9999 5 7.9999H7L10.2929 4.70701C10.9229 4.07704 12 4.52321 12 5.41411V18.5857C12 19.4766 10.9229 19.9228 10.2929 19.2928L7 15.9999H5C3.89543 15.9999 3 15.1045 3 13.9999Z" fill="currentColor"/>
+  <path d="M14.1215 8.4643C14.5121 8.07378 15.1452 8.07378 15.5358 8.46431C16.4395 9.36803 17.0002 10.6194 17.0002 11.9998C17.0002 13.3803 16.4395 14.6316 15.5357 15.5354C15.1452 15.9259 14.512 15.9259 14.1215 15.5354C13.731 15.1448 13.731 14.5117 14.1215 14.1211C14.6655 13.5772 15.0002 12.8285 15.0002 11.9998C15.0002 11.1711 14.6655 10.4225 14.1215 9.87851C13.731 9.48799 13.731 8.85482 14.1215 8.4643Z" fill="currentColor"/>
+  <path d="M16.9498 5.63593C17.3403 5.24541 17.9735 5.24541 18.364 5.63594C19.9916 7.26352 21 9.51487 21 11.9998C21 14.4848 19.9915 16.7362 18.364 18.3637C17.9735 18.7543 17.3403 18.7543 16.9498 18.3637C16.5593 17.9732 16.5593 17.3401 16.9498 16.9495C18.2176 15.6817 19 13.9331 19 11.9998C19 10.0666 18.2176 8.31798 16.9498 7.05014C16.5593 6.65961 16.5593 6.02645 16.9498 5.63593Z" fill="currentColor"/>
+</svg>
+{% endmacro %}
+
+{% macro volume_on() %}
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3 9.9999C3 8.89533 3.89543 7.9999 5 7.9999H7L10.2929 4.70701C10.9229 4.07704 12 4.52321 12 5.41411V18.5857C12 19.4766 10.9229 19.9228 10.2929 19.2928L7 15.9999H5C3.89543 15.9999 3 15.1045 3 13.9999V9.9999ZM7.82843 13.9999L10 16.1715V7.82833L7.82843 9.9999H5V13.9999H7.82843Z" fill="currentColor"/>
+  <path d="M14.1215 8.46428C14.5121 8.07375 15.1452 8.07376 15.5358 8.46428C16.4395 9.36801 17.0002 10.6194 17.0002 11.9998C17.0002 13.3802 16.4395 14.6316 15.5357 15.5353C15.1452 15.9259 14.512 15.9259 14.1215 15.5353C13.731 15.1448 13.731 14.5116 14.1215 14.1211C14.6655 13.5771 15.0002 12.8285 15.0002 11.9998C15.0002 11.1711 14.6655 10.4225 14.1215 9.87849C13.731 9.48796 13.731 8.8548 14.1215 8.46428Z" fill="currentColor"/>
+  <path d="M18.364 5.63616C17.9735 5.24563 17.3403 5.24563 16.9498 5.63615C16.5593 6.02667 16.5593 6.65983 16.9498 7.05036C18.2176 8.3182 19 10.0668 19 12.0001C19 13.9333 18.2176 15.6819 16.9498 16.9498C16.5593 17.3403 16.5593 17.9734 16.9498 18.364C17.3403 18.7545 17.9735 18.7545 18.364 18.364C19.9916 16.7364 21 14.485 21 12.0001C21 9.51509 19.9916 7.26374 18.364 5.63616Z" fill="currentColor"/>
+</svg>
+{% endmacro %}
+
+{% macro warning() %}
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12.7125 17.7126C12.5208 17.9043 12.2833 18.0001 12 18.0001C11.7167 18.0001 11.4792 17.9043 11.2875 17.7126C11.0958 17.521 11 17.2835 11 17.0001C11 16.7168 11.0958 16.4793 11.2875 16.2876C11.4792 16.096 11.7167 16.0001 12 16.0001C12.2833 16.0001 12.5208 16.096 12.7125 16.2876C12.9042 16.4793 13 16.7168 13 17.0001C13 17.2835 12.9042 17.521 12.7125 17.7126Z" fill="currentColor"/>
+  <path d="M12.7125 13.7126C12.5208 13.9043 12.2833 14.0001 12 14.0001C11.7167 14.0001 11.4792 13.9043 11.2875 13.7126C11.0958 13.521 11 13.2835 11 13.0001V9.00012C11 8.71679 11.0958 8.47929 11.2875 8.28762C11.4792 8.09596 11.7167 8.00012 12 8.00012C12.2833 8.00012 12.5208 8.09596 12.7125 8.28762C12.9042 8.47929 13 8.71679 13 9.00012V13.0001C13 13.2835 12.9042 13.521 12.7125 13.7126Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M10.2635 3.03897C11.0313 1.69534 12.9687 1.69534 13.7364 3.03897L22.2901 18.0078C23.052 19.3412 22.0892 21.0001 20.5536 21.0001H3.44631C1.91067 21.0001 0.947935 19.3412 1.70983 18.0078L10.2635 3.03897ZM3.44631 19.0001L12 4.03125L20.5536 19.0001H3.44631Z" fill="currentColor"/>
+</svg>
+{% endmacro %}
+
 {% macro web_browser() %}
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M4 20C3.45 20 2.97917 19.8042 2.5875 19.4125C2.19583 19.0208 2 18.55 2 18V6C2 5.45 2.19583 4.97917 2.5875 4.5875C2.97917 4.19583 3.45 4 4 4H20C20.55 4 21.0208 4.19583 21.4125 4.5875C21.8042 4.97917 22 5.45 22 6V18C22 18.55 21.8042 19.0208 21.4125 19.4125C21.0208 19.8042 20.55 20 20 20H4ZM4 18H20V8H4V18Z" fill="currentColor"/>
--- a/templates/pages/account/emails/add.html
+++ b/templates/pages/account/emails/add.html
@@ -17,9 +17,18 @@ limitations under the License.
 {% extends "base.html" %}

 {% block content %}
-  <form method="POST" class="flex-1 flex flex-col gap-6 justify-center">
-    <h1 class="cpd-text-heading-xl-semibold">{{ _("mas.add_email.heading") }}</h1>
+  <header class="page-heading">
+    <div class="icon">
+      {{ icon.email_solid() }}
+    </div>

+    <div class="header">
+      <h1 class="title">{{ _("mas.add_email.heading") }}</h1>
+      <p class="text">{{ _("mas.add_email.description") }}</p>
+    </div>
+  </header>
+
+  <form method="POST" class="cpd-form-root">
    {% if form.errors is not empty %}
      {% for error in form.errors %}
        <div class="text-critical font-medium">
@@ -29,7 +38,10 @@ limitations under the License.
    {% endif %}

    <input type="hidden" name="csrf" value="{{ csrf_token }}" />
-    {{ field.input(label=_("common.email_address"), name="email", type="email", form_state=form, autocomplete="email", required=true) }}
+    {% call(f) field.field(label=_("common.email_address"), name="email", form_state=form) %}
+      <input {{ field.attributes(f) }} class="cpd-text-control" type="email" autocomplete="email" required />
+    {% endcall %}
+
    {{ button.button(text=_("action.continue")) }}
  </form>
 {% endblock content %}
--- a/templates/pages/account/emails/verify.html
+++ b/templates/pages/account/emails/verify.html
@@ -17,12 +17,17 @@ limitations under the License.
 {% extends "base.html" %}

 {% block content %}
-<form method="POST" class="flex-1 flex flex-col gap-6 justify-center">
-    <div class="text-center">
-      <h1 class="cpd-text-heading-xl-semibold">{{ _("mas.verify_email.headline") }}</h1>
-      <p>{{ _("mas.verify_email.description", email=email.email) }}</p>
+  <header class="page-heading">
+    <div class="icon">
+      {{ icon.send_solid() }}
    </div>
+    <div class="header">
+      <h1 class="title">{{ _("mas.verify_email.headline") }}</h1>
+      <p class="text">{{ _("mas.verify_email.description", email=email.email) }}</p>
+    </div>
+  </header>

+  <form method="POST" class="cpd-form-root">
    {% if form.errors is not empty %}
      {% for error in form.errors %}
        <div class="text-critical font-medium">
@@ -32,7 +37,26 @@ limitations under the License.
    {% endif %}

    <input type="hidden" name="csrf" value="{{ csrf_token }}" />
-    {{ field.input(label=_("mas.verify_email.code"), name="code", form_state=form, autocomplete="one-time-code", inputmode="numeric") }}
-    {{ button.button(text=_("action.submit")) }}
+
+    {% call(f) field.field(label=_("mas.verify_email.6_digit_code"), name="code", class="mb-4 self-center") %}
+      <div class="cpd-mfa-container">
+        <input {{ field.attributes(f) }}
+          id="mfa-code-input"
+          inputmode="numeric"
+          type="text"
+          minlength="0"
+          maxlength="6"
+          class="cpd-mfa-control"
+          pattern="\d{6}"
+          required
+          autocomplete="one-time-code">
+
+        {% for _ in range(6) %}
+        <div class="cpd-mfa-digit" aria-hidden="true"></div>
+        {% endfor %}
+      </div>
+    {% endcall %}
+
+    {{ button.button(text=_("action.continue")) }}
  </form>
 {% endblock content %}
--- a/templates/pages/account/password.html
+++ b/templates/pages/account/password.html
@@ -17,12 +17,32 @@ limitations under the License.
 {% extends "base.html" %}

 {% block content %}
-  <form class="flex-1 flex flex-col justify-center gap-6" method="POST">
-    <h2 class="cpd-text-heading-xl-semibold">{{ _("mas.change_password.heading") }}</h2>
+  <header class="page-heading">
+    <div class="icon">
+      {{ icon.lock() }}
+    </div>
+
+    <div class="header">
+      <h1 class="title">{{ _("mas.change_password.heading") }}</h1>
+      <p class="text">{{ _("mas.change_password.description") }}</p>
+    </div>
+  </header>
+
+  <form class="cpd-form-root" method="POST">
    <input type="hidden" name="csrf" value="{{ csrf_token }}" />
-    {{ field.input(label=_("mas.change_password.current"), name="current_password", type="password", autocomplete="current-password") }}
-    {{ field.input(label=_("mas.change_password.new"), name="new_password", type="password", autocomplete="new-password") }}
-    {{ field.input(label=_("mas.change_password.confirm"), name="new_password_confirm", type="password", autocomplete="new-password") }}
+
+    {% call(f) field.field(label=_("mas.change_password.current"), name="current_password") %}
+      <input {{ field.attributes(f) }} class="cpd-text-control" type="password" autocomplete="current-password" required />
+    {% endcall %}
+
+    {% call(f) field.field(label=_("mas.change_password.new"), name="new_password") %}
+      <input {{ field.attributes(f) }} class="cpd-text-control" type="password" autocomplete="new-password" required />
+    {% endcall %}
+
+    {% call(f) field.field(label=_("mas.change_password.confirm"), name="new_password_confirm") %}
+      <input {{ field.attributes(f) }} class="cpd-text-control" type="password" autocomplete="new-password" required />
+    {% endcall %}
+
    {{ button.button(text=_("mas.change_password.change"), type="submit") }}
  </form>
 {% endblock content %}
--- a/templates/pages/consent.html
+++ b/templates/pages/consent.html
@@ -18,8 +18,7 @@ limitations under the License.

 {% block content %}
  {% set client_name = client.client_name | default(client.client_id) %}
-  <main class="flex flex-col gap-6">
-    <div class="flex flex-col gap-2 text-center">
+  <header class="page-heading">
    {% if client.logo_uri %}
    <img class="consent-client-icon image" referrerpolicy="no-referrer" src="{{ client.logo_uri }}" />
    {% else %}
@@ -28,16 +27,18 @@ limitations under the License.
    </div>
    {% endif %}

-      <h1 class="cpd-text-primary cpd-text-heading-xl-semibold"><a target="_blank" href="{{ client.client_uri }}">{{ client_name }}</a></h1>
-      <p class="cpd-text-secondary cpd-text-body-lg-regular"><span class="whitespace-nowrap">at {{ grant.redirect_uri | simplify_url }}</span> wants to access your account. This will allow <span class="whitespace-nowrap">{{ client_name }}</span> to:</p>
+    <div class="header">
+      <h1 class="title">Allow access to your account?</h1>
+      <p class="text"><a target="_blank" href="{{ client.client_uri }}">{{ client_name }}</a> <span class="whitespace-nowrap">at {{ grant.redirect_uri | simplify_url }}</span> wants to access your account. This will allow <span class="whitespace-nowrap">{{ client_name }}</span> to:</p>
    </div>
+  </header>

-    <div class="consent-scope-list">
+  <section class="consent-scope-list">
    {{ scope.list(scopes=grant.scope) }}
-    </div>
+  </section>

-    <div class="my-2 text-center cpd-text-body-md-regular">
-      <span class="font-semibold">Make sure that you trust <span class="whitespace-nowrap">{{ client_name }}</span>.</span>
+  <section class="text-center cpd-text-secondary cpd-text-body-md-regular">
+    <span class="font-semibold cpd-text-primary">Make sure that you trust <span class="whitespace-nowrap">{{ client_name }}</span>.</span>
    You may be sharing sensitive information with this site or app.
    {% if client.policy_uri or client.tos_uri %}
      Find out how {{ client_name }} will handle your data by reviewing its
@@ -51,13 +52,22 @@ limitations under the License.
        <a target="_blank" href="{{ client.tos_uri }}" class="cpd-link" data-kind="primary">terms of service</a>.
      {% endif %}
    {% endif %}
-    </div>
+  </section>

-    <form method="POST" class="flex flex-col">
+  <section class="flex flex-col gap-6">
+    <form method="POST" class="cpd-form-root">
      <input type="hidden" name="csrf" value="{{ csrf_token }}" />
      {{ button.button(text=_("action.continue")) }}
    </form>

+    <div class="flex gap-1 justify-center items-center">
+      <p class="cpd-text-secondary cpd-text-body-md-regular">
+        {{ _("mas.not_you", username=current_session.user.username) }}
+      </p>
+
+      {{ logout.button(text=_("action.sign_out"), csrf_token=csrf_token, post_logout_action=action, as_link=true) }}
+    </div>
+
    {{ back_to_client.link(
      text=_("action.cancel"),
      kind="tertiary",
@@ -65,10 +75,5 @@ limitations under the License.
      mode=grant.response_mode,
      params=dict(error="access_denied", state=grant.state)
    ) }}
-
-    <div class="text-center">
-      {{ _("mas.not_you", username=current_session.user.username) }}
-      {{ logout.button(text=_("action.sign_out"), csrf_token=csrf_token, post_logout_action=action, as_link=true) }}
-    </div>
-  </main>
+  </section>
 {% endblock content %}
--- a/templates/pages/error.html
+++ b/templates/pages/error.html
@@ -20,23 +20,32 @@ limitations under the License.
 {% extends "base.html" %}

 {% block content %}
-  <main class="flex flex-col gap-2">
-    <h1 class="text-xl font-semibold">{{ _("error.unexpected") }}</h1>
+  <main class="flex flex-col gap-6">
+    <header class="page-heading">
+      <div class="icon invalid">
+        {{ icon.error() }}
+      </div>
+
+      <div class="header">
+        <h1 class="title">{{ _("error.unexpected") }}</h1>
        {% if code %}
-    <p class="font-semibold font-mono">
+          <p class="text font-semibold font-mono">
            {{ code }}
          </p>
        {% endif %}
        {% if description %}
-    <p>
+          <p class="text">
            {{ description }}
          </p>
        {% endif %}
+      </div>
+    </header>
+
    {% if details %}
      <hr />
-      <code>
-        <pre class="font-mono whitespace-pre-wrap break-all">{{ details }}</pre>
-      </code>
+      <pre>
+        <code class="font-mono whitespace-pre-wrap break-all">{{ details }}</code>
+      </pre>
    {% endif %}
  </main>
 {% endblock %}
--- a/templates/pages/index.html
+++ b/templates/pages/index.html
@@ -17,11 +17,15 @@ limitations under the License.
 {% extends "base.html" %}

 {% block content %}
-  <main class="flex-1 flex flex-col justify-center gap-6">
-    <h1 class="cpd-text-heading-xl-semibold">{{ _("app.human_name") }}</h1>
-    <p class="cpd-text-body-md-regular">
+  <main class="flex flex-col justify-center gap-6">
+    <header class="page-heading">
+      <div class="header">
+        <h1 class="title">{{ _("app.human_name") }}</h1>
+        <p class="text">
          {{ _("app.technical_description", discovery_url=discovery_url) }}
        </p>
+      </div>
+    </header>

    {% if current_session %}
      <p class="cpd-text-body-md-regular">
--- a/templates/pages/login.html
+++ b/templates/pages/login.html
@@ -17,21 +17,27 @@ limitations under the License.
 {% extends "base.html" %}

 {% block content %}
-  <div class="flex-1 flex flex-col gap-6 justify-center">
+  <main class="flex flex-col gap-6">
    {% if not password_disabled %}
+      <header class="page-heading">
+        <div class="icon">
+          {{ icon.user_profile_solid() }}
+        </div>
+
        {% if next and next.kind == "link_upstream" %}
-        <div class="text-center">
-          <h1 class="text-lg text-center font-medium">{{ _("mas.login.link.headline") }}</h1>
-          <p class="text-sm">{{ _("mas.login.link.description", provider=next.provider.issuer) }}</p>
+          <div class="header">
+            <h1 class="title">{{ _("mas.login.link.headline") }}</h1>
+            <p class="text">{{ _("mas.login.link.description", provider=next.provider.issuer) }}</p>
          </div>
        {% else %}
-        <div class="text-center">
-          <h1 class="text-lg text-center font-medium">{{ _("mas.login.headline") }}</h1>
-          <p>{{ _("mas.login.description") }}</p>
+          <div class="header">
+            <h1 class="title">{{ _("mas.login.headline") }}</h1>
+            <p class="text">{{ _("mas.login.description") }}</p>
          </div>
        {% endif %}
+      </header>

-      <form method="POST" class="flex flex-col gap-6">
+      <form method="POST" class="cpd-form-root">
        {% if form.errors is not empty %}
          {% for error in form.errors %}
            <div class="text-critical font-medium">
@@ -41,14 +47,24 @@ limitations under the License.
        {% endif %}

        <input type="hidden" name="csrf" value="{{ csrf_token }}" />
-        {{ field.input(label=_("common.username"), name="username", form_state=form, autocomplete="username", autocorrect="off", autocapitalize="none") }}
-        {{ field.input(label=_("common.password"), name="password", type="password", form_state=form, autocomplete="password") }}
+
+        {% call(f) field.field(label=_("common.username"), name="username", form_state=form) %}
+          <input {{ field.attributes(f) }} class="cpd-text-control" type="text" autocomplete="username" autocorrect="off" autocapitalize="off" required />
+        {% endcall %}
+
+        {% call(f) field.field(label=_("common.password"), name="password", form_state=form) %}
+          <input {{ field.attributes(f) }} class="cpd-text-control" type="password" autocomplete="password" required />
+        {% endcall %}
+
        {{ button.button(text=_("action.continue")) }}
      </form>

      {% if not next or next.kind != "link_upstream" %}
-        <div class="text-center mt-4">
+        <div class="flex gap-1 justify-center items-center cpd-text-body-md-regular">
+          <p class="cpd-text-secondary">
            {{ _("mas.login.call_to_register") }}
+          </p>
+
          {% set params = next["params"] | default({}) | to_params(prefix="?") %}
          {{ button.link_text(text=_("action.create_account"), href="/register" ~ params) }}
        </div>
@@ -60,9 +76,11 @@ limitations under the License.
        {{ field.separator() }}
      {% endif %}

-      {% for provider in providers %}
      {% set params = next["params"] | default({}) | to_params(prefix="?") %}
-        <a class="cpd-button" data-kind="secondary" data-size="lg" href="{{ ('/upstream/authorize/' ~ provider.id ~ params) | prefix_url }}">{{ _("mas.login.continue_with_provider", provider=provider.issuer | simplify_url) }}</a>
+      {% for provider in providers %}
+        <a class="cpd-button" data-kind="secondary" data-size="lg" href="{{ ('/upstream/authorize/' ~ provider.id ~ params) | prefix_url }}">
+          {{ _("mas.login.continue_with_provider", provider=provider.issuer | simplify_url) }}
+        </a>
      {% endfor %}
    {% endif %}

@@ -81,5 +99,5 @@ limitations under the License.
        params=dict(error="access_denied", state=next.grant.state)
      ) }}
    {% endif %}
-  </div>
+  </main>
 {% endblock content %}
--- a/templates/pages/policy_violation.html
+++ b/templates/pages/policy_violation.html
@@ -17,9 +17,18 @@ limitations under the License.
 {% extends "base.html" %}

 {% block content %}
-  <section class="flex-1 flex flex-col gap-10 justify-center">
-    <h1 class="cpd-text-heading-xl-semibold">{{ _("mas.policy_violation.heading") }}</h1>
-    <p>{{ _("mas.policy_violation.description") }}</p>
+  <header class="page-heading">
+    <div class="icon invalid">
+      {{ icon.error() }}
+    </div>
+
+    <div class="header">
+      <h1 class="title">{{ _("mas.policy_violation.heading") }}</h1>
+      <p class="text">{{ _("mas.policy_violation.description") }}</p>
+    </div>
+  </header>
+
+  <main class="flex flex-col gap-10">
    <div class="flex items-center justify-center gap-4">
      <div class="bg-white rounded w-16 h-16 overflow-hidden">
        {% if client.logo_uri %}
@@ -29,8 +38,8 @@ limitations under the License.
      <a target="_blank" href="{{ client.client_uri }}" class="cpd-link" data-kind="primary">{{ client.client_name | default(client.client_id) }}</a>
    </div>

-    <div class="flex gap-4 justify-center items-center">
-      <p>
+    <div class="flex gap-1 justify-center items-center">
+      <p class="cpd-text-secondary cpd-text-body-md-regular">
        {{ _("mas.policy_violation.logged_as", username=current_session.user.username) }}
      </p>

@@ -44,6 +53,6 @@ limitations under the License.
      mode=grant.response_mode,
      params=dict(error="access_denied", state=grant.state)
    ) }}
-  </section>
+  </main>
 {% endblock content %}

--- a/templates/pages/reauth.html
+++ b/templates/pages/reauth.html
@@ -17,16 +17,26 @@ limitations under the License.
 {% extends "base.html" %}

 {% block content %}
-  <section class="flex-1 flex flex-col gap-6 justify-center">
-    <div class="text-center">
-      <h1 class="text-lg text-center font-medium">Hi {{ current_session.user.username }}</h1>
-      <p>To continue, please verify it's you:</p>
+  <header class="page-heading">
+    <div class="icon">
+      {{ icon.lock() }}
    </div>

-    <form method="POST" class="flex flex-col gap-6">
+    <div class="header">
+      <h1 class="title">Hi {{ current_session.user.username }}</h1>
+      <p class="text">To continue, please verify it's you:</p>
+    </div>
+  </header>
+
+  <main class="flex flex-col gap-6">
+    <form method="POST" class="cpd-form-root">
      <input type="hidden" name="csrf" value="{{ csrf_token }}" />
      {# TODO: errors #}
-      {{ field.input(label=_("common.password"), name="password", type="password", form_state=form, autocomplete="password") }}
+
+      {% call(f) field.field(label=_("common.password"), name="password", form_state=form) %}
+        <input {{ field.attributes(f) }} class="cpd-text-control" type="password" autocomplete="password" required />
+      {% endcall %}
+
      {{ button.button(text=_("action.continue")) }}
    </form>

@@ -40,11 +50,14 @@ limitations under the License.
      ) }}
    {% endif %}

-    <div class="text-center">
+    <div class="flex gap-1 justify-center items-center">
+      <p class="cpd-text-secondary cpd-text-body-md-regular">
        Not {{ current_session.user.username }}?
+      </p>
+
      {% set post_logout_action = next["params"] | default({}) %}
      {{ logout.button(text="Sign out", csrf_token=csrf_token, post_logout_action=post_logout_action, as_link=true) }}
    </div>
-  </section>
+  </main>
 {% endblock content %}

--- a/templates/pages/register.html
+++ b/templates/pages/register.html
@@ -17,13 +17,19 @@ limitations under the License.
 {% extends "base.html" %}

 {% block content %}
-  <section class="flex-1 flex flex-col gap-6 justify-center">
-    <div class="text-center">
-      <h1 class="text-lg text-center font-medium">{{ _("mas.register.create_account.heading") }}</h1>
-      <p>{{ _("mas.register.create_account.description") }}</p>
+  <header class="page-heading">
+    <div class="icon">
+      {{ icon.user_profile_solid() }}
    </div>

-    <form method="POST" class="flex flex-col gap-6">
+    <div class="header">
+      <h1 class="title">{{ _("mas.register.create_account.heading") }}</h1>
+      <p class="text">{{ _("mas.register.create_account.description") }}</p>
+    </div>
+  </header>
+
+  <section class="flex flex-col gap-6">
+    <form method="POST" class="cpd-form-root">
      {% if form.errors is not empty %}
        {% for error in form.errors %}
          <div class="text-critical font-medium">
@@ -33,10 +39,23 @@ limitations under the License.
      {% endif %}

      <input type="hidden" name="csrf" value="{{ csrf_token }}" />
-      {{ field.input(label=_("common.username"), name="username", form_state=form, autocomplete="username", autocorrect="off", autocapitalize="none") }}
-      {{ field.input(label=_("common.email_address"), name="email", type="email", form_state=form, autocomplete="email") }}
-      {{ field.input(label=_("common.password"), name="password", type="password", form_state=form, autocomplete="new-password") }}
-      {{ field.input(label=_("common.password_confirm"), name="password_confirm", type="password", form_state=form, autocomplete="new-password") }}
+
+      {% call(f) field.field(label=_("common.username"), name="username", form_state=form) %}
+        <input {{ field.attributes(f) }} class="cpd-text-control" type="text" autocomplete="username" autocorrect="off" autocapitalize="none" required />
+      {% endcall %}
+
+      {% call(f) field.field(label=_("common.email_address"), name="email", form_state=form) %}
+        <input {{ field.attributes(f) }} class="cpd-text-control" type="email" autocomplete="email" required />
+      {% endcall %}
+
+      {% call(f) field.field(label=_("common.password"), name="password") %}
+        <input {{ field.attributes(f) }} class="cpd-text-control" type="password" autocomplete="new-password" required />
+      {% endcall %}
+
+      {% call(f) field.field(label=_("common.password_confirm"), name="password_confirm") %}
+        <input {{ field.attributes(f) }} class="cpd-text-control" type="password" autocomplete="new-password" required />
+      {% endcall %}
+
      {{ button.button(text=_("action.continue")) }}
    </form>

@@ -50,8 +69,11 @@ limitations under the License.
      ) }}
    {% endif %}

-    <div class="text-center mt-4">
+    <div class="flex gap-1 justify-center items-center">
+      <p class="cpd-text-secondary cpd-text-body-md-regular">
        {{ _("mas.register.call_to_login") }}
+      </p>
+
      {% set params = next["params"] | default({}) | to_params(prefix="?") %}
      {{ button.link_text(text=_("mas.register.sign_in_instead"), href="/login" ~ params) }}
    </div>
--- a/templates/pages/sso.html
+++ b/templates/pages/sso.html
@@ -18,32 +18,37 @@ limitations under the License.

 {% block content %}
  {% set client_name = login.redirect_uri | simplify_url %}
-  <main class="flex-1 flex flex-col gap-6 justify-center">
-    <div class="flex flex-col gap-2 text-center">
+
+  <header class="page-heading">
    <div class="consent-client-icon generic">
      {{ icon.web_browser() }}
    </div>

-      <p class="cpd-text-secondary cpd-text-body-lg-regular"><span class="whitespace-nowrap">{{ client_name }}</span> wants to access your account. This will allow <span class="whitespace-nowrap">{{ client_name }}</span> to:</p>
-    </div>
+    <h1 class="title">Allow access to your account?</h1>
+    <p class="text"><span class="whitespace-nowrap">{{ client_name }}</span> wants to access your account. This will allow <span class="whitespace-nowrap">{{ client_name }}</span> to:</p>
+  </header>

-    <div class="consent-scope-list">
+  <section class="consent-scope-list">
    {{ scope.list(scopes="openid urn:matrix:org.matrix.msc2967.client:api:*") }}
-    </div>
+  </section>

-    <div class="my-2 text-center cpd-text-body-md-regular">
-      <span class="font-semibold">Make sure that you trust <span class="whitespace-nowrap">{{ client_name }}</span>.</span>
+  <section class="text-center cpd-text-secondary cpd-text-body-md-regular">
+    <span class="font-semibold cpd-text-primary">Make sure that you trust <span class="whitespace-nowrap">{{ client_name }}</span>.</span>
    You may be sharing sensitive information with this site or app.
-    </div>
+  </section>

-    <form method="POST" class="flex flex-col">
+  <section class="flex flex-col gap-6">
+    <form method="POST" class="cpd-form-root">
      <input type="hidden" name="csrf" value="{{ csrf_token }}" />
      {{ button.button(text=_("action.continue")) }}
    </form>

-    <div class="text-center">
+    <div class="flex gap-1 justify-center items-center">
+      <p class="cpd-text-secondary cpd-text-body-md-regular">
        {{ _("mas.not_you", username=current_session.user.username) }}
+      </p>
+
      {{ logout.button(text=_("action.sign_out"), csrf_token=csrf_token, post_logout_action=action, as_link=true) }}
    </div>
-  </main>
+  </section>
 {% endblock content %}
--- a/templates/pages/upstream_oauth2/do_register.html
+++ b/templates/pages/upstream_oauth2/do_register.html
@@ -17,58 +17,123 @@ limitations under the License.
 {% extends "base.html" %}

 {% block content %}
-  <section class="flex-1 flex flex-col justify-center gap-6">
-    <h1 class="cpd-text-heading-xl-semibold text-center">
  {% if force_localpart %}
-        {{ _("mas.upstream_oauth2.register.create_account") }}
-      {% else %}
-        {{ _("mas.upstream_oauth2.register.choose_username") }}
-      {% endif %}
-    </h1>
+    <header class="page-heading">
+      <div class="icon">
+        {{ icon.download() }}
+      </div>

-    <form method="POST" class="flex flex-col gap-6">
+      <div class="header">
+        <h1 class="title">
+          {{ _("mas.upstream_oauth2.register.import_data.heading") }}
+        </h1>
+        <p class="text">
+          {{ _("mas.upstream_oauth2.register.import_data.description", server_name=branding.server_name) }}
+        </p>
+      </div>
+    </header>
+  {% else %}
+    <header class="page-heading">
+      <div class="icon">
+        {{ icon.mention() }}
+      </div>
+
+      <div class="header">
+        <h1 class="title">
+          {{ _("mas.upstream_oauth2.register.choose_username.heading") }}
+        </h1>
+        <p class="text">
+          {{ _("mas.upstream_oauth2.register.choose_username.description") }}
+        </p>
+      </div>
+    </header>
+  {% endif %}
+
+  <form method="POST" class="cpd-form-root">
    <input type="hidden" name="csrf" value="{{ csrf_token }}" />
    <input type="hidden" name="action" value="register" />
+
    {% if force_localpart %}
-        <div class="rounded-lg bg-grey-25 dark:bg-grey-450 p-4">
-          <div class="font-medium"> {{ _("mas.upstream_oauth2.register.forced_localpart") }}</div>
-          <div class="font-mono">{{ suggested_localpart }}</div>
+      {% call(f) field.field(label=_("common.mxid"), name="mxid") %}
+        <input {{ field.attributes(f) }} class="cpd-text-control" type="text" value="@{{ suggested_localpart }}:{{ branding.server_name }}" readonly aria-describedby="{{ f.id }}-help" />
+
+        <div class="cpd-form-message cpd-form-help-message" id="{{ f.id }}-help">
+          {{ _("mas.upstream_oauth2.register.enforced_by_policy") }}
        </div>
+      {% endcall %}
    {% else %}
-        {{ field.input(label=_("common.username"), name="username", autocomplete="username", autocorrect="off", autocapitalize="none") }}
+      {% call(f) field.field(label=_("common.username"), name="username") %}
+        <input {{ field.attributes(f) }} class="cpd-text-control" type="text" autocomplete="username" autocorrect="off" autocapitalize="none" value="{{ suggested_localpart or '' }}" aria-describedby="{{ f.id }}-help" />
+
+        <div class="cpd-form-message cpd-form-help-message" id="{{ f.id }}-help">
+          @{{ suggested_localpart or (_("common.username") | lower) }}:{{ branding.server_name }}
+        </div>
+      {% endcall %}
    {% endif %}

    {% if suggested_email %}
-        <div class="rounded-lg bg-grey-25 dark:bg-grey-450 p-4">
-          <div class="font-medium">
-            {% if force_email %}
-              {{ _("mas.upstream_oauth2.register.forced_email") }}
-            {% else %}
-              <input type="checkbox" name="import_email" id="import_email" checked="checked" />
-              <label for="import_email">{{ _("mas.upstream_oauth2.register.suggested_email") }}</label>
-            {% endif %}
+      <div class="flex gap-6 items-center">
+        {% call(f) field.field(label=_("common.email_address"), name="email", class="flex-1") %}
+          <input {{ field.attributes(f) }} class="cpd-text-control" type="email" value="{{ suggested_email }}" readonly aria-describedby="{{ f.id }}-help" />
+
+          <div class="cpd-form-message cpd-form-help-message" id="{{ f.id }}-help">
+            {{ _("mas.upstream_oauth2.register.imported_from_upstream") }}
          </div>
-          <div class="font-mono">{{ suggested_email }}</div>
+        {% endcall %}
+
+        {% if not force_email %}
+          <div class="cpd-form-inline-field">
+            <div class="cpd-form-inline-field-control">
+              <div class="cpd-checkbox-container">
+                <input class="cpd-checkbox-input" type="checkbox" name="import_email" id="import_email" checked="checked" />
+                <div class="cpd-checkbox-ui">
+                  {{ icon.check() }}
+                </div>
+              </div>
+            </div>
+            <label class="cpd-form-label" for="import_email">
+              {{- _("mas.upstream_oauth2.register.use") -}}
+            </label>
+          </div>
+        {% endif %}
      </div>
    {% endif %}

    {% if suggested_display_name %}
-        <div class="rounded-lg bg-grey-25 dark:bg-grey-450 p-4">
-          <div class="font-medium">
-            {% if force_display_name %}
-              {{ _("mas.upstream_oauth2.register.forced_display_name") }}
-            {% else %}
-            <input type="checkbox" name="import_display_name" id="import_display_name" checked="checked" />
-            <label for="import_display_name">{{ _("mas.upstream_oauth2.register.suggested_display_name") }}</label>
-            {% endif %}
+      <div class="flex gap-6 items-center">
+        {% call(f) field.field(label=_("common.display_name"), name="display_name", class="flex-1") %}
+          <input {{ field.attributes(f) }} class="cpd-text-control" type="text" value="{{ suggested_display_name }}" readonly />
+
+          <div class="cpd-form-message cpd-form-help-message">
+            {{ _("mas.upstream_oauth2.register.imported_from_upstream") }}
          </div>
-          <div class="font-mono">{{ suggested_display_name }}</div>
+        {% endcall %}
+
+        {% if not force_display_name %}
+          <div class="cpd-form-inline-field">
+            <div class="cpd-form-inline-field-control">
+              <div class="cpd-checkbox-container">
+                <input class="cpd-checkbox-input" type="checkbox" name="import_display_name" id="import_display_name" checked="checked" />
+                <div class="cpd-checkbox-ui">
+                  {{ icon.check() }}
+                </div>
+              </div>
+            </div>
+            <div class="cpd-form-inline-field-body">
+              <label class="cpd-form-label" for="import_display_name">
+                {{- _("mas.upstream_oauth2.register.use") -}}
+              </label>
+            </div>
+          </div>
+        {% endif %}
      </div>
    {% endif %}

    {{ button.button(text=_("action.create_account")) }}
  </form>
+
+  {# Leave this for now as we don't have that fully designed yet
    {{ field.separator() }}
    {{ button.link_outline(text=_("mas.upstream_oauth2.register.link_existing"), href=login_link) }}
-  </section>
+  #}
 {% endblock content %}
--- a/templates/pages/upstream_oauth2/link_mismatch.html
+++ b/templates/pages/upstream_oauth2/link_mismatch.html
@@ -17,11 +17,17 @@ limitations under the License.
 {% extends "base.html" %}

 {% block content %}
-  <section class="flex-1 flex flex-col gap-6 justify-center">
-    <h1 class="cpd-text-heading-xl-semibold text-center">
+  <header class="page-heading">
+    <div class="icon invalid">
+      {{ icon.warning() }}
+    </div>
+
+    <div class="header">
+      <h1 class="title">
        {{ _("mas.upstream_oauth2.link_mismatch.heading") }}
      </h1>
+    </div>
+  </header>

  {{ logout.button(text=_("action.sign_out"), csrf_token=csrf_token) }}
-  </section>
 {% endblock content %}
--- a/templates/pages/upstream_oauth2/suggest_link.html
+++ b/templates/pages/upstream_oauth2/suggest_link.html
@@ -17,16 +17,22 @@ limitations under the License.
 {% extends "base.html" %}

 {% block content %}
-  <section class="flex-1 flex flex-col gap-6 justify-center">
-      <h1 class="cpd-text-heading-xl-semibold text-center">
-        {{ _("mas.upstream_oauth2.suggest_link.heading") }}
-      </h1>
+  <header class="page-heading">
+    <div class="icon">
+      {{ icon.link() }}
+    </div>

-      <form method="POST" class="flex">
+    <div class="header">
+      <h1 class="title">{{ _("mas.upstream_oauth2.suggest_link.heading") }}</h1>
+    </div>
+  </header>
+
+  <section class="flex flex-col gap-6 justify-center">
+    <form method="POST" class="cpd-form-root">
      <input type="hidden" name="csrf" value="{{ csrf_token }}" />
      <input type="hidden" name="action" value="link" />

-        {{ button.button(text=_("mas.upstream_oauth2.suggest_link.action"), class="flex-1") }}
+      {{ button.button(text=_("mas.upstream_oauth2.suggest_link.action")) }}
    </form>

    {{ field.separator() }}
--- a/translations/en.json
+++ b/translations/en.json
@@ -2,33 +2,29 @@
  "action": {
    "cancel": "Cancel",
    "@cancel": {
-      "context": "pages/consent.html:62:11-29, pages/login.html:77:13-31, pages/policy_violation.html:41:11-29, pages/register.html:45:15-33"
+      "context": "pages/consent.html:72:11-29, pages/login.html:95:13-31, pages/policy_violation.html:50:11-29, pages/register.html:64:13-31"
    },
    "continue": "Continue",
    "@continue": {
-      "context": "pages/account/emails/add.html:33:26-46, pages/consent.html:58:28-48, pages/login.html:46:30-50, pages/reauth.html:30:28-48, pages/register.html:40:28-48, pages/sso.html:41:28-48"
+      "context": "pages/account/emails/add.html:45:26-46, pages/account/emails/verify.html:60:26-46, pages/consent.html:60:28-48, pages/login.html:59:30-50, pages/reauth.html:40:28-48, pages/register.html:59:28-48, pages/sso.html:43:28-48"
    },
    "create_account": "Create Account",
    "@create_account": {
-      "context": "pages/login.html:53:35-61, pages/upstream_oauth2/do_register.html:69:28-54"
+      "context": "pages/login.html:69:35-61, pages/upstream_oauth2/do_register.html:132:26-52"
    },
    "sign_in": "Sign in",
    "@sign_in": {
-      "context": "pages/index.html:34:26-45"
+      "context": "pages/index.html:38:26-45"
    },
    "sign_out": "Sign out",
    "@sign_out": {
-      "context": "pages/consent.html:71:28-48, pages/index.html:32:28-48, pages/policy_violation.html:37:28-48, pages/sso.html:46:28-48, pages/upstream_oauth2/link_mismatch.html:25:26-46, pages/upstream_oauth2/suggest_link.html:34:28-48"
-    },
-    "submit": "Submit",
-    "@submit": {
-      "context": "pages/account/emails/verify.html:36:26-44"
+      "context": "pages/consent.html:68:28-48, pages/index.html:36:28-48, pages/policy_violation.html:46:28-48, pages/sso.html:51:28-48, pages/upstream_oauth2/link_mismatch.html:32:24-44, pages/upstream_oauth2/suggest_link.html:40:26-46"
    }
  },
  "app": {
    "human_name": "Matrix Authentication Service",
    "@human_name": {
-      "context": "pages/index.html:21:48-67",
+      "context": "pages/index.html:23:29-48",
      "description": "Human readable name of the application"
    },
    "name": "matrix-authentication-service",
@@ -38,7 +34,7 @@
    },
    "technical_description": "OpenID Connect discovery document: <a class=\"cpd-link\" data-kind=\"primary\" href=\"%(discovery_url)s\">%(discovery_url)s</a>",
    "@technical_description": {
-      "context": "pages/index.html:23:9-68",
+      "context": "pages/index.html:25:13-72",
      "description": "Introduction text displayed on the home page"
    }
  },
@@ -65,35 +61,47 @@
    }
  },
  "common": {
+    "display_name": "Display Name",
+    "@display_name": {
+      "context": "pages/upstream_oauth2/do_register.html:104:37-61"
+    },
    "email_address": "Email address",
    "@email_address": {
-      "context": "pages/account/emails/add.html:32:25-50, pages/register.html:37:27-52"
+      "context": "pages/account/emails/add.html:41:33-58, pages/register.html:47:35-60, pages/upstream_oauth2/do_register.html:76:37-62"
+    },
+    "mxid": "Matrix ID",
+    "@mxid": {
+      "context": "pages/upstream_oauth2/do_register.html:57:35-51"
    },
    "password": "Password",
    "@password": {
-      "context": "pages/login.html:45:29-49, pages/reauth.html:29:27-47, pages/register.html:38:27-47"
+      "context": "pages/login.html:55:37-57, pages/reauth.html:36:35-55, pages/register.html:51:35-55"
    },
    "password_confirm": "Confirm password",
    "@password_confirm": {
-      "context": "pages/register.html:39:27-55"
+      "context": "pages/register.html:55:35-63"
    },
    "username": "Username",
    "@username": {
-      "context": "pages/login.html:44:29-49, pages/register.html:36:27-47, pages/upstream_oauth2/do_register.html:38:29-49"
+      "context": "pages/login.html:51:37-57, pages/register.html:43:35-55, pages/upstream_oauth2/do_register.html:65:35-55, pages/upstream_oauth2/do_register.html:69:38-58"
    }
  },
  "error": {
    "unexpected": "Unexpected error",
    "@unexpected": {
-      "context": "pages/error.html:24:41-62",
+      "context": "pages/error.html:30:29-50",
      "description": "Error message displayed when an unexpected error occurs"
    }
  },
  "mas": {
    "add_email": {
+      "description": "Enter an email address to recover your account in case you lose access to it.",
+      "@description": {
+        "context": "pages/account/emails/add.html:27:25-55"
+      },
      "heading": "Add an email address",
      "@heading": {
-        "context": "pages/account/emails/add.html:21:48-74",
+        "context": "pages/account/emails/add.html:26:27-53",
        "description": "Heading for the page to add an email address"
      }
    },
@@ -104,27 +112,31 @@
    "change_password": {
      "change": "Change password",
      "@change": {
-        "context": "pages/account/password.html:26:26-57",
+        "context": "pages/account/password.html:46:26-57",
        "description": "Button to change the user's password"
      },
      "confirm": "Confirm password",
      "@confirm": {
-        "context": "pages/account/password.html:25:25-57",
+        "context": "pages/account/password.html:42:33-65",
        "description": "Confirmation field for the new password"
      },
      "current": "Current password",
      "@current": {
-        "context": "pages/account/password.html:23:25-57",
+        "context": "pages/account/password.html:34:33-65",
        "description": "Field for the user's current password"
      },
+      "description": "This will change the password on your account.",
+      "@description": {
+        "context": "pages/account/password.html:27:25-61"
+      },
      "heading": "Change my password",
      "@heading": {
-        "context": "pages/account/password.html:21:48-80",
+        "context": "pages/account/password.html:26:27-59",
        "description": "Heading on the change password page"
      },
      "new": "New password",
      "@new": {
-        "context": "pages/account/password.html:24:25-53",
+        "context": "pages/account/password.html:38:33-61",
        "description": "Field for the user's new password"
      }
    },
@@ -155,11 +167,11 @@
    "errors": {
      "denied_policy": "Denied by policy: %(policy)s",
      "@denied_policy": {
-        "context": "components/field.html:48:17-69"
+        "context": "components/field.html:75:17-69"
      },
      "field_required": "This field is required",
      "@field_required": {
-        "context": "components/field.html:44:17-47"
+        "context": "components/field.html:71:17-47"
      },
      "invalid_credentials": "Invalid credentials",
      "@invalid_credentials": {
@@ -171,54 +183,54 @@
      },
      "username_taken": "This username is already taken",
      "@username_taken": {
-        "context": "components/field.html:46:17-47"
+        "context": "components/field.html:73:17-47"
      }
    },
    "login": {
      "call_to_register": "Don't have an account yet?",
      "@call_to_register": {
-        "context": "pages/login.html:51:13-44"
+        "context": "pages/login.html:65:15-46"
      },
      "continue_with_provider": "Continue with %(provider)s",
      "@continue_with_provider": {
-        "context": "pages/login.html:65:144-222",
+        "context": "pages/login.html:82:13-91",
        "description": "Button to log in with an upstream provider"
      },
      "description": "Please sign in to continue:",
      "@description": {
-        "context": "pages/login.html:30:16-42"
+        "context": "pages/login.html:35:31-57"
      },
      "headline": "Sign in",
      "@headline": {
-        "context": "pages/login.html:29:57-80"
+        "context": "pages/login.html:34:33-56"
      },
      "link": {
        "description": "Linking your <span class=\"break-keep text-links\">%(provider)s</span> account",
        "@description": {
-          "context": "pages/login.html:25:32-94"
+          "context": "pages/login.html:30:31-93"
        },
        "headline": "Sign in to link",
        "@headline": {
-          "context": "pages/login.html:24:57-85"
+          "context": "pages/login.html:29:33-61"
        }
      },
      "no_login_methods": "No login methods available.",
      "@no_login_methods": {
-        "context": "pages/login.html:71:11-42"
+        "context": "pages/login.html:89:11-42"
      }
    },
    "navbar": {
      "my_account": "My account",
      "@my_account": {
-        "context": "pages/index.html:31:26-52"
+        "context": "pages/index.html:35:26-52"
      },
      "register": "Create an account",
      "@register": {
-        "context": "pages/index.html:35:34-58"
+        "context": "pages/index.html:39:34-58"
      },
      "signed_in_as": "Signed in as <span class=\"font-semibold\">%(username)s</span>.",
      "@signed_in_as": {
-        "context": "pages/index.html:28:11-79",
+        "context": "pages/index.html:32:11-79",
        "description": "Displayed in the navbar when the user is signed in"
      }
    },
@@ -234,49 +246,49 @@
    },
    "not_you": "Not %(username)s?",
    "@not_you": {
-      "context": "pages/consent.html:70:9-65, pages/sso.html:45:9-65",
+      "context": "pages/consent.html:65:11-67, pages/sso.html:48:11-67",
      "description": "Suggestions for the user to log in as a different user"
    },
    "or_separator": "Or",
    "@or_separator": {
-      "context": "components/field.html:62:10-31",
+      "context": "components/field.html:90:10-31",
      "description": "Separator between the login methods"
    },
    "policy_violation": {
      "description": "This might be because of the client which authored the request, the currently logged in user, or the request itself.",
      "@description": {
-        "context": "pages/policy_violation.html:22:10-47",
+        "context": "pages/policy_violation.html:27:25-62",
        "description": "Displayed when an authorization request is denied by the policy"
      },
      "heading": "The authorization request was denied the policy enforced by this service",
      "@heading": {
-        "context": "pages/policy_violation.html:21:48-81",
+        "context": "pages/policy_violation.html:26:27-60",
        "description": "Displayed when an authorization request is denied by the policy"
      },
      "logged_as": "Logged as <span class=\"font-semibold\">%(username)s</span>",
      "@logged_as": {
-        "context": "pages/policy_violation.html:34:11-86"
+        "context": "pages/policy_violation.html:43:11-86"
      }
    },
    "register": {
      "call_to_login": "Already have an account?",
      "@call_to_login": {
-        "context": "pages/register.html:54:9-40",
+        "context": "pages/register.html:74:11-42",
        "description": "Displayed on the registration page to suggest to log in instead"
      },
      "create_account": {
        "description": "Please create an account to get started:",
        "@description": {
-          "context": "pages/register.html:23:12-56"
+          "context": "pages/register.html:27:25-69"
        },
        "heading": "Create an account",
        "@heading": {
-          "context": "pages/register.html:22:53-93"
+          "context": "pages/register.html:26:27-67"
        }
      },
      "sign_in_instead": "Sign in instead",
      "@sign_in_instead": {
-        "context": "pages/register.html:56:31-64"
+        "context": "pages/register.html:78:31-64"
      }
    },
    "scope": {
@@ -319,75 +331,96 @@
      "link_mismatch": {
        "heading": "This upstream account is already linked to another account.",
        "@heading": {
-          "context": "pages/upstream_oauth2/link_mismatch.html:22:9-55",
+          "context": "pages/upstream_oauth2/link_mismatch.html:27:11-57",
          "description": "Page shown when the user tries to link an upstream account that is already linked to another account"
        }
      },
      "register": {
-        "choose_username": "Choose your username",
-        "@choose_username": {
-          "context": "pages/upstream_oauth2/do_register.html:25:11-60",
+        "choose_username": {
+          "description": "This cannot be changed later.",
+          "@description": {
+            "context": "pages/upstream_oauth2/do_register.html:46:13-74"
+          },
+          "heading": "Choose your username",
+          "@heading": {
+            "context": "pages/upstream_oauth2/do_register.html:43:13-70",
            "description": "Displayed when creating a new account from an SSO login, and the username is not forced"
+          }
        },
        "create_account": "Create a new account",
        "@create_account": {
-          "context": "pages/upstream_oauth2/do_register.html:23:11-59",
          "description": "Displayed when creating a new account from an SSO login, and the username is pre-filled and forced"
        },
+        "enforced_by_policy": "Enforced by server policy",
+        "@enforced_by_policy": {
+          "context": "pages/upstream_oauth2/do_register.html:61:13-65"
+        },
        "forced_display_name": "Will use the following display name",
        "@forced_display_name": {
-          "context": "pages/upstream_oauth2/do_register.html:59:17-70",
          "description": "Tells the user what display name will be imported"
        },
        "forced_email": "Will use the following email address",
        "@forced_email": {
-          "context": "pages/upstream_oauth2/do_register.html:45:17-63",
          "description": "Tells the user which email address will be imported"
        },
        "forced_localpart": "Will use the following username",
        "@forced_localpart": {
-          "context": "pages/upstream_oauth2/do_register.html:34:39-89",
          "description": "Tells the user which username will be used"
        },
+        "import_data": {
+          "description": "Confirm the information that will be linked to your new %(server_name)s account.",
+          "@description": {
+            "context": "pages/upstream_oauth2/do_register.html:31:13-104"
+          },
+          "heading": "Import your data",
+          "@heading": {
+            "context": "pages/upstream_oauth2/do_register.html:28:13-66"
+          }
+        },
+        "imported_from_upstream": "Imported from your upstream account",
+        "@imported_from_upstream": {
+          "context": "pages/upstream_oauth2/do_register.html:108:15-71, pages/upstream_oauth2/do_register.html:80:15-71"
+        },
        "link_existing": "Link to an existing account",
        "@link_existing": {
-          "context": "pages/upstream_oauth2/do_register.html:72:32-79",
          "description": "Button to link an existing account after an SSO login"
        },
        "suggested_display_name": "Import display name",
        "@suggested_display_name": {
-          "context": "pages/upstream_oauth2/do_register.html:62:48-104",
          "description": "Option to let the user import their display name after an SSO login"
        },
        "suggested_email": "Import email address",
        "@suggested_email": {
-          "context": "pages/upstream_oauth2/do_register.html:48:43-92",
          "description": "Option to let the user import their email address after an SSO login"
+        },
+        "use": "Use",
+        "@use": {
+          "context": "pages/upstream_oauth2/do_register.html:124:20-57, pages/upstream_oauth2/do_register.html:95:18-55"
        }
      },
      "suggest_link": {
        "action": "Link",
        "@action": {
-          "context": "pages/upstream_oauth2/suggest_link.html:29:30-74"
+          "context": "pages/upstream_oauth2/suggest_link.html:35:28-72"
        },
        "heading": "Link to your existing account",
        "@heading": {
-          "context": "pages/upstream_oauth2/suggest_link.html:22:11-56"
+          "context": "pages/upstream_oauth2/suggest_link.html:26:27-72"
        }
      }
    },
    "verify_email": {
-      "code": "Code",
-      "@code": {
-        "context": "pages/account/emails/verify.html:35:25-51"
+      "6_digit_code": "6-digit code",
+      "@6_digit_code": {
+        "context": "pages/account/emails/verify.html:41:33-67"
      },
-      "description": "Please enter the 6-digit code sent to: <span class=\"font-semibold\">%(email)s</span>",
+      "description": "Enter the 6-digit code sent to: <em>%(email)s</em>",
      "@description": {
-        "context": "pages/account/emails/verify.html:23:12-64"
+        "context": "pages/account/emails/verify.html:26:25-77"
      },
-      "headline": "Email verification",
+      "headline": "Verify your email",
      "@headline": {
-        "context": "pages/account/emails/verify.html:22:50-80"
+        "context": "pages/account/emails/verify.html:25:27-57"
      }
    }
  }