disable turn servers in widget mode (#1396 )

Signed-off-by: Timo K <toger5@hotmail.de>
Merge pull request #1427 from robintown/button-accessibility
2026-08-23 20:59:21 +00:00 · 2023-09-12 13:51:06 +02:00 · 2023-09-11 11:24:53 -04:00 · 2023-09-11 11:22:35 -04:00 · 2023-09-11 11:22:10 -04:00 · 2023-09-11 11:14:59 -04:00
187 changed files with 8266 additions and 5329 deletions
--- a/.env.example
+++ b/.env.example
@@ -10,18 +10,10 @@ LIVEKIT_SECRET="secret"
 # Used for determining the homeserver to use for short urls etc.
 # VITE_FALLBACK_STUN_ALLOWED=false

-# VITE_CUSTOM_THEME=true
-# VITE_THEME_ACCENT=#0dbd8b
-# VITE_THEME_ACCENT_20=#0dbd8b33
-# VITE_THEME_ALERT=#ff5b55
-# VITE_THEME_ALERT_20=#ff5b5533
-# VITE_THEME_LINKS=#0086e6
-# VITE_THEME_PRIMARY_CONTENT=#ffffff
-# VITE_THEME_SECONDARY_CONTENT=#a9b2bc
-# VITE_THEME_TERTIARY_CONTENT=#8e99a4
-# VITE_THEME_TERTIARY_CONTENT_20=#8e99a433
-# VITE_THEME_QUATERNARY_CONTENT=#6f7882
-# VITE_THEME_QUINARY_CONTENT=#394049
-# VITE_THEME_SYSTEM=#21262c
-# VITE_THEME_BACKGROUND=#15191e
-# VITE_THEME_BACKGROUND_85=#15191ed9
+# CSS to be injected into the page for the purpose of custom theming.
+# Generally, writing a custom theme involves overriding Compound design tokens,
+# which are documented here:
+# https://compound.element.io/?path=/docs/foundations-design-tokens--docs
+# https://compound.element.io/?path=/docs/tokens-color-palettes--docs
+# https://compound.element.io/?path=/docs/tokens-semantic-colors--docs
+# VITE_CUSTOM_CSS=".cpd-theme-dark.cpd-theme-dark { --cpd-color-theme-bg: #101317; }"
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -1,6 +1,16 @@
 module.exports = {
  plugins: ["matrix-org"],
-  extends: ["plugin:matrix-org/react", "plugin:matrix-org/a11y", "prettier"],
+  extends: [
+    "prettier",
+    "plugin:matrix-org/react",
+    "plugin:matrix-org/a11y",
+    "plugin:matrix-org/typescript",
+  ],
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: "module",
+    project: ["./tsconfig.json"],
+  },
  env: {
    browser: true,
    node: true,
--- a/.github/workflows/build.yaml
+++ b/.github/workflows/build.yaml
@@ -23,6 +23,7 @@ jobs:
          SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
          SENTRY_URL: ${{ secrets.SENTRY_URL }}
          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+          VITE_APP_VERSION: ${{ github.sha }}
          NODE_OPTIONS: "--max-old-space-size=4096"
      - name: Upload Artifact
        uses: actions/upload-artifact@v2
--- a/.github/workflows/lint.yaml
+++ b/.github/workflows/lint.yaml
@@ -19,6 +19,6 @@ jobs:
      - name: i18n
        run: "yarn run i18n:check"
      - name: ESLint
-        run: "yarn run lint:js"
+        run: "yarn run lint:eslint"
      - name: Type check
        run: "yarn run lint:types"
--- a/.github/workflows/netlify-fullmesh.yaml
+++ b/.github/workflows/netlify-fullmesh.yaml
@@ -28,7 +28,7 @@ jobs:
          ref: ${{ github.event.workflow_run.head_sha }}

      - name: "Download artifact"
-        uses: actions/github-script@v3.1.0
+        uses: actions/github-script@v3.2.0
        with:
          script: |
            const artifacts = await github.actions.listWorkflowRunArtifacts({
@@ -60,7 +60,7 @@ jobs:

      - name: Deploy to Netlify
        id: netlify
-        uses: nwtgck/actions-netlify@v1.2.3
+        uses: nwtgck/actions-netlify@v1.2.4
        with:
          publish-dir: dist
          deploy-message: "Deploy from GitHub Actions"
--- a/.github/workflows/netlify-livekit.yaml
+++ b/.github/workflows/netlify-livekit.yaml
@@ -12,7 +12,7 @@ jobs:
    runs-on: ubuntu-latest
    permissions:
      deployments: write
-    # Important: the 'branches' filter above will match the 'livekit-experiment' branch on forks,
+    # Important: the 'branches' filter above will match the 'livekit' branch on forks,
    # so we need to check the head repo too in order to not run on PRs from forks
    # We check the branch name again too just for completeness
    # (Is there a nicer way to see if a PR is from a fork?)
@@ -28,7 +28,7 @@ jobs:
          ref: ${{ github.event.workflow_run.head_sha }}

      - name: "Download artifact"
-        uses: actions/github-script@v3.1.0
+        uses: actions/github-script@v3.2.0
        with:
          script: |
            const artifacts = await github.actions.listWorkflowRunArtifacts({
@@ -53,14 +53,14 @@ jobs:

      - name: Add redirects file
        # We fetch from github directly as we don't bother checking out the repo
-        run: curl -s https://raw.githubusercontent.com/vector-im/element-call/livekit-experiment/config/netlify_redirects > dist/_redirects
+        run: curl -s https://raw.githubusercontent.com/vector-im/element-call/livekit/config/netlify_redirects > dist/_redirects

      - name: Add config file
-        run: curl -s https://raw.githubusercontent.com/vector-im/element-call/livekit-experiment/config/element_io_preview.json > dist/config.json
+        run: curl -s https://raw.githubusercontent.com/vector-im/element-call/livekit/config/element_io_preview.json > dist/config.json

      - name: Deploy to Netlify
        id: netlify
-        uses: nwtgck/actions-netlify@v1.2.3
+        uses: nwtgck/actions-netlify@v1.2.4
        with:
          publish-dir: dist
          deploy-message: "Deploy from GitHub Actions"
--- a/.github/workflows/netlify-pr.yaml
+++ b/.github/workflows/netlify-pr.yaml
@@ -6,6 +6,7 @@ on:
      - completed
    branches-ignore:
      - "main"
+      - "livekit"
 jobs:
  deploy:
    if: github.event.workflow_run.conclusion == 'success' && github.event.workflow_run.event == 'pull_request'
--- a/.github/workflows/publish.yaml
+++ b/.github/workflows/publish.yaml
@@ -3,6 +3,8 @@ name: Build & publish images to the package registry for tags
 on:
  release:
    types: [published]
+  push:
+    branches: [livekit]

 env:
  REGISTRY: ghcr.io
@@ -16,11 +18,15 @@ jobs:
      contents: write # required to upload release asset
      packages: write
    steps:
+      - name: Get current time
+        id: current-time
+        run: echo "unix_time=$(date +'%s')" >> $GITHUB_OUTPUT
+
      - name: Check it out
        uses: actions/checkout@v2

      - name: Log in to container registry
-        uses: docker/login-action@f054a8b539a109f9f41c372932f1ae047eff08c9
+        uses: docker/login-action@cf8514a65188af1d4f94f8c28a7a4153af1088ce
        with:
          registry: ${{ env.REGISTRY }}
          username: ${{ github.actor }}
@@ -39,31 +45,37 @@ jobs:
          SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
          SENTRY_URL: ${{ secrets.SENTRY_URL }}
          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
-          VITE_APP_VERSION: ${{ github.event.release.tag_name }}
+          VITE_APP_VERSION: ${{ github.event.release.tag_name || github.sha }}

      - name: Create Tarball
        env:
-          GITHUB_TAG_NAME: ${{ github.event.release.tag_name }}
+          TARBALL_VERSION: ${{ github.event.release.tag_name || github.sha }}
        run: |
-          tar --numeric-owner --transform "s/dist/element-call-${GITHUB_TAG_NAME}/" -cvzf element-call-${GITHUB_TAG_NAME}.tar.gz dist
+          tar --numeric-owner --transform "s/dist/element-call-${TARBALL_VERSION}/" -cvzf element-call-${TARBALL_VERSION}.tar.gz dist
+
      - name: Upload
-        uses: alexellis/upload-assets@0.4.0
+        uses: actions/upload-artifact@65d862660abb392b8c4a3d1195a2108db131dd05
        env:
          GITHUB_TOKEN: ${{ github.token }}
        with:
-          asset_paths: '["element-call-${{ github.event.release.tag_name }}.tar.gz"]'
+          path: "./element-call-*.tar.gz"

      - name: Extract metadata (tags, labels) for Docker
        id: meta
-        uses: docker/metadata-action@98669ae865ea3cffbcbaa878cf57c20bbf1c6c38
+        uses: docker/metadata-action@0f8c876bafbf5dbce05c36682ec68e9a0274a48a
        with:
          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: |
+            type=sha,format=short,event=branch
+            type=semver,pattern=v{{version}}
+            type=raw,value=latest-ci,enable={{is_default_branch}}
+            type=raw,value=latest-ci_${{steps.current-time.outputs.unix_time}},enable={{is_default_branch}}

      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@dc7b9719a96d48369863986a06765841d7ea23f6
+        uses: docker/setup-buildx-action@885d1462b80bc1c1c7f0b00334ad271f09369c55

      - name: Build and push Docker image
-        uses: docker/build-push-action@ad44023a93711e3deb337508980b4b5e9bcdc5dc
+        uses: docker/build-push-action@9311bf5263ae5b36f3ec67aff768790c6e2344ad
        with:
          context: .
          platforms: linux/amd64,linux/arm64
--- a/README.md
+++ b/README.md
@@ -9,7 +9,7 @@ For prior version of the Element Call that relied solely on full-mesh logic, che

 ![A demo of Element Call with six people](demo.jpg)

-To try it out, visit our hosted version at [call.element.io](https://call.element.io). You can also find the latest development version continuously deployed to [element-call.netlify.app](https://element-call.netlify.app).
+To try it out, visit our hosted version at [call.element.io](https://call.element.io). You can also find the latest development version continuously deployed to [call.element.dev](https://call.element.dev/).

 ## Host it yourself

--- a/config/config.sample.json
+++ b/config/config.sample.json
@@ -4,5 +4,6 @@
      "base_url": "https://call.ems.host",
      "server_name": "call.ems.host"
    }
-  }
+  },
+  "eula": "https://static.element.io/legal/online-EULA.pdf"
 }
--- a/config/element_io_preview.json
+++ b/config/element_io_preview.json
@@ -1,12 +1,12 @@
 {
  "default_server_config": {
    "m.homeserver": {
-      "base_url": "https://call.ems.host",
-      "server_name": "call.ems.host"
+      "base_url": "https://call-unstable.ems.host",
+      "server_name": "call-unstable.ems.host"
    }
  },
  "livekit": {
-    "livekit_service_url": "https://lk-jwt-service.lab.element.dev"
+    "livekit_service_url": "https://livekit-jwt.call.element.dev"
  },
  "posthog": {
    "api_key": "phc_rXGHx9vDmyEvyRxPziYtdVIv0ahEv8A9uLWFcCi1WcU",
--- a/package.json
+++ b/package.json
@@ -9,8 +9,9 @@
    "build-storybook": "build-storybook",
    "prettier:check": "prettier -c .",
    "prettier:format": "prettier -w .",
-    "lint": "yarn lint:types && yarn lint:js",
-    "lint:js": "eslint --max-warnings 0 src",
+    "lint": "yarn lint:types && yarn lint:eslint",
+    "lint:eslint": "eslint --max-warnings 0 src",
+    "lint:eslint-fix": "eslint --max-warnings 0 src --fix",
    "lint:types": "tsc",
    "i18n": "node_modules/i18next-parser/bin/cli.js",
    "i18n:check": "node_modules/i18next-parser/bin/cli.js --fail-on-warnings --fail-on-update",
@@ -19,14 +20,14 @@
  },
  "dependencies": {
    "@juggle/resize-observer": "^3.3.1",
-    "@livekit/components-react": "^1.0.3",
+    "@livekit/components-react": "^1.1.0",
    "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.14.tgz",
    "@opentelemetry/api": "^1.4.0",
    "@opentelemetry/context-zone": "^1.9.1",
    "@opentelemetry/exporter-jaeger": "^1.9.1",
-    "@opentelemetry/exporter-trace-otlp-http": "^0.35.1",
-    "@opentelemetry/instrumentation-document-load": "^0.31.1",
-    "@opentelemetry/instrumentation-user-interaction": "^0.32.1",
+    "@opentelemetry/exporter-trace-otlp-http": "^0.41.0",
+    "@opentelemetry/instrumentation-document-load": "^0.33.0",
+    "@opentelemetry/instrumentation-user-interaction": "^0.33.0",
    "@opentelemetry/sdk-trace-web": "^1.9.1",
    "@react-aria/button": "^3.3.4",
    "@react-aria/dialog": "^3.1.4",
@@ -45,9 +46,10 @@
    "@react-stately/tree": "^3.2.0",
    "@sentry/react": "^6.13.3",
    "@sentry/tracing": "^6.13.3",
-    "@types/grecaptcha": "^3.0.4",
-    "@types/sdp-transform": "^2.4.5",
    "@use-gesture/react": "^10.2.11",
+    "@vector-im/compound-design-tokens": "^0.0.5",
+    "@vector-im/compound-web": "^0.4.0",
+    "@vitejs/plugin-basic-ssl": "^1.0.1",
    "@vitejs/plugin-react": "^4.0.1",
    "classnames": "^2.3.1",
    "color-hash": "^2.0.1",
@@ -55,11 +57,11 @@
    "i18next": "^21.10.0",
    "i18next-browser-languagedetector": "^6.1.8",
    "i18next-http-backend": "^1.4.4",
-    "livekit-client": "^1.9.7",
+    "livekit-client": "^1.12.3",
    "lodash": "^4.17.21",
-    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#af10b0c44b4a427c8d2224bfd6feb03a12cfd27e",
+    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#b698217445318f453e0b1086364a33113eaa85d9",
    "matrix-widget-api": "^1.3.1",
-    "mermaid": "^8.13.8",
+    "mermaid": "^9.0.0",
    "normalize.css": "^8.0.1",
    "pako": "^2.0.4",
    "postcss-preset-env": "^7",
@@ -69,24 +71,33 @@
    "react-dom": "18",
    "react-i18next": "^11.18.6",
    "react-json-view": "^1.21.3",
-    "react-router": "6",
    "react-router-dom": "^5.2.0",
    "react-use-clipboard": "^1.0.7",
    "react-use-measure": "^2.1.1",
    "sdp-transform": "^2.14.1",
    "tinyqueue": "^2.0.3",
-    "unique-names-generator": "^4.6.0"
+    "unique-names-generator": "^4.6.0",
+    "uuid": "9"
  },
  "devDependencies": {
    "@babel/core": "^7.16.5",
+    "@react-spring/rafz": "^9.7.3",
    "@sentry/vite-plugin": "^0.3.0",
    "@storybook/react": "^6.5.0-alpha.5",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
+    "@types/content-type": "^1.1.5",
+    "@types/d3": "^7.4.0",
+    "@types/dom-screen-wake-lock": "^1.0.1",
+    "@types/dompurify": "^3.0.2",
+    "@types/grecaptcha": "^3.0.4",
    "@types/node": "^18.13.0",
+    "@types/react-router-dom": "^5.3.3",
    "@types/request": "^2.48.8",
-    "@typescript-eslint/eslint-plugin": "^5.52.0",
-    "@typescript-eslint/parser": "^5.52.0",
+    "@types/sdp-transform": "^2.4.5",
+    "@types/uuid": "9",
+    "@typescript-eslint/eslint-plugin": "^6.1.0",
+    "@typescript-eslint/parser": "^6.1.0",
    "babel-loader": "^8.2.3",
    "babel-plugin-transform-vite-meta-env": "^1.0.3",
    "eslint": "^8.14.0",
@@ -101,17 +112,17 @@
    "identity-obj-proxy": "^3.0.0",
    "jest": "^29.2.2",
    "jest-environment-jsdom": "^29.3.1",
+    "jest-mock": "^29.5.0",
    "prettier": "^2.6.2",
    "sass": "^1.42.1",
    "storybook-builder-vite": "^0.1.12",
-    "typescript": "^4.9.5",
-    "typescript-strict-plugin": "^2.0.1",
+    "typescript": "^5.1.6",
    "vite": "^4.2.0",
    "vite-plugin-html-template": "^1.1.0",
    "vite-plugin-svgr": "^3.2.0"
  },
  "jest": {
-    "testEnvironment": "jsdom",
+    "testEnvironment": "./test/environment.ts",
    "testMatch": [
      "<rootDir>/test/**/*-test.[jt]s?(x)"
    ],
--- a/public/index.html
+++ b/public/index.html
@@ -13,7 +13,7 @@
    </script>
  </head>

-  <body>
+  <body class="cpd-theme-dark">
    <div id="root"></div>
  </body>
 </html>
--- a/public/locales/bg/app.json
+++ b/public/locales/bg/app.json
@@ -5,8 +5,6 @@
  "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Друг потребител в този разговор има проблем. За да диагностицираме този проблем по-добре ни се иска да съберем debug логове.",
  "Audio": "Звук",
  "Avatar": "Аватар",
-  "By clicking \"Go\", you agree to our <2>Terms and conditions</2>": "Натискайки \"Напред\" се съгласявате с нашите <2>Правила и условия</2>",
-  "By clicking \"Join call now\", you agree to our <2>Terms and conditions</2>": "Натискайки \"Влез в разговора сега\", се съгласявате с нашите <2>Правила и условия</2>",
  "Call link copied": "Връзка към разговора бе копирана",
  "Call type menu": "Меню \"тип на разговора\"",
  "Camera": "Камера",
@@ -73,9 +71,7 @@
  "Stop sharing screen": "Спри споделянето на екрана",
  "Submit feedback": "Изпрати обратна връзка",
  "Take me Home": "Отиди в Начало",
-  "Thanks! We'll get right on it.": "Благодарим! Веднага ще се заемем.",
  "This call already exists, would you like to join?": "Този разговор вече съществува, искате ли да се присъедините?",
-  "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>Terms and conditions</12>": "Този сайт се предпазва от ReCAPTCHA и важат <2>Политиката за поверителност</2> и <6>Условията за ползване на услугата</6> на Google.<9></9>Натискайки \"Регистрация\", се съгласявате с нашите <12>Правила и условия</12>",
  "Turn off camera": "Изключи камерата",
  "Turn on camera": "Включи камерата",
  "Unmute microphone": "Включи микрофона",
--- a/public/locales/cs/app.json
+++ b/public/locales/cs/app.json
@@ -23,7 +23,6 @@
  "Turn on camera": "Zapnout kameru",
  "Turn off camera": "Vypnout kameru",
  "This call already exists, would you like to join?": "Tento hovor již existuje, chcete se připojit?",
-  "Thanks! We'll get right on it.": "Děkujeme! Hned se na to vrhneme.",
  "Take me Home": "Domovská obrazovka",
  "Submit feedback": "Dát feedback",
  "Stop sharing screen": "Zastavit sdílení obrazovek",
@@ -62,7 +61,6 @@
  "Inspector": "Insepktor",
  "Incompatible versions!": "Nekompatibilní verze!",
  "Incompatible versions": "Nekompatibilní verze",
-  "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>Terms and conditions</12>": "Tato stárnka je chráněna pomocí ReCAPTCHA a Google <2>zásad ochrany osobních údajů</2> a <6>podmínky služby</6> platí.<9></9>Kliknutím na \"Registrovat\", souhlasíte s <12>Pravidly a podmínkami</12>",
  "Walkie-talkie call name": "Jméno vysílačkového hovoru",
  "Walkie-talkie call": "Vysílačkový hovor",
  "{{names}}, {{name}}": "{{names}}, {{name}}",
@@ -90,8 +88,6 @@
  "Create account": "Vytvořit účet",
  "Copy": "Kopírovat",
  "Call type menu": "Menu typu hovoru",
-  "By clicking \"Join call now\", you agree to our <2>Terms and conditions</2>": "Kliknutím na \"Připojit se do hovoru\", odsouhlasíte naše <2>Terms and conditions</2>",
-  "By clicking \"Go\", you agree to our <2>Terms and conditions</2>": "Kliknutím na \"Pokračovat\", odsouhlasíte naše <2>Terms and conditions</2>",
  "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Jiný uživatel v tomto hovoru má problémy. Abychom mohli diagnostikovat problém, rádi bychom shromáždili protokoly ladění.",
  "<0>Why not finish by setting up a password to keep your account?</0><1>You'll be able to keep your name and set an avatar for use on future calls</1>": "<0>Proč neskončit nastavením hesla, abyste mohli účet použít znovu?</0><1>Budete si moci nechat své jméno a nastavit si avatar pro budoucí hovory </1>",
  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Připojit se</0><1>Or</1><2>Zkopírovat odkaz a připojit se později</2>",
--- a/public/locales/de/app.json
+++ b/public/locales/de/app.json
@@ -5,8 +5,6 @@
  "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Ein anderer Benutzer dieses Anrufs hat ein Problem. Um es besser diagnostizieren zu können, würden wir gerne ein Debug-Protokoll erstellen.",
  "Audio": "Audio",
  "Avatar": "Avatar",
-  "By clicking \"Go\", you agree to our <2>Terms and conditions</2>": "Wenn du auf „Los geht’s“ klickst, akzeptierst du unsere <2>Geschäftsbedingungen</2>",
-  "By clicking \"Join call now\", you agree to our <2>Terms and conditions</2>": "Wenn du auf „Anruf beitreten“ klickst, akzeptierst du unsere <2>Geschäftsbedingungen</2>",
  "Call link copied": "Anruflink kopiert",
  "Call type menu": "Anruftyp Menü",
  "Camera": "Kamera",
@@ -72,9 +70,7 @@
  "Stop sharing screen": "Beenden der Bildschirmfreigabe",
  "Submit feedback": "Rückmeldung geben",
  "Take me Home": "Zurück zur Startseite",
-  "Thanks! We'll get right on it.": "Vielen Dank! Wir werden uns sofort darum kümmern.",
  "This call already exists, would you like to join?": "Dieser Aufruf existiert bereits, möchtest Du teilnehmen?",
-  "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>Terms and conditions</12>": "Diese Website wird durch ReCAPTCHA geschützt und es gelten die <2>Datenschutzerklärung</2> und <6>Nutzungsbedingungen</6> von Google.<9></9>Indem Du auf „Registrieren“ klickst, stimmst du unseren <12>Geschäftsbedingungen</12> zu",
  "Turn off camera": "Kamera ausschalten",
  "Turn on camera": "Kamera einschalten",
  "Unmute microphone": "Mikrofon aktivieren",
@@ -115,5 +111,17 @@
  "{{count}} stars|one": "{{count}} Stern",
  "<0>Thanks for your feedback!</0>": "<0>Danke für deine Rückmeldung!</0>",
  "{{displayName}} is presenting": "{{displayName}} präsentiert",
-  "Show connection stats": "Verbindungsstatistiken zeigen"
+  "Show connection stats": "Verbindungsstatistiken zeigen",
+  "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Mit einem Klick auf „Anruf beitreten“ akzeptierst du unseren <2>Endbenutzer-Lizenzvertrag (EULA)</2>",
+  "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Mit einem Klick auf „Los geht’s“ akzeptierst du unseren <2>Endbenutzer-Lizenzvertrag (EULA)</2>",
+  "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>End User Licensing Agreement (EULA)</12>": "Diese Seite wird durch reCAPTCHA geschützt und es gelten Googles <2>Datenschutzerklärung</2> und <6>Nutzungsbedingungen</6>. <9></9>Mit einem Klick auf „Registrieren“ akzeptierst du unseren <2>Endbenutzer-Lizenzvertrag (EULA)</2>",
+  "Element Call is temporarily not end-to-end encrypted while we test scalability.": "Element Call ist temporär nicht Ende-zu-Ende-verschlüsselt, während wir die Skalierbarkeit testen.",
+  "Connectivity to the server has been lost.": "Die Verbindung zum Server wurde getrennt.",
+  "Enable end-to-end encryption (password protected calls)": "Ende-zu-Ende-Verschlüsselung aktivieren (Passwort geschützte Anrufe)",
+  "Password (if none, E2EE is disabled)": "Passwort (falls leer, wird E2EE deaktiviert)",
+  "End-to-end encryption isn't supported on your browser.": "Ende-zu-Ende-Verschlüsselung wird in deinem Browser nicht unterstützt.",
+  "Thanks!": "Danke!",
+  "You were disconnected from the call": "Deine Verbindung wurde getrennt",
+  "Reconnect": "Erneut verbinden",
+  "Retry sending logs": "Protokolle erneut senden"
 }
--- a/public/locales/el/app.json
+++ b/public/locales/el/app.json
@@ -11,7 +11,7 @@
  "Remove": "Αφαίρεση",
  "Registering…": "Εγγραφή…",
  "Not registered yet? <2>Create an account</2>": "Δεν έχετε εγγραφεί ακόμα; <2>Δημιουργήστε λογαριασμό</2>",
-  "Login to your account": "Συνδεθείτε στο λογαριασμό σας",
+  "Login to your account": "Συνδεθείτε στον λογαριασμό σας",
  "Logging in…": "Σύνδεση…",
  "Invite people": "Προσκαλέστε άτομα",
  "Invite": "Πρόσκληση",
@@ -71,5 +71,45 @@
  "Close": "Κλείσιμο",
  "Change layout": "Αλλαγή διάταξης",
  "Camera": "Κάμερα",
-  "Audio": "Ήχος"
+  "Audio": "Ήχος",
+  "Send debug logs": "Αποστολή αρχείων καταγραφής",
+  "Recaptcha dismissed": "Το recaptcha απορρίφθηκε",
+  "<0>Thanks for your feedback!</0>": "<0>Ευχαριστώ για τα σχόλιά σας!</0>",
+  "Call type menu": "Μενού είδους κλήσης",
+  "Local volume": "Τοπική ένταση",
+  "Home": "Αρχική",
+  "Show connection stats": "Εμφάνιση στατιστικών σύνδεσης",
+  "Unmute microphone": "Κατάργηση σίγασης μικροφώνου",
+  "Take me Home": "Μετάβαση στην Αρχική",
+  "{{displayName}} is presenting": "{{displayName}} παρουσιάζει",
+  "<0></0><1></1>You may withdraw consent by unchecking this box. If you are currently in a call, this setting will take effect at the end of the call.": "<0></0><1></1>Μπορείτε να ανακαλέσετε τη συγκατάθεσή σας αποεπιλέγοντας αυτό το πλαίσιο. Εάν βρίσκεστε σε κλήση, η ρύθμιση αυτή θα τεθεί σε ισχύ στο τέλος της.",
+  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Συμμετοχή στην κλήση τώρα</0><1>Or</1><2>Αντιγραφή συνδέσμου κλήσης και συμμετοχή αργότερα</2>",
+  "<0>We'd love to hear your feedback so we can improve your experience.</0>": "<0>Θα θέλαμε να ακούσουμε τα σχόλιά σας ώστε να βελτιώσουμε την εμπειρία σας.</0>",
+  "<0>Why not finish by setting up a password to keep your account?</0><1>You'll be able to keep your name and set an avatar for use on future calls</1>": "<0>Γιατί να μην ολοκληρώσετε με τη δημιουργία ενός κωδικού πρόσβασης για τη διατήρηση του λογαριασμού σας;</0><1>Θα μπορείτε να διατηρήσετε το όνομά σας και να ορίσετε ένα avatar για χρήση σε μελλοντικές κλήσεις.</1>",
+  "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Ένας άλλος χρήστης σε αυτή την κλήση έχει ένα πρόβλημα. Για την καλύτερη διάγνωση αυτών των προβλημάτων θα θέλαμε να συλλέξουμε ένα αρχείο καταγραφής σφαλμάτων.",
+  "By participating in this beta, you consent to the collection of anonymous data, which we use to improve the product. You can find more information about which data we track in our <2>Privacy Policy</2> and our <5>Cookie Policy</5>.": "Συμμετέχοντας σε αυτή τη δοκιμαστική έκδοση, συναινείτε στη συλλογή ανώνυμων δεδομένων, τα οποία χρησιμοποιούμε για τη βελτίωση του προϊόντος. Μπορείτε να βρείτε περισσότερες πληροφορίες σχετικά με το ποια δεδομένα καταγράφουμε στην <2>Πολιτική απορρήτου</2> και στην <5>Πολιτική cookies</5>.",
+  "Grid layout menu": "Μενού διάταξης πλέγματος",
+  "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below.": "Εάν αντιμετωπίζετε προβλήματα ή απλά θέλετε να μας δώσετε κάποια σχόλια, παρακαλούμε στείλτε μας μια σύντομη περιγραφή παρακάτω.",
+  "Other users are trying to join this call from incompatible versions. These users should ensure that they have refreshed their browsers:<1>{userLis}</1>": "Κάποιοι άλλοι χρήστες προσπαθούν να συμμετάσχουν σε αυτή την κλήση από ασύμβατες εκδόσεις. Αυτοί οι χρήστες θα πρέπει να βεβαιωθούν ότι έχουν κάνει ανανέωση (refresh) την καρτέλα του περιηγητή τους:<1>{userLis}</1>",
+  "Expose developer settings in the settings window.": "Εμφάνιση ρυθμίσεων προγραμματιστή στο παράθυρο ρυθμίσεων.",
+  "Feedback": "Ανατροφοδότηση",
+  "Submitting…": "Υποβολή…",
+  "Thanks, we received your feedback!": "Ευχαριστούμε, λάβαμε τα σχόλιά σας!",
+  "{{count}} stars|other": "{{count}} αστέρια",
+  "{{count}} stars|one": "{{count}} αστέρι",
+  "{{displayName}}, your call has ended.": "{{displayName}}, η κλήση σας τερματίστηκε.",
+  "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Η υποβολή αρχείων καταγραφής σφαλμάτων θα μας βοηθήσει να εντοπίσουμε το πρόβλημα.</0>",
+  "How did it go?": "Πώς σας φάνηκε;",
+  "Include debug logs": "Να συμπεριληφθούν αρχεία καταγραφής",
+  "Recaptcha not loaded": "Το Recaptcha δεν φορτώθηκε",
+  "Debug log": "Αρχείο καταγραφής",
+  "Developer": "Προγραμματιστής",
+  "Download debug logs": "Λήψη αρχείων καταγραφής",
+  "Sending debug logs…": "Αποστολή αρχείων καταγραφής…",
+  "Submit": "Υποβολή",
+  "Your feedback": "Τα σχόλιά σας",
+  "Fetching group call timed out.": "Η ομαδική κλήση έληξε από τέλος χρόνου.",
+  "Freedom": "Ελευθερία",
+  "Spotlight": "Spotlight",
+  "Element Call Home": "Element Κεντρική Οθόνη Κλήσεων"
 }
--- a/public/locales/en-GB/app.json
+++ b/public/locales/en-GB/app.json
@@ -1,9 +1,11 @@
 {
+  "{{count, number}}|one": "{{count, number}}",
+  "{{count, number}}|other": "{{count, number}}",
  "{{count}} stars|one": "{{count}} star",
  "{{count}} stars|other": "{{count}} stars",
  "{{displayName}} is presenting": "{{displayName}} is presenting",
  "{{displayName}}, your call has ended.": "{{displayName}}, your call has ended.",
-  "{{names}}, {{name}}": "{{names}}, {{name}}",
+  "{{names, list(style: short;)}}": "{{names, list(style: short;)}}",
  "<0></0><1></1>You may withdraw consent by unchecking this box. If you are currently in a call, this setting will take effect at the end of the call.": "<0></0><1></1>You may withdraw consent by unchecking this box. If you are currently in a call, this setting will take effect at the end of the call.",
  "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>",
  "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Create an account</0> Or <2>Access as a guest</2>",
@@ -16,57 +18,58 @@
  "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.",
  "Audio": "Audio",
  "Avatar": "Avatar",
-  "By clicking \"Go\", you agree to our <2>Terms and conditions</2>": "By clicking \"Go\", you agree to our <2>Terms and conditions</2>",
-  "By clicking \"Join call now\", you agree to our <2>Terms and conditions</2>": "By clicking \"Join call now\", you agree to our <2>Terms and conditions</2>",
+  "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>",
+  "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>",
  "By participating in this beta, you consent to the collection of anonymous data, which we use to improve the product. You can find more information about which data we track in our <2>Privacy Policy</2> and our <5>Cookie Policy</5>.": "By participating in this beta, you consent to the collection of anonymous data, which we use to improve the product. You can find more information about which data we track in our <2>Privacy Policy</2> and our <5>Cookie Policy</5>.",
  "Call link copied": "Call link copied",
  "Call type menu": "Call type menu",
  "Camera": "Camera",
-  "Change layout": "Change layout",
  "Close": "Close",
  "Confirm password": "Confirm password",
+  "Connectivity to the server has been lost.": "Connectivity to the server has been lost.",
  "Copied!": "Copied!",
  "Copy": "Copy",
  "Copy and share this call link": "Copy and share this call link",
  "Create account": "Create account",
  "Debug log": "Debug log",
  "Debug log request": "Debug log request",
-  "Details": "Details",
  "Developer": "Developer",
  "Developer Settings": "Developer Settings",
  "Display name": "Display name",
  "Download debug logs": "Download debug logs",
  "Element Call Home": "Element Call Home",
+  "Element Call is temporarily not end-to-end encrypted while we test scalability.": "Element Call is temporarily not end-to-end encrypted while we test scalability.",
+  "Enable end-to-end encryption (password protected calls)": "Enable end-to-end encryption (password protected calls)",
+  "Encrypted": "Encrypted",
+  "End call": "End call",
+  "End-to-end encryption isn't supported on your browser.": "End-to-end encryption isn't supported on your browser.",
  "Exit full screen": "Exit full screen",
  "Expose developer settings in the settings window.": "Expose developer settings in the settings window.",
  "Feedback": "Feedback",
  "Fetching group call timed out.": "Fetching group call timed out.",
-  "Freedom": "Freedom",
  "Full screen": "Full screen",
  "Go": "Go",
-  "Grid layout menu": "Grid layout menu",
+  "Grid": "Grid",
  "Home": "Home",
  "How did it go?": "How did it go?",
  "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below.": "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below.",
  "Include debug logs": "Include debug logs",
  "Incompatible versions": "Incompatible versions",
-  "Incompatible versions!": "Incompatible versions!",
  "Inspector": "Inspector",
-  "Invite": "Invite",
-  "Invite people": "Invite people",
  "Join call": "Join call",
  "Join call now": "Join call now",
  "Join existing call?": "Join existing call?",
-  "Leave": "Leave",
  "Loading…": "Loading…",
  "Local volume": "Local volume",
  "Logging in…": "Logging in…",
  "Login": "Login",
  "Login to your account": "Login to your account",
  "Microphone": "Microphone",
+  "Microphone off": "Microphone off",
+  "Microphone on": "Microphone on",
  "More": "More",
-  "Mute microphone": "Mute microphone",
  "No": "No",
+  "Not encrypted": "Not encrypted",
  "Not now, return to home screen": "Not now, return to home screen",
  "Not registered yet? <2>Create an account</2>": "Not registered yet? <2>Create an account</2>",
  "Other users are trying to join this call from incompatible versions. These users should ensure that they have refreshed their browsers:<1>{userLis}</1>": "Other users are trying to join this call from incompatible versions. These users should ensure that they have refreshed their browsers:<1>{userLis}</1>",
@@ -75,45 +78,49 @@
  "Profile": "Profile",
  "Recaptcha dismissed": "Recaptcha dismissed",
  "Recaptcha not loaded": "Recaptcha not loaded",
+  "Reconnect": "Reconnect",
  "Register": "Register",
  "Registering…": "Registering…",
  "Remove": "Remove",
+  "Retry sending logs": "Retry sending logs",
  "Return to home screen": "Return to home screen",
  "Select an option": "Select an option",
  "Send debug logs": "Send debug logs",
  "Sending debug logs…": "Sending debug logs…",
  "Sending…": "Sending…",
  "Settings": "Settings",
+  "Share": "Share",
  "Share screen": "Share screen",
+  "Share this call": "Share this call",
+  "Sharing screen": "Sharing screen",
  "Show call inspector": "Show call inspector",
  "Show connection stats": "Show connection stats",
  "Sign in": "Sign in",
  "Sign out": "Sign out",
  "Speaker": "Speaker",
  "Spotlight": "Spotlight",
-  "Stop sharing screen": "Stop sharing screen",
  "Submit": "Submit",
  "Submit feedback": "Submit feedback",
  "Submitting…": "Submitting…",
  "Take me Home": "Take me Home",
  "Thanks, we received your feedback!": "Thanks, we received your feedback!",
-  "Thanks! We'll get right on it.": "Thanks! We'll get right on it.",
+  "Thanks!": "Thanks!",
  "This call already exists, would you like to join?": "This call already exists, would you like to join?",
-  "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>Terms and conditions</12>": "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>Terms and conditions</12>",
-  "Turn off camera": "Turn off camera",
-  "Turn on camera": "Turn on camera",
-  "Unmute microphone": "Unmute microphone",
+  "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>End User Licensing Agreement (EULA)</12>": "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>End User Licensing Agreement (EULA)</12>",
  "User menu": "User menu",
  "Username": "Username",
  "Version: {{version}}": "Version: {{version}}",
  "Video": "Video",
  "Video call": "Video call",
  "Video call name": "Video call name",
+  "Video off": "Video off",
+  "Video on": "Video on",
  "Waiting for other participants…": "Waiting for other participants…",
  "Walkie-talkie call": "Walkie-talkie call",
  "Walkie-talkie call name": "Walkie-talkie call name",
  "WebRTC is not supported or is being blocked in this browser.": "WebRTC is not supported or is being blocked in this browser.",
  "Yes, join call": "Yes, join call",
+  "You were disconnected from the call": "You were disconnected from the call",
  "Your feedback": "Your feedback",
  "Your recent calls": "Your recent calls"
 }
--- a/public/locales/es/app.json
+++ b/public/locales/es/app.json
@@ -6,8 +6,6 @@
  "Register": "Registrarse",
  "Not registered yet? <2>Create an account</2>": "¿No estás registrado todavía? <2>Crear una cuenta</2>",
  "Login to your account": "Iniciar sesión en tu cuenta",
-  "By clicking \"Join call now\", you agree to our <2>Terms and conditions</2>": "Al hacer clic en \"Unirse a la llamada ahora\", aceptarás nuestros <2>Términos y condiciones</2>",
-  "By clicking \"Go\", you agree to our <2>Terms and conditions</2>": "Al hacer clic en \"Comenzar\" aceptarás nuestros <2>Términos y condiciones</2>",
  "Yes, join call": "Si, unirse a la llamada",
  "Walkie-talkie call name": "Nombre de la llamada Walkie-talkie",
  "Walkie-talkie call": "Llamada Walkie-talkie",
@@ -21,8 +19,6 @@
  "Unmute microphone": "Desilenciar el micrófono",
  "Turn on camera": "Encender la cámara",
  "Turn off camera": "Apagar la cámara",
-  "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>Terms and conditions</12>": "Este sitio está protegido por ReCAPTCHA y se aplica <2>la Política de Privacidad</2> y <6>los Términos de Servicio</6> de Google.<9></9>Al hacer clic en \"Registrar\" aceptarás nuestros <12>Términos y condiciones</12>",
-  "Thanks! We'll get right on it.": "¡Gracias! Nos encargaremos de ello.",
  "Take me Home": "Volver al inicio",
  "Submit feedback": "Enviar comentarios",
  "Stop sharing screen": "Dejar de compartir pantalla",
@@ -101,5 +97,23 @@
  "Expose developer settings in the settings window.": "Muestra los ajustes de desarrollador en la ventana de ajustes.",
  "Developer Settings": "Ajustes de desarrollador",
  "By participating in this beta, you consent to the collection of anonymous data, which we use to improve the product. You can find more information about which data we track in our <2>Privacy Policy</2> and our <5>Cookie Policy</5>.": "Al participar en esta beta, consientes a la recogida de datos anónimos, los cuales usaremos para mejorar el producto. Puedes encontrar más información sobre que datos recogemos en nuestra <2>Política de privacidad</2> y en nuestra <5>Política sobre Cookies</5>.",
-  "<0></0><1></1>You may withdraw consent by unchecking this box. If you are currently in a call, this setting will take effect at the end of the call.": "<0></0><1></1>Puedes retirar tu consentimiento desmarcando esta casilla. Si estás en una llamada, este ajuste se aplicará al final de esta."
+  "<0></0><1></1>You may withdraw consent by unchecking this box. If you are currently in a call, this setting will take effect at the end of the call.": "<0></0><1></1>Puedes retirar tu consentimiento desmarcando esta casilla. Si estás en una llamada, este ajuste se aplicará al final de esta.",
+  "{{displayName}} is presenting": "{{displayName}} está presentando",
+  "<0>Thanks for your feedback!</0>": "<0>¡Gracias por tus comentarios!</0>",
+  "How did it go?": "¿Cómo ha ido?",
+  "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>End User Licensing Agreement (EULA)</12>": "Este sitio está protegido por ReCAPTCHA y se aplican la <2>Política de Privacidad</2> y los <6>Términos de Servicio de Google.<9></9>Al hacer clic en \"Registrar\", aceptas nuestro <12>Contrato de Licencia de Usuario Final (CLUF)</12>",
+  "Show connection stats": "Mostrar estadísticas de conexión",
+  "Element Call is temporarily not end-to-end encrypted while we test scalability.": "Element Call no está encriptado de extremo a extremo de manera temporal mientras probamos la escalabilidad del servicio.",
+  "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Al hacer clic en \"Comenzar\", aceptas nuestro <2>Contrato de Licencia de Usuario Final (CLUF)</2>",
+  "Thanks, we received your feedback!": "¡Gracias, hemos recibido tus comentarios!",
+  "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below.": "Si tienes algún problema o simplemente quieres darnos tu opinión, por favor envíanos una breve descripción.",
+  "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Al hacer clic en \"Unirse a la llamada ahora\", aceptas nuestro <2>Contrato de Licencia de Usuario Final (CLUF)</2>",
+  "<0>We'd love to hear your feedback so we can improve your experience.</0>": "<0>Nos encantaría conocer tu opinión para que podamos mejorar tu experiencia</0>",
+  "Feedback": "Danos tu opinión",
+  "Submit": "Enviar",
+  "{{count}} stars|one": "{{count}} estrella",
+  "{{count}} stars|other": "{{count}} estrellas",
+  "{{displayName}}, your call has ended.": "{{displayName}}, tu llamada ha finalizado.",
+  "Submitting…": "Enviando…",
+  "Your feedback": "Tus comentarios"
 }
--- a/public/locales/et/app.json
+++ b/public/locales/et/app.json
@@ -32,14 +32,12 @@
  "Camera": "Kaamera",
  "Call type menu": "Kõnetüübi valik",
  "Call link copied": "Kõne link on kopeeritud",
-  "By clicking \"Join call now\", you agree to our <2>Terms and conditions</2>": "Klõpsides „Liitu kõnega“nõustud sa meie <2>kasutustingimustega</2>",
-  "By clicking \"Go\", you agree to our <2>Terms and conditions</2>": "Klõpsides „Jätka“nõustud sa meie <2>kasutustingimustega</2>",
  "Avatar": "Tunnuspilt",
  "Audio": "Heli",
  "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Ühel teisel selles kõnes osalejal on lahenduse kasutamisel tekkinud probleem ning selle põhjuse leidmiseks me sooviksime koguda silumislogisid.",
  "Passwords must match": "Salasõnad ei klapi",
  "Password": "Salasõna",
-  "Not registered yet? <2>Create an account</2>": "Pole veel registreerunud? <2>Loo kasutajakonto</2>",
+  "Not registered yet? <2>Create an account</2>": "Sa pole veel registreerunud? <2>Loo kasutajakonto</2>",
  "Not now, return to home screen": "Mitte praegu, mine tagasi avalehele",
  "No": "Ei",
  "Mute microphone": "Summuta mikrofon",
@@ -53,7 +51,7 @@
  "Loading…": "Laadimine …",
  "Leave": "Lahku",
  "Join existing call?": "Liitu juba käimasoleva kõnega?",
-  "Join call now": "Kõnega liitumine",
+  "Join call now": "Liitu kõnega kohe",
  "Join call": "Kõnega liitumine",
  "Turn on camera": "Lülita kaamera sisse",
  "Turn off camera": "Lülita kaamera välja",
@@ -86,14 +84,12 @@
  "Version: {{version}}": "Versioon: {{version}}",
  "Username": "Kasutajanimi",
  "This call already exists, would you like to join?": "See kõne on juba olemas, kas soovid liituda?",
-  "Thanks! We'll get right on it.": "Tänud! Tegeleme sellega esimesel võimalusel.",
  "Unmute microphone": "Aktiveeri mikrofon",
  "User menu": "Kasutajamenüü",
  "Yes, join call": "Jah, liitu kõnega",
  "Walkie-talkie call": "Walkie-talkie stiilis kõne",
  "Walkie-talkie call name": "Walkie-talkie stiilis kõne nimi",
  "WebRTC is not supported or is being blocked in this browser.": "WebRTC pole kas selles brauseris toetatud või on keelatud.",
-  "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>Terms and conditions</12>": "Siin saidis on kasutusel ReCAPTCHA ning kehtivad Google <2>privaatsuspoliitika</2> ja <6>teenusetingimused</6>.<9></9>Klikkides „Registreeru“, nõustud meie <12>kasutustingimustega</12>",
  "Element Call Home": "Element Call Home",
  "Copy": "Kopeeri",
  "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Kui saadad meile vealogid, siis on lihtsam vea põhjust otsida.</0>",
@@ -115,5 +111,17 @@
  "<0>Thanks for your feedback!</0>": "<0>Täname Sind tagasiside eest!</0>",
  "<0>We'd love to hear your feedback so we can improve your experience.</0>": "<0>Meie rakenduse paremaks muutmiseks me hea meelega ootame Sinu arvamusi.</0>",
  "Show connection stats": "Näita ühenduse statistikat",
-  "{{displayName}} is presenting": "{{displayName}} on esitlemas"
+  "{{displayName}} is presenting": "{{displayName}} on esitlemas",
+  "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Klõpsides „Jätka“, nõustud sa meie <2>Lõppkasutaja litsentsilepinguga (EULA)</2>",
+  "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Klõpsides „Liitu kõnega kohe“, nõustud sa meie <2>Lõppkasutaja litsentsilepinguga (EULA)</2>",
+  "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>End User Licensing Agreement (EULA)</12>": "Selles saidis on kasutusel ReCAPTCHA ja kehtivad Google'i <2>Privaatsuspoliitika</2> ning <6>Teenusetingimused</6>.<9></9>Klõpsides „Registreeru“, sa nõustud meie <12>Lõppkasutaja litsentsilepingu (EULA) tingimustega</12>",
+  "Element Call is temporarily not end-to-end encrypted while we test scalability.": "Seni kuni me testime skaleeritavust, siis Element Call ajutiselt pole läbivalt krüptitud.",
+  "Connectivity to the server has been lost.": "Võrguühendus serveriga on katkenud.",
+  "Retry sending logs": "Proovi uuesti logisid saata",
+  "You were disconnected from the call": "Sinu ühendus kõnega katkes",
+  "Reconnect": "Ühenda uuesti",
+  "Thanks!": "Tänud!",
+  "End-to-end encryption isn't supported on your browser.": "Sinu brauser ei toeta läbivat krüptimist.",
+  "Enable end-to-end encryption (password protected calls)": "Võta kasutusele läbiv krüptimine (salasõnaga kaitstud kõned)",
+  "Password (if none, E2EE is disabled)": "Salasõna (tühja väärtuse puhul läbivat krüptimist ei kasutata)"
 }
--- a/public/locales/fa/app.json
+++ b/public/locales/fa/app.json
@@ -45,8 +45,6 @@
  "Camera": "دوربین",
  "Call type menu": "منوی نوع تماس",
  "Call link copied": "لینک تماس کپی شد",
-  "By clicking \"Join call now\", you agree to our <2>Terms and conditions</2>": "با کلیک بر روی پیوستن به تماس، شما با <2>شرایط و قوانین استفاده</2> موافقت می‌کنید",
-  "By clicking \"Go\", you agree to our <2>Terms and conditions</2>": "با کلیک بر روی برو، شما با <2>شرایط و قوانین استفاده</2> موافقت می‌کنید",
  "Avatar": "آواتار",
  "Audio": "صدا",
  "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "کاربر دیگری در این تماس مشکلی دارد. برای تشخیص بهتر مشکل، بهتر است ما لاگ عیب‌یابی را جمع‌آوری کنیم.",
@@ -88,9 +86,7 @@
  "Version: {{version}}": "نسخه: {{نسخه}}",
  "User menu": "فهرست کاربر",
  "Unmute microphone": "ناخموشی میکروفون",
-  "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>Terms and conditions</12>": "این سایت توسط ReCAPTCHA محافظت می شود و <2>خط مشی رازداری</2> و <6>شرایط خدمات</6> Google اعمال می شود.<9></9>با کلیک کردن بر روی \"ثبت نام\"، شما با <12 >شرایط و ضوابط </12> ما موافقت می کنید",
  "This call already exists, would you like to join?": "این تماس از قبل وجود دارد، می‌خواهید بپیوندید؟",
-  "Thanks! We'll get right on it.": "با تشکر! ما به درستی آن را انجام خواهیم داد.",
  "Submit feedback": "بازخورد ارائه دهید",
  "Stop sharing screen": "توقف اشتراک‌گذاری صفحه نمایش",
  "Element Call Home": "خانهٔ تماس المنت",
--- a/public/locales/fr/app.json
+++ b/public/locales/fr/app.json
@@ -4,8 +4,6 @@
  "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Un autre utilisateur dans cet appel a un problème. Pour nous permettre de résoudre le problème, nous aimerions récupérer un journal de débogage.",
  "Audio": "Audio",
  "Avatar": "Avatar",
-  "By clicking \"Go\", you agree to our <2>Terms and conditions</2>": "En cliquant sur « Commencer » vous acceptez nos <2>conditions d’utilisation</2>",
-  "By clicking \"Join call now\", you agree to our <2>Terms and conditions</2>": "En cliquant sur « Rejoindre l’appel » vous acceptez nos <2>conditions d’utilisation</2>",
  "Call link copied": "Lien de l’appel copié",
  "Call type menu": "Menu de type d’appel",
  "Camera": "Caméra",
@@ -69,7 +67,6 @@
  "Stop sharing screen": "Arrêter le partage d’écran",
  "Submit feedback": "Envoyer des retours",
  "Take me Home": "Retouner à l’accueil",
-  "Thanks! We'll get right on it.": "Merci ! Nous allons nous y attaquer.",
  "This call already exists, would you like to join?": "Cet appel existe déjà, voulez-vous le rejoindre ?",
  "Fetching group call timed out.": "Échec de connexion à l’appel de groupe dans le temps imparti.",
  "{{names}}, {{name}}": "{{names}}, {{name}}",
@@ -88,7 +85,6 @@
  "Unmute microphone": "Allumer le micro",
  "Turn on camera": "Allumer la caméra",
  "Turn off camera": "Couper la caméra",
-  "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>Terms and conditions</12>": "Ce site est protégé par ReCAPTCHA, la <2>politique de confidentialité</2> et les <6>conditions d’utilisation</6> de Google s’appliquent.<9></9>En cliquant sur « S’enregistrer » vous acceptez également nos <12>conditions d’utilisation</12>",
  "Speaker": "Intervenant",
  "Invite": "Inviter",
  "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>Vous avez déjà un compte ?</0><1><0>Se connecter</0> Ou <2>Accès invité</2></1>",
@@ -115,5 +111,17 @@
  "<0>Thanks for your feedback!</0>": "<0>Merci pour votre commentaire !</0>",
  "How did it go?": "Comment cela s’est-il passé ?",
  "{{displayName}} is presenting": "{{displayName}} est à l’écran",
-  "Show connection stats": "Afficher les statistiques de la connexion"
+  "Show connection stats": "Afficher les statistiques de la connexion",
+  "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "En cliquant sur « Rejoindre l’appel maintenant », vous acceptez notre <2>Contrat de Licence Utilisateur Final (CLUF)</2>",
+  "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "En cliquant sur « Commencer », vous acceptez notre <2>Contrat de Licence Utilisateur Final (CLUF)</2>",
+  "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>End User Licensing Agreement (EULA)</12>": "Ce site est protégé par ReCAPTCHA, la <2>politique de confidentialité</2> et les <6>conditions d’utilisation</6> de Google s’appliquent.<9></9>En cliquant sur « S’enregistrer » vous acceptez également notre <12>Contrat de Licence Utilisateur Final (CLUF)</12>",
+  "Element Call is temporarily not end-to-end encrypted while we test scalability.": "Element Call n’est temporairement plus chiffré de bout en bout le temps de tester l’extensibilité.",
+  "Reconnect": "Se reconnecter",
+  "Retry sending logs": "Réessayer d’envoyer les journaux",
+  "Thanks!": "Merci !",
+  "You were disconnected from the call": "Vous avez été déconnecté de l’appel",
+  "Connectivity to the server has been lost.": "La connexion avec le serveur a été perdue.",
+  "End-to-end encryption isn't supported on your browser.": "Le chiffrement de bout-en-bout n’est pas pris en charge par votre navigateur.",
+  "Password (if none, E2EE is disabled)": "Mot de passe (si aucun, le chiffrement E2EE est désactivé)",
+  "Enable end-to-end encryption (password protected calls)": "Activer le chiffrement de bout-en-bout (appels protégés par mot de passe)"
 }
--- a/public/locales/id/app.json
+++ b/public/locales/id/app.json
@@ -5,8 +5,6 @@
  "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Pengguna yang lain di panggilan ini sedang mengalami masalah. Supaya dapat mendiagnosa masalah ini, kami ingin mengumpulkan sebuah catatan pengawakutuan.",
  "Audio": "Audio",
  "Avatar": "Avatar",
-  "By clicking \"Go\", you agree to our <2>Terms and conditions</2>": "Dengan mengeklik \"Bergabung\", Anda terima <2>syarat dan ketentuan</2> kami",
-  "By clicking \"Join call now\", you agree to our <2>Terms and conditions</2>": "Dengan mengeklik \"Bergabung ke panggilan sekarang\", Anda terima <2>syarat dan ketentuan</2> kami",
  "Call link copied": "Tautan panggilan disalin",
  "Call type menu": "Menu jenis panggilan",
  "Camera": "Kamera",
@@ -73,9 +71,7 @@
  "Stop sharing screen": "Berhenti membagikan layar",
  "Submit feedback": "Kirim masukan",
  "Take me Home": "Bawa saya ke Beranda",
-  "Thanks! We'll get right on it.": "Terima kasih! Kami akan melihatnya.",
  "This call already exists, would you like to join?": "Panggilan ini sudah ada, apakah Anda ingin bergabung?",
-  "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>Terms and conditions</12>": "Situs ini dilindungi oleh ReCAPTCHA dan <2>Kebijakan Privasi</2> dan <6>Ketentuan Layanan</6> Google berlaku.<9>Dengan mengeklik \"Daftar\", Anda terima <12>syarat dan ketentuan</12> kami",
  "Turn off camera": "Matikan kamera",
  "Turn on camera": "Nyalakan kamera",
  "Unmute microphone": "Suarakan mikrofon",
@@ -93,7 +89,7 @@
  "Your recent calls": "Panggilan Anda terkini",
  "{{names}}, {{name}}": "{{names}}, {{name}}",
  "Sending debug logs…": "Mengirimkan catatan pengawakutuan…",
-  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Bergabung panggilan sekarang</0><1>Atau</1><2>Salin tautan dan bergabung nanti</2>",
+  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Bergabung ke panggilan sekarang</0><1>Atau</1><2>Salin tautan dan bergabung nanti</2>",
  "Element Call Home": "Beranda Element Call",
  "Copy": "Salin",
  "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Mengirim catatan pengawakutuan akan membantu kami melacak masalahnya.</0>",
@@ -105,7 +101,7 @@
  "Feedback": "Masukan",
  "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below.": "Jika Anda mengalami masalah atau hanya ingin memberikan masukan, silakan kirimkan kami deskripsi pendek di bawah.",
  "Submit": "Kirim",
-  "Submitting…": "Mengirim",
+  "Submitting…": "Mengirim…",
  "Thanks, we received your feedback!": "Terima kasih, kami telah menerima masukan Anda!",
  "Your feedback": "Masukan Anda",
  "{{displayName}}, your call has ended.": "{{displayName}}, panggilan Anda telah berakhir.",
@@ -115,5 +111,17 @@
  "<0>We'd love to hear your feedback so we can improve your experience.</0>": "<0>Kami ingin mendengar masukan Anda supaya kami bisa meningkatkan pengalaman Anda.</0>",
  "Show connection stats": "Tampilkan statistik koneksi",
  "{{displayName}} is presenting": "{{displayName}} sedang menampilkan",
-  "{{count}} stars|other": "{{count}} bintang"
+  "{{count}} stars|other": "{{count}} bintang",
+  "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Dengan mengeklik \"Bergabung\", Anda menyetujui <2>Perjanjian Lisensi Pengguna Akhir (EULA)</2>",
+  "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>End User Licensing Agreement (EULA)</12>": "Situs ini dilindungi oleh reCAPTCHA dan <2>Kebijakan Privasi</2> dan <6>Ketentuan Layanan</6> Google berlaku.<9></9>Dengan mengeklik \"Daftar\", Anda menyetujui <12>Perjanjian Lisensi Pengguna Akhir (EULA)</12> kami",
+  "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Dengan mengeklik \"Bergabung ke panggilan sekarang\", Anda menyetujui <2>Perjanjian Lisensi Pengguna Akhir (EULA)</2> kami",
+  "Element Call is temporarily not end-to-end encrypted while we test scalability.": "Element Call sementara tidak dienkripsi secara ujung ke ujung selagi kami menguji skalabilitas.",
+  "Connectivity to the server has been lost.": "Koneksi ke server telah hilang.",
+  "Enable end-to-end encryption (password protected calls)": "Aktifkan enkripsi ujung ke ujung (panggilan terlindungi oleh kata sandi)",
+  "End-to-end encryption isn't supported on your browser.": "Enkripsi ujung ke ujung tidak didukung di peramban Anda.",
+  "Password (if none, E2EE is disabled)": "Kata sandi (jika tidak ada, enkripsi akan dinonaktifkan)",
+  "Retry sending logs": "Kirim ulang catatan",
+  "You were disconnected from the call": "Anda terputus dari panggilan",
+  "Reconnect": "Hubungkan ulang",
+  "Thanks!": "Terima kasih!"
 }
--- a/public/locales/ja/app.json
+++ b/public/locales/ja/app.json
@@ -5,8 +5,6 @@
  "<0>Oops, something's gone wrong.</0>": "<0>何かがうまく行きませんでした。</0>",
  "Camera": "カメラ",
  "Call link copied": "通話リンクをコピーしました",
-  "By clicking \"Join call now\", you agree to our <2>Terms and conditions</2>": "「今すぐ通話に参加」をクリックすると、<2>利用規約</2>に同意したとみなされます",
-  "By clicking \"Go\", you agree to our <2>Terms and conditions</2>": "「続行」をクリックすると、 <2>利用規約</2>に同意したとみなされます",
  "Avatar": "アバター",
  "Audio": "音声",
  "Confirm password": "パスワードを確認",
--- a/public/locales/lv/app.json
+++ b/public/locales/lv/app.json
@@ -0,0 +1,127 @@
+{
+  "{{count}} stars|one": "{{count}} zvaigzne",
+  "{{count}} stars|other": "{{count}} zvaigznes",
+  "{{names}}, {{name}}": "{{names}}, {{name}}",
+  "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>Jau ir konts?</0><1><0>Pieteikties</0> vai <2>Piekļūt kā viesim</2></1>",
+  "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Izveidot kontu</0> vai <2>Piekļūt kā viesim</2>",
+  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Pievienoties zvanam tagad</0><1>vai</1><2>ievietot zvana saiti starpliktuvē un pievienoties vēlāk</2>",
+  "<0>Oops, something's gone wrong.</0>": "<0>Ak vai, kaut kas nogāja greizi!</0>",
+  "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Atkļūdošanas žurnāla ierakstu iesūtīšana palīdzēs mums atklāt nepilnību.</0>",
+  "<0>We'd love to hear your feedback so we can improve your experience.</0>": "<0>Mums patiktu saņemt Tavu atsauksmi, lai mēs varētu uzlabot Tavu pieredzi.</0>",
+  "<0>Thanks for your feedback!</0>": "<0>Paldies par atsauksmi!</0>",
+  "Audio": "Skaņa",
+  "Avatar": "Attēls",
+  "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Klikšķināšana uz \"Aiziet\" apliecina piekrišanu mūsu <2>galalietotāja licencēšanas nolīgumam (GLLN)</2>",
+  "Call link copied": "Zvana saite ievietota starpliktuvē",
+  "Call type menu": "Zvana veida izvēlne",
+  "Camera": "Kamera",
+  "Change layout": "Mainīt izkārtojumu",
+  "Close": "Aizvērt",
+  "Confirm password": "Apstiprināt paroli",
+  "Connectivity to the server has been lost.": "Ir zaudēts savienojums ar serveri.",
+  "Copied!": "Ievietots starpliktuvē.",
+  "Copy": "Ievietot starpliktuvē",
+  "Copy and share this call link": "Ievietot starpliktuvē un kopīgot šo zvana saiti",
+  "Create account": "Izveidot kontu",
+  "Debug log": "Atkļūdošanas žurnāls",
+  "Debug log request": "Atkļūdošanas žurnāla pieprasījums",
+  "Details": "Izvērsums",
+  "Developer": "Izstrādātājs",
+  "Developer Settings": "Izstrādātāja iestatījumi",
+  "Display name": "Attēlojamais vārds",
+  "Download debug logs": "Lejupielādēt atkļūdošanas žurnāla ierakstus",
+  "Element Call Home": "Element Call sākums",
+  "Exit full screen": "Iziet no pilnekrāna",
+  "Expose developer settings in the settings window.": "Izstādīt izstrādātāja iestatījumus iestatījumu logā.",
+  "Feedback": "Atsauksmes",
+  "Fetching group call timed out.": "Grupas zvana iegūšanā iestājās noildze.",
+  "Freedom": "Brīvība",
+  "Full screen": "Pilnekrāns",
+  "Go": "Aiziet",
+  "Grid layout menu": "Režģa izkārtojuma izvēlne",
+  "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Klikšķināšana uz \"Pievienoties zvanam tagad\" apliecina piekrišanu mūsu <2>galalietotāja licencēšanas nolīgumam (GLLN)</2>",
+  "By participating in this beta, you consent to the collection of anonymous data, which we use to improve the product. You can find more information about which data we track in our <2>Privacy Policy</2> and our <5>Cookie Policy</5>.": "Piedalīšanās šajā beta apliecina piekrišanu anonīmu datu ievākšanai, ko mēs izmantojam, lai uzlabotu izstrādājumu. Vairāk informācijas par datiem, ko mēs ievācam, var atrast mūsu <2>privātuma nosacījumos</2> un <5>sīkdatņu nosacījumos</5>.",
+  "Element Call is temporarily not end-to-end encrypted while we test scalability.": "Element Call īslaicīgi nav pilnīgi šifrēts, kamēr mēs pārbaudām mērogojamību.",
+  "Enable end-to-end encryption (password protected calls)": "Iespējot pilnīgu šifrēšanu (ar paroli aizsargāti zvani)",
+  "End-to-end encryption isn't supported on your browser.": "Šajā pārlūkā nav nodrošināta pilnīga šifrēšana.",
+  "{{displayName}} is presenting": "{{displayName}} uzstājas",
+  "{{displayName}}, your call has ended.": "{{displayName}}, Tavs zvans ir beidzies.",
+  "<0></0><1></1>You may withdraw consent by unchecking this box. If you are currently in a call, this setting will take effect at the end of the call.": "<0></0><1></1>Savu piekrišanu var atsaukt ar atzīmes noņemšanu no šīs rūtiņas. Ja pašreiz atrodies zvanā, šis iestatījums stāsies spēkā zvana beigās.",
+  "<0>Why not finish by setting up a password to keep your account?</0><1>You'll be able to keep your name and set an avatar for use on future calls</1>": "<0>Kādēļ nepabeigt ar paroles iestatīšanu, lai paturētu savu kontu?</0><1>Būs iespējams paturēt savu vārdu un iestatīt attēlu izmantošanai turpmākajos zvanos</1>",
+  "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Citam lietotājam šajā zvanā ir sarežģījumi. Lai labāk atklātu šīs nepilnības, mēs gribētu iegūt atkļūdošanas žurnālu.",
+  "Home": "Sākums",
+  "Waiting for other participants…": "Gaida citus dalībniekus…",
+  "Walkie-talkie call": "Rācijas zvans",
+  "Yes, join call": "Jā, pievienoties zvanam",
+  "Your feedback": "Tava atsauksme",
+  "Your recent calls": "Nesenie zvani",
+  "How did it go?": "Kā Tev veicās?",
+  "Include debug logs": "Iekļaut atkļūdošanas žurnāla ierakstus",
+  "Incompatible versions": "Nesaderīgas versijas",
+  "Incompatible versions!": "Nesaderīgas versijas.",
+  "Inspector": "Inspektors",
+  "Invite": "Uzaicināt",
+  "Invite people": "Uzaicināt cilvēkus",
+  "Join call": "Pievienoties zvanam",
+  "Join call now": "Pievienoties zvanam tagad",
+  "Join existing call?": "Pievienoties esošam zvanam?",
+  "Leave": "Pamest",
+  "Loading…": "Lādējas…",
+  "Local volume": "Vietējais skaļums",
+  "Logging in…": "Piesakās…",
+  "Login": "Pieteikties",
+  "Login to your account": "Pieteikties kontā",
+  "Microphone": "Mikrofons",
+  "More": "Vairāk",
+  "Mute microphone": "Apklusināt mikrofonu",
+  "No": "Nē",
+  "Not now, return to home screen": "Ne tagad, atgriezties sākuma ekrānā",
+  "Password": "Parole",
+  "Password (if none, E2EE is disabled)": "Parole (ja nav, pilnīga šifrēšana ir atspējota)",
+  "Passwords must match": "Parolēm ir jāsakrīt",
+  "Profile": "Profils",
+  "Recaptcha dismissed": "ReCaptcha atmesta",
+  "Recaptcha not loaded": "ReCaptcha nav ielādēta",
+  "Reconnect": "Atkārtoti savienoties",
+  "Register": "Reģistrēties",
+  "Registering…": "Reģistrē…",
+  "Remove": "Noņemt",
+  "Retry sending logs": "Atkārtoti mēģināt žurnāla ierakstu nosūtīšanu",
+  "Return to home screen": "Atgriezties sākuma ekrānā",
+  "Select an option": "Atlasīt iespēju",
+  "Send debug logs": "Nosūtīt atkļūdošanas žurnāla ierakstus",
+  "Sending debug logs…": "Nosūta atkļūdošanas žurnāla ierakstus…",
+  "Sending…": "Nosūta…",
+  "Settings": "Iestatījumi",
+  "Share screen": "Kopīgot ekrānu",
+  "Show call inspector": "Rādīt zvanu inspektoru",
+  "Show connection stats": "Rādīt savienojuma apkopojumu",
+  "Sign in": "Pieteikties",
+  "Sign out": "Atteikties",
+  "Speaker": "Runātājs",
+  "Spotlight": "Starmešu gaisma",
+  "Stop sharing screen": "Pārtraukt ekrāna kopīgošanu",
+  "Submit": "Iesniegt",
+  "Submit feedback": "Iesniegt atsauksmi",
+  "Submitting…": "Iesniedz…",
+  "Take me Home": "Aizvest uz sākumu",
+  "Thanks, we received your feedback!": "Paldies, mēs saņēmām atsauksmi!",
+  "Thanks!": "Paldies!",
+  "This call already exists, would you like to join?": "Šis zvans jau pastāv. Vai vēlies pievienoties?",
+  "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>End User Licensing Agreement (EULA)</12>": "Šo vietni aizsargā ReCAPTCHA, un ir attiecināmi Google <2>privātuma nosacījumi</2> un <6>pakalpojuma noteikumi</6>.<9></9>Klikšķināšana uz \"Reģistrēties\" sniedz piekrišanu mūsu <12>galalietotāja licencēšanas nolīgumam (GLLN)</12>",
+  "Turn off camera": "Izslēgt kameru",
+  "Turn on camera": "Ieslēgt kameru",
+  "Unmute microphone": "Atsaukt mikrofona apklusināšanu",
+  "User menu": "Lietotāja izvēlne",
+  "Username": "Lietotājvārds",
+  "Video": "Video",
+  "Video call": "Video zvans",
+  "Video call name": "Video zvana nosaukums",
+  "You were disconnected from the call": "Tu tiki atvienots no zvana",
+  "Version: {{version}}": "Versija: {{version}}",
+  "Walkie-talkie call name": "Rācijas zvana nosaukums",
+  "WebRTC is not supported or is being blocked in this browser.": "Šajā pārlūkā nav nodrošināts WebRTC vai tiek liegta tā izmantošana.",
+  "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below.": "Ja tiek piedzīvoti sarežģījumi vai vienkārši ir vēlme sniegt kādu atsauksmi, lūgums zemāk nosūtīt mums īsu aprakstu.",
+  "Not registered yet? <2>Create an account</2>": "Vēl neesi reģistrējies? <2>Izveidot kontu</2>",
+  "Other users are trying to join this call from incompatible versions. These users should ensure that they have refreshed their browsers:<1>{userLis}</1>": "Citi lietotāji mēģina pievienoties šim zvanam no nesaderīgām versijām. Šiem lietotājiem vajadzētu nodrošināt, ka viņi ir atsvaidzinājuši savus pārlūkus: <1>{userLis}</1>"
+}
--- a/public/locales/pl/app.json
+++ b/public/locales/pl/app.json
@@ -1,7 +1,6 @@
 {
  "Login": "Zaloguj się",
  "Go": "Przejdź",
-  "By clicking \"Go\", you agree to our <2>Terms and conditions</2>": "Klikając \"Kontynuuj\", wyrażasz zgodę na nasze <2>Zasady i warunki</2>",
  "Your recent calls": "Twoje ostatnie połączenia",
  "Yes, join call": "Tak, dołącz do połączenia",
  "WebRTC is not supported or is being blocked in this browser.": "WebRTC jest niewspierane lub zablokowane w tej przeglądarce.",
@@ -18,7 +17,6 @@
  "Turn on camera": "Włącz kamerę",
  "Turn off camera": "Wyłącz kamerę",
  "This call already exists, would you like to join?": "Te połączenie już istnieje, czy chcesz do niego dołączyć?",
-  "Thanks! We'll get right on it.": "Dziękujemy! Zaraz się tym zajmiemy.",
  "Take me Home": "Zabierz mnie do strony głównej",
  "Submit feedback": "Prześlij opinię",
  "Stop sharing screen": "Zatrzymaj udostępnianie ekranu",
@@ -84,7 +82,6 @@
  "Camera": "Kamera",
  "Call type menu": "Menu typu połączenia",
  "Call link copied": "Skopiowano link do połączenia",
-  "By clicking \"Join call now\", you agree to our <2>Terms and conditions</2>": "Klikając \"Dołącz do rozmowy\", wyrażasz zgodę na nasze <2>Zasady i warunki</2>",
  "Avatar": "Awatar",
  "Audio": "Dźwięk",
  "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Inny użytkownik w tym połączeniu napotkał problem. Aby lepiej zdiagnozować tę usterkę, chcielibyśmy zebrać dzienniki debugowania.",
@@ -99,7 +96,6 @@
  "Expose developer settings in the settings window.": "Wyświetl opcje programisty w oknie ustawień.",
  "Element Call Home": "Strona główna Element Call",
  "Developer Settings": "Opcje programisty",
-  "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>Terms and conditions</12>": "Ta strona jest chroniona przez ReCAPTCHA, więc obowiązują na niej <2>Polityka prywatności</2> i <6>Warunki świadczenia usług</6> Google.<9></9>Klikając \"Zarejestruj się\", zgadzasz się na nasze <12>Warunki świadczenia usług</12>",
  "<0></0><1></1>You may withdraw consent by unchecking this box. If you are currently in a call, this setting will take effect at the end of the call.": "<0></0><1></1>Możesz wycofać swoją zgodę poprzez odznaczenie tego pola. Jeśli już jesteś w trakcie rozmowy, opcja zostanie zastosowana po jej zakończeniu.",
  "By participating in this beta, you consent to the collection of anonymous data, which we use to improve the product. You can find more information about which data we track in our <2>Privacy Policy</2> and our <5>Cookie Policy</5>.": "Uczestnicząc w tej becie, upoważniasz nas do zbierania anonimowych danych, które wykorzystamy do ulepszenia produktu. Dowiedz się więcej na temat danych, które zbieramy w naszej <2>Polityce prywatności</2> i <5>Polityce ciasteczek</5>.",
  "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below.": "Jeśli posiadasz problemy lub chciałbyś zgłosić swoją opinię, wyślij nam krótki opis.",
@@ -113,5 +109,19 @@
  "{{displayName}}, your call has ended.": "{{displayName}}, Twoje połączenie zostało zakończone.",
  "<0>Thanks for your feedback!</0>": "<0>Dziękujemy za Twoją opinię!</0>",
  "<0>We'd love to hear your feedback so we can improve your experience.</0>": "<0>Z przyjemnością wysłuchamy Twojej opinii, aby poprawić Twoje doświadczenia.</0>",
-  "How did it go?": "Jak poszło?"
+  "How did it go?": "Jak poszło?",
+  "{{displayName}} is presenting": "{{displayName}} prezentuje",
+  "Show connection stats": "Pokaż statystyki połączenia",
+  "Element Call is temporarily not end-to-end encrypted while we test scalability.": "Usługa Element Call tymczasowo nie jest szyfrowana end-to-end w trakcie, gdy testujemy możliwość jej rozszerzenia.",
+  "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Klikając \"Przejdź\", zgadzasz się na naszą <2>Umowę licencyjną (EULA)</2>",
+  "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>End User Licensing Agreement (EULA)</12>": "Ta witryna jest chroniona przez ReCAPTCHA, więc obowiązują <2>Polityka prywatności</2> i <6>Warunki usług</6> Google. Klikając \"Zarejestruj\", zgadzasz się na naszą <12>Umowę licencyjną (EULA)</12>",
+  "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Klikając \"Dołącz teraz do rozmowy\", zgadzasz się na naszą <2>Umowę licencyjną (EULA)</2>",
+  "End-to-end encryption isn't supported on your browser.": "Szyfrowanie end-to-end nie jest wspierane przez Twoją przeglądarkę.",
+  "Password (if none, E2EE is disabled)": "Hasło (brak oznacza, że E2EE jest włączone)",
+  "Retry sending logs": "Wyślij logi ponownie",
+  "Thanks!": "Dziękujemy!",
+  "You were disconnected from the call": "Rozłączono Cię z połączenia",
+  "Connectivity to the server has been lost.": "Utracono połączenie z serwerem.",
+  "Reconnect": "Połącz ponownie",
+  "Enable end-to-end encryption (password protected calls)": "Włącz szyfrowanie end-to-end (połączenia chronione hasłem)"
 }
--- a/public/locales/ru/app.json
+++ b/public/locales/ru/app.json
@@ -4,16 +4,12 @@
  "Logging in…": "Вход…",
  "{{names}}, {{name}}": "{{names}}, {{name}}",
  "Waiting for other participants…": "Ожидание других участников…",
-  "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>Terms and conditions</12>": "Этот сайт защищён ReCAPTCHA от Google, ознакомьтесь с их <2>Политикой конфиденциальности</2> и <6>Пользовательским соглашением</6>.<9></9>Нажимая \"Зарегистрироваться\", вы также принимаете наши <12>Положения и условия</12>.",
  "This call already exists, would you like to join?": "Этот звонок уже существует, хотите присоединиться?",
-  "Thanks! We'll get right on it.": "Спасибо! Мы учтём ваш отзыв.",
  "Submit feedback": "Отправить отзыв",
  "Sending debug logs…": "Отправка журнала отладки…",
  "Select an option": "Выберите вариант",
  "Other users are trying to join this call from incompatible versions. These users should ensure that they have refreshed their browsers:<1>{userLis}</1>": "Другие пользователи пытаются присоединиться с неподдерживаемых версий программы. Этим участникам надо перезагрузить браузер: <1>{userLis}</1>",
  "Grid layout menu": "Меню \"Расположение сеткой\"",
-  "By clicking \"Join call now\", you agree to our <2>Terms and conditions</2>": "Нажимая \"Присоединиться сейчас\", вы соглашаетесь с нашими <2>положениями и условиями</2>",
-  "By clicking \"Go\", you agree to our <2>Terms and conditions</2>": "Нажимая \"Далее\", вы соглашаетесь с нашими <2>положениями и условиями</2>",
  "<0>Why not finish by setting up a password to keep your account?</0><1>You'll be able to keep your name and set an avatar for use on future calls</1>": "<0>Почему бы не задать пароль, тем самым сохранив аккаунт?</0><1>Так вы можете оставить своё имя и задать аватар для будущих звонков.</1>",
  "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Создать аккаунт</0> или <2>Зайти как гость</2>",
  "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>Уже есть аккаунт?</0><1><0>Войти с ним</0> или <2>Зайти как гость</2></1>",
--- a/public/locales/sk/app.json
+++ b/public/locales/sk/app.json
@@ -5,7 +5,6 @@
  "Fetching group call timed out.": "Vypršal čas načítania skupinového volania.",
  "Element Call Home": "Domov Element Call",
  "Waiting for other participants…": "Čaká sa na ďalších účastníkov…",
-  "Thanks! We'll get right on it.": "Vďaka! Hneď sa do toho pustíme.",
  "Take me Home": "Zober ma domov",
  "Submit feedback": "Odoslať spätnú väzbu",
  "Stop sharing screen": "Zastaviť zdieľanie obrazovky",
@@ -65,7 +64,6 @@
  "Unmute microphone": "Zrušiť stlmenie mikrofónu",
  "Turn on camera": "Zapnúť kameru",
  "Turn off camera": "Vypnúť kameru",
-  "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>Terms and conditions</12>": "Táto stránka je chránená systémom ReCAPTCHA a platia na ňu <2>Pravidlá ochrany osobných údajov</2> a <6>Podmienky poskytovania služieb</6> spoločnosti Google.<9></9>Kliknutím na tlačidlo \"Registrovať sa\" vyjadrujete súhlas s našimi <12>Podmienkami poskytovania služieb</12>",
  "This call already exists, would you like to join?": "Tento hovor už existuje, chceli by ste sa k nemu pripojiť?",
  "Speaker": "Reproduktor",
  "Sign out": "Odhlásiť sa",
@@ -86,8 +84,6 @@
  "Camera": "Kamera",
  "Call type menu": "Ponuka typu hovoru",
  "Call link copied": "Odkaz na hovor skopírovaný",
-  "By clicking \"Join call now\", you agree to our <2>Terms and conditions</2>": "Kliknutím na \"Pripojiť sa k hovoru\" súhlasíte s našimi <2>Podmienkami</2>",
-  "By clicking \"Go\", you agree to our <2>Terms and conditions</2>": "Kliknutím na tlačidlo \"Prejsť\" súhlasíte s našimi <2>Podmienkami</2>",
  "Avatar": "Obrázok",
  "Audio": "Audio",
  "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Ďalší používateľ v tomto hovore má problém. Aby sme mohli lepšie diagnostikovať tieto problémy, chceli by sme získať záznam o ladení.",
@@ -115,5 +111,17 @@
  "<0>Thanks for your feedback!</0>": "<0> Ďakujeme za vašu spätnú väzbu!</0>",
  "<0>We'd love to hear your feedback so we can improve your experience.</0>": "<0> Radi si vypočujeme vašu spätnú väzbu, aby sme mohli zlepšiť vaše skúsenosti.</0>",
  "{{displayName}} is presenting": "{{displayName}} prezentuje",
-  "Show connection stats": "Zobraziť štatistiky pripojenia"
+  "Show connection stats": "Zobraziť štatistiky pripojenia",
+  "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Kliknutím na \"Pripojiť sa k hovoru teraz\" súhlasíte s našou <2>Licenčnou zmluvou s koncovým používateľom (EULA)</2>",
+  "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Kliknutím na tlačidlo \"Prejsť\" vyjadrujete súhlas s našou <2>Licenčnou zmluvou s koncovým používateľom (EULA)</2>",
+  "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>End User Licensing Agreement (EULA)</12>": "Táto stránka je chránená systémom ReCAPTCHA a platia na ňu <2>Pravidlá ochrany osobných údajov spoločnosti Google</2> a <6>Podmienky poskytovania služieb</6>.<9></9>Kliknutím na tlačidlo \"Registrovať sa\" súhlasíte s našou <12>Licenčnou zmluvou s koncovým používateľom (EULA)</12>",
+  "Element Call is temporarily not end-to-end encrypted while we test scalability.": "Element Call nie je dočasne šifrovaný, kým testujeme škálovateľnosť.",
+  "Connectivity to the server has been lost.": "Spojenie so serverom sa stratilo.",
+  "Retry sending logs": "Opakovať odoslanie záznamov",
+  "Reconnect": "Znovu pripojiť",
+  "Thanks!": "Ďakujeme!",
+  "You were disconnected from the call": "Boli ste odpojení z hovoru",
+  "Enable end-to-end encryption (password protected calls)": "Povoliť end-to-end šifrovanie (hovory chránené heslom)",
+  "End-to-end encryption isn't supported on your browser.": "End-to-end šifrovanie nie je vo vašom prehliadači podporované.",
+  "Password (if none, E2EE is disabled)": "Heslo (ak nie je, šifrovanie je vypnuté)"
 }
--- a/public/locales/tr/app.json
+++ b/public/locales/tr/app.json
@@ -3,8 +3,6 @@
  "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Bu aramadaki başka bir kullanıcı sorun yaşıyor. Sorunu daha iyi çözebilmemiz için hata ayıklama kütüğünü almak isteriz.",
  "Audio": "Ses",
  "Avatar": "Avatar",
-  "By clicking \"Go\", you agree to our <2>Terms and conditions</2>": "\"Git\"e tıklayarak,<2>hükümler ve koşullar</2>ı kabul etmiş sayılırsınız",
-  "By clicking \"Join call now\", you agree to our <2>Terms and conditions</2>": "\"Şimdi katıl\"a tıklayarak, <2>hükümler ve koşullar</2>ı kabul etmiş sayılırsınız",
  "Call link copied": "Arama bağlantısı kopyalandı",
  "Call type menu": "Arama tipi menüsü",
  "Camera": "Kamera",
@@ -67,7 +65,6 @@
  "Stop sharing screen": "Ekran paylaşmayı terk et",
  "Submit feedback": "Geri bildirim ver",
  "Take me Home": "Ev ekranına gir",
-  "Thanks! We'll get right on it.": "Sağol! Bununla ilgileneceğiz.",
  "This call already exists, would you like to join?": "Bu arama zaten var, katılmak ister misiniz?",
  "{{names}}, {{name}}": "{{names}}, {{name}}",
  "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Hesap oluştur</0> yahut <2>Konuk olarak gir</2>",
--- a/public/locales/uk/app.json
+++ b/public/locales/uk/app.json
@@ -15,9 +15,7 @@
  "Unmute microphone": "Увімкнути мікрофон",
  "Turn on camera": "Увімкнути камеру",
  "Turn off camera": "Вимкнути камеру",
-  "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>Terms and conditions</12>": "Цей сайт захищений ReCAPTCHA і до нього застосовується <2>Політика приватності</2> і <6>Умови надання послуг</6> Google.<9></9>Натискаючи кнопку «Зареєструватися», ви погоджуєтеся з нашими <12>Умовами та положеннями</12>",
  "This call already exists, would you like to join?": "Цей виклик уже існує, бажаєте приєднатися?",
-  "Thanks! We'll get right on it.": "Дякуємо! Ми зараз же візьмемося за це.",
  "Take me Home": "Перейти до Домівки",
  "Submit feedback": "Надіслати відгук",
  "Stop sharing screen": "Припинити показ екрана",
@@ -70,7 +68,7 @@
  "Fetching group call timed out.": "Вичерпано час очікування групового виклику.",
  "Exit full screen": "Вийти з повноекранного режиму",
  "Download debug logs": "Завантажити журнали налагодження",
-  "Display name": "Показуване ім'я",
+  "Display name": "Псевдонім",
  "Developer": "Розробнику",
  "Details": "Подробиці",
  "Debug log request": "Запит журналу налагодження",
@@ -84,8 +82,6 @@
  "Camera": "Камера",
  "Call type menu": "Меню типу виклику",
  "Call link copied": "Посилання на виклик скопійовано",
-  "By clicking \"Join call now\", you agree to our <2>Terms and conditions</2>": "Натиснувши «Приєднатися до виклику зараз», ви погодитеся з нашими <2>Умовами та положеннями</2>",
-  "By clicking \"Go\", you agree to our <2>Terms and conditions</2>": "Натиснувши «Далі», ви погодитеся з нашими <2>Умовами та положеннями</2>",
  "Avatar": "Аватар",
  "Audio": "Звук",
  "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Інший користувач у цьому виклику має проблему. Щоб краще визначити ці проблеми, ми хотіли б зібрати журнал налагодження.",
@@ -115,5 +111,17 @@
  "<0>We'd love to hear your feedback so we can improve your experience.</0>": "<0>Ми будемо раді почути ваші відгуки, щоб поліпшити роботу застосунку.</0>",
  "How did it go?": "Вам усе сподобалось?",
  "{{displayName}} is presenting": "{{displayName}} представляє",
-  "Show connection stats": "Показати стан з'єднання"
+  "Show connection stats": "Показати стан з'єднання",
+  "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Натискаючи \"Далі\", ви погоджуєтеся з нашою <2>Ліцензійною угодою з кінцевим користувачем (EULA)</2>",
+  "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Натискаючи \"Приєднатися до виклику зараз\", ви погоджуєтеся з нашою <2>Ліцензійною угодою з кінцевим користувачем (EULA)</2>",
+  "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>End User Licensing Agreement (EULA)</12>": "Цей сайт захищений ReCAPTCHA і до нього застосовується <2>Політика приватності</2> і <6>Умови надання послуг</6> Google.<9></9>Натискаючи \"Зареєструватися\", ви погоджуєтеся з нашою <12>Ліцензійною угодою з кінцевим користувачем (EULA)</12>",
+  "Element Call is temporarily not end-to-end encrypted while we test scalability.": "Виклики Element тимчасово не захищаються наскрізним шифруванням, поки ми тестуємо масштабованість.",
+  "Connectivity to the server has been lost.": "Втрачено зв'язок з сервером.",
+  "Reconnect": "Під'єднати повторно",
+  "Retry sending logs": "Повторити надсилання журналів",
+  "You were disconnected from the call": "Вас від'єднано від виклику",
+  "Thanks!": "Дякуємо!",
+  "Enable end-to-end encryption (password protected calls)": "Увімкнути наскрізне шифрування (захищені паролем виклики)",
+  "End-to-end encryption isn't supported on your browser.": "Наскрізне шифрування не підтримується вашим переглядачем.",
+  "Password (if none, E2EE is disabled)": "Пароль (якщо немає, наскрізне шифрування вимкнено)"
 }
--- a/public/locales/vi/app.json
+++ b/public/locales/vi/app.json
@@ -76,7 +76,6 @@
  "This call already exists, would you like to join?": "Cuộc gọi đã tồn tại, bạn có muốn tham gia không?",
  "Recaptcha not loaded": "Chưa tải được Recaptcha",
  "Debug log request": "Yêu cầu nhật ký gỡ lỗi",
-  "By clicking \"Join call now\", you agree to our <2>Terms and conditions</2>": "Khi nhấn vào \"Tham gia cuộc gọi\", bạn đồng ý với <2>Điều khoản và điều kiện</2> của chúng tôi",
  "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Một người dùng khác trong cuộc gọi đang gặp vấn đề. Để có thể chẩn đoán tốt hơn chúng tôi muốn thu thập nhật ký gỡ lỗi.",
  "<0>Why not finish by setting up a password to keep your account?</0><1>You'll be able to keep your name and set an avatar for use on future calls</1>": "<0>Tại sao lại không hoàn thiện bằng cách đặt mật khẩu để giữ tài khoản của bạn?</0><1>Bạn sẽ có thể giữ tên và đặt ảnh đại diện cho những cuộc gọi tiếp theo.</1>",
  "<0>Oops, something's gone wrong.</0>": "<0>Ối, có cái gì đó sai.</0>",
--- a/public/locales/zh-Hans/app.json
+++ b/public/locales/zh-Hans/app.json
@@ -14,9 +14,7 @@
  "Unmute microphone": "取消麦克风静音",
  "Turn on camera": "开启摄像头",
  "Turn off camera": "关闭摄像头",
-  "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>Terms and conditions</12>": "本网站受reCaptcha保护，并适用Google<2>隐私政策</2>和<6>服务条款</6>。<9></9>点击\"注册\"则表明您同意我们的<12>条款和条件</12>",
  "This call already exists, would you like to join?": "该通话已存在，你想加入吗？",
-  "Thanks! We'll get right on it.": "谢谢！我们会马上去做的。",
  "Take me Home": "返回主页",
  "Submit feedback": "提交反馈",
  "Stop sharing screen": "停止屏幕共享",
@@ -89,12 +87,10 @@
  "Copied!": "已复制！",
  "Confirm password": "确认密码",
  "Close": "关闭",
-  "By clicking \"Go\", you agree to our <2>Terms and conditions</2>": "点击开始则代表同意我们的<2>条款和条件<2>",
  "Change layout": "更改布局",
  "Camera": "摄像头",
  "Call type menu": "通话类型菜单",
  "Call link copied": "链接已复制",
-  "By clicking \"Join call now\", you agree to our <2>Terms and conditions</2>": "点击“现在加入”则表示同意我们的<2>条款与条件<2>",
  "Avatar": "头像",
  "<0>Oops, something's gone wrong.</0>": "<0>哎哟，出问题了。</0>",
  "<0></0><1></1>You may withdraw consent by unchecking this box. If you are currently in a call, this setting will take effect at the end of the call.": ""
--- a/public/locales/zh-Hant/app.json
+++ b/public/locales/zh-Hant/app.json
@@ -22,9 +22,7 @@
  "Unmute microphone": "取消麥克風靜音",
  "Turn on camera": "開啟相機",
  "Turn off camera": "關閉相機",
-  "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>Terms and conditions</12>": "此網站使用Google 驗證碼技術保護，適用<2>隱私條款</2> 與<6>條款與細則</6> 。<9></9>按下「註冊」，表示您同意我們的<12>條款與細則</12>",
  "This call already exists, would you like to join?": "通話已經開始，請問您要加入嗎？",
-  "Thanks! We'll get right on it.": "謝謝您！我們會盡快處理。",
  "Take me Home": "帶我回主畫面",
  "Submit feedback": "遞交回覆",
  "Stop sharing screen": "停止分享螢幕畫面",
@@ -94,8 +92,6 @@
  "Camera": "相機",
  "Call type menu": "通話類型選單",
  "Call link copied": "已複製通話連結",
-  "By clicking \"Join call now\", you agree to our <2>Terms and conditions</2>": "當您按下「加入通話」，您也同時同意了我們的條款與細則",
-  "By clicking \"Go\", you agree to our <2>Terms and conditions</2>": "當您按下「前往」，你也同意了我們的條款與細則",
  "Avatar": "大頭照",
  "Audio": "語音",
  "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "這通對話中的另一位使用者遇到了某些問題。為了診斷問題，我們將會建立除錯紀錄。",
@@ -115,5 +111,17 @@
  "{{displayName}}, your call has ended.": "{{displayName}}，您的通話已結束。",
  "How did it go?": "進展如何？",
  "{{displayName}} is presenting": "{{displayName}} 正在展示",
-  "Show connection stats": "顯示連線統計資料"
+  "Show connection stats": "顯示連線統計資料",
+  "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "點擊「前往」即表示您同意我們的<2>終端使用者授權協議 (EULA)</2>",
+  "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "點擊「立刻加入通話」即表示您同意我們的<2>終端使用者授權協議 (EULA)</2>",
+  "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>End User Licensing Agreement (EULA)</12>": "此網站被 ReCAPTCHA 保護，並適用 Google 的<2>隱私權政策</2>與<6>服務條款</6>。<9></9>點擊「註冊」即表示您同意我們的<12>終端使用者授權協議 (EULA)</12>",
+  "Element Call is temporarily not end-to-end encrypted while we test scalability.": "在我們測試可擴展性時，Element Call 暫時未進行端到端加密。",
+  "Connectivity to the server has been lost.": "到伺服器的連線已遺失。",
+  "Reconnect": "重新連線",
+  "Retry sending logs": "重試傳送紀錄檔",
+  "Thanks!": "感謝！",
+  "You were disconnected from the call": "您已從通話斷線",
+  "Enable end-to-end encryption (password protected calls)": "啟用端到端加密（密碼保護通話）",
+  "End-to-end encryption isn't supported on your browser.": "您的瀏覽器不支援端到端加密。",
+  "Password (if none, E2EE is disabled)": "密碼（若無，就會停用端到端加密）"
 }
--- a/renovate.json
+++ b/renovate.json
@@ -0,0 +1,11 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": ["config:base"],
+  "packageRules": [
+    {
+      "description": "Disable renoavte for packages we want to monitor ourselves",
+      "matchPackagePatterns": ["matrix-js-sdk"],
+      "enabled": false
+    }
+  ]
+}
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -18,18 +18,20 @@ import { Suspense, useEffect, useState } from "react";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 import * as Sentry from "@sentry/react";
 import { OverlayProvider } from "@react-aria/overlays";
+import { History } from "history";

 import { HomePage } from "./home/HomePage";
 import { LoginPage } from "./auth/LoginPage";
 import { RegisterPage } from "./auth/RegisterPage";
 import { RoomPage } from "./room/RoomPage";
-import { RoomRedirect } from "./room/RoomRedirect";
 import { ClientProvider } from "./ClientContext";
 import { usePageFocusStyle } from "./usePageFocusStyle";
 import { SequenceDiagramViewerPage } from "./SequenceDiagramViewerPage";
 import { InspectorContextProvider } from "./room/GroupCallInspector";
 import { CrashView, LoadingView } from "./FullScreenView";
+import { DisconnectedBanner } from "./DisconnectedBanner";
 import { Initializer } from "./initializer";
+import { MediaDevicesProvider } from "./livekit/MediaDevicesContext";

 const SentryRoute = Sentry.withSentryRouting(Route);

@@ -51,36 +53,38 @@ export default function App({ history }: AppProps) {
  const errorPage = <CrashView />;

  return (
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
    <Router history={history}>
      {loaded ? (
        <Suspense fallback={null}>
          <ClientProvider>
-            <InspectorContextProvider>
-              <Sentry.ErrorBoundary fallback={errorPage}>
-                <OverlayProvider>
-                  <Switch>
-                    <SentryRoute exact path="/">
-                      <HomePage />
-                    </SentryRoute>
-                    <SentryRoute exact path="/login">
-                      <LoginPage />
-                    </SentryRoute>
-                    <SentryRoute exact path="/register">
-                      <RegisterPage />
-                    </SentryRoute>
-                    <SentryRoute path="/room/:roomId?">
-                      <RoomPage />
-                    </SentryRoute>
-                    <SentryRoute path="/inspector">
-                      <SequenceDiagramViewerPage />
-                    </SentryRoute>
-                    <SentryRoute path="*">
-                      <RoomRedirect />
-                    </SentryRoute>
-                  </Switch>
-                </OverlayProvider>
-              </Sentry.ErrorBoundary>
-            </InspectorContextProvider>
+            <MediaDevicesProvider>
+              <InspectorContextProvider>
+                <Sentry.ErrorBoundary fallback={errorPage}>
+                  <OverlayProvider>
+                    <DisconnectedBanner />
+                    <Switch>
+                      <SentryRoute exact path="/">
+                        <HomePage />
+                      </SentryRoute>
+                      <SentryRoute exact path="/login">
+                        <LoginPage />
+                      </SentryRoute>
+                      <SentryRoute exact path="/register">
+                        <RegisterPage />
+                      </SentryRoute>
+                      <SentryRoute path="/inspector">
+                        <SequenceDiagramViewerPage />
+                      </SentryRoute>
+                      <SentryRoute path="*">
+                        <RoomPage />
+                      </SentryRoute>
+                    </Switch>
+                  </OverlayProvider>
+                </Sentry.ErrorBoundary>
+              </InspectorContextProvider>
+            </MediaDevicesProvider>
          </ClientProvider>
        </Suspense>
      ) : (
--- a/src/Avatar.module.css
+++ b/src/Avatar.module.css
@@ -1,76 +0,0 @@
-/*
-Copyright 2022 New Vector Ltd
-
-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.
-*/
-
-.avatar {
-  position: relative;
-  color: var(--primary-content);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  pointer-events: none;
-  font-weight: 600;
-  overflow: hidden;
-  flex-shrink: 0;
-}
-
-.avatar img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.avatar svg * {
-  fill: var(--primary-content);
-}
-
-.avatar span {
-  padding-top: 1px;
-}
-
-.xs {
-  width: 22px;
-  height: 22px;
-  border-radius: 22px;
-  font-size: 14px;
-}
-
-.sm {
-  width: 32px;
-  height: 32px;
-  border-radius: 32px;
-  font-size: 15px;
-}
-
-.md {
-  width: 36px;
-  height: 36px;
-  border-radius: 36px;
-  font-size: 20px;
-}
-
-.lg {
-  width: 42px;
-  height: 42px;
-  border-radius: 42px;
-  font-size: 24px;
-}
-
-.xl {
-  width: 90px;
-  height: 90px;
-  border-radius: 90px;
-  font-size: 48px;
-}
--- a/src/Avatar.tsx
+++ b/src/Avatar.tsx
@@ -14,24 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import { useMemo, CSSProperties, HTMLAttributes, FC } from "react";
-import classNames from "classnames";
-import { MatrixClient } from "matrix-js-sdk/src/client";
+import { useMemo, FC } from "react";
+import { Avatar as CompoundAvatar } from "@vector-im/compound-web";

 import { getAvatarUrl } from "./matrix-utils";
 import { useClient } from "./ClientContext";
-import styles from "./Avatar.module.css";
-
-const backgroundColors = [
-  "#5C56F5",
-  "#03B381",
-  "#368BD6",
-  "#AC3BA8",
-  "#E64F7A",
-  "#FF812D",
-  "#2DC2C5",
-  "#74D12C",
-];

 export enum Size {
  XS = "xs",
@@ -49,83 +36,43 @@ export const sizes = new Map([
  [Size.XL, 90],
 ]);

-function hashStringToArrIndex(str: string, arrLength: number) {
-  let sum = 0;
-
-  for (let i = 0; i < str.length; i++) {
-    sum += str.charCodeAt(i);
-  }
-
-  return sum % arrLength;
-}
-
-const resolveAvatarSrc = (client: MatrixClient, src: string, size: number) =>
-  src?.startsWith("mxc://") ? client && getAvatarUrl(client, src, size) : src;
-
-interface Props extends HTMLAttributes<HTMLDivElement> {
-  bgKey?: string;
+interface Props {
+  id: string;
+  name: string;
+  className?: string;
  src?: string;
  size?: Size | number;
-  className?: string;
-  style?: CSSProperties;
-  fallback: string;
 }

 export const Avatar: FC<Props> = ({
-  bgKey,
-  src,
-  fallback,
-  size = Size.MD,
  className,
-  style = {},
-  ...rest
+  id,
+  name,
+  src,
+  size = Size.MD,
 }) => {
  const { client } = useClient();

-  const [sizeClass, sizePx, sizeStyle] = useMemo(
+  const sizePx = useMemo(
    () =>
      Object.values(Size).includes(size as Size)
-        ? [styles[size as string], sizes.get(size as Size), {}]
-        : [
-            null,
-            size as number,
-            {
-              width: size,
-              height: size,
-              borderRadius: size,
-              fontSize: Math.round((size as number) / 2),
-            },
-          ],
+        ? sizes.get(size as Size)
+        : (size as number),
    [size]
  );

-  const resolvedSrc = useMemo(
-    () => resolveAvatarSrc(client, src, sizePx),
-    [client, src, sizePx]
-  );
+  const resolvedSrc = useMemo(() => {
+    if (!client || !src || !sizePx) return undefined;
+    return src.startsWith("mxc://") ? getAvatarUrl(client, src, sizePx) : src;
+  }, [client, src, sizePx]);

-  const backgroundColor = useMemo(() => {
-    const index = hashStringToArrIndex(
-      bgKey || fallback || src || "",
-      backgroundColors.length
-    );
-    return backgroundColors[index];
-  }, [bgKey, src, fallback]);
-
-  /* eslint-disable jsx-a11y/alt-text */
  return (
-    <div
-      className={classNames(styles.avatar, sizeClass, className)}
-      style={{ backgroundColor, ...sizeStyle, ...style }}
-      {...rest}
-    >
-      {resolvedSrc ? (
-        <img src={resolvedSrc} />
-      ) : typeof fallback === "string" ? (
-        <span>{fallback}</span>
-      ) : (
-        fallback
-      )}
-    </div>
+    <CompoundAvatar
+      className={className}
+      id={id}
+      name={name}
+      size={`${sizePx}px`}
+      src={resolvedSrc}
+    />
  );
 };
--- a/src/Banner.module.css
+++ b/src/Banner.module.css
@@ -0,0 +1,22 @@
+/*
+Copyright 2023 New Vector Ltd
+
+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.
+*/
+
+.banner {
+  flex: 1;
+  border-radius: 8px;
+  padding: 16px;
+  background-color: var(--cpd-color-bg-subtle-primary);
+}
--- a/src/Banner.tsx
+++ b/src/Banner.tsx
@@ -0,0 +1,27 @@
+/*
+Copyright 2023 New Vector Ltd
+
+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.
+*/
+
+import { ReactNode } from "react";
+
+import styles from "./Banner.module.css";
+
+interface Props {
+  children: ReactNode;
+}
+
+export const Banner = ({ children }: Props) => {
+  return <div className={styles.banner}>{children}</div>;
+};
--- a/src/ClientContext.tsx
+++ b/src/ClientContext.tsx
@@ -20,20 +20,21 @@ import {
  useEffect,
  useState,
  createContext,
-  useMemo,
  useContext,
  useRef,
+  useMemo,
 } from "react";
 import { useHistory } from "react-router-dom";
-import { MatrixClient } from "matrix-js-sdk/src/client";
+import { ClientEvent, MatrixClient } from "matrix-js-sdk/src/client";
 import { logger } from "matrix-js-sdk/src/logger";
 import { useTranslation } from "react-i18next";
+import { ISyncStateData, SyncState } from "matrix-js-sdk/src/sync";

 import { ErrorView } from "./FullScreenView";
 import {
-  initClient,
  CryptoStoreIntegrityError,
  fallbackICEServerAllowed,
+  initClient,
 } from "./matrix-utils";
 import { widget } from "./widget";
 import {
@@ -47,173 +48,138 @@ import { Config } from "./config/Config";
 declare global {
  interface Window {
    matrixclient: MatrixClient;
-    isPasswordlessUser: boolean;
+    passwordlessUser: boolean;
  }
 }

-export interface Session {
-  user_id: string;
-  device_id: string;
-  access_token: string;
+export type ClientState = ValidClientState | ErrorState;
+
+export type ValidClientState = {
+  state: "valid";
+  authenticated?: AuthenticatedClient;
+  // 'Disconnected' rather than 'connected' because it tracks specifically
+  // whether the client is supposed to be connected but is not
+  disconnected: boolean;
+  setClient: (params?: SetClientParams) => void;
+};
+
+export type AuthenticatedClient = {
+  client: MatrixClient;
+  isPasswordlessUser: boolean;
+  changePassword: (password: string) => Promise<void>;
+  logout: () => void;
+};
+
+export type ErrorState = {
+  state: "error";
+  error: Error;
+};
+
+export type SetClientParams = {
+  client: MatrixClient;
+  session: Session;
+};
+
+const ClientContext = createContext<ClientState | undefined>(undefined);
+
+export const useClientState = () => useContext(ClientContext);
+
+export function useClient(): {
+  client?: MatrixClient;
+  setClient?: (params?: SetClientParams) => void;
+} {
+  let client;
+  let setClient;
+
+  const clientState = useClientState();
+  if (clientState?.state === "valid") {
+    client = clientState.authenticated?.client;
+    setClient = clientState.setClient;
+  }
+
+  return { client, setClient };
+}
+
+// Plain representation of the `ClientContext` as a helper for old components that expected an object with multiple fields.
+export function useClientLegacy(): {
+  client?: MatrixClient;
+  setClient?: (params?: SetClientParams) => void;
  passwordlessUser: boolean;
-  tempPassword?: string;
+  loading: boolean;
+  authenticated: boolean;
+  logout?: () => void;
+  error?: Error;
+} {
+  const clientState = useClientState();
+
+  let client;
+  let setClient;
+  let passwordlessUser = false;
+  let loading = true;
+  let error;
+  let authenticated = false;
+  let logout;
+
+  if (clientState?.state === "valid") {
+    client = clientState.authenticated?.client;
+    setClient = clientState.setClient;
+    passwordlessUser = clientState.authenticated?.isPasswordlessUser ?? false;
+    loading = false;
+    authenticated = client !== undefined;
+    logout = clientState.authenticated?.logout;
+  } else if (clientState?.state === "error") {
+    error = clientState.error;
+    loading = false;
+  }
+
+  return {
+    client,
+    setClient,
+    passwordlessUser,
+    loading,
+    authenticated,
+    logout,
+    error,
+  };
 }

 const loadChannel =
  "BroadcastChannel" in window ? new BroadcastChannel("load") : null;

-const loadSession = (): Session => {
-  const data = localStorage.getItem("matrix-auth-store");
-  if (data) return JSON.parse(data);
-  return null;
-};
-const saveSession = (session: Session) =>
-  localStorage.setItem("matrix-auth-store", JSON.stringify(session));
-const clearSession = () => localStorage.removeItem("matrix-auth-store");
-
-interface ClientState {
-  loading: boolean;
-  isAuthenticated: boolean;
-  isPasswordlessUser: boolean;
-  client: MatrixClient;
-  userName: string;
-  changePassword: (password: string) => Promise<void>;
-  logout: () => void;
-  setClient: (client: MatrixClient, session: Session) => void;
-  error?: Error;
-}
-
-const ClientContext = createContext<ClientState>(null);
-
-type ClientProviderState = Omit<
-  ClientState,
-  "changePassword" | "logout" | "setClient"
-> & { error?: Error };
-
 interface Props {
  children: JSX.Element;
 }

 export const ClientProvider: FC<Props> = ({ children }) => {
  const history = useHistory();
-  const initializing = useRef(false);
-  const [
-    { loading, isAuthenticated, isPasswordlessUser, client, userName, error },
-    setState,
-  ] = useState<ClientProviderState>({
-    loading: true,
-    isAuthenticated: false,
-    isPasswordlessUser: false,
-    client: undefined,
-    userName: null,
-    error: undefined,
-  });

+  // null = signed out, undefined = loading
+  const [initClientState, setInitClientState] = useState<
+    InitResult | null | undefined
+  >(undefined);
+
+  const initializing = useRef(false);
  useEffect(() => {
    // In case the component is mounted, unmounted, and remounted quickly (as
    // React does in strict mode), we need to make sure not to doubly initialize
-    // the client
+    // the client.
    if (initializing.current) return;
    initializing.current = true;

-    const init = async (): Promise<
-      Pick<ClientProviderState, "client" | "isPasswordlessUser">
-    > => {
-      if (widget) {
-        // We're inside a widget, so let's engage *matryoshka mode*
-        logger.log("Using a matryoshka client");
-        return {
-          client: await widget.client,
-          isPasswordlessUser: false,
-        };
-      } else {
-        // We're running as a standalone application
-        try {
-          const session = loadSession();
-          if (!session) return { client: undefined, isPasswordlessUser: false };
-
-          logger.log("Using a standalone client");
-
-          /* eslint-disable camelcase */
-          const { user_id, device_id, access_token, passwordlessUser } =
-            session;
-
-          try {
-            return {
-              client: await initClient(
-                {
-                  baseUrl: Config.defaultHomeserverUrl(),
-                  accessToken: access_token,
-                  userId: user_id,
-                  deviceId: device_id,
-                  fallbackICEServerAllowed: fallbackICEServerAllowed,
-                },
-                true
-              ),
-              isPasswordlessUser: passwordlessUser,
-            };
-          } catch (err) {
-            if (err instanceof CryptoStoreIntegrityError) {
-              // We can't use this session anymore, so let's log it out
-              try {
-                const client = await initClient(
-                  {
-                    baseUrl: Config.defaultHomeserverUrl(),
-                    accessToken: access_token,
-                    userId: user_id,
-                    deviceId: device_id,
-                    fallbackICEServerAllowed: fallbackICEServerAllowed,
-                  },
-                  false // Don't need the crypto store just to log out
-                );
-                await client.logout(true);
-              } catch (err_) {
-                logger.warn(
-                  "The previous session was lost, and we couldn't log it out, " +
-                    "either"
-                );
-              }
-            }
-            throw err;
-          }
-          /* eslint-enable camelcase */
-        } catch (err) {
-          clearSession();
-          throw err;
-        }
-      }
-    };
-
-    init()
-      .then(({ client, isPasswordlessUser }) => {
-        setState({
-          client,
-          loading: false,
-          isAuthenticated: Boolean(client),
-          isPasswordlessUser,
-          userName: client?.getUserIdLocalpart(),
-          error: undefined,
-        });
-      })
-      .catch((err) => {
-        logger.error(err);
-        setState({
-          client: undefined,
-          loading: false,
-          isAuthenticated: false,
-          isPasswordlessUser: false,
-          userName: null,
-          error: undefined,
-        });
-      })
+    loadClient()
+      .then(setInitClientState)
+      .catch((err) => logger.error(err))
      .finally(() => (initializing.current = false));
  }, []);

  const changePassword = useCallback(
    async (password: string) => {
-      const { tempPassword, ...session } = loadSession();
+      const session = loadSession();
+      if (!initClientState?.client || !session) {
+        return;
+      }

-      await client.setPassword(
+      await initClientState.client.setPassword(
        {
          type: "m.login.password",
          identifier: {
@@ -221,73 +187,56 @@ export const ClientProvider: FC<Props> = ({ children }) => {
            user: session.user_id,
          },
          user: session.user_id,
-          password: tempPassword,
+          password: session.tempPassword,
        },
        password
      );

      saveSession({ ...session, passwordlessUser: false });

-      setState({
-        client,
-        loading: false,
-        isAuthenticated: true,
-        isPasswordlessUser: false,
-        userName: client.getUserIdLocalpart(),
-        error: undefined,
+      setInitClientState({
+        client: initClientState.client,
+        passwordlessUser: false,
      });
    },
-    [client]
+    [initClientState?.client]
  );

  const setClient = useCallback(
-    (newClient: MatrixClient, session: Session) => {
-      if (client && client !== newClient) {
-        client.stopClient();
+    (clientParams?: SetClientParams) => {
+      const oldClient = initClientState?.client;
+      const newClient = clientParams?.client;
+      if (oldClient && oldClient !== newClient) {
+        oldClient.stopClient();
      }

-      if (newClient) {
-        saveSession(session);
-
-        setState({
-          client: newClient,
-          loading: false,
-          isAuthenticated: true,
-          isPasswordlessUser: session.passwordlessUser,
-          userName: newClient.getUserIdLocalpart(),
-          error: undefined,
+      if (clientParams) {
+        saveSession(clientParams.session);
+        setInitClientState({
+          client: clientParams.client,
+          passwordlessUser: clientParams.session.passwordlessUser,
        });
      } else {
        clearSession();
-
-        setState({
-          client: undefined,
-          loading: false,
-          isAuthenticated: false,
-          isPasswordlessUser: false,
-          userName: null,
-          error: undefined,
-        });
+        setInitClientState(null);
      }
    },
-    [client]
+    [initClientState?.client]
  );

  const logout = useCallback(async () => {
+    const client = initClientState?.client;
+    if (!client) {
+      return;
+    }
+
    await client.logout(true);
    await client.clearStores();
    clearSession();
-    setState({
-      client: undefined,
-      loading: false,
-      isAuthenticated: false,
-      isPasswordlessUser: true,
-      userName: "",
-      error: undefined,
-    });
+    setInitClientState(null);
    history.push("/");
    PosthogAnalytics.instance.setRegistrationType(RegistrationType.Guest);
-  }, [history, client]);
+  }, [history, initClientState?.client]);

  const { t } = useTranslation();

@@ -299,61 +248,179 @@ export const ClientProvider: FC<Props> = ({ children }) => {
    if (!widget) loadChannel?.postMessage({});
  }, []);

+  const [alreadyOpenedErr, setAlreadyOpenedErr] = useState<Error | undefined>(
+    undefined
+  );
  useEventTarget(
    loadChannel,
    "message",
    useCallback(() => {
-      client?.stopClient();
-
-      setState((prev) => ({
-        ...prev,
-        error: translatedError(
-          "This application has been opened in another tab.",
-          t
-        ),
-      }));
-    }, [client, setState, t])
+      initClientState?.client.stopClient();
+      setAlreadyOpenedErr(
+        translatedError("This application has been opened in another tab.", t)
+      );
+    }, [initClientState?.client, setAlreadyOpenedErr, t])
  );

-  const context = useMemo<ClientState>(
-    () => ({
-      loading,
-      isAuthenticated,
-      isPasswordlessUser,
-      client,
-      changePassword,
-      logout,
-      userName,
+  const [isDisconnected, setIsDisconnected] = useState(false);
+
+  const state: ClientState | undefined = useMemo(() => {
+    if (alreadyOpenedErr) {
+      return { state: "error", error: alreadyOpenedErr };
+    }
+
+    if (initClientState === undefined) return undefined;
+
+    const authenticated =
+      initClientState === null
+        ? undefined
+        : {
+            client: initClientState.client,
+            isPasswordlessUser: initClientState.passwordlessUser,
+            changePassword,
+            logout,
+          };
+
+    return {
+      state: "valid",
+      authenticated,
      setClient,
-      error: undefined,
-    }),
-    [
-      loading,
-      isAuthenticated,
-      isPasswordlessUser,
-      client,
-      changePassword,
-      logout,
-      userName,
-      setClient,
-    ]
+      disconnected: isDisconnected,
+    };
+  }, [
+    alreadyOpenedErr,
+    changePassword,
+    initClientState,
+    logout,
+    setClient,
+    isDisconnected,
+  ]);
+
+  const onSync = useCallback(
+    (state: SyncState, _old: SyncState | null, data?: ISyncStateData) => {
+      setIsDisconnected(clientIsDisconnected(state, data));
+    },
+    []
  );

  useEffect(() => {
-    window.matrixclient = client;
-    window.isPasswordlessUser = isPasswordlessUser;
+    if (!initClientState) {
+      return;
+    }
+
+    window.matrixclient = initClientState.client;
+    window.passwordlessUser = initClientState.passwordlessUser;

    if (PosthogAnalytics.hasInstance())
      PosthogAnalytics.instance.onLoginStatusChanged();
-  }, [client, isPasswordlessUser]);

-  if (error) {
-    return <ErrorView error={error} />;
+    if (initClientState.client) {
+      initClientState.client.on(ClientEvent.Sync, onSync);
+    }
+
+    return () => {
+      if (initClientState.client) {
+        initClientState.client.removeListener(ClientEvent.Sync, onSync);
+      }
+    };
+  }, [initClientState, onSync]);
+
+  if (alreadyOpenedErr) {
+    return <ErrorView error={alreadyOpenedErr} />;
  }

  return (
-    <ClientContext.Provider value={context}>{children}</ClientContext.Provider>
+    <ClientContext.Provider value={state}>{children}</ClientContext.Provider>
  );
 };

-export const useClient = () => useContext(ClientContext);
+type InitResult = {
+  client: MatrixClient;
+  passwordlessUser: boolean;
+};
+
+async function loadClient(): Promise<InitResult | null> {
+  if (widget) {
+    // We're inside a widget, so let's engage *matryoshka mode*
+    logger.log("Using a matryoshka client");
+    const client = await widget.client;
+    return {
+      client,
+      passwordlessUser: false,
+    };
+  } else {
+    // We're running as a standalone application
+    try {
+      const session = loadSession();
+      if (!session) {
+        logger.log("No session stored; continuing without a client");
+        return null;
+      }
+
+      logger.log("Using a standalone client");
+
+      /* eslint-disable camelcase */
+      const { user_id, device_id, access_token, passwordlessUser } = session;
+      const initClientParams = {
+        baseUrl: Config.defaultHomeserverUrl()!,
+        accessToken: access_token,
+        userId: user_id,
+        deviceId: device_id,
+        fallbackICEServerAllowed: fallbackICEServerAllowed,
+        livekitServiceURL: Config.get().livekit!.livekit_service_url,
+      };
+
+      try {
+        const client = await initClient(initClientParams, true);
+        return {
+          client,
+          passwordlessUser,
+        };
+      } catch (err) {
+        if (err instanceof CryptoStoreIntegrityError) {
+          // We can't use this session anymore, so let's log it out
+          try {
+            const client = await initClient(initClientParams, false); // Don't need the crypto store just to log out)
+            await client.logout(true);
+          } catch (err) {
+            logger.warn(
+              "The previous session was lost, and we couldn't log it out, " +
+                err +
+                "either"
+            );
+          }
+        }
+        throw err;
+      }
+      /* eslint-enable camelcase */
+    } catch (err) {
+      clearSession();
+      throw err;
+    }
+  }
+}
+
+export interface Session {
+  user_id: string;
+  device_id: string;
+  access_token: string;
+  passwordlessUser: boolean;
+  tempPassword?: string;
+}
+
+const clearSession = () => localStorage.removeItem("matrix-auth-store");
+const saveSession = (s: Session) =>
+  localStorage.setItem("matrix-auth-store", JSON.stringify(s));
+const loadSession = (): Session | undefined => {
+  const data = localStorage.getItem("matrix-auth-store");
+  if (!data) {
+    return undefined;
+  }
+
+  return JSON.parse(data);
+};
+
+const clientIsDisconnected = (
+  syncState: SyncState,
+  syncData?: ISyncStateData
+) => syncState === "ERROR" && syncData?.error?.name === "ConnectionError";
--- a/src/DisconnectedBanner.module.css
+++ b/src/DisconnectedBanner.module.css
@@ -0,0 +1,27 @@
+/*
+Copyright 2023 New Vector Ltd
+
+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.
+*/
+
+.banner {
+  position: absolute;
+  padding: 29px;
+  background-color: var(--cpd-color-bg-subtle-primary);
+  vertical-align: middle;
+  font-size: var(--font-size-body);
+  text-align: center;
+  z-index: 1;
+  top: 76px;
+  width: calc(100% - 58px);
+}
--- a/src/DisconnectedBanner.tsx
+++ b/src/DisconnectedBanner.tsx
@@ -0,0 +1,53 @@
+/*
+Copyright 2023 New Vector Ltd
+
+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.
+*/
+
+import classNames from "classnames";
+import { HTMLAttributes, ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+
+import styles from "./DisconnectedBanner.module.css";
+import { ValidClientState, useClientState } from "./ClientContext";
+
+interface DisconnectedBannerProps extends HTMLAttributes<HTMLElement> {
+  children?: ReactNode;
+  className?: string;
+}
+
+export function DisconnectedBanner({
+  children,
+  className,
+  ...rest
+}: DisconnectedBannerProps) {
+  const { t } = useTranslation();
+  const clientState = useClientState();
+  let shouldShowBanner = false;
+
+  if (clientState?.state === "valid") {
+    const validClientState = clientState as ValidClientState;
+    shouldShowBanner = validClientState.disconnected;
+  }
+
+  return (
+    <>
+      {shouldShowBanner && (
+        <div className={classNames(styles.banner, className)} {...rest}>
+          {children}
+          {t("Connectivity to the server has been lost.")}
+        </div>
+      )}
+    </>
+  );
+}
--- a/src/E2EEBanner.module.css
+++ b/src/E2EEBanner.module.css
@@ -0,0 +1,23 @@
+/*
+Copyright 2023 New Vector Ltd
+
+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.
+*/
+
+.e2eeBanner {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+  font-size: var(--font-size-caption);
+}
--- a/src/E2EEBanner.tsx
+++ b/src/E2EEBanner.tsx
@@ -0,0 +1,39 @@
+/*
+Copyright 2023 New Vector Ltd
+
+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.
+*/
+
+import { Trans } from "react-i18next";
+
+import { Banner } from "./Banner";
+import styles from "./E2EEBanner.module.css";
+import { ReactComponent as LockOffIcon } from "./icons/LockOff.svg";
+import { useEnableE2EE } from "./settings/useSetting";
+
+export const E2EEBanner = () => {
+  const [e2eeEnabled] = useEnableE2EE();
+  if (e2eeEnabled) return null;
+
+  return (
+    <Banner>
+      <div className={styles.e2eeBanner}>
+        <LockOffIcon width={24} height={24} />
+        <Trans>
+          Element Call is temporarily not end-to-end encrypted while we test
+          scalability.
+        </Trans>
+      </div>
+    </Banner>
+  );
+};
--- a/src/Facepile.tsx
+++ b/src/Facepile.tsx
@@ -14,27 +14,20 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import { HTMLAttributes, useMemo } from "react";
-import classNames from "classnames";
+import { HTMLAttributes } from "react";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { useTranslation } from "react-i18next";
+import { AvatarStack } from "@vector-im/compound-web";

-import styles from "./Facepile.module.css";
-import { Avatar, Size, sizes } from "./Avatar";
-
-const overlapMap: Partial<Record<Size, number>> = {
-  [Size.XS]: 2,
-  [Size.SM]: 4,
-  [Size.MD]: 8,
-};
+import { Avatar, Size } from "./Avatar";

 interface Props extends HTMLAttributes<HTMLDivElement> {
-  className: string;
+  className?: string;
  client: MatrixClient;
  members: RoomMember[];
  max?: number;
-  size?: Size;
+  size?: Size | number;
 }

 export function Facepile({
@@ -47,51 +40,27 @@ export function Facepile({
 }: Props) {
  const { t } = useTranslation();

-  const _size = sizes.get(size);
-  const _overlap = overlapMap[size];
-
-  const title = useMemo(() => {
-    return members.reduce<string | null>(
-      (prev, curr) =>
-        prev === null
-          ? curr.name
-          : t("{{names}}, {{name}}", { names: prev, name: curr.name }),
-      null
-    ) as string;
-  }, [members, t]);
+  const displayedMembers = members.slice(0, max);

  return (
-    <div
-      className={classNames(styles.facepile, styles[size], className)}
-      title={title}
-      style={{
-        width:
-          Math.min(members.length, max + 1) * (_size - _overlap) + _overlap,
-      }}
+    <AvatarStack
+      title={t("{{names, list(style: short;)}}", {
+        list: displayedMembers.map((m) => m.name),
+      })}
      {...rest}
    >
-      {members.slice(0, max).map((member, i) => {
+      {displayedMembers.map((member, i) => {
        const avatarUrl = member.getMxcAvatarUrl();
        return (
          <Avatar
-            key={member.userId}
+            key={i}
+            id={member.userId}
+            name={member.name}
            size={size}
            src={avatarUrl ?? undefined}
-            fallback={member.name.slice(0, 1).toUpperCase()}
-            className={styles.avatar}
-            style={{ left: i * (_size - _overlap) }}
          />
        );
      })}
-      {members.length > max && (
-        <Avatar
-          key="additional"
-          size={size}
-          fallback={`+${members.length - max}`}
-          className={styles.avatar}
-          style={{ left: max * (_size - _overlap) }}
-        />
-      )}
-    </div>
+    </AvatarStack>
  );
 }
--- a/src/FullScreenView.tsx
+++ b/src/FullScreenView.tsx
@@ -18,14 +18,14 @@ import { ReactNode, useCallback, useEffect } from "react";
 import { useLocation } from "react-router-dom";
 import classNames from "classnames";
 import { Trans, useTranslation } from "react-i18next";
+import * as Sentry from "@sentry/react";

 import { Header, HeaderLogo, LeftNav, RightNav } from "./Header";
 import { LinkButton, Button } from "./button";
-import { useSubmitRageshake } from "./settings/submit-rageshake";
-import { ErrorMessage } from "./input/Input";
 import styles from "./FullScreenView.module.css";
-import { translatedError, TranslatedError } from "./TranslatedError";
+import { TranslatedError } from "./TranslatedError";
 import { Config } from "./config/Config";
+import { RageshakeButton } from "./settings/RageshakeButton";

 interface FullScreenViewProps {
  className?: string;
@@ -58,6 +58,7 @@ export function ErrorView({ error }: ErrorViewProps) {

  useEffect(() => {
    console.error(error);
+    Sentry.captureException(error);
  }, [error]);

  const onReload = useCallback(() => {
@@ -72,6 +73,7 @@ export function ErrorView({ error }: ErrorViewProps) {
          ? error.translatedMessage
          : error.message}
      </p>
+      <RageshakeButton description={`***Error View***: ${error.message}`} />
      {location.pathname === "/" ? (
        <Button
          size="lg"
@@ -97,37 +99,11 @@ export function ErrorView({ error }: ErrorViewProps) {

 export function CrashView() {
  const { t } = useTranslation();
-  const { submitRageshake, sending, sent, error } = useSubmitRageshake();
-
-  const sendDebugLogs = useCallback(() => {
-    submitRageshake({
-      description: "**Soft Crash**",
-      sendLogs: true,
-    });
-  }, [submitRageshake]);

  const onReload = useCallback(() => {
    window.location.href = "/";
  }, []);

-  let logsComponent: JSX.Element | null = null;
-  if (sent) {
-    logsComponent = <div>{t("Thanks! We'll get right on it.")}</div>;
-  } else if (sending) {
-    logsComponent = <div>{t("Sending…")}</div>;
-  } else if (Config.get().rageshake?.submit_url) {
-    logsComponent = (
-      <Button
-        size="lg"
-        variant="default"
-        onPress={sendDebugLogs}
-        className={styles.wideButton}
-      >
-        {t("Send debug logs")}
-      </Button>
-    );
-  }
-
  return (
    <FullScreenView>
      <Trans>
@@ -139,10 +115,7 @@ export function CrashView() {
        </Trans>
      )}

-      <div className={styles.sendLogsSection}>{logsComponent}</div>
-      {error && (
-        <ErrorMessage error={translatedError("Couldn't send debug logs!", t)} />
-      )}
+      <RageshakeButton description="***Soft Crash***" />
      <Button
        size="lg"
        variant="default"
--- a/src/Header.module.css
+++ b/src/Header.module.css
@@ -28,8 +28,8 @@ limitations under the License.
  flex: 1;
  align-items: center;
  white-space: nowrap;
-  padding: 0 20px;
-  height: 64px;
+  padding-inline: var(--inline-content-inset);
+  height: 80px;
 }

 .headerLogo {
@@ -66,81 +66,56 @@ limitations under the License.
  margin-right: 0;
 }

+.roomHeaderInfo {
+  display: grid;
+  column-gap: var(--cpd-space-4x);
+  grid-template-columns: auto auto;
+  grid-template-rows: 1fr auto;
+}
+
+.roomHeaderInfo[data-size="sm"] {
+  grid-template-areas: "avatar name" ". participants";
+}
+
+.roomHeaderInfo[data-size="lg"] {
+  grid-template-areas: "avatar name" "avatar participants";
+}
+
 .roomAvatar {
-  position: relative;
-  display: none;
-  justify-content: center;
-  align-items: center;
-  width: 36px;
-  height: 36px;
-  border-radius: 36px;
-  background-color: #5c56f5;
+  align-self: flex-start;
+  grid-area: avatar;
 }

-.roomAvatar > * {
-  fill: white;
-  stroke: white;
-}
-
-.backButton {
-  background: transparent;
-  border: none;
+.nameLine {
+  grid-area: name;
+  flex-grow: 1;
  display: flex;
-  color: var(--primary-content);
-  cursor: pointer;
  align-items: center;
+  gap: var(--cpd-space-1x);
 }

-.backButton h3 {
+.nameLine > h1 {
  margin: 0;
-}
-
-.backButton > * {
-  margin-right: 12px;
-}
-
-.backButton > :last-child {
-  margin-right: 0;
-}
-
-.userName {
-  font-weight: 600;
-  margin-right: 8px;
-  text-overflow: ellipsis;
+  /* XXX I can't actually get this ellipsis overflow to trigger, because
+  constraint propagation in a nested flexbox layout is a massive pain */
  overflow: hidden;
-  flex-shrink: 1;
+  text-overflow: ellipsis;
 }

-.signOutButton {
-  background: transparent;
-  border: none;
-  color: rgb(255, 75, 85);
-  cursor: pointer;
-  font-weight: 600;
+.nameLine > svg {
  flex-shrink: 0;
 }

-.versionMismatchWarning {
-  padding-left: 15px;
-}
-
-.versionMismatchWarning::before {
-  content: "";
-  display: inline-block;
-  position: relative;
-  top: 1px;
-  width: 16px;
-  height: 16px;
-  mask-image: url("./icons/AlertTriangleFilled.svg");
-  mask-repeat: no-repeat;
-  mask-size: contain;
-  background-color: var(--alert);
-  padding-right: 5px;
+.participantsLine {
+  grid-area: participants;
+  display: flex;
+  align-items: center;
+  gap: var(--cpd-space-1-5x);
+  font: var(--cpd-font-body-sm-medium);
 }

@media (min-width: 800px) {
  .headerLogo,
-  .roomAvatar,
  .leftNav.hideMobile,
  .rightNav.hideMobile {
    display: flex;
@@ -149,8 +124,4 @@ limitations under the License.
  .leftNav h3 {
    font-size: var(--font-size-subtitle);
  }
-
-  .nav {
-    height: 76px;
-  }
 }
--- a/src/Header.stories.jsx
+++ b/src/Header.stories.jsx
@@ -1,105 +0,0 @@
-import { GridLayoutMenu } from "./room/GridLayoutMenu";
-import {
-  Header,
-  HeaderLogo,
-  LeftNav,
-  RightNav,
-  RoomHeaderInfo,
-} from "./Header";
-import { UserMenu } from "./UserMenu";
-
-export default {
-  title: "Header",
-  component: Header,
-  parameters: {
-    layout: "fullscreen",
-  },
-};
-
-export const HomeAnonymous = () => (
-  <Header>
-    <LeftNav>
-      <HeaderLogo />
-    </LeftNav>
-    <RightNav>
-      <UserMenu />
-    </RightNav>
-  </Header>
-);
-
-export const HomeNamedGuest = () => (
-  <Header>
-    <LeftNav>
-      <HeaderLogo />
-    </LeftNav>
-    <RightNav>
-      <UserMenu isAuthenticated isPasswordlessUser displayName="Yara" />
-    </RightNav>
-  </Header>
-);
-
-export const HomeLoggedIn = () => (
-  <Header>
-    <LeftNav>
-      <HeaderLogo />
-    </LeftNav>
-    <RightNav>
-      <UserMenu isAuthenticated displayName="Yara" />
-    </RightNav>
-  </Header>
-);
-
-export const LobbyNamedGuest = () => (
-  <Header>
-    <LeftNav>
-      <RoomHeaderInfo roomName="Q4Roadmap" />
-    </LeftNav>
-    <RightNav>
-      <UserMenu isAuthenticated isPasswordlessUser displayName="Yara" />
-    </RightNav>
-  </Header>
-);
-
-export const LobbyLoggedIn = () => (
-  <Header>
-    <LeftNav>
-      <RoomHeaderInfo roomName="Q4Roadmap" />
-    </LeftNav>
-    <RightNav>
-      <UserMenu isAuthenticated displayName="Yara" />
-    </RightNav>
-  </Header>
-);
-
-export const InRoomNamedGuest = () => (
-  <Header>
-    <LeftNav>
-      <RoomHeaderInfo roomName="Q4Roadmap" />
-    </LeftNav>
-    <RightNav>
-      <GridLayoutMenu layout="freedom" />
-      <UserMenu isAuthenticated isPasswordlessUser displayName="Yara" />
-    </RightNav>
-  </Header>
-);
-
-export const InRoomLoggedIn = () => (
-  <Header>
-    <LeftNav>
-      <RoomHeaderInfo roomName="Q4Roadmap" />
-    </LeftNav>
-    <RightNav>
-      <GridLayoutMenu layout="freedom" />
-      <UserMenu isAuthenticated displayName="Yara" />
-    </RightNav>
-  </Header>
-);
-
-export const CreateAccount = () => (
-  <Header>
-    <LeftNav>
-      <HeaderLogo />
-    </LeftNav>
-    <RightNav></RightNav>
-  </Header>
-);
--- a/src/Header.tsx
+++ b/src/Header.tsx
@@ -15,17 +15,18 @@ limitations under the License.
 */

 import classNames from "classnames";
-import { HTMLAttributes, ReactNode, useCallback } from "react";
+import { FC, HTMLAttributes, ReactNode } from "react";
 import { Link } from "react-router-dom";
-import { Room } from "matrix-js-sdk/src/models/room";
 import { useTranslation } from "react-i18next";
+import { MatrixClient, RoomMember } from "matrix-js-sdk/src/matrix";
+import { Heading } from "@vector-im/compound-web";

 import styles from "./Header.module.css";
-import { useModalTriggerState } from "./Modal";
-import { Button } from "./button";
 import { ReactComponent as Logo } from "./icons/Logo.svg";
-import { Subtitle } from "./typography/Typography";
-import { IncompatibleVersionModal } from "./IncompatibleVersionModal";
+import { Avatar, Size } from "./Avatar";
+import { Facepile } from "./Facepile";
+import { EncryptionLock } from "./room/EncryptionLock";
+import { useMediaQuery } from "./useMediaQuery";

 interface HeaderProps extends HTMLAttributes<HTMLElement> {
  children: ReactNode;
@@ -112,47 +113,52 @@ export function HeaderLogo({ className }: HeaderLogoProps) {
  );
 }

-interface RoomHeaderInfo {
-  roomName: string;
+interface RoomHeaderInfoProps {
+  id: string;
+  name: string;
+  avatarUrl: string | null;
+  encrypted: boolean;
+  participants: RoomMember[];
+  client: MatrixClient;
 }

-export function RoomHeaderInfo({ roomName }: RoomHeaderInfo) {
-  return (
-    <>
-      <Subtitle data-testid="roomHeader_roomName" fontWeight="semiBold">
-        {roomName}
-      </Subtitle>
-    </>
-  );
-}
-
-interface VersionMismatchWarningProps {
-  users: Set<string>;
-  room: Room;
-}
-
-export function VersionMismatchWarning({
-  users,
-  room,
-}: VersionMismatchWarningProps) {
+export const RoomHeaderInfo: FC<RoomHeaderInfoProps> = ({
+  id,
+  name,
+  avatarUrl,
+  encrypted,
+  participants,
+  client,
+}) => {
  const { t } = useTranslation();
-  const { modalState, modalProps } = useModalTriggerState();
-
-  const onDetailsClick = useCallback(() => {
-    modalState.open();
-  }, [modalState]);
-
-  if (users.size === 0) return null;
+  const size = useMediaQuery("(max-width: 550px)") ? "sm" : "lg";

  return (
-    <span className={styles.versionMismatchWarning}>
-      {t("Incompatible versions!")}
-      <Button variant="link" onClick={onDetailsClick}>
-        {t("Details")}
-      </Button>
-      {modalState.isOpen && (
-        <IncompatibleVersionModal userIds={users} room={room} {...modalProps} />
+    <div className={styles.roomHeaderInfo} data-size={size}>
+      <Avatar
+        className={styles.roomAvatar}
+        id={id}
+        name={name}
+        size={size === "sm" ? Size.SM : 56}
+        src={avatarUrl ?? undefined}
+      />
+      <div className={styles.nameLine}>
+        <Heading
+          type={size === "sm" ? "body" : "heading"}
+          size={size === "sm" ? "lg" : "md"}
+          weight="semibold"
+          data-testid="roomHeader_roomName"
+        >
+          {name}
+        </Heading>
+        <EncryptionLock encrypted={encrypted} />
+      </div>
+      {participants.length > 0 && (
+        <div className={styles.participantsLine}>
+          <Facepile client={client} members={participants} size={20} />
+          {t("{{count, number}}", { count: participants.length })}
+        </div>
      )}
-    </span>
+    </div>
  );
-}
+};
--- a/src/ListBox.module.css
+++ b/src/ListBox.module.css
@@ -21,8 +21,8 @@ limitations under the License.
  overflow-y: auto;
  list-style: none;
  background-color: transparent;
-  border: 1px solid var(--quinary-content);
-  background-color: var(--background);
+  border: 1px solid var(--cpd-color-border-interactive-secondary);
+  background-color: var(--cpd-color-bg-canvas-default);
  border-radius: 8px;
 }

@@ -31,7 +31,7 @@ limitations under the License.
  align-items: center;
  justify-content: space-between;
  background-color: transparent;
-  color: var(--primary-content);
+  color: var(--cpd-color-text-primary);
  padding: 8px 16px;
  outline: none;
  cursor: pointer;
@@ -44,6 +44,6 @@ limitations under the License.
 }

 .option.disabled {
-  color: var(--quaternary-content);
-  background-color: var(--bgColor3);
+  color: var(--cpd-color-text-disabled);
+  background-color: var(--stopgap-bgColor3);
 }
--- a/src/ListBox.tsx
+++ b/src/ListBox.tsx
@@ -36,15 +36,16 @@ export function ListBox<T>({
  listBoxRef,
  ...rest
 }: ListBoxProps<T>) {
-  const ref = useRef<HTMLUListElement>();
-  if (!listBoxRef) listBoxRef = ref;
+  const ref = useRef<HTMLUListElement>(null);

-  const { listBoxProps } = useListBox(rest, state, listBoxRef);
+  const listRef = listBoxRef ?? ref;
+
+  const { listBoxProps } = useListBox(rest, state, listRef);

  return (
    <ul
      {...listBoxProps}
-      ref={listBoxRef}
+      ref={listRef}
      className={classNames(styles.listBox, className)}
    >
      {[...state.collection].map((item) => (
@@ -66,7 +67,7 @@ interface OptionProps<T> {
 }

 function Option<T>({ item, state, className }: OptionProps<T>) {
-  const ref = useRef();
+  const ref = useRef(null);
  const { optionProps, isSelected, isFocused, isDisabled } = useOption(
    { key: item.key },
    state,
@@ -83,7 +84,11 @@ function Option<T>({ item, state, className }: OptionProps<T>) {
  const origPointerUp = optionProps.onPointerUp;
  delete optionProps.onPointerUp;
  optionProps.onClick = useCallback(
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
    (e) => {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
      origPointerUp(e as unknown as PointerEvent<HTMLElement>);
    },
    [origPointerUp]
--- a/src/Menu.module.css
+++ b/src/Menu.module.css
@@ -27,7 +27,7 @@ limitations under the License.
  display: flex;
  align-items: center;
  padding: 0 12px;
-  color: var(--primary-content);
+  color: var(--cpd-color-text-primary);
  font-size: var(--font-size-body);
  text-overflow: ellipsis;
  overflow: hidden;
@@ -44,7 +44,11 @@ limitations under the License.

 .menuItem.focused,
 .menuItem:hover {
-  background-color: var(--quinary-content);
+  background-color: var(--cpd-color-bg-action-secondary-hovered);
+}
+
+.menuItem:active {
+  background-color: var(--cpd-color-bg-action-secondary-pressed);
 }

 .menuItem.focused:first-child,
@@ -65,5 +69,5 @@ limitations under the License.
 }

 .checkIcon * {
-  stroke: var(--primary-content);
+  stroke: var(--cpd-color-text-primary);
 }
--- a/src/Menu.tsx
+++ b/src/Menu.tsx
@@ -25,8 +25,8 @@ import { Node } from "@react-types/shared";
 import styles from "./Menu.module.css";

 interface MenuProps<T> extends AriaMenuOptions<T> {
-  className?: String;
-  onClose?: () => void;
+  className?: string;
+  onClose: () => void;
  onAction: (value: Key) => void;
  label?: string;
 }
@@ -39,7 +39,7 @@ export function Menu<T extends object>({
  ...rest
 }: MenuProps<T>) {
  const state = useTreeState<T>({ ...rest, selectionMode: "none" });
-  const menuRef = useRef();
+  const menuRef = useRef(null);
  const { menuProps } = useMenu<T>(rest, state, menuRef);

  return (
@@ -69,7 +69,7 @@ interface MenuItemProps<T> {
 }

 function MenuItem<T>({ item, state, onAction, onClose }: MenuItemProps<T>) {
-  const ref = useRef();
+  const ref = useRef(null);
  const { menuItemProps } = useMenuItem(
    {
      key: item.key,
--- a/src/Modal.module.css
+++ b/src/Modal.module.css
@@ -28,7 +28,7 @@ limitations under the License.
 }

 .modal {
-  background: #21262c;
+  background: var(--cpd-color-bg-subtle-secondary);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  max-width: 90vw;
--- a/src/Modal.tsx
+++ b/src/Modal.tsx
@@ -55,7 +55,7 @@ export function Modal({
  ...rest
 }: ModalProps) {
  const { t } = useTranslation();
-  const modalRef = useRef();
+  const modalRef = useRef(null);
  const { overlayProps, underlayProps } = useOverlay(
    { ...rest, onClose },
    modalRef
@@ -63,7 +63,7 @@ export function Modal({
  usePreventScroll();
  const { modalProps } = useModal();
  const { dialogProps, titleProps } = useDialog(rest, modalRef);
-  const closeButtonRef = useRef();
+  const closeButtonRef = useRef(null);
  const { buttonProps: closeButtonProps } = useButton(
    {
      onPress: () => onClose(),
--- a/src/SequenceDiagramViewerPage.tsx
+++ b/src/SequenceDiagramViewerPage.tsx
@@ -36,6 +36,9 @@ export function SequenceDiagramViewerPage() {

  const [debugLog, setDebugLog] = useState<DebugLog>();
  const [selectedUserId, setSelectedUserId] = useState<string>();
+
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
  const onChangeDebugLog = useCallback((e) => {
    if (e.target.files && e.target.files.length > 0) {
      e.target.files[0].text().then((text: string) => {
@@ -55,7 +58,7 @@ export function SequenceDiagramViewerPage() {
          onChange={onChangeDebugLog}
        />
      </FieldRow>
-      {debugLog && (
+      {debugLog && selectedUserId && (
        <SequenceDiagramViewer
          localUserId={debugLog.localUserId}
          selectedUserId={selectedUserId}
--- a/src/Tooltip.module.css
+++ b/src/Tooltip.module.css
@@ -15,12 +15,12 @@ limitations under the License.
 */

 .tooltip {
-  background-color: var(--system);
+  background-color: var(--cpd-color-bg-subtle-secondary);
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px;
-  color: var(--primary-content);
+  color: var(--cpd-color-text-primary);
  border-radius: 8px;
  max-width: 135px;
  width: max-content;
--- a/src/Tooltip.tsx
+++ b/src/Tooltip.tsx
@@ -74,7 +74,7 @@ export const TooltipTrigger = forwardRef<HTMLElement, TooltipTriggerProps>(
    const tooltipTriggerProps = { delay: 250, ...rest };
    const tooltipState = useTooltipTriggerState(tooltipTriggerProps);
    const triggerRef = useObjectRef<HTMLElement>(ref);
-    const overlayRef = useRef();
+    const overlayRef = useRef<HTMLDivElement>(null);
    const { triggerProps, tooltipProps } = useTooltipTrigger(
      tooltipTriggerProps,
      tooltipState,
--- a/src/UrlParams.ts
+++ b/src/UrlParams.ts
@@ -1,5 +1,5 @@
 /*
-Copyright 2022 New Vector Ltd
+Copyright 2022 - 2023 New Vector Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -17,6 +17,10 @@ limitations under the License.
 import { useMemo } from "react";
 import { useLocation } from "react-router-dom";

+import { Config } from "./config/Config";
+
+export const PASSWORD_STRING = "password=";
+
 interface UrlParams {
  roomAlias: string | null;
  roomId: string | null;
@@ -84,23 +88,65 @@ interface UrlParams {
   * user's homeserver doesn't provide any.
   */
  allowIceFallback: boolean;
+  /**
+   * E2EE password
+   */
+  password: string | null;
 }

 /**
 * Gets the app parameters for the current URL.
- * @param query The URL query string
- * @param fragment The URL fragment string
+ * @param ignoreRoomAlias If true, does not try to parse a room alias from the URL
+ * @param search The URL search string
+ * @param pathname The URL path name
+ * @param hash The URL hash
 * @returns The app parameters encoded in the URL
 */
 export const getUrlParams = (
-  query: string = window.location.search,
-  fragment: string = window.location.hash
+  ignoreRoomAlias?: boolean,
+  search = window.location.search,
+  pathname = window.location.pathname,
+  hash = window.location.hash
 ): UrlParams => {
-  const fragmentQueryStart = fragment.indexOf("?");
+  // This is legacy code - we're moving away from using aliases
+  let roomAlias: string | null = null;
+  if (!ignoreRoomAlias) {
+    // Here we handle the beginning of the alias and make sure it starts with a
+    // "#"
+    if (hash === "" || hash.startsWith("#?")) {
+      roomAlias = pathname.substring(1); // Strip the "/"
+
+      // Delete "/room/", if present
+      if (roomAlias.startsWith("room/")) {
+        roomAlias = roomAlias.substring("room/".length);
+      }
+      // Add "#", if not present
+      if (!roomAlias.startsWith("#")) {
+        roomAlias = `#${roomAlias}`;
+      }
+    } else {
+      roomAlias = hash;
+    }
+
+    // Delete "?" and what comes afterwards
+    roomAlias = roomAlias.split("?")[0];
+
+    if (roomAlias.length <= 1) {
+      // Make roomAlias is null, if it only is a "#"
+      roomAlias = null;
+    } else {
+      // Add server part, if not present
+      if (!roomAlias.includes(":")) {
+        roomAlias = `${roomAlias}:${Config.defaultServerName()}`;
+      }
+    }
+  }
+
+  const fragmentQueryStart = hash.indexOf("?");
  const fragmentParams = new URLSearchParams(
-    fragmentQueryStart === -1 ? "" : fragment.substring(fragmentQueryStart)
+    fragmentQueryStart === -1 ? "" : hash.substring(fragmentQueryStart)
  );
-  const queryParams = new URLSearchParams(query);
+  const queryParams = new URLSearchParams(search);

  // Normally, URL params should be encoded in the fragment so as to avoid
  // leaking them to the server. However, we also check the normal query
@@ -114,17 +160,20 @@ export const getUrlParams = (
    ...queryParams.getAll(name),
  ];

-  // The part of the fragment before the ?
-  const fragmentRoute =
-    fragmentQueryStart === -1
-      ? fragment
-      : fragment.substring(0, fragmentQueryStart);
-
  const fontScale = parseFloat(getParam("fontScale") ?? "");

+  // Make sure roomId is valid
+  let roomId: string | null = getParam("roomId");
+  if (!roomId?.startsWith("!")) {
+    roomId = null;
+  } else if (!roomId.includes("")) {
+    roomId = null;
+  }
+
  return {
-    roomAlias: fragmentRoute.length > 1 ? fragmentRoute : null,
-    roomId: getParam("roomId"),
+    roomAlias,
+    roomId,
+    password: getParam("password"),
    viaServers: getAllParams("via"),
    isEmbedded: hasParam("embed"),
    preload: hasParam("preload"),
@@ -149,6 +198,9 @@ export const getUrlParams = (
 * @returns The app parameters for the current URL
 */
 export const useUrlParams = (): UrlParams => {
-  const { hash, search } = useLocation();
-  return useMemo(() => getUrlParams(search, hash), [search, hash]);
+  const { search, pathname, hash } = useLocation();
+  return useMemo(
+    () => getUrlParams(false, search, pathname, hash),
+    [search, pathname, hash]
+  );
 };
--- a/src/UserMenu.module.css
+++ b/src/UserMenu.module.css
@@ -17,22 +17,10 @@ limitations under the License.
 .menuIcon {
  width: 24px;
  height: 24px;
+
+  flex-shrink: 0;
 }

 .userButton svg * {
-  fill: var(--primary-content);
-}
-
-.avatar {
-  width: 24px;
-  height: 24px;
-  font-size: var(--font-size-caption);
-}
-
-@media (min-width: 800px) {
-  .avatar {
-    width: 32px;
-    height: 32px;
-    font-size: var(--font-size-body);
-  }
+  fill: var(--cpd-color-icon-primary);
 }
--- a/src/UserMenu.tsx
+++ b/src/UserMenu.tsx
@@ -35,8 +35,9 @@ interface UserMenuProps {
  preventNavigation: boolean;
  isAuthenticated: boolean;
  isPasswordlessUser: boolean;
+  userId: string;
  displayName: string;
-  avatarUrl: string;
+  avatarUrl?: string;
  onAction: (value: string) => void;
 }

@@ -44,6 +45,7 @@ export function UserMenu({
  preventNavigation,
  isAuthenticated,
  isPasswordlessUser,
+  userId,
  displayName,
  avatarUrl,
  onAction,
@@ -109,31 +111,34 @@ export function UserMenu({
        >
          {isAuthenticated && (!isPasswordlessUser || avatarUrl) ? (
            <Avatar
+              id={userId}
+              name={displayName}
              size={Size.SM}
-              className={styles.avatar}
              src={avatarUrl}
-              fallback={displayName.slice(0, 1).toUpperCase()}
            />
          ) : (
            <UserIcon />
          )}
        </Button>
      </TooltipTrigger>
-      {(props) => (
-        <Menu {...props} label={t("User menu")} onAction={onAction}>
-          {items.map(({ key, icon: Icon, label, dataTestid }) => (
-            <Item key={key} textValue={label}>
-              <Icon
-                width={24}
-                height={24}
-                className={styles.menuIcon}
-                data-testid={dataTestid}
-              />
-              <Body overflowEllipsis>{label}</Body>
-            </Item>
-          ))}
-        </Menu>
-      )}
+      {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (props: any) => (
+          <Menu {...props} label={t("User menu")} onAction={onAction}>
+            {items.map(({ key, icon: Icon, label, dataTestid }) => (
+              <Item key={key} textValue={label}>
+                <Icon
+                  width={24}
+                  height={24}
+                  className={styles.menuIcon}
+                  data-testid={dataTestid}
+                />
+                <Body overflowEllipsis>{label}</Body>
+              </Item>
+            ))}
+          </Menu>
+        )
+      }
    </PopoverMenuTrigger>
  );
 }
--- a/src/UserMenuContainer.tsx
+++ b/src/UserMenuContainer.tsx
@@ -17,7 +17,7 @@ limitations under the License.
 import { useCallback, useState } from "react";
 import { useHistory, useLocation } from "react-router-dom";

-import { useClient } from "./ClientContext";
+import { useClientLegacy } from "./ClientContext";
 import { useProfile } from "./profile/useProfile";
 import { useModalTriggerState } from "./Modal";
 import { SettingsModal } from "./settings/SettingsModal";
@@ -30,8 +30,7 @@ interface Props {
 export function UserMenuContainer({ preventNavigation = false }: Props) {
  const location = useLocation();
  const history = useHistory();
-  const { isAuthenticated, isPasswordlessUser, logout, userName, client } =
-    useClient();
+  const { client, logout, authenticated, passwordlessUser } = useClientLegacy();
  const { displayName, avatarUrl } = useProfile(client);
  const { modalState, modalProps } = useModalTriggerState();

@@ -49,7 +48,7 @@ export function UserMenuContainer({ preventNavigation = false }: Props) {
          modalState.open();
          break;
        case "logout":
-          logout();
+          logout?.();
          break;
        case "login":
          history.push("/login", { state: { from: location } });
@@ -59,19 +58,19 @@ export function UserMenuContainer({ preventNavigation = false }: Props) {
    [history, location, logout, modalState]
  );

+  const userName = client?.getUserIdLocalpart() ?? "";
  return (
    <>
      <UserMenu
        preventNavigation={preventNavigation}
-        isAuthenticated={isAuthenticated}
-        isPasswordlessUser={isPasswordlessUser}
+        isAuthenticated={authenticated}
+        isPasswordlessUser={passwordlessUser}
        avatarUrl={avatarUrl}
        onAction={onAction}
-        displayName={
-          displayName || (userName ? userName.replace("@", "") : undefined)
-        }
+        userId={client?.getUserId() ?? ""}
+        displayName={displayName || (userName ? userName.replace("@", "") : "")}
      />
-      {modalState.isOpen && (
+      {modalState.isOpen && client && (
        <SettingsModal
          client={client}
          defaultTab={defaultSettingsTab}
--- a/src/analytics/PosthogAnalytics.ts
+++ b/src/analytics/PosthogAnalytics.ts
@@ -20,7 +20,7 @@ import { MatrixClient } from "matrix-js-sdk";
 import { Buffer } from "buffer";

 import { widget } from "../widget";
-import { getSetting, setSetting, settingsBus } from "../settings/useSetting";
+import { getSetting, setSetting, getSettingKey } from "../settings/useSetting";
 import {
  CallEndedTracker,
  CallStartedTracker,
@@ -30,9 +30,11 @@ import {
  MuteMicrophoneTracker,
  UndecryptableToDeviceEventTracker,
  QualitySurveyEventTracker,
+  CallDisconnectedEventTracker,
 } from "./PosthogEvents";
 import { Config } from "../config/Config";
 import { getUrlParams } from "../UrlParams";
+import { localStorageBus } from "../useLocalStorage";

 /* Posthog analytics tracking.
 *
@@ -98,7 +100,7 @@ export class PosthogAnalytics {
  // set true during the constructor if posthog config is present, otherwise false
  private static internalInstance: PosthogAnalytics | null = null;

-  private identificationPromise: Promise<void>;
+  private identificationPromise?: Promise<void>;
  private readonly enabled: boolean = false;
  private anonymity = Anonymity.Disabled;
  private platformSuperProperties = {};
@@ -255,7 +257,9 @@ export class PosthogAnalytics {
      } catch (e) {
        // The above could fail due to network requests, but not essential to starting the application,
        // so swallow it.
-        logger.log("Unable to identify user for tracking" + e.toString());
+        logger.log(
+          "Unable to identify user for tracking" + (e as Error)?.toString()
+        );
      }
      if (analyticsID) {
        this.posthog.identify(analyticsID);
@@ -366,7 +370,7 @@ export class PosthogAnalytics {

    if (anonymity === Anonymity.Pseudonymous) {
      this.setRegistrationType(
-        window.matrixclient.isGuest() || window.isPasswordlessUser
+        window.matrixclient.isGuest() || window.passwordlessUser
          ? RegistrationType.Guest
          : RegistrationType.Registered
      );
@@ -410,7 +414,7 @@ export class PosthogAnalytics {
    //  * When the user changes their preferences on this device
    // Note that for new accounts, pseudonymousAnalyticsOptIn won't be set, so updateAnonymityFromSettings
    // won't be called (i.e. this.anonymity will be left as the default, until the setting changes)
-    settingsBus.on("opt-in-analytics", (optInAnalytics) => {
+    localStorageBus.on(getSettingKey("opt-in-analytics"), (optInAnalytics) => {
      this.updateAnonymityAndIdentifyUser(optInAnalytics);
    });
  }
@@ -435,4 +439,5 @@ export class PosthogAnalytics {
  public eventMuteCamera = new MuteCameraTracker();
  public eventUndecryptableToDevice = new UndecryptableToDeviceEventTracker();
  public eventQualitySurvey = new QualitySurveyEventTracker();
+  public eventCallDisconnected = new CallDisconnectedEventTracker();
 }
--- a/src/analytics/PosthogEvents.ts
+++ b/src/analytics/PosthogEvents.ts
@@ -14,6 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

+import { DisconnectReason } from "livekit-client";
+
 import {
  IPosthogEvent,
  PosthogAnalytics,
@@ -181,3 +183,17 @@ export class QualitySurveyEventTracker {
    });
  }
 }
+
+interface CallDisconnectedEvent {
+  eventName: "CallDisconnected";
+  reason?: DisconnectReason;
+}
+
+export class CallDisconnectedEventTracker {
+  track(reason?: DisconnectReason) {
+    PosthogAnalytics.instance.trackEvent<CallDisconnectedEvent>({
+      eventName: "CallDisconnected",
+      reason,
+    });
+  }
+}
--- a/src/array-utils.ts
+++ b/src/array-utils.ts
@@ -22,10 +22,10 @@ limitations under the License.
 // Array.prototype.findLastIndex
 export function findLastIndex<T>(
  array: T[],
-  predicate: (item: T) => boolean
+  predicate: (item: T, index: number) => boolean
 ): number | null {
  for (let i = array.length - 1; i >= 0; i--) {
-    if (predicate(array[i])) return i;
+    if (predicate(array[i], i)) return i;
  }

  return null;
@@ -34,5 +34,11 @@ export function findLastIndex<T>(
 /**
 * Counts the number of elements in an array that satsify the given predicate.
 */
-export const count = <T>(array: T[], predicate: (item: T) => boolean): number =>
-  array.reduce((acc, item) => (predicate(item) ? acc + 1 : acc), 0);
+export const count = <T>(
+  array: T[],
+  predicate: (item: T, index: number) => boolean
+): number =>
+  array.reduce(
+    (acc, item, index) => (predicate(item, index) ? acc + 1 : acc),
+    0
+  );
--- a/src/auth/LoginPage.module.css
+++ b/src/auth/LoginPage.module.css
@@ -81,7 +81,7 @@ limitations under the License.
 }

 .authLinks a {
-  color: var(--accent);
+  color: var(--cpd-color-text-action-accent);
  text-decoration: none;
  font-weight: normal;
 }
--- a/src/auth/LoginPage.tsx
+++ b/src/auth/LoginPage.tsx
@@ -35,8 +35,8 @@ export const LoginPage: FC = () => {
  const { setClient } = useClient();
  const login = useInteractiveLogin();
  const homeserver = Config.defaultHomeserverUrl(); // TODO: Make this configurable
-  const usernameRef = useRef<HTMLInputElement>();
-  const passwordRef = useRef<HTMLInputElement>();
+  const usernameRef = useRef<HTMLInputElement>(null);
+  const passwordRef = useRef<HTMLInputElement>(null);
  const history = useHistory();
  const location = useLocation();
  const [loading, setLoading] = useState(false);
@@ -49,12 +49,27 @@ export const LoginPage: FC = () => {
      e.preventDefault();
      setLoading(true);

+      if (!homeserver || !usernameRef.current || !passwordRef.current) {
+        setError(Error("Login parameters are undefined"));
+        setLoading(false);
+        return;
+      }
+
      login(homeserver, usernameRef.current.value, passwordRef.current.value)
        .then(([client, session]) => {
-          setClient(client, session);
+          if (!setClient) {
+            return;
+          }

-          if (location.state && location.state.from) {
-            history.push(location.state.from);
+          setClient({ client, session });
+
+          const locationState = location.state;
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          if (locationState && locationState.from) {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            history.push(locationState.from);
          } else {
            history.push("/");
          }
--- a/src/auth/RegisterPage.tsx
+++ b/src/auth/RegisterPage.tsx
@@ -30,7 +30,7 @@ import { Trans, useTranslation } from "react-i18next";

 import { FieldRow, InputField, ErrorMessage } from "../input/Input";
 import { Button } from "../button";
-import { useClient } from "../ClientContext";
+import { useClientLegacy } from "../ClientContext";
 import { useInteractiveRegistration } from "./useInteractiveRegistration";
 import styles from "./LoginPage.module.css";
 import { ReactComponent as Logo } from "../icons/LogoLarge.svg";
@@ -45,17 +45,17 @@ export const RegisterPage: FC = () => {
  const { t } = useTranslation();
  usePageTitle(t("Register"));

-  const { loading, isAuthenticated, isPasswordlessUser, client, setClient } =
-    useClient();
-  const confirmPasswordRef = useRef<HTMLInputElement>();
+  const { loading, authenticated, passwordlessUser, client, setClient } =
+    useClientLegacy();
+
+  const confirmPasswordRef = useRef<HTMLInputElement>(null);
  const history = useHistory();
  const location = useLocation();
  const [registering, setRegistering] = useState(false);
  const [error, setError] = useState<Error>();
  const [password, setPassword] = useState("");
  const [passwordConfirmation, setPasswordConfirmation] = useState("");
-  const [privacyPolicyUrl, recaptchaKey, register] =
-    useInteractiveRegistration();
+  const { recaptchaKey, register } = useInteractiveRegistration();
  const { execute, reset, recaptchaId } = useRecaptcha(recaptchaKey);

  const onSubmitRegisterForm = useCallback(
@@ -76,10 +76,11 @@ export const RegisterPage: FC = () => {
          userName,
          password,
          userName,
-          recaptchaResponse
+          recaptchaResponse,
+          passwordlessUser
        );

-        if (client && isPasswordlessUser) {
+        if (client && client?.groupCallEventHandler && passwordlessUser) {
          // Migrate the user's rooms
          for (const groupCall of client.groupCallEventHandler.groupCalls.values()) {
            const roomId = groupCall.room.roomId;
@@ -87,7 +88,11 @@ export const RegisterPage: FC = () => {
            try {
              await newClient.joinRoom(roomId);
            } catch (error) {
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-ignore
              if (error.errcode === "M_LIMIT_EXCEEDED") {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
                await sleep(error.data.retry_after_ms);
                await newClient.joinRoom(roomId);
              } else {
@@ -98,13 +103,17 @@ export const RegisterPage: FC = () => {
          }
        }

-        setClient(newClient, session);
+        setClient?.({ client: newClient, session });
        PosthogAnalytics.instance.eventSignup.cacheSignupEnd(new Date());
      };

      submit()
        .then(() => {
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
          if (location.state?.from) {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
            history.push(location.state?.from);
          } else {
            history.push("/");
@@ -120,7 +129,7 @@ export const RegisterPage: FC = () => {
      register,
      location,
      history,
-      isPasswordlessUser,
+      passwordlessUser,
      reset,
      execute,
      client,
@@ -137,10 +146,10 @@ export const RegisterPage: FC = () => {
  }, [password, passwordConfirmation, t]);

  useEffect(() => {
-    if (!loading && isAuthenticated && !isPasswordlessUser && !registering) {
+    if (!loading && authenticated && !passwordlessUser && !registering) {
      history.push("/");
    }
-  }, [loading, history, isAuthenticated, isPasswordlessUser, registering]);
+  }, [loading, history, authenticated, passwordlessUser, registering]);

  if (loading) {
    return <LoadingView />;
@@ -211,7 +220,9 @@ export const RegisterPage: FC = () => {
                  apply.
                  <br />
                  By clicking "Register", you agree to our{" "}
-                  <Link href={privacyPolicyUrl}>Terms and conditions</Link>
+                  <Link href={Config.get().eula}>
+                    End User Licensing Agreement (EULA)
+                  </Link>
                </Trans>
              </Caption>
              {error && (
--- a/src/auth/useInteractiveLogin.ts
+++ b/src/auth/useInteractiveLogin.ts
@@ -41,8 +41,10 @@ export const useInteractiveLogin = () =>
          },
          password,
        }),
-      stateUpdated: null,
-      requestEmailToken: null,
+      stateUpdated: (...args) => {},
+      requestEmailToken: (...args): Promise<{ sid: string }> => {
+        return Promise.resolve({ sid: "" });
+      },
    });

    // XXX: This claims to return an IAuthData which contains none of these
--- a/src/auth/useInteractiveRegistration.ts
+++ b/src/auth/useInteractiveRegistration.ts
@@ -22,29 +22,33 @@ import { initClient } from "../matrix-utils";
 import { Session } from "../ClientContext";
 import { Config } from "../config/Config";

-export const useInteractiveRegistration = (): [
-  string,
-  string,
-  (
+export const useInteractiveRegistration = (): {
+  privacyPolicyUrl?: string;
+  recaptchaKey?: string;
+  register: (
    username: string,
    password: string,
    displayName: string,
    recaptchaResponse: string,
-    passwordlessUser?: boolean
-  ) => Promise<[MatrixClient, Session]>
-] => {
-  const [privacyPolicyUrl, setPrivacyPolicyUrl] = useState<string>();
-  const [recaptchaKey, setRecaptchaKey] = useState<string>();
+    passwordlessUser: boolean
+  ) => Promise<[MatrixClient, Session]>;
+} => {
+  const [privacyPolicyUrl, setPrivacyPolicyUrl] = useState<string | undefined>(
+    undefined
+  );
+  const [recaptchaKey, setRecaptchaKey] = useState<string | undefined>(
+    undefined
+  );

  const authClient = useRef<MatrixClient>();
  if (!authClient.current) {
    authClient.current = createClient({
-      baseUrl: Config.defaultHomeserverUrl(),
+      baseUrl: Config.defaultHomeserverUrl()!,
    });
  }

  useEffect(() => {
-    authClient.current.registerRequest({}).catch((error) => {
+    authClient.current!.registerRequest({}).catch((error) => {
      setPrivacyPolicyUrl(
        error.data?.params["m.login.terms"]?.policies?.privacy_policy?.en?.url
      );
@@ -58,12 +62,12 @@ export const useInteractiveRegistration = (): [
      password: string,
      displayName: string,
      recaptchaResponse: string,
-      passwordlessUser?: boolean
+      passwordlessUser: boolean
    ): Promise<[MatrixClient, Session]> => {
      const interactiveAuth = new InteractiveAuth({
-        matrixClient: authClient.current,
+        matrixClient: authClient.current!,
        doRequest: (auth) =>
-          authClient.current.registerRequest({
+          authClient.current!.registerRequest({
            username,
            password,
            auth: auth || undefined,
@@ -84,7 +88,9 @@ export const useInteractiveRegistration = (): [
            });
          }
        },
-        requestEmailToken: null,
+        requestEmailToken: (...args) => {
+          return Promise.resolve({ sid: "dummy" });
+        },
      });

      // XXX: This claims to return an IAuthData which contains none of these
@@ -95,7 +101,7 @@ export const useInteractiveRegistration = (): [

      const client = await initClient(
        {
-          baseUrl: Config.defaultHomeserverUrl(),
+          baseUrl: Config.defaultHomeserverUrl()!,
          accessToken: access_token,
          userId: user_id,
          deviceId: device_id,
@@ -117,7 +123,7 @@ export const useInteractiveRegistration = (): [
        session.tempPassword = password;
      }

-      const user = client.getUser(client.getUserId());
+      const user = client.getUser(client.getUserId()!)!;
      user.setRawDisplayName(displayName);
      user.setDisplayName(displayName);

@@ -126,5 +132,5 @@ export const useInteractiveRegistration = (): [
    []
  );

-  return [privacyPolicyUrl, recaptchaKey, register];
+  return { privacyPolicyUrl, recaptchaKey, register };
 };
--- a/src/auth/useRecaptcha.ts
+++ b/src/auth/useRecaptcha.ts
@@ -34,7 +34,7 @@ interface RecaptchaPromiseRef {
  reject: (error: Error) => void;
 }

-export const useRecaptcha = (sitekey: string) => {
+export const useRecaptcha = (sitekey?: string) => {
  const { t } = useTranslation();
  const [recaptchaId] = useState(() => randomString(16));
  const promiseRef = useRef<RecaptchaPromiseRef>();
@@ -68,9 +68,9 @@ export const useRecaptcha = (sitekey: string) => {
    }
  }, [recaptchaId, sitekey]);

-  const execute = useCallback(() => {
+  const execute = useCallback((): Promise<string> => {
    if (!sitekey) {
-      return Promise.resolve(null);
+      return Promise.resolve("");
    }

    if (!window.grecaptcha) {
--- a/src/auth/useRegisterPasswordlessUser.ts
+++ b/src/auth/useRegisterPasswordlessUser.ts
@@ -23,19 +23,23 @@ import { generateRandomName } from "../auth/generateRandomName";
 import { useRecaptcha } from "../auth/useRecaptcha";

 interface UseRegisterPasswordlessUserType {
-  privacyPolicyUrl: string;
+  privacyPolicyUrl?: string;
  registerPasswordlessUser: (displayName: string) => Promise<void>;
-  recaptchaId: string;
+  recaptchaId?: string;
 }

 export function useRegisterPasswordlessUser(): UseRegisterPasswordlessUserType {
  const { setClient } = useClient();
-  const [privacyPolicyUrl, recaptchaKey, register] =
+  const { privacyPolicyUrl, recaptchaKey, register } =
    useInteractiveRegistration();
  const { execute, reset, recaptchaId } = useRecaptcha(recaptchaKey);

  const registerPasswordlessUser = useCallback(
    async (displayName: string) => {
+      if (!setClient) {
+        throw new Error("No client context");
+      }
+
      try {
        const recaptchaResponse = await execute();
        const userName = generateRandomName();
@@ -46,7 +50,7 @@ export function useRegisterPasswordlessUser(): UseRegisterPasswordlessUserType {
          recaptchaResponse,
          true
        );
-        setClient(client, session);
+        setClient({ client, session });
      } catch (e) {
        reset();
        throw e;
--- a/src/button/Button.module.css
+++ b/src/button/Button.module.css
@@ -46,8 +46,8 @@ limitations under the License.
 }

 .button {
-  color: var(--primary-content);
-  background-color: var(--accent);
+  color: var(--stopgap-color-on-solid-accent);
+  background-color: var(--cpd-color-text-action-accent);
 }

 .button:focus,
@@ -61,77 +61,86 @@ limitations under the License.
  outline: auto;
 }

+.toolbarButton:disabled {
+  background-color: var(--cpd-color-bg-action-primary-disabled);
+  box-shadow: none;
+}
+
 .toolbarButton,
 .toolbarButtonSecondary {
  width: 50px;
  height: 50px;
  border-radius: 50px;
-  background-color: var(--system);
-}
-
-.toolbarButton:hover,
-.toolbarButtonSecondary:hover {
-  background-color: var(--quinary-content);
+  background-color: var(--cpd-color-bg-canvas-default);
+  color: var(--cpd-color-icon-primary);
+  border: 1px solid var(--cpd-color-gray-400);
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
 }

 .toolbarButton.on,
 .toolbarButton.off {
-  background-color: var(--primary-content);
+  background-color: var(--cpd-color-bg-action-primary-rest);
+  color: var(--cpd-color-icon-on-solid-primary);
 }

 .toolbarButtonSecondary.on {
-  background-color: var(--accent);
+  background-color: var(--cpd-color-text-success-primary);
+}
+
+.toolbarButton:active,
+.toolbarButtonSecondary:active {
+  background-color: var(--cpd-color-bg-subtle-primary);
+  border: none;
+  box-shadow: none;
+}
+
+.toolbarButton.on:active,
+.toolbarButton.off:active {
+  background-color: var(--cpd-color-bg-action-primary-pressed);
 }

 .iconButton:not(.stroke) svg * {
-  fill: var(--primary-content);
+  fill: var(--cpd-color-bg-action-primary-rest);
 }

-.iconButton:not(.stroke):hover svg * {
-  fill: var(--accent);
+.iconButton:not(.stroke):tertiary svg * {
+  fill: var(--cpd-color-icon-accent-tertiary);
 }

 .iconButton.on:not(.stroke) svg * {
-  fill: var(--accent);
+  fill: var(--cpd-color-icon-accent-tertiary);
 }

 .iconButton.on.stroke svg * {
-  stroke: var(--accent);
+  stroke: var(--cpd-color-icon-accent-tertiary);
 }

-.hangupButton,
-.hangupButton:hover {
-  background-color: var(--alert);
+.hangupButton {
+  background-color: var(--cpd-color-bg-critical-primary);
+  border-color: var(--cpd-color-border-critical-subtle);
+  color: var(--stopgap-color-on-solid-accent);
 }

-.toolbarButton.on svg * {
-  fill: var(--accent);
-}
-
-.toolbarButton.off svg * {
-  fill: #21262c;
-}
-
-.toolbarButtonSecondary.on svg * {
-  fill: var(--primary-content);
+.hangupButton:active {
+  background-color: var(--cpd-color-bg-critical-pressed);
 }

 .secondary,
 .copyButton {
-  color: var(--accent);
-  border: 2px solid var(--accent);
+  color: var(--cpd-color-text-action-accent);
+  border: 2px solid var(--cpd-color-text-action-accent);
  background-color: transparent;
 }

 .secondaryHangup {
-  color: var(--alert);
-  border: 2px solid var(--alert);
+  color: var(--cpd-color-text-critical-primary);
+  border: 2px solid var(--cpd-color-border-critical-primary);
  background-color: transparent;
 }

 .copyButton.secondaryCopy {
-  color: var(--primary-content);
-  border-color: var(--primary-content);
+  color: var(--cpd-color-text-primary);
+  border-color: var(--cpd-color-border-interactive-primary);
 }

 .copyButton {
@@ -154,12 +163,12 @@ limitations under the License.
 }

 .copyButton:not(.on) svg * {
-  fill: var(--accent);
+  fill: var(--cpd-color-icon-accent-tertiary);
 }

 .copyButton.on {
  border-color: transparent;
-  background-color: var(--accent);
+  background-color: var(--cpd-color-text-action-accent);
  color: white;
 }

@@ -168,32 +177,28 @@ limitations under the License.
 }

 .copyButton.secondaryCopy:not(.on) svg * {
-  fill: var(--primary-content);
+  fill: var(--cpd-color-bg-action-primary-rest);
 }

 .iconCopyButton svg * {
-  fill: var(--tertiary-content);
-}
-
-.iconCopyButton:hover svg * {
-  fill: var(--accent);
+  fill: var(--cpd-color-icon-secondary);
 }

 .iconCopyButton.on svg *,
 .iconCopyButton.on:hover svg * {
  fill: transparent;
-  stroke: var(--accent);
+  stroke: var(--cpd-color-text-action-accent);
 }

 .dropdownButton {
-  color: var(--primary-content);
+  color: var(--cpd-color-text-primary);
  padding: 2px 8px;
  border-radius: 8px;
 }

-.dropdownButton:hover,
+.dropdownButton:active,
 .dropdownButton.on {
-  background-color: var(--quinary-content);
+  background-color: var(--cpd-color-bg-action-secondary-pressed);
 }

 .dropdownButton svg {
@@ -201,7 +206,7 @@ limitations under the License.
 }

 .dropdownButton svg * {
-  fill: var(--primary-content);
+  fill: var(--cpd-color-icon-primary);
 }

 .lg {
@@ -211,6 +216,36 @@ limitations under the License.
 .linkButton {
  background-color: transparent;
  border: none;
-  color: var(--accent);
+  color: var(--cpd-color-text-action-accent);
  cursor: pointer;
 }
+
+@media (hover: hover) {
+  .toolbarButton:hover,
+  .toolbarButtonSecondary:hover {
+    background-color: var(--cpd-color-bg-subtle-primary);
+    border: none;
+    box-shadow: none;
+  }
+
+  .toolbarButton.on:hover,
+  .toolbarButton.off:hover {
+    background-color: var(--cpd-color-bg-action-primary-hovered);
+  }
+
+  .iconButton:not(.stroke):hover svg * {
+    fill: var(--cpd-color-icon-accent-tertiary);
+  }
+
+  .hangupButton:hover {
+    background-color: var(--cpd-color-bg-critical-hovered);
+  }
+
+  .iconCopyButton:hover svg * {
+    fill: var(--cpd-color-icon-accent-tertiary);
+  }
+
+  .dropdownButton:hover {
+    background-color: var(--cpd-color-bg-action-secondary-hovered);
+  }
+}
--- a/src/button/Button.tsx
+++ b/src/button/Button.tsx
@@ -13,26 +13,25 @@ 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.
 */
-import { forwardRef, useCallback } from "react";
+import { forwardRef } from "react";
 import { PressEvent } from "@react-types/shared";
 import classNames from "classnames";
 import { useButton } from "@react-aria/button";
 import { mergeProps, useObjectRef } from "@react-aria/utils";
 import { useTranslation } from "react-i18next";
+import { Tooltip } from "@vector-im/compound-web";
+import { ReactComponent as MicOnSolidIcon } from "@vector-im/compound-design-tokens/icons/mic-on-solid.svg";
+import { ReactComponent as MicOffSolidIcon } from "@vector-im/compound-design-tokens/icons/mic-off-solid.svg";
+import { ReactComponent as VideoCallIcon } from "@vector-im/compound-design-tokens/icons/video-call.svg";
+import { ReactComponent as VideoCallOffIcon } from "@vector-im/compound-design-tokens/icons/video-call-off.svg";
+import { ReactComponent as EndCallIcon } from "@vector-im/compound-design-tokens/icons/end-call.svg";
+import { ReactComponent as ShareScreenSolidIcon } from "@vector-im/compound-design-tokens/icons/share-screen-solid.svg";
+import { ReactComponent as SettingsSolidIcon } from "@vector-im/compound-design-tokens/icons/settings-solid.svg";
+import { ReactComponent as ChevronDownIcon } from "@vector-im/compound-design-tokens/icons/chevron-down.svg";

 import styles from "./Button.module.css";
-import { ReactComponent as MicIcon } from "../icons/Mic.svg";
-import { ReactComponent as MuteMicIcon } from "../icons/MuteMic.svg";
-import { ReactComponent as VideoIcon } from "../icons/Video.svg";
-import { ReactComponent as DisableVideoIcon } from "../icons/DisableVideo.svg";
-import { ReactComponent as HangupIcon } from "../icons/Hangup.svg";
-import { ReactComponent as ScreenshareIcon } from "../icons/Screenshare.svg";
-import { ReactComponent as SettingsIcon } from "../icons/Settings.svg";
-import { ReactComponent as AddUserIcon } from "../icons/AddUser.svg";
-import { ReactComponent as ArrowDownIcon } from "../icons/ArrowDown.svg";
 import { ReactComponent as Fullscreen } from "../icons/Fullscreen.svg";
 import { ReactComponent as FullscreenExit } from "../icons/FullscreenExit.svg";
-import { TooltipTrigger } from "../Tooltip";
 import { VolumeIcon } from "./VolumeIcon";

 export type ButtonVariant =
@@ -77,6 +76,7 @@ interface Props {
  children: Element[];
  onPress: (e: PressEvent) => void;
  onPressStart: (e: PressEvent) => void;
+  disabled: boolean;
  // TODO: add all props for <Button>
  [index: string]: unknown;
 }
@@ -128,7 +128,7 @@ export const Button = forwardRef<HTMLButtonElement, Props>(
      >
        <>
          {children}
-          {variant === "dropdown" && <ArrowDownIcon />}
+          {variant === "dropdown" && <ChevronDownIcon />}
        </>
      </button>
    );
@@ -144,15 +144,15 @@ export function MicButton({
  [index: string]: unknown;
 }) {
  const { t } = useTranslation();
+  const Icon = muted ? MicOffSolidIcon : MicOnSolidIcon;
+  const label = muted ? t("Microphone off") : t("Microphone on");

  return (
-    <TooltipTrigger
-      tooltip={() => (muted ? t("Unmute microphone") : t("Mute microphone"))}
-    >
-      <Button variant="toolbar" {...rest} off={muted}>
-        {muted ? <MuteMicIcon /> : <MicIcon />}
+    <Tooltip label={label}>
+      <Button variant="toolbar" {...rest} on={!muted}>
+        <Icon aria-label={label} />
      </Button>
-    </TooltipTrigger>
+    </Tooltip>
  );
 }

@@ -165,15 +165,15 @@ export function VideoButton({
  [index: string]: unknown;
 }) {
  const { t } = useTranslation();
+  const Icon = muted ? VideoCallOffIcon : VideoCallIcon;
+  const label = muted ? t("Video off") : t("Video on");

  return (
-    <TooltipTrigger
-      tooltip={() => (muted ? t("Turn on camera") : t("Turn off camera"))}
-    >
-      <Button variant="toolbar" {...rest} off={muted}>
-        {muted ? <DisableVideoIcon /> : <VideoIcon />}
+    <Tooltip label={label}>
+      <Button variant="toolbar" {...rest} on={!muted}>
+        <Icon aria-label={label} />
      </Button>
-    </TooltipTrigger>
+    </Tooltip>
  );
 }

@@ -188,15 +188,14 @@ export function ScreenshareButton({
  [index: string]: unknown;
 }) {
  const { t } = useTranslation();
+  const label = enabled ? t("Sharing screen") : t("Share screen");

  return (
-    <TooltipTrigger
-      tooltip={() => (enabled ? t("Stop sharing screen") : t("Share screen"))}
-    >
-      <Button variant="toolbarSecondary" {...rest} on={enabled}>
-        <ScreenshareIcon />
+    <Tooltip label={label}>
+      <Button variant="toolbar" {...rest} on={enabled}>
+        <ShareScreenSolidIcon aria-label={label} />
      </Button>
-    </TooltipTrigger>
+    </Tooltip>
  );
 }

@@ -209,18 +208,17 @@ export function HangupButton({
  [index: string]: unknown;
 }) {
  const { t } = useTranslation();
-  const tooltip = useCallback(() => t("Leave"), [t]);

  return (
-    <TooltipTrigger tooltip={tooltip}>
+    <Tooltip label={t("End call")}>
      <Button
        variant="toolbar"
        className={classNames(styles.hangupButton, className)}
        {...rest}
      >
-        <HangupIcon />
+        <EndCallIcon aria-label={t("End call")} />
      </Button>
-    </TooltipTrigger>
+    </Tooltip>
  );
 }

@@ -233,36 +231,13 @@ export function SettingsButton({
  [index: string]: unknown;
 }) {
  const { t } = useTranslation();
-  const tooltip = useCallback(() => t("Settings"), [t]);

  return (
-    <TooltipTrigger tooltip={tooltip}>
+    <Tooltip label={t("Settings")}>
      <Button variant="toolbar" {...rest}>
-        <SettingsIcon width={20} height={20} />
+        <SettingsSolidIcon aria-label={t("Settings")} />
      </Button>
-    </TooltipTrigger>
-  );
-}
-
-export function InviteButton({
-  className,
-  variant = "toolbar",
-  ...rest
-}: {
-  className?: string;
-  variant?: string;
-  // TODO: add all props for <Button>
-  [index: string]: unknown;
-}) {
-  const { t } = useTranslation();
-  const tooltip = useCallback(() => t("Invite"), [t]);
-
-  return (
-    <TooltipTrigger tooltip={tooltip}>
-      <Button variant={variant} {...rest}>
-        <AddUserIcon />
-      </Button>
-    </TooltipTrigger>
+    </Tooltip>
  );
 }

@@ -275,14 +250,13 @@ interface AudioButtonProps extends Omit<Props, "variant"> {

 export function AudioButton({ volume, ...rest }: AudioButtonProps) {
  const { t } = useTranslation();
-  const tooltip = useCallback(() => t("Local volume"), [t]);

  return (
-    <TooltipTrigger tooltip={tooltip}>
+    <Tooltip label={t("Local volume")}>
      <Button variant="icon" {...rest}>
-        <VolumeIcon volume={volume} />
+        <VolumeIcon volume={volume} aria-label={t("Local volume")} />
      </Button>
-    </TooltipTrigger>
+    </Tooltip>
  );
 }

@@ -295,15 +269,14 @@ export function FullscreenButton({
  ...rest
 }: FullscreenButtonProps) {
  const { t } = useTranslation();
-  const tooltip = useCallback(() => {
-    return fullscreen ? t("Exit full screen") : t("Full screen");
-  }, [fullscreen, t]);
+  const Icon = fullscreen ? FullscreenExit : Fullscreen;
+  const label = fullscreen ? t("Exit full screen") : t("Full screen");

  return (
-    <TooltipTrigger tooltip={tooltip}>
+    <Tooltip label={label}>
      <Button variant="icon" {...rest}>
-        {fullscreen ? <FullscreenExit /> : <Fullscreen />}
+        <Icon aria-label={label} />
      </Button>
-    </TooltipTrigger>
+    </Tooltip>
  );
 }
--- a/src/button/LinkButton.tsx
+++ b/src/button/LinkButton.tsx
@@ -46,7 +46,7 @@ export function LinkButton({
    <Link
      className={classNames(
        variantToClassName[variant || "secondary"],
-        sizeToClassName[size],
+        size ? sizeToClassName[size] : [],
        className
      )}
      to={to}
--- a/src/button/ShareButton.tsx
+++ b/src/button/ShareButton.tsx
@@ -0,0 +1,31 @@
+/*
+Copyright 2023 New Vector Ltd
+
+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.
+*/
+
+import { ComponentPropsWithoutRef, FC } from "react";
+import { Button } from "@vector-im/compound-web";
+import { useTranslation } from "react-i18next";
+import { ReactComponent as UserAddSolidIcon } from "@vector-im/compound-design-tokens/icons/user-add-solid.svg";
+
+export const ShareButton: FC<
+  Omit<ComponentPropsWithoutRef<"button">, "children">
+> = (props) => {
+  const { t } = useTranslation();
+  return (
+    <Button kind="secondary" size="sm" Icon={UserAddSolidIcon} {...props}>
+      {t("Share")}
+    </Button>
+  );
+};
--- a/src/button/VolumeIcon.tsx
+++ b/src/button/VolumeIcon.tsx
@@ -15,19 +15,21 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

+import { ComponentPropsWithoutRef, FC } from "react";
+
 import { ReactComponent as AudioMuted } from "../icons/AudioMuted.svg";
 import { ReactComponent as AudioLow } from "../icons/AudioLow.svg";
 import { ReactComponent as Audio } from "../icons/Audio.svg";

-interface Props {
+interface Props extends ComponentPropsWithoutRef<"svg"> {
  /**
   * Number between 0 and 1
   */
  volume: number;
 }

-export function VolumeIcon({ volume }: Props) {
-  if (volume <= 0) return <AudioMuted />;
-  if (volume <= 0.5) return <AudioLow />;
-  return <Audio />;
-}
+export const VolumeIcon: FC<Props> = ({ volume, ...rest }) => {
+  if (volume <= 0) return <AudioMuted {...rest} />;
+  if (volume <= 0.5) return <AudioLow {...rest} />;
+  return <Audio {...rest} />;
+};
--- a/src/config/Config.ts
+++ b/src/config/Config.ts
@@ -45,11 +45,11 @@ export class Config {

  // Convenience accessors
  public static defaultHomeserverUrl(): string | undefined {
-    return Config.get().default_server_config["m.homeserver"].base_url;
+    return Config.get().default_server_config?.["m.homeserver"].base_url;
  }

  public static defaultServerName(): string | undefined {
-    return Config.get().default_server_config["m.homeserver"].server_name;
+    return Config.get().default_server_config?.["m.homeserver"].server_name;
  }

  public config?: ResolvedConfigOptions;
--- a/src/config/ConfigOptions.ts
+++ b/src/config/ConfigOptions.ts
@@ -66,6 +66,11 @@ export interface ConfigOptions {
  features?: {
    feature_group_calls_without_video_and_audio: boolean;
  };
+
+  /**
+   * A link to the end-user license agreement (EULA)
+   */
+  eula: string;
 }

 // Overrides members from ConfigOptions that are always provided by the
@@ -86,4 +91,5 @@ export const DEFAULT_CONFIG: ResolvedConfigOptions = {
      server_name: "localhost",
    },
  },
+  eula: "https://static.element.io/legal/online-EULA.pdf",
 };
--- a/src/e2ee/sharedKeyManagement.ts
+++ b/src/e2ee/sharedKeyManagement.ts
@@ -0,0 +1,85 @@
+/*
+Copyright 2023 New Vector Ltd
+
+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.
+*/
+
+import { useEffect, useMemo } from "react";
+
+import { useEnableE2EE } from "../settings/useSetting";
+import { useLocalStorage } from "../useLocalStorage";
+import { useClient } from "../ClientContext";
+import { PASSWORD_STRING, useUrlParams } from "../UrlParams";
+
+export const getRoomSharedKeyLocalStorageKey = (roomId: string): string =>
+  `room-shared-key-${roomId}`;
+
+export const useInternalRoomSharedKey = (
+  roomId: string
+): [string | null, (value: string) => void] => {
+  const key = useMemo(() => getRoomSharedKeyLocalStorageKey(roomId), [roomId]);
+  const [e2eeEnabled] = useEnableE2EE();
+  const [roomSharedKey, setRoomSharedKey] = useLocalStorage(key);
+
+  return [e2eeEnabled ? roomSharedKey : null, setRoomSharedKey];
+};
+
+export const useRoomSharedKey = (roomId: string): string | null => {
+  return useInternalRoomSharedKey(roomId)[0];
+};
+
+export const useManageRoomSharedKey = (roomId: string): string | null => {
+  const { password } = useUrlParams();
+  const [e2eeSharedKey, setE2EESharedKey] = useInternalRoomSharedKey(roomId);
+
+  useEffect(() => {
+    if (!password) return;
+    if (password === "") return;
+    if (password === e2eeSharedKey) return;
+
+    setE2EESharedKey(password);
+  }, [password, e2eeSharedKey, setE2EESharedKey]);
+
+  useEffect(() => {
+    const hash = location.hash;
+
+    if (!hash.includes("?")) return;
+    if (!hash.includes(PASSWORD_STRING)) return;
+    if (password !== e2eeSharedKey) return;
+
+    const [hashStart, passwordStart] = hash.split(PASSWORD_STRING);
+    const hashEnd = passwordStart.split("&")[1];
+
+    location.replace((hashStart ?? "") + (hashEnd ?? ""));
+  }, [password, e2eeSharedKey]);
+
+  return e2eeSharedKey;
+};
+
+export const useIsRoomE2EE = (roomId: string): boolean | null => {
+  const { isEmbedded } = useUrlParams();
+  const client = useClient();
+  const room = useMemo(
+    () => client.client?.getRoom(roomId) ?? null,
+    [roomId, client.client]
+  );
+  const isE2EE = useMemo(() => {
+    if (isEmbedded) {
+      return false;
+    } else {
+      return room ? !room?.getCanonicalAlias() : null;
+    }
+  }, [isEmbedded, room]);
+
+  return isE2EE;
+};
--- a/src/home/CallList.module.css
+++ b/src/home/CallList.module.css
@@ -26,7 +26,7 @@ limitations under the License.
 .callTile {
  height: 95px;
  padding: 12px;
-  background-color: var(--system);
+  background-color: var(--cpd-color-bg-subtle-secondary);
  border-radius: 8px;
  overflow: hidden;
  box-sizing: border-box;
@@ -52,7 +52,7 @@ limitations under the License.
  flex-direction: column;
  flex: 1;
  padding: 0 16px;
-  color: var(--primary-content);
+  color: var(--cpd-color-text-primary);
  min-width: 0;
 }

--- a/src/home/CallList.tsx
+++ b/src/home/CallList.tsx
@@ -19,31 +19,29 @@ import { MatrixClient } from "matrix-js-sdk/src/client";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";

 import { CopyButton } from "../button";
-import { Facepile } from "../Facepile";
 import { Avatar, Size } from "../Avatar";
 import styles from "./CallList.module.css";
 import { getRoomUrl } from "../matrix-utils";
-import { Body, Caption } from "../typography/Typography";
+import { Body } from "../typography/Typography";
 import { GroupCallRoom } from "./useGroupCallRooms";
+import { useRoomSharedKey } from "../e2ee/sharedKeyManagement";

 interface CallListProps {
  rooms: GroupCallRoom[];
  client: MatrixClient;
-  disableFacepile?: boolean;
 }
-export function CallList({ rooms, client, disableFacepile }: CallListProps) {
+export function CallList({ rooms, client }: CallListProps) {
  return (
    <>
      <div className={styles.callList}>
-        {rooms.map(({ roomId, roomName, avatarUrl, participants }) => (
+        {rooms.map(({ room, roomAlias, roomName, avatarUrl, participants }) => (
          <CallTile
-            key={roomId}
+            key={roomAlias}
            client={client}
            name={roomName}
            avatarUrl={avatarUrl}
-            roomId={roomId}
+            roomId={room.roomId}
            participants={participants}
-            disableFacepile={disableFacepile}
          />
        ))}
        {rooms.length > 3 && (
@@ -62,45 +60,25 @@ interface CallTileProps {
  roomId: string;
  participants: RoomMember[];
  client: MatrixClient;
-  disableFacepile?: boolean;
 }
-function CallTile({
-  name,
-  avatarUrl,
-  roomId,
-  participants,
-  client,
-  disableFacepile,
-}: CallTileProps) {
+function CallTile({ name, avatarUrl, roomId }: CallTileProps) {
+  const roomSharedKey = useRoomSharedKey(roomId);
+
  return (
    <div className={styles.callTile}>
-      <Link to={`/room/${roomId}`} className={styles.callTileLink}>
-        <Avatar
-          size={Size.LG}
-          bgKey={name}
-          src={avatarUrl}
-          fallback={name.slice(0, 1).toUpperCase()}
-          className={styles.avatar}
-        />
+      <Link to={`/room/#?roomId=${roomId}`} className={styles.callTileLink}>
+        <Avatar id={roomId} name={name} size={Size.LG} src={avatarUrl} />
        <div className={styles.callInfo}>
          <Body overflowEllipsis fontWeight="semiBold">
            {name}
          </Body>
-          <Caption overflowEllipsis>{getRoomUrl(roomId)}</Caption>
-          {participants && !disableFacepile && (
-            <Facepile
-              className={styles.facePile}
-              client={client}
-              members={participants}
-            />
-          )}
        </div>
        <div className={styles.copyButtonSpacer} />
      </Link>
      <CopyButton
        className={styles.copyButton}
        variant="icon"
-        value={getRoomUrl(roomId)}
+        value={getRoomUrl(roomId, roomSharedKey ?? undefined)}
      />
    </div>
  );
--- a/src/home/CallTypeDropdown.tsx
+++ b/src/home/CallTypeDropdown.tsx
@@ -42,6 +42,12 @@ interface Props {
 export const CallTypeDropdown: FC<Props> = ({ callType, setCallType }) => {
  const { t } = useTranslation();

+  const onAction = (key: React.Key) => {
+    setCallType(key.toString() as CallType);
+  };
+
+  const onClose = () => {};
+
  return (
    <PopoverMenuTrigger placement="bottom">
      <Button variant="dropdown" className={commonStyles.headline}>
@@ -52,7 +58,12 @@ export const CallTypeDropdown: FC<Props> = ({ callType, setCallType }) => {
        </Headline>
      </Button>
      {(props: JSX.IntrinsicAttributes) => (
-        <Menu {...props} label={t("Call type menu")} onAction={setCallType}>
+        <Menu
+          {...props}
+          label={t("Call type menu")}
+          onAction={onAction}
+          onClose={onClose}
+        >
          <Item key={CallType.Video} textValue={t("Video call")}>
            <VideoIcon />
            <span>{t("Video call")}</span>
--- a/src/home/HomePage.tsx
+++ b/src/home/HomePage.tsx
@@ -16,7 +16,7 @@ limitations under the License.

 import { useTranslation } from "react-i18next";

-import { useClient } from "../ClientContext";
+import { useClientState } from "../ClientContext";
 import { ErrorView, LoadingView } from "../FullScreenView";
 import { UnauthenticatedView } from "./UnauthenticatedView";
 import { RegisteredView } from "./RegisteredView";
@@ -26,16 +26,18 @@ export function HomePage() {
  const { t } = useTranslation();
  usePageTitle(t("Home"));

-  const { isAuthenticated, isPasswordlessUser, loading, error, client } =
-    useClient();
+  const clientState = useClientState();

-  if (loading) {
+  if (!clientState) {
    return <LoadingView />;
-  } else if (error) {
-    return <ErrorView error={error} />;
+  } else if (clientState.state === "error") {
+    return <ErrorView error={clientState.error} />;
  } else {
-    return isAuthenticated ? (
-      <RegisteredView isPasswordlessUser={isPasswordlessUser} client={client} />
+    return clientState.authenticated ? (
+      <RegisteredView
+        isPasswordlessUser={clientState.authenticated.isPasswordlessUser}
+        client={clientState.authenticated.client}
+      />
    ) : (
      <UnauthenticatedView />
    );
--- a/src/home/RegisteredView.module.css
+++ b/src/home/RegisteredView.module.css
@@ -39,5 +39,5 @@ limitations under the License.
 }

 .notice {
-  color: var(--secondary-content);
+  color: var(--cpd-color-text-secondary);
 }
--- a/src/home/RegisteredView.tsx
+++ b/src/home/RegisteredView.tsx
@@ -17,6 +17,7 @@ limitations under the License.
 import { useState, useCallback, FormEvent, FormEventHandler } from "react";
 import { useHistory } from "react-router-dom";
 import { MatrixClient } from "matrix-js-sdk/src/client";
+import { randomString } from "matrix-js-sdk/src/randomstring";
 import { useTranslation } from "react-i18next";

 import {
@@ -37,8 +38,11 @@ import { JoinExistingCallModal } from "./JoinExistingCallModal";
 import { Caption, Title } from "../typography/Typography";
 import { Form } from "../form/Form";
 import { CallType, CallTypeDropdown } from "./CallTypeDropdown";
-import { useOptInAnalytics } from "../settings/useSetting";
+import { useEnableE2EE, useOptInAnalytics } from "../settings/useSetting";
 import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
+import { E2EEBanner } from "../E2EEBanner";
+import { setLocalStorageItem } from "../useLocalStorage";
+import { getRoomSharedKeyLocalStorageKey } from "../e2ee/sharedKeyManagement";

 interface Props {
  client: MatrixClient;
@@ -53,6 +57,7 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) {
  const history = useHistory();
  const { t } = useTranslation();
  const { modalState, modalProps } = useModalTriggerState();
+  const [e2eeEnabled] = useEnableE2EE();

  const onSubmit: FormEventHandler<HTMLFormElement> = useCallback(
    (e: FormEvent) => {
@@ -69,16 +74,23 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) {
        setError(undefined);
        setLoading(true);

-        const [roomIdOrAlias] = await createRoom(client, roomName, ptt);
+        const roomId = (
+          await createRoom(client, roomName, ptt, e2eeEnabled ?? false)
+        )[1];

-        if (roomIdOrAlias) {
-          history.push(`/room/${roomIdOrAlias}`);
+        if (e2eeEnabled) {
+          setLocalStorageItem(
+            getRoomSharedKeyLocalStorageKey(roomId),
+            randomString(32)
+          );
        }
+
+        history.push(`/room/#?roomId=${roomId}`);
      }

      submit().catch((error) => {
        if (error.errcode === "M_ROOM_IN_USE") {
-          setExistingRoomId(roomAliasLocalpartFromRoomName(roomName));
+          setExistingAlias(roomAliasLocalpartFromRoomName(roomName));
          setLoading(false);
          setError(undefined);
          modalState.open();
@@ -89,15 +101,15 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) {
        }
      });
    },
-    [client, history, modalState, callType]
+    [client, history, modalState, callType, e2eeEnabled]
  );

  const recentRooms = useGroupCallRooms(client);

-  const [existingRoomId, setExistingRoomId] = useState<string>();
+  const [existingAlias, setExistingAlias] = useState<string>();
  const onJoinExistingRoom = useCallback(() => {
-    history.push(`/${existingRoomId}`);
-  }, [history, existingRoomId]);
+    history.push(`/${existingAlias}`);
+  }, [history, existingAlias]);

  const callNameLabel =
    callType === CallType.Video
@@ -146,6 +158,7 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) {
                <AnalyticsNotice />
              </Caption>
            )}
+            <E2EEBanner />
            {error && (
              <FieldRow className={styles.fieldRow}>
                <ErrorMessage error={error} />
@@ -157,7 +170,7 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) {
              <Title className={styles.recentCallsTitle}>
                {t("Your recent calls")}
              </Title>
-              <CallList rooms={recentRooms} client={client} disableFacepile />
+              <CallList rooms={recentRooms} client={client} />
            </>
          )}
        </main>
--- a/src/home/UnauthenticatedView.module.css
+++ b/src/home/UnauthenticatedView.module.css
@@ -47,5 +47,5 @@ limitations under the License.
 }

 .notice {
-  color: var(--secondary-content);
+  color: var(--cpd-color-text-secondary);
 }
--- a/src/home/UnauthenticatedView.tsx
+++ b/src/home/UnauthenticatedView.tsx
@@ -40,7 +40,11 @@ import styles from "./UnauthenticatedView.module.css";
 import commonStyles from "./common.module.css";
 import { generateRandomName } from "../auth/generateRandomName";
 import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
-import { useOptInAnalytics } from "../settings/useSetting";
+import { useEnableE2EE, useOptInAnalytics } from "../settings/useSetting";
+import { Config } from "../config/Config";
+import { E2EEBanner } from "../E2EEBanner";
+import { getRoomSharedKeyLocalStorageKey } from "../e2ee/sharedKeyManagement";
+import { setLocalStorageItem } from "../useLocalStorage";

 export const UnauthenticatedView: FC = () => {
  const { setClient } = useClient();
@@ -48,8 +52,7 @@ export const UnauthenticatedView: FC = () => {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<Error>();
  const [optInAnalytics] = useOptInAnalytics();
-  const [privacyPolicyUrl, recaptchaKey, register] =
-    useInteractiveRegistration();
+  const { recaptchaKey, register } = useInteractiveRegistration();
  const { execute, reset, recaptchaId } = useRecaptcha(recaptchaKey);

  const { modalState, modalProps } = useModalTriggerState();
@@ -57,6 +60,8 @@ export const UnauthenticatedView: FC = () => {
  const history = useHistory();
  const { t } = useTranslation();

+  const [e2eeEnabled] = useEnableE2EE();
+
  const onSubmit: FormEventHandler<HTMLFormElement> = useCallback(
    (e) => {
      e.preventDefault();
@@ -78,16 +83,30 @@ export const UnauthenticatedView: FC = () => {
          true
        );

-        let roomIdOrAlias: string;
+        let roomId: string;
        try {
-          [roomIdOrAlias] = await createRoom(client, roomName, ptt);
+          roomId = (
+            await createRoom(client, roomName, ptt, e2eeEnabled ?? false)
+          )[1];
+
+          if (e2eeEnabled) {
+            setLocalStorageItem(
+              getRoomSharedKeyLocalStorageKey(roomId),
+              randomString(32)
+            );
+          }
        } catch (error) {
+          if (!setClient) {
+            throw error;
+          }
+
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
          if (error.errcode === "M_ROOM_IN_USE") {
            setOnFinished(() => {
-              setClient(client, session);
+              setClient({ client, session });
              const aliasLocalpart = roomAliasLocalpartFromRoomName(roomName);
-              const [, serverName] = client.getUserId().split(":");
-              history.push(`/room/#${aliasLocalpart}:${serverName}`);
+              history.push(`/${aliasLocalpart}`);
            });

            setLoading(false);
@@ -99,8 +118,12 @@ export const UnauthenticatedView: FC = () => {
        }

        // Only consider the registration successful if we managed to create the room, too
-        setClient(client, session);
-        history.push(`/room/${roomIdOrAlias}`);
+        if (!setClient) {
+          throw new Error("setClient is undefined");
+        }
+
+        setClient({ client, session });
+        history.push(`/room/#?roomId=${roomId}`);
      }

      submit().catch((error) => {
@@ -110,7 +133,16 @@ export const UnauthenticatedView: FC = () => {
        reset();
      });
    },
-    [register, reset, execute, history, callType, modalState, setClient]
+    [
+      register,
+      reset,
+      execute,
+      history,
+      callType,
+      modalState,
+      setClient,
+      e2eeEnabled,
+    ]
  );

  const callNameLabel =
@@ -165,9 +197,12 @@ export const UnauthenticatedView: FC = () => {
            <Caption className={styles.notice}>
              <Trans>
                By clicking "Go", you agree to our{" "}
-                <Link href={privacyPolicyUrl}>Terms and conditions</Link>
+                <Link href={Config.get().eula}>
+                  End User Licensing Agreement (EULA)
+                </Link>
              </Trans>
            </Caption>
+            <E2EEBanner />
            {error && (
              <FieldRow>
                <ErrorMessage error={error} />
@@ -200,7 +235,7 @@ export const UnauthenticatedView: FC = () => {
          </Body>
        </footer>
      </div>
-      {modalState.isOpen && (
+      {modalState.isOpen && onFinished && (
        <JoinExistingCallModal onJoin={onFinished} {...modalProps} />
      )}
    </>
--- a/src/home/useGroupCallRooms.ts
+++ b/src/home/useGroupCallRooms.ts
@@ -22,7 +22,7 @@ import { GroupCallEventHandlerEvent } from "matrix-js-sdk/src/webrtc/groupCallEv
 import { useState, useEffect } from "react";

 export interface GroupCallRoom {
-  roomId: string;
+  roomAlias: string;
  roomName: string;
  avatarUrl: string;
  room: Room;
@@ -42,7 +42,7 @@ function getLastTs(client: MatrixClient, r: Room) {
    return ts;
  }

-  const myUserId = client.getUserId();
+  const myUserId = client.getUserId()!;

  if (r.getMyMembership() !== "join") {
    const membershipEvent = r.currentState.getStateEvents(
@@ -79,26 +79,31 @@ function sortRooms(client: MatrixClient, rooms: Room[]): Room[] {
 }

 export function useGroupCallRooms(client: MatrixClient): GroupCallRoom[] {
-  const [rooms, setRooms] = useState([]);
+  const [rooms, setRooms] = useState<GroupCallRoom[]>([]);

  useEffect(() => {
    function updateRooms() {
+      if (!client.groupCallEventHandler) {
+        return;
+      }
+
      const groupCalls = client.groupCallEventHandler.groupCalls.values();
      const rooms = Array.from(groupCalls).map((groupCall) => groupCall.room);
      const sortedRooms = sortRooms(client, rooms);
      const items = sortedRooms.map((room) => {
-        const groupCall = client.getGroupCallForRoom(room.roomId);
+        const groupCall = client.getGroupCallForRoom(room.roomId)!;

        return {
-          roomId: room.getCanonicalAlias() || room.roomId,
+          roomAlias: room.getCanonicalAlias(),
          roomName: room.name,
-          avatarUrl: room.getMxcAvatarUrl(),
+          avatarUrl: room.getMxcAvatarUrl()!,
          room,
          groupCall,
-          participants: [...groupCall.participants],
+          participants: [...groupCall!.participants.keys()],
        };
      });
-      setRooms(items);
+
+      setRooms(items as GroupCallRoom[]);
    }

    updateRooms();
--- a/src/icons/AddUser.svg
+++ b/src/icons/AddUser.svg
@@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M18.8914 9.0784C18.5132 9.0784 18.2066 8.777 18.2066 8.4052V5.71251H15.4678C15.0896 5.71251 14.783 5.41111 14.783 5.03931C14.783 4.66751 15.0896 4.36611 15.4678 4.36611H18.2066V1.6732C18.2066 1.3014 18.5132 1 18.8914 1C19.2696 1 19.5761 1.3014 19.5761 1.6732V4.36611H22.3153C22.6934 4.36611 23 4.66751 23 5.03931C23 5.41111 22.6934 5.71251 22.3153 5.71251H19.5761V8.4052C19.5761 8.777 19.2696 9.0784 18.8914 9.0784Z" fill="#ffffff"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5002 11.5094C19.8949 11.5094 20.281 11.4736 20.6555 11.4051C20.7505 11.9558 20.8 12.5221 20.8 13.1C20.8 18.5676 16.3676 23 10.9 23C5.43238 23 1 18.5676 1 13.1C1 7.63238 5.43238 3.2 10.9 3.2C11.7973 3.2 12.6666 3.31937 13.4931 3.54308C13.3177 4.11118 13.2234 4.71396 13.2234 5.33841C13.2234 8.74655 16.0336 11.5094 19.5002 11.5094ZM11.1308 21.4653C13.2927 21.4653 15.2551 20.6258 16.6993 19.2603C15.7939 17.0769 13.6417 15.5412 11.1308 15.5412C8.61988 15.5412 6.46768 17.0769 5.56225 19.2603C7.00643 20.6258 8.96888 21.4653 11.1308 21.4653ZM11.2799 7.81768C9.78854 7.9515 8.62035 9.18434 8.62035 10.6854C8.62035 12.2759 9.93179 13.5652 11.5495 13.5652C12.6276 13.5652 13.5696 12.9927 14.0781 12.1401C12.6655 11.1035 11.6462 9.57751 11.2799 7.81768Z" fill="#ffffff"/>
-</svg>
--- a/src/icons/AlertTriangleFilled.svg
+++ b/src/icons/AlertTriangleFilled.svg
@@ -1,3 +0,0 @@
-<svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2.47012 18H17.5301C19.0701 18 20.0301 16.33 19.2601 15L11.7301 1.98999C10.9601 0.659993 9.04012 0.659993 8.27012 1.98999L0.740121 15C-0.0298788 16.33 0.930121 18 2.47012 18ZM10.0001 11C9.45012 11 9.00012 10.55 9.00012 9.99999V7.99999C9.00012 7.44999 9.45012 6.99999 10.0001 6.99999C10.5501 6.99999 11.0001 7.44999 11.0001 7.99999V9.99999C11.0001 10.55 10.5501 11 10.0001 11ZM11.0001 15H9.00012V13H11.0001V15Z" fill="#737D8C"/>
-</svg>
--- a/src/icons/ArrowLeft.svg
+++ b/src/icons/ArrowLeft.svg
@@ -1,3 +0,0 @@
-<svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M18.6663 8H1.33301M1.33301 8L7.83301 14.5M1.33301 8L7.83301 1.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
--- a/src/icons/DisableVideo.svg
+++ b/src/icons/DisableVideo.svg
@@ -1,6 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.290472 1.37627C0.677768 0.985743 1.3057 0.985743 1.69299 1.37627L16.569 16.3762C16.9563 16.7668 16.9563 17.3999 16.569 17.7904C16.1817 18.181 15.5538 18.181 15.1665 17.7904L0.290472 2.79048C-0.096824 2.39995 -0.096824 1.76679 0.290472 1.37627Z" fill="#394049"/>
-<path d="M0.597515 5.19186C0.323238 5.646 0.165249 6.17941 0.165249 6.75001V14.0833C0.165249 15.7402 1.49729 17.0833 3.14045 17.0833H12.363L0.639137 5.2371C0.624608 5.22242 0.610733 5.20733 0.597515 5.19186Z" fill="#394049"/>
-<path d="M14.2148 6.75002V11.9031L6.14598 3.75002H11.2396C12.8828 3.75002 14.2148 5.09317 14.2148 6.75002Z" fill="#394049"/>
-<path d="M18.3887 5.88312L15.8677 7.91669V12.9167L18.3887 14.9503C19.038 15.4741 19.9999 15.0079 19.9999 14.1694V6.66399C19.9999 5.82548 19.038 5.35931 18.3887 5.88312Z" fill="#394049"/>
-</svg>
--- a/src/icons/Freedom.svg
+++ b/src/icons/Freedom.svg
@@ -1,6 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="13" y="11" width="5" height="5" rx="1.16667" fill="white"/>
-<rect x="13" y="5" width="5" height="5" rx="1.16667" fill="white"/>
-<rect x="7" y="5" width="5" height="5" rx="1.16667" fill="white"/>
-<rect x="4" y="11" width="8" height="8" rx="1.14286" fill="white"/>
-</svg>
--- a/src/icons/Hangup.svg
+++ b/src/icons/Hangup.svg
@@ -1,4 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.68883 13.3012C7.63969 14.3278 9.92871 16.1054 10.5526 16.4702C10.5895 16.4917 10.6317 16.5168 10.679 16.5449C11.631 17.1109 14.6141 18.8842 16.7875 17.2246C18.4714 15.9389 17.9239 14.4926 17.3571 14.0626C16.9691 13.7608 15.8258 12.9288 14.7502 12.1795C13.694 11.4436 13.1053 12.0332 12.7073 12.4318C12.7 12.4391 12.6927 12.4464 12.6856 12.4536L11.8848 13.2544C11.6808 13.4583 11.3706 13.3839 11.0735 13.1505C10.0074 12.3385 9.22308 11.555 8.8307 11.1626L8.82739 11.1593C8.43506 10.767 7.66123 9.99241 6.84932 8.92627C6.61592 8.62914 6.54149 8.31893 6.74542 8.11501L7.54622 7.31421C7.55341 7.30702 7.56067 7.29977 7.568 7.29245C7.96663 6.89444 8.55618 6.30581 7.82033 5.24958C7.07097 4.17394 6.239 3.03068 5.93717 2.64265C5.50723 2.07588 4.06088 1.52836 2.77514 3.21225C1.11556 5.38572 2.88891 8.36878 3.45484 9.32078C3.48293 9.36803 3.50805 9.41028 3.52962 9.44717C3.8944 10.0711 5.66224 12.3503 6.68883 13.3012Z" fill="white"/>
-<path d="M17.2473 2.56504C17.4497 2.3595 17.4497 2.02626 17.2473 1.82072C17.0448 1.61518 16.7166 1.61518 16.5142 1.82072L14.1663 4.20452L11.8185 1.82072C11.6161 1.61518 11.2878 1.61518 11.0854 1.82072C10.883 2.02626 10.883 2.3595 11.0854 2.56504L13.4332 4.94884L10.9848 7.43475C10.7824 7.64029 10.7824 7.97354 10.9848 8.17908C11.1873 8.38462 11.5155 8.38462 11.7179 8.17908L14.1663 5.69316L16.6148 8.17907C16.8172 8.38461 17.1454 8.38461 17.3478 8.17907C17.5503 7.97354 17.5503 7.64029 17.3478 7.43475L14.8994 4.94884L17.2473 2.56504Z" fill="white"/>
-</svg>
--- a/src/icons/LockOff.svg
+++ b/src/icons/LockOff.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.00003 14.6665C3.63336 14.6665 3.31947 14.5359 3.05836 14.2748C2.79725 14.0137 2.6667 13.6998 2.6667 13.3332V6.6665C2.6667 6.29984 2.79725 5.98595 3.05836 5.72484C3.19921 5.58399 3.35541 5.48113 3.52697 5.41626L0.888621 2.77791C0.628272 2.51756 0.628272 2.09545 0.888622 1.8351C1.14897 1.57475 1.57108 1.57475 1.83143 1.8351L4.6667 4.67037V4.66267L13.3334 13.3293V13.3332L13.3334 13.337L14.1648 14.1685C14.4251 14.4288 14.4251 14.8509 14.1648 15.1113C13.9044 15.3716 13.4823 15.3716 13.222 15.1113L12.6247 14.514C12.437 14.6157 12.2288 14.6665 12 14.6665H4.00003Z" fill="#808994"/>
+<path d="M13.3334 11.4437V6.6665C13.3334 6.29984 13.2028 5.98595 12.9417 5.72484C12.6806 5.46373 12.3667 5.33317 12 5.33317H11.3334V3.99984C11.3334 3.07762 11.0084 2.2915 10.3584 1.6415C9.70836 0.991504 8.92225 0.666504 8.00003 0.666504C7.07781 0.666504 6.2917 0.991504 5.6417 1.6415C5.25683 2.02637 4.9859 2.45896 4.82892 2.93927L6.00003 4.11038V3.99984C6.00003 3.44428 6.19447 2.97206 6.58336 2.58317C6.97225 2.19428 7.44447 1.99984 8.00003 1.99984C8.55559 1.99984 9.02781 2.19428 9.4167 2.58317C9.80558 2.97206 10 3.44428 10 3.99984V5.33317H7.22282L13.3334 11.4437Z" fill="#808994"/>
+</svg>
--- a/src/icons/LogoMark.svg
+++ b/src/icons/LogoMark.svg
@@ -0,0 +1,11 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Logo Mark">
+<rect width="47.86" height="48" rx="23.93" fill="#0DBD8B"/>
+<g id="Union">
+<path d="M21.3075 9.42871C20.3396 9.42871 19.5549 10.214 19.5549 11.1828C19.5549 12.1516 20.3396 12.9369 21.3075 12.9369C25.9321 12.9369 29.6811 16.689 29.6811 21.3175C29.6811 22.2863 30.4657 23.0716 31.4337 23.0716C32.4016 23.0716 33.1863 22.2863 33.1863 21.3175C33.1863 14.7515 27.868 9.42871 21.3075 9.42871Z" fill="white"/>
+<path d="M38.4591 21.3174C38.4591 20.3486 37.6745 19.5633 36.7065 19.5633C35.7386 19.5633 34.9539 20.3486 34.9539 21.3174C34.9539 25.9459 31.2049 29.698 26.5804 29.698C25.6124 29.698 24.8277 30.4833 24.8277 31.4521C24.8277 32.4209 25.6124 33.2062 26.5804 33.2062C33.1408 33.2062 38.4591 27.8834 38.4591 21.3174Z" fill="white"/>
+<path d="M28.3329 36.8173C28.3329 37.786 27.5482 38.5714 26.5803 38.5714C20.0198 38.5714 14.7015 33.2486 14.7015 26.6826C14.7015 25.7138 15.4862 24.9285 16.4541 24.9285C17.4221 24.9285 18.2067 25.7138 18.2067 26.6826C18.2067 31.3111 21.9557 35.0632 26.5803 35.0632C27.5482 35.0632 28.3329 35.8485 28.3329 36.8173Z" fill="white"/>
+<path d="M9.40112 26.6827C9.40112 27.6514 10.1858 28.4368 11.1537 28.4368C12.1217 28.4368 12.9064 27.6514 12.9064 26.6827C12.9064 22.0542 16.6553 18.3021 21.2799 18.3021C22.2478 18.3021 23.0325 17.5167 23.0325 16.548C23.0325 15.5792 22.2478 14.7939 21.2799 14.7939C14.7194 14.7939 9.40112 20.1167 9.40112 26.6827Z" fill="white"/>
+</g>
+</g>
+</svg>
--- a/src/icons/LogoType.svg
+++ b/src/icons/LogoType.svg
@@ -0,0 +1,17 @@
+<svg width="160" height="22" viewBox="0 0 160 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Logo Type">
+<g id="Vector">
+<path d="M14.8673 15.1575H3.39742C3.53293 16.3508 3.96849 17.3036 4.70411 18.0157C5.43974 18.7087 6.40766 19.0551 7.60789 19.0551C8.40159 19.0551 9.11785 18.8626 9.75668 18.4777C10.3955 18.0927 10.8504 17.5731 11.1215 16.9186H14.606C14.1414 18.4392 13.2702 19.671 11.9926 20.6142C10.7343 21.5381 9.24368 22 7.52078 22C5.27519 22 3.45549 21.259 2.06168 19.7769C0.687227 18.2948 0 16.4182 0 14.147C0 11.9335 0.696906 10.0761 2.09072 8.5748C3.48453 7.07349 5.28487 6.32283 7.49174 6.32283C9.69861 6.32283 11.4796 7.06387 12.8347 8.54593C14.2091 10.0087 14.8964 11.8565 14.8964 14.0892L14.8673 15.1575ZM7.49174 9.12336C6.40766 9.12336 5.50749 9.44095 4.79123 10.0761C4.07496 10.7113 3.62972 11.5582 3.45549 12.6168H11.4699C11.315 11.5582 10.8892 10.7113 10.1922 10.0761C9.49534 9.44095 8.59517 9.12336 7.49174 9.12336Z" fill="currentColor"/>
+<path d="M17.2743 17.1785V0H20.7298V17.2362C20.7298 18.0061 21.1557 18.3911 22.0074 18.3911L22.6172 18.3622V21.6247C22.2881 21.6824 21.9397 21.7113 21.5719 21.7113C20.0813 21.7113 18.9875 21.336 18.2906 20.5853C17.6131 19.8346 17.2743 18.699 17.2743 17.1785Z" fill="currentColor"/>
+<path d="M38.71 15.1575H27.2401C27.3756 16.3508 27.8112 17.3036 28.5468 18.0157C29.2824 18.7087 30.2504 19.0551 31.4506 19.0551C32.2443 19.0551 32.9606 18.8626 33.5994 18.4777C34.2382 18.0927 34.6931 17.5731 34.9642 16.9186H38.4487C37.9841 18.4392 37.113 19.671 35.8353 20.6142C34.577 21.5381 33.0864 22 31.3635 22C29.1179 22 27.2982 21.259 25.9044 19.7769C24.5299 18.2948 23.8427 16.4182 23.8427 14.147C23.8427 11.9335 24.5396 10.0761 25.9334 8.5748C27.3272 7.07349 29.1276 6.32283 31.3344 6.32283C33.5413 6.32283 35.3223 7.06387 36.6774 8.54593C38.0518 10.0087 38.7391 11.8565 38.7391 14.0892L38.71 15.1575ZM31.3344 9.12336C30.2504 9.12336 29.3502 9.44095 28.6339 10.0761C27.9177 10.7113 27.4724 11.5582 27.2982 12.6168H35.3126C35.1577 11.5582 34.7319 10.7113 34.035 10.0761C33.3381 9.44095 32.4379 9.12336 31.3344 9.12336Z" fill="currentColor"/>
+<path d="M54.3001 13.0499V21.6535H50.8446V12.6745C50.8446 10.4033 49.8961 9.26772 47.9989 9.26772C46.9729 9.26772 46.1502 9.59493 45.5307 10.2493C44.9306 10.9038 44.6306 11.7988 44.6306 12.9344V21.6535H41.1751V6.66929H44.3692V8.66142C44.737 7.98775 45.2984 7.42957 46.0534 6.98688C46.8084 6.54418 47.7473 6.32283 48.8701 6.32283C50.9608 6.32283 52.4707 7.11199 53.4 8.69029C54.6776 7.11199 56.3812 6.32283 58.5106 6.32283C60.2722 6.32283 61.6273 6.87139 62.5759 7.9685C63.5244 9.04637 63.9987 10.4707 63.9987 12.2415V21.6535H60.5432V12.6745C60.5432 10.4033 59.5947 9.26772 57.6975 9.26772C56.6522 9.26772 55.8198 9.60455 55.2003 10.2782C54.6002 10.9326 54.3001 11.8565 54.3001 13.0499Z" fill="currentColor"/>
+<path d="M81.1834 15.1575H69.7135C69.849 16.3508 70.2846 17.3036 71.0202 18.0157C71.7558 18.7087 72.7237 19.0551 73.924 19.0551C74.7177 19.0551 75.4339 18.8626 76.0728 18.4777C76.7116 18.0927 77.1665 17.5731 77.4375 16.9186H80.9221C80.4575 18.4392 79.5863 19.671 78.3087 20.6142C77.0504 21.5381 75.5598 22 73.8369 22C71.5913 22 69.7716 21.259 68.3778 19.7769C67.0033 18.2948 66.3161 16.4182 66.3161 14.147C66.3161 11.9335 67.013 10.0761 68.4068 8.5748C69.8006 7.07349 71.601 6.32283 73.8078 6.32283C76.0147 6.32283 77.7957 7.06387 79.1508 8.54593C80.5252 10.0087 81.2124 11.8565 81.2124 14.0892L81.1834 15.1575ZM73.8078 9.12336C72.7237 9.12336 71.8236 9.44095 71.1073 10.0761C70.391 10.7113 69.9458 11.5582 69.7716 12.6168H77.786C77.6311 11.5582 77.2052 10.7113 76.5083 10.0761C75.8114 9.44095 74.9113 9.12336 73.8078 9.12336Z" fill="currentColor"/>
+<path d="M86.8426 6.66929V8.66142C87.191 8.007 87.7621 7.45844 88.5558 7.01575C89.3689 6.55381 90.3465 6.32283 91.4886 6.32283C93.2696 6.32283 94.6441 6.86177 95.612 7.93963C96.5993 9.0175 97.0929 10.4514 97.0929 12.2415V21.6535H93.6374V12.6745C93.6374 11.6159 93.3858 10.7883 92.8824 10.1916C92.3985 9.57568 91.6532 9.26772 90.6465 9.26772C89.5431 9.26772 88.672 9.59493 88.0331 10.2493C87.4137 10.9038 87.1039 11.8084 87.1039 12.9633V21.6535H83.6484V6.66929H86.8426Z" fill="currentColor"/>
+<path d="M107.185 18.5932V21.5669C106.759 21.6824 106.159 21.7402 105.384 21.7402C102.442 21.7402 100.971 20.2677 100.971 17.3228V9.41208H98.6766V6.66929H100.971V2.77165H104.426V6.66929H107.243V9.41208H104.426V16.9764C104.426 18.1505 104.987 18.7375 106.11 18.7375L107.185 18.5932Z" fill="currentColor"/>
+<path d="M116.115 18.9881C114.474 17.2035 113.653 14.9429 113.653 12.2064C113.653 9.4699 114.474 7.21782 116.115 5.45015C117.773 3.66548 119.953 2.77314 122.654 2.77314C124.876 2.77314 126.756 3.38503 128.295 4.6088C129.833 5.83258 130.816 7.47277 131.244 9.52939H129.269C128.91 7.99967 128.132 6.7844 126.936 5.88357C125.739 4.98273 124.312 4.53232 122.654 4.53232C120.534 4.53232 118.824 5.23769 117.525 6.64842C116.243 8.05916 115.602 9.91182 115.602 12.2064C115.602 14.501 116.243 16.3536 117.525 17.7644C118.824 19.1751 120.534 19.8805 122.654 19.8805C124.312 19.8805 125.739 19.4301 126.936 18.5292C128.132 17.6284 128.91 16.4131 129.269 14.8834H131.244C130.816 16.94 129.833 18.5802 128.295 19.804C126.756 21.0278 124.876 21.6397 122.654 21.6397C119.953 21.6397 117.773 20.7558 116.115 18.9881Z" fill="currentColor"/>
+<path d="M143.174 15.0874C140.832 15.0874 139.233 15.1384 138.379 15.2403C137.541 15.3253 136.926 15.4698 136.532 15.6738C135.831 16.0647 135.481 16.6936 135.481 17.5604C135.481 19.2261 136.473 20.0589 138.456 20.0589C139.977 20.0589 141.139 19.719 141.943 19.0391C142.763 18.3593 143.174 17.4499 143.174 16.3111V15.0874ZM138.25 21.5632C136.763 21.5632 135.626 21.2062 134.84 20.4924C134.071 19.7615 133.686 18.8012 133.686 17.6114C133.686 16.8295 133.891 16.1327 134.301 15.5208C134.729 14.9089 135.31 14.4585 136.045 14.1695C136.661 13.9316 137.455 13.7786 138.43 13.7106C139.404 13.6256 140.986 13.5831 143.174 13.5831V12.7418C143.174 10.6002 141.943 9.52939 139.481 9.52939C137.361 9.52939 136.131 10.3877 135.789 12.1044H134.019C134.207 10.8466 134.746 9.84383 135.635 9.09597C136.541 8.34811 137.849 7.97418 139.558 7.97418C141.387 7.97418 142.746 8.3991 143.635 9.24894C144.541 10.0988 144.994 11.2716 144.994 12.7673V21.2572H143.251V19.3706C142.345 20.8323 140.678 21.5632 138.25 21.5632Z" fill="currentColor"/>
+<path d="M149.358 18.4018V2.13576H151.178V18.1978C151.178 18.7247 151.264 19.0901 151.435 19.2941C151.623 19.498 151.956 19.6 152.435 19.6L152.948 19.549V21.2062C152.657 21.2572 152.341 21.2827 151.999 21.2827C150.238 21.2827 149.358 20.3224 149.358 18.4018Z" fill="currentColor"/>
+<path d="M155.944 18.4018V2.13576H157.764V18.1978C157.764 18.7247 157.85 19.0901 158.021 19.2941C158.209 19.498 158.542 19.6 159.021 19.6L159.534 19.549V21.2062C159.243 21.2572 158.927 21.2827 158.585 21.2827C156.824 21.2827 155.944 20.3224 155.944 18.4018Z" fill="currentColor"/>
+</g>
+</g>
+</svg>
--- a/src/icons/Screenshare.svg
+++ b/src/icons/Screenshare.svg
@@ -1,3 +0,0 @@
-<svg width="24" height="17" viewBox="0 0 24 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3.75 0.5C2.09315 0.5 0.75 1.84314 0.75 3.5V13.5713C0.75 15.2282 2.09315 16.5713 3.75 16.5713H20.2499C21.9067 16.5713 23.2499 15.2282 23.2499 13.5713V3.5C23.2499 1.84315 21.9067 0.5 20.2499 0.5H3.75ZM12.7998 11.9106C12.7998 12.3524 12.4416 12.7106 11.9998 12.7106C11.558 12.7106 11.1998 12.3524 11.1998 11.9106L11.1998 7.09206L9.43158 8.86029C9.11916 9.17271 8.61263 9.17271 8.30021 8.86029C7.98779 8.54787 7.98779 8.04134 8.30021 7.72892L11.4341 4.59501C11.7465 4.28259 12.2531 4.28259 12.5655 4.59501L15.6994 7.72892C16.0118 8.04134 16.0118 8.54787 15.6994 8.86029C15.387 9.17271 14.8805 9.17271 14.568 8.86029L12.7998 7.09206L12.7998 11.9106Z" fill="white"/>
-</svg>
--- a/src/icons/Spotlight.svg
+++ b/src/icons/Spotlight.svg
@@ -1,3 +0,0 @@
-<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 17.8689V2.51551C4 2.06669 4.53728 1.83452 4.86986 2.13591C8.18767 5.14263 10.9111 7.48209 13.102 9.36399L13.102 9.36403C18.3295 13.8544 20.5243 15.7398 20.5243 17.8689C20.5243 19.4181 19.6538 20.0153 18.1044 20.79C16.5549 21.5648 14.4534 22 12.2621 22C10.0709 22 7.96938 21.5648 6.41992 20.79C4.87047 20.0153 4 18.9646 4 17.8689ZM12.2621 20.9673C16.2548 20.9673 19.4915 19.5801 19.4915 17.869C19.4915 16.1578 16.2548 14.7707 12.2621 14.7707C8.26947 14.7707 5.03277 16.1578 5.03277 17.869C5.03277 19.5801 8.26947 20.9673 12.2621 20.9673ZM16.2618 8.67876C16.1718 8.64549 16.1718 8.51831 16.2618 8.48504L17.84 7.90103C17.8683 7.89057 17.8906 7.86828 17.901 7.84001L18.4851 6.26174C18.5183 6.17182 18.6455 6.17182 18.6788 6.26174L19.2628 7.84001C19.2733 7.86828 19.2955 7.89057 19.3238 7.90103L20.9021 8.48504C20.992 8.51831 20.992 8.64549 20.9021 8.67876L19.3238 9.26277C19.2955 9.27323 19.2733 9.29552 19.2628 9.32379L18.6788 10.9021C18.6455 10.992 18.5183 10.992 18.4851 10.9021L17.901 9.32379C17.8906 9.29552 17.8683 9.27323 17.84 9.26277L16.2618 8.67876ZM13.2618 5.45232C13.1718 5.48559 13.1718 5.61276 13.2618 5.64604L14.0862 5.95111C14.1145 5.96157 14.1368 5.98386 14.1472 6.01213L14.4523 6.83657C14.4856 6.92649 14.6127 6.92649 14.646 6.83657L14.9511 6.01213C14.9615 5.98386 14.9838 5.96157 15.0121 5.95111L15.8365 5.64603C15.9265 5.61276 15.9265 5.48559 15.8365 5.45232L15.0121 5.14725C14.9838 5.13679 14.9615 5.1145 14.9511 5.08623L14.646 4.26178C14.6127 4.17187 14.4856 4.17187 14.4523 4.26178L14.1472 5.08623C14.1368 5.1145 14.1145 5.13679 14.0862 5.14725L13.2618 5.45232Z" fill="white"/>
-</svg>
--- a/Show More
+++ b/Show More