Fix crash in room without create state event

Fix join with alias (#533 )
Remove forget room on leave
2022-05-12 13:19:34 +05:30 · 2022-05-11 20:56:49 +05:30 · 2022-05-11 20:53:21 +05:30 · 2022-05-11 20:25:54 +05:30 · 2022-05-08 13:52:05 +05:30 · 2022-05-08 13:23:31 +05:30
110 changed files with 4228 additions and 1869 deletions
@@ -1,7 +1,5 @@
 name: 🐞 Bug Report
-title: '[bug] '
 description: Report a bug
-labels: 'type: bug'

 body:
  - type: markdown
@@ -51,7 +49,7 @@ body:
      render: shell
    validations:
      required: true
-  
+
  - type: textarea
    id: context
    attributes:
@@ -1,7 +1,5 @@
 name: 💡 Feature Request
-title: '[feat] '
 description: Suggest an idea
-labels: 'type: feature'

 body:
  - type: textarea
@@ -27,7 +25,7 @@ body:
    attributes:
      label: Alternatives considered
      description: "Any alternative solutions you've considered"
-  
+
  - type: textarea
    id: context
    attributes:
@@ -1,28 +1,30 @@
 # Docs: <https://docs.github.com/en/code-security/supply-chain-security/keeping-your-dependencies-updated-automatically/customizing-dependency-updates>

 version: 2
-
 updates:
-  - package-ecosystem: github-actions
+  - package-ecosystem: npm
    directory: /
-    schedule: 
+    schedule:
      interval: weekly
      day: "tuesday"
      time: "01:00"
      timezone: "Asia/Kolkata"
+    open-pull-requests-limit: 15
+
+  - package-ecosystem: github-actions
+    directory: /
+    schedule:
+      interval: weekly
+      day: "tuesday"
+      time: "01:00"
+      timezone: "Asia/Kolkata"
+    open-pull-requests-limit: 5

  - package-ecosystem: docker
    directory: /
-    schedule: 
-      interval: weekly
-      day: "tuesday"
-      time: "01:00"
-      timezone: "Asia/Kolkata"
-
-  - package-ecosystem: npm
-    directory: /
-    schedule: 
+    schedule:
      interval: weekly
      day: "tuesday"
      time: "01:00"
      timezone: "Asia/Kolkata"
+    open-pull-requests-limit: 5
@@ -10,8 +10,8 @@ jobs:
    env:
      PR_NUMBER: ${{github.event.number}}
    steps:
-      - name: Check out the repo
-        uses: actions/checkout@v3.0.0
+      - name: Checkout repository
+        uses: actions/checkout@v3.0.2
      - name: Build app
        run: npm ci && npm run build
      - name: Upload artifact
@@ -32,8 +32,3 @@ jobs:
          name: pr.json
          path: pr.json
          retention-days: 1
-      - name: Build Docker image
-        uses: docker/build-push-action@v2.10.0
-        with:
-          context: .
-          push: false
@@ -13,7 +13,7 @@ jobs:
      # There's a 'download artifact' action but it hasn't been updated for the
      # workflow_run action (https://github.com/actions/download-artifact/issues/60)
      # so instead we get this mess:
-      - name: 'Download artifact'
+      - name: Download artifact
        uses: actions/github-script@v6.0.0
        with:
          script: |
@@ -46,7 +46,7 @@ jobs:
            fs.writeFileSync('${{github.workspace}}/pr.json.zip', Buffer.from(download.data));
      - name: Extract Artifacts
        run: unzip -d dist previewbuild.zip && rm previewbuild.zip && unzip pr.json.zip && rm pr.json.zip
-      - name: 'Read PR Info'
+      - name: Read PR Info
        id: readctx
        uses: actions/github-script@v6.0.0
        with:
@@ -56,7 +56,7 @@ jobs:
            console.log(`::set-output name=prnumber::${pr.number}`);
      - name: Deploy to Netlify
        id: netlify
-        uses: nwtgck/actions-netlify@v1.2.3
+        uses: nwtgck/actions-netlify@b7c1504e00c6b8a249d1848cc1b522a4865eed99
        with:
          publish-dir: dist
          deploy-message: "Deploy from GitHub Actions"
@@ -68,7 +68,7 @@ jobs:
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE3_ID }}
        timeout-minutes: 1
      - name: Edit PR Description
-        uses: velas/pr-description@v1.0.1
+        uses: Beakyn/gha-comment-pull-request@2167a7aee24f9e61ce76a23039f322e49a990409
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
@@ -0,0 +1,21 @@
+name: 'Docker check'
+
+on:
+  pull_request:
+    paths:
+      - 'Dockerfile'
+      - '.github/workflows/docker-pr.yml'
+
+jobs:
+  docker-build:
+    runs-on: ubuntu-latest
+    env:
+      PR_NUMBER: ${{github.event.number}}
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3.0.2
+      - name: Build Docker image
+        uses: docker/build-push-action@v2.10.0
+        with:
+          context: .
+          push: false
@@ -6,13 +6,15 @@ on:
       - dev

 jobs:
-  deploy:
+  deploy-to-netlify:
    name: 'Deploy'
    runs-on: ubuntu-latest

    steps:
-      - uses: actions/checkout@v3.0.0
-      - uses: jsmrcaga/action-netlify-deploy@v1.7.2
+      - name: Checkout repository
+        uses: actions/checkout@v3.0.2
+      - name: Build and deploy to Netlify
+        uses: jsmrcaga/action-netlify-deploy@fb6a5f936a4b06a8f7793e69fc5a022ffe39807a
        with:
          install_command: "npm ci"
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
@@ -9,10 +9,10 @@ jobs:
    name: 'Deploy to Netlify'
    runs-on: ubuntu-latest
    steps:
-      - name: Check out the repo
-        uses: actions/checkout@v3.0.0
+      - name: Checkout repository
+        uses: actions/checkout@v3.0.2
      - name: Build and deploy to Netlify
-        uses: jsmrcaga/action-netlify-deploy@v1.7.2
+        uses: jsmrcaga/action-netlify-deploy@fb6a5f936a4b06a8f7793e69fc5a022ffe39807a
        with:
          install_command: "npm ci"
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
@@ -25,18 +25,26 @@ jobs:
        run: echo ::set-output name=tag::${GITHUB_REF#refs/*/}
      - name: Create tar.gz
        run: tar -czvf cinny-${{ steps.vars.outputs.tag }}.tar.gz dist
+      - name: Sign tar.gz
+        uses: actionhippie/gpgsign@4e28208b142cae93e1582401dcda1cf79e4f72c0
+        with:
+          private_key: ${{ secrets.GNUPG_KEY }}
+          passphrase: ${{ secrets.GNUPG_PASSPHRASE }}
+          detach_sign: true
+          files: cinny-${{ steps.vars.outputs.tag }}.tar.gz
      - name: Upload tagged release
-        uses: softprops/action-gh-release@v1
+        uses: softprops/action-gh-release@1e07f4398721186383de40550babbdf2b84acfc5
        with:
          files: |
            cinny-${{ steps.vars.outputs.tag }}.tar.gz
+            cinny-${{ steps.vars.outputs.tag }}.tar.gz.asc

  push_to_dockerhub:
    name: Push Docker image to Docker Hub
    runs-on: ubuntu-latest
    steps:
-      - name: Check out the repo
-        uses: actions/checkout@v3.0.0
+      - name: Checkout repository
+        uses: actions/checkout@v3.0.2
      - name: Login to Docker Hub
        uses: docker/login-action@v1.14.1
        with:
@@ -44,7 +52,7 @@ jobs:
          password: ${{ secrets.DOCKER_PASSWORD }}
      - name: Extract metadata (tags, labels) for Docker
        id: meta
-        uses: docker/metadata-action@v3.6.2
+        uses: docker/metadata-action@v3.8.0
        with:
          images: ajbura/cinny
      - name: Build and push Docker image
@@ -1,5 +1,5 @@
 ## Builder
-FROM node:17.7.1-alpine3.15 as builder
+FROM node:17.9.0-alpine3.15 as builder

 WORKDIR /src

@@ -1,6 +1,6 @@
 MIT License

-Copyright (c) 2021 Ajay Bura (ajbura) and other contributors
+Copyright (c) 2021 Ajay Bura (ajbura)

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -1,5 +1,10 @@
 # Cinny

+[![Star](https://img.shields.io/github/stars/ajbura/cinny)](https://github.com/ajbura/cinny/tree/dev)
+[![Chat](https://img.shields.io/badge/chat-on%20matrix-orange)](https://matrix.to/#/#cinny:matrix.org)
+[![Twitter](https://img.shields.io/twitter/url?url=https://twitter.com/@cinnyapp)](https://twitter.com/@cinnyapp)
+[![Support](https://img.shields.io/badge/sponsor-open%20collective-blue.svg)](https://opencollective.com/cinny)
+
 ## Table of Contents

 - [About](#about)
@@ -11,7 +16,7 @@

 Cinny is a [Matrix](https://matrix.org) client focusing primarily on simple, elegant and secure interface.

-![preview](https://github.com/ajbura/cinny-site/blob/master/assets/preview-light.png)
+![preview](https://github.com/cinnyapp/cinny-site/blob/main/assets/preview-light.png)

 ## Building and Running

@@ -59,7 +64,7 @@ To set default Homeserver on login and register page, place a customized [`confi

 ## License

-Copyright (c) 2021 Ajay Bura (ajbura) and contributors
+Copyright (c) 2021 Ajay Bura (ajbura)

 Code licensed under the MIT License: <http://opensource.org/licenses/MIT>

@@ -1,6 +1,6 @@
 {
  "name": "cinny",
-  "version": "1.8.2",
+  "version": "2.0.0",
  "description": "Yet another matrix client",
  "main": "index.js",
  "engines": {
@@ -15,8 +15,8 @@
  "author": "Ajay Bura",
  "license": "MIT",
  "dependencies": {
-    "@fontsource/inter": "^4.5.5",
-    "@fontsource/roboto": "^4.5.3",
+    "@fontsource/inter": "^4.5.10",
+    "@fontsource/roboto": "^4.5.5",
    "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz",
    "@tippyjs/react": "^4.2.6",
    "babel-polyfill": "^6.26.0",
@@ -26,32 +26,34 @@
    "file-saver": "^2.0.5",
    "flux": "^4.0.3",
    "formik": "^2.2.9",
-    "html-react-parser": "^1.4.8",
+    "html-react-parser": "^1.4.12",
+    "katex": "^0.15.3",
    "linkifyjs": "^2.1.9",
-    "matrix-js-sdk": "^15.6.0",
+    "matrix-js-sdk": "^17.1.0",
    "micromark": "^3.0.10",
    "micromark-extension-gfm": "^2.0.1",
+    "micromark-extension-math": "^2.0.2",
    "micromark-util-chunked": "^1.0.0",
    "micromark-util-resolve-all": "^1.0.0",
    "micromark-util-symbol": "^1.0.1",
    "prop-types": "^15.8.1",
    "react": "^17.0.2",
    "react-autosize-textarea": "^7.1.0",
-    "react-dnd": "^15.1.1",
-    "react-dnd-html5-backend": "^15.1.2",
+    "react-dnd": "^15.1.2",
+    "react-dnd-html5-backend": "^15.1.3",
    "react-dom": "^17.0.2",
    "react-google-recaptcha": "^2.1.0",
-    "react-modal": "^3.14.4",
+    "react-modal": "^3.15.1",
    "sanitize-html": "^2.7.0",
    "tippy.js": "^6.3.7",
-    "twemoji": "^14.0.1"
+    "twemoji": "^14.0.2"
  },
  "devDependencies": {
-    "@babel/core": "^7.17.7",
-    "@babel/preset-env": "^7.16.11",
+    "@babel/core": "^7.17.10",
+    "@babel/preset-env": "^7.17.10",
    "@babel/preset-react": "^7.16.7",
    "assert": "^2.0.0",
-    "babel-loader": "^8.2.2",
+    "babel-loader": "^8.2.5",
    "browserify-fs": "^1.0.0",
    "buffer": "^6.0.3",
    "clean-webpack-plugin": "^4.0.0",
@@ -59,27 +61,27 @@
    "crypto-browserify": "^3.12.0",
    "css-loader": "^6.7.1",
    "css-minimizer-webpack-plugin": "^3.4.1",
-    "eslint": "^8.11.0",
+    "eslint": "^8.14.0",
    "eslint-config-airbnb": "^19.0.4",
-    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-react-hooks": "^4.5.0",
    "favicons": "^6.2.2",
    "favicons-webpack-plugin": "^5.0.2",
    "html-loader": "^3.1.0",
    "html-webpack-plugin": "^5.3.1",
    "mini-css-extract-plugin": "^2.6.0",
    "path-browserify": "^1.0.1",
-    "sass": "^1.49.9",
+    "sass": "^1.51.0",
    "sass-loader": "^12.6.0",
    "stream-browserify": "^3.0.0",
    "style-loader": "^3.3.1",
    "url": "^0.11.0",
    "util": "^0.12.4",
-    "webpack": "^5.70.0",
+    "webpack": "^5.72.0",
    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.7.4",
+    "webpack-dev-server": "^4.9.0",
    "webpack-merge": "^5.7.3"
  }
 }
@@ -18,5 +18,11 @@
 </head>
 <body id="appBody">
    <div id="root"></div>
+    <audio id="notificationSound">
+        <source src="./sound/notification.ogg" type="audio/ogg" />
+    </audio>
+    <audio id="inviteSound">
+        <source src="./sound/invite.ogg" type="audio/ogg" />
+    </audio>
 </body>
 </html>
@@ -11,11 +11,12 @@ const IconButton = React.forwardRef(({
  variant, size, type,
  tooltip, tooltipPlacement, src,
  onClick, tabIndex, disabled, isImage,
+  className,
 }, ref) => {
  const btn = (
    <button
      ref={ref}
-      className={`ic-btn ic-btn-${variant}`}
+      className={`ic-btn ic-btn-${variant} ${className}`}
      onMouseUp={(e) => blurOnBubbling(e, `.ic-btn-${variant}`)}
      onClick={onClick}
      // eslint-disable-next-line react/button-has-type
@@ -47,6 +48,7 @@ IconButton.defaultProps = {
  tabIndex: 0,
  disabled: false,
  isImage: false,
+  className: '',
 };

 IconButton.propTypes = {
@@ -60,6 +62,7 @@ IconButton.propTypes = {
  tabIndex: PropTypes.number,
  disabled: PropTypes.bool,
  isImage: PropTypes.bool,
+  className: PropTypes.string,
 };

 export default IconButton;
@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './InfoCard.scss';
+
+import Text from '../text/Text';
+import RawIcon from '../system-icons/RawIcon';
+import IconButton from '../button/IconButton';
+
+import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
+
+function InfoCard({
+  className, style,
+  variant, iconSrc,
+  title, content,
+  rounded, requestClose,
+}) {
+  const classes = [`info-card info-card--${variant}`];
+  if (rounded) classes.push('info-card--rounded');
+  if (className) classes.push(className);
+  return (
+    <div className={classes.join(' ')} style={style}>
+      {iconSrc && (
+        <div className="info-card__icon">
+          <RawIcon color={`var(--ic-${variant}-high)`} src={iconSrc} />
+        </div>
+      )}
+      <div className="info-card__content">
+        <Text>{title}</Text>
+        {content}
+      </div>
+      {requestClose && (
+        <IconButton src={CrossIC} variant={variant} onClick={requestClose} />
+      )}
+    </div>
+  );
+}
+
+InfoCard.defaultProps = {
+  className: null,
+  style: null,
+  variant: 'surface',
+  iconSrc: null,
+  content: null,
+  rounded: false,
+  requestClose: null,
+};
+
+InfoCard.propTypes = {
+  className: PropTypes.string,
+  style: PropTypes.shape({}),
+  variant: PropTypes.oneOf(['surface', 'primary', 'positive', 'caution', 'danger']),
+  iconSrc: PropTypes.string,
+  title: PropTypes.string.isRequired,
+  content: PropTypes.node,
+  rounded: PropTypes.bool,
+  requestClose: PropTypes.func,
+};
+
+export default InfoCard;
@@ -0,0 +1,79 @@
+@use '.././../partials/flex';
+@use '.././../partials/dir';
+
+.info-card {
+  display: flex;
+  align-items: flex-start;
+  line-height: 0;
+  padding: var(--sp-tight);
+  @include dir.prop(border-left, 4px solid transparent, none);
+  @include dir.prop(border-right, none, 4px solid transparent);
+
+  & > .ic-btn {
+    padding: 0;
+    border-radius: 4;
+  }
+
+  &__content {
+    margin: 0 var(--sp-tight);
+    @extend .cp-fx__item-one;
+
+    & > *:nth-child(2) {
+      margin-top: var(--sp-ultra-tight);
+    }
+  }
+
+  &--rounded {
+    @include dir.prop(
+      border-radius,
+      0 var(--bo-radius) var(--bo-radius) 0,
+      var(--bo-radius) 0 0 var(--bo-radius)
+    );
+  }
+
+  &--surface {
+    border-color: var(--bg-surface-border);
+    background-color: var(--bg-surface-hover);
+
+  }
+  &--primary {
+    border-color: var(--bg-primary);
+    background-color: var(--bg-primary-hover);
+    & .text {
+      color: var(--tc-primary-high);
+      &-b3 {
+        color: var(--tc-primary-normal);
+      }
+    }
+  }
+  &--positive {
+    border-color: var(--bg-positive-border);
+    background-color: var(--bg-positive-hover);
+    & .text {
+      color: var(--tc-positive-high);
+      &-b3 {
+        color: var(--tc-positive-normal);
+      }
+    }
+  }
+  &--caution {
+    border-color: var(--bg-caution-border);
+    background-color: var(--bg-caution-hover);
+    & .text {
+      color: var(--tc-caution-high);
+      &-b3 {
+        color: var(--tc-caution-normal);
+      }
+    }
+  }
+  &--danger {
+    border-color: var(--bg-danger-border);
+    background-color: var(--bg-danger-hover);
+    & .text {
+      color: var(--tc-danger-high);
+      &-b3 {
+        color: var(--tc-danger-normal);
+      }
+    }
+  }
+}
@@ -0,0 +1,33 @@
+import React, { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+
+import katex from 'katex';
+import 'katex/dist/katex.min.css';
+
+import 'katex/dist/contrib/copy-tex';
+import 'katex/dist/contrib/copy-tex.css';
+
+const Math = React.memo(({
+  content, throwOnError, errorColor, displayMode,
+}) => {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    katex.render(content, ref.current, { throwOnError, errorColor, displayMode });
+  }, [content, throwOnError, errorColor, displayMode]);
+
+  return <span ref={ref} />;
+});
+Math.defaultProps = {
+  throwOnError: null,
+  errorColor: null,
+  displayMode: null,
+};
+Math.propTypes = {
+  content: PropTypes.string.isRequired,
+  throwOnError: PropTypes.bool,
+  errorColor: PropTypes.string,
+  displayMode: PropTypes.bool,
+};
+
+export default Math;
@@ -74,7 +74,7 @@ Tabs.defaultProps = {

 Tabs.propTypes = {
  items: PropTypes.arrayOf(
-    PropTypes.exact({
+    PropTypes.shape({
      iconSrc: PropTypes.string,
      text: PropTypes.string,
      disabled: PropTypes.bool,
@@ -84,4 +84,4 @@ Tabs.propTypes = {
  onSelect: PropTypes.func.isRequired,
 };

-export { Tabs as default };
+export default Tabs;
@@ -0,0 +1,25 @@
+/* eslint-disable import/prefer-default-export */
+import { useState, useEffect } from 'react';
+
+import initMatrix from '../../client/initMatrix';
+import { hasCrossSigningAccountData } from '../../util/matrixUtil';
+
+export function useCrossSigningStatus() {
+  const mx = initMatrix.matrixClient;
+  const [isCSEnabled, setIsCSEnabled] = useState(hasCrossSigningAccountData());
+
+  useEffect(() => {
+    if (isCSEnabled) return null;
+    const handleAccountData = (event) => {
+      if (event.getType() === 'm.cross_signing.master') {
+        setIsCSEnabled(true);
+      }
+    };
+
+    mx.on('accountData', handleAccountData);
+    return () => {
+      mx.removeListener('accountData', handleAccountData);
+    };
+  }, [isCSEnabled === false]);
+  return isCSEnabled;
+}
@@ -0,0 +1,32 @@
+/* eslint-disable import/prefer-default-export */
+import { useState, useEffect } from 'react';
+
+import initMatrix from '../../client/initMatrix';
+
+export function useDeviceList() {
+  const mx = initMatrix.matrixClient;
+  const [deviceList, setDeviceList] = useState(null);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const updateDevices = () => mx.getDevices().then((data) => {
+      if (!isMounted) return;
+      setDeviceList(data.devices || []);
+    });
+    updateDevices();
+
+    const handleDevicesUpdate = (users) => {
+      if (users.includes(mx.getUserId())) {
+        updateDevices();
+      }
+    };
+
+    mx.on('crypto.devicesUpdated', handleDevicesUpdate);
+    return () => {
+      mx.removeListener('crypto.devicesUpdated', handleDevicesUpdate);
+      isMounted = false;
+    };
+  }, []);
+  return deviceList;
+}
@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './ConfirmDialog.scss';
+
+import { openReusableDialog } from '../../../client/action/navigation';
+
+import Text from '../../atoms/text/Text';
+import Button from '../../atoms/button/Button';
+
+function ConfirmDialog({
+  desc, actionTitle, actionType, onComplete,
+}) {
+  return (
+    <div className="confirm-dialog">
+      <Text>{desc}</Text>
+      <div className="confirm-dialog__btn">
+        <Button variant={actionType} onClick={() => onComplete(true)}>{actionTitle}</Button>
+        <Button onClick={() => onComplete(false)}>Cancel</Button>
+      </div>
+    </div>
+  );
+}
+ConfirmDialog.propTypes = {
+  desc: PropTypes.string.isRequired,
+  actionTitle: PropTypes.string.isRequired,
+  actionType: PropTypes.oneOf(['primary', 'positive', 'danger', 'caution']).isRequired,
+  onComplete: PropTypes.func.isRequired,
+};
+
+/**
+ * @param {string} title title of confirm dialog
+ * @param {string} desc description of confirm dialog
+ * @param {string} actionTitle title of main action to take
+ * @param {'primary' | 'positive' | 'danger' | 'caution'} actionType type of action. default=primary
+ * @return {Promise<boolean>} does it get's confirmed or not
+ */
+// eslint-disable-next-line import/prefer-default-export
+export const confirmDialog = (title, desc, actionTitle, actionType = 'primary') => new Promise((resolve) => {
+  let isCompleted = false;
+  openReusableDialog(
+    <Text variant="s1" weight="medium">{title}</Text>,
+    (requestClose) => (
+      <ConfirmDialog
+        desc={desc}
+        actionTitle={actionTitle}
+        actionType={actionType}
+        onComplete={(isConfirmed) => {
+          isCompleted = true;
+          resolve(isConfirmed);
+          requestClose();
+        }}
+      />
+    ),
+    () => {
+      if (!isCompleted) resolve(false);
+    },
+  );
+});
@@ -0,0 +1,11 @@
+.confirm-dialog {
+  padding: var(--sp-normal);
+
+  & > .text {
+    padding-bottom: var(--sp-normal);
+  }
+  &__btn {
+    display: flex;
+    gap: var(--sp-normal);
+  }
+}
@@ -12,10 +12,11 @@ import RawModal from '../../atoms/modal/RawModal';
 function Dialog({
  className, isOpen, title, onAfterOpen, onAfterClose,
  contentOptions, onRequestClose, closeFromOutside, children,
+  invisibleScroll,
 }) {
  return (
    <RawModal
-      className={`${className === null ? '' : `${className} `}dialog-model`}
+      className={`${className === null ? '' : `${className} `}dialog-modal`}
      isOpen={isOpen}
      onAfterOpen={onAfterOpen}
      onAfterClose={onAfterClose}
@@ -36,7 +37,7 @@ function Dialog({
            {contentOptions}
          </Header>
          <div className="dialog__content__wrapper">
-            <ScrollView autoHide>
+            <ScrollView autoHide={!invisibleScroll} invisible={invisibleScroll}>
              <div className="dialog__content-container">
                {children}
              </div>
@@ -55,6 +56,7 @@ Dialog.defaultProps = {
  onAfterClose: null,
  onRequestClose: null,
  closeFromOutside: true,
+  invisibleScroll: false,
 };

 Dialog.propTypes = {
@@ -67,6 +69,7 @@ Dialog.propTypes = {
  onRequestClose: PropTypes.func,
  closeFromOutside: PropTypes.bool,
  children: PropTypes.node.isRequired,
+  invisibleScroll: PropTypes.bool,
 };

 export default Dialog;
@@ -1,4 +1,4 @@
-.dialog-model {
+.dialog-modal {
  --modal-height: 656px;
  max-height: min(100%, var(--modal-height));
  display: flex;
@@ -21,8 +21,3 @@
    flex-direction: column;
  }
 }
-
-.dialog__content-container {
-  padding-top: var(--sp-extra-tight);
-  padding-bottom: var(--sp-extra-loose);
-}
@@ -0,0 +1,49 @@
+import React, { useState, useEffect } from 'react';
+
+import cons from '../../../client/state/cons';
+
+import navigation from '../../../client/state/navigation';
+import IconButton from '../../atoms/button/IconButton';
+import Dialog from './Dialog';
+
+import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
+
+function ReusableDialog() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [data, setData] = useState(null);
+
+  useEffect(() => {
+    const handleOpen = (title, render, afterClose) => {
+      setIsOpen(true);
+      setData({ title, render, afterClose });
+    };
+    navigation.on(cons.events.navigation.REUSABLE_DIALOG_OPENED, handleOpen);
+    return () => {
+      navigation.removeListener(cons.events.navigation.REUSABLE_DIALOG_OPENED, handleOpen);
+    };
+  }, []);
+
+  const handleAfterClose = () => {
+    data.afterClose?.();
+    setData(null);
+  };
+
+  const handleRequestClose = () => {
+    setIsOpen(false);
+  };
+
+  return (
+    <Dialog
+      isOpen={isOpen}
+      title={data?.title || ''}
+      onAfterClose={handleAfterClose}
+      onRequestClose={handleRequestClose}
+      contentOptions={<IconButton src={CrossIC} onClick={handleRequestClose} tooltip="Close" />}
+      invisibleScroll
+    >
+      {data?.render(handleRequestClose) || <div />}
+    </Dialog>
+  );
+}
+
+export default ReusableDialog;
@@ -36,6 +36,8 @@ import TickMarkIC from '../../../../public/res/ic/outlined/tick-mark.svg';
 import CmdIC from '../../../../public/res/ic/outlined/cmd.svg';
 import BinIC from '../../../../public/res/ic/outlined/bin.svg';

+import { confirmDialog } from '../confirm-dialog/ConfirmDialog';
+
 function PlaceholderMessage() {
  return (
    <div className="ph-msg">
@@ -186,9 +188,17 @@ const MessageBody = React.memo(({
  // if body is not string it is a React element.
  if (typeof body !== 'string') return <div className="message__body">{body}</div>;

-  let content = isCustomHTML
-    ? twemojify(sanitizeCustomHtml(body), undefined, true, false)
-    : twemojify(body, undefined, true);
+  let content = null;
+  if (isCustomHTML) {
+    try {
+      content = twemojify(sanitizeCustomHtml(body), undefined, true, false, true);
+    } catch {
+      console.error('Malformed custom html: ', body);
+      content = twemojify(body, undefined);
+    }
+  } else {
+    content = twemojify(body, undefined, true);
+  }

  // Determine if this message should render with large emojis
  // Criteria:
@@ -538,10 +548,15 @@ const MessageOptions = React.memo(({
                <MenuItem
                  variant="danger"
                  iconSrc={BinIC}
-                  onClick={() => {
-                    if (window.confirm('Are you sure you want to delete this event')) {
-                      redactEvent(roomId, mEvent.getId());
-                    }
+                  onClick={async () => {
+                    const isConfirmed = await confirmDialog(
+                      'Delete message',
+                      'Are you sure that you want to delete this message?',
+                      'Delete',
+                      'danger',
+                    );
+                    if (!isConfirmed) return;
+                    redactEvent(roomId, mEvent.getId());
                  }}
                >
                  Delete
@@ -1,6 +1,7 @@
@use '../../atoms/scroll/scrollbar';
@use '../../partials/text';
@use '../../partials/dir';
+@use '../../partials/screen';

 .message,
 .ph-msg {
@@ -95,7 +96,7 @@
 .message__reactions {
  max-width: calc(100% - 88px);
  min-width: 0;
-  @media (max-width: 1124px) {
+  @include screen.smallerThan(tabletBreakpoint) {
    max-width: 100%;
  }
 }
@@ -58,7 +58,8 @@ function PopupWindow({

  return (
    <RawModal
-      className={`${className === null ? '' : `${className} `}pw-model`}
+      className={`${className === null ? '' : `${className} `}pw-modal`}
+      overlayClassName="pw-modal__overlay"
      isOpen={isOpen}
      onAfterClose={onAfterClose}
      onRequestClose={onRequestClose}
@@ -1,9 +1,18 @@
@use '../../partials/dir';
+@use '../../partials/screen';

-.pw-model {
-  --modal-height: 656px;
+.pw-modal {
+  --modal-height: 774px;
  max-height: var(--modal-height) !important;
  height: 100%;
+
+  @include screen.smallerThan(mobileBreakpoint) {
+    --modal-height: 100%;
+    border-radius: 0 !important;
+    &__overlay {
+      padding: 0 !important;
+    }
+  }
 }

 .pw {
@@ -72,4 +81,4 @@
      @include dir.side(margin, 0, var(--sp-tight));
    }
  }
-}
+}
@@ -8,6 +8,8 @@ import Text from '../../atoms/text/Text';
 import Toggle from '../../atoms/button/Toggle';
 import SettingTile from '../setting-tile/SettingTile';

+import { confirmDialog } from '../confirm-dialog/ConfirmDialog';
+
 function RoomEncryption({ roomId }) {
  const mx = initMatrix.matrixClient;
  const room = mx.getRoom(roomId);
@@ -15,17 +17,20 @@ function RoomEncryption({ roomId }) {
  const [isEncrypted, setIsEncrypted] = useState(encryptionEvents.length > 0);
  const canEnableEncryption = room.currentState.maySendStateEvent('m.room.encryption', mx.getUserId());

-  const handleEncryptionEnable = () => {
+  const handleEncryptionEnable = async () => {
    const joinRule = room.getJoinRule();
    const confirmMsg1 = 'It is not recommended to add encryption in public room. Anyone can find and join public rooms, so anyone can read messages in them.';
    const confirmMsg2 = 'Once enabled, encryption for a room cannot be disabled. Messages sent in an encrypted room cannot be seen by the server, only by the participants of the room. Enabling encryption may prevent many bots and bridges from working correctly';
-    if (joinRule === 'public' ? confirm(confirmMsg1) : true) {
-      if (confirm(confirmMsg2)) {
-        setIsEncrypted(true);
-        mx.sendStateEvent(roomId, 'm.room.encryption', {
-          algorithm: 'm.megolm.v1.aes-sha2',
-        });
-      }
+
+    const isConfirmed1 = (joinRule === 'public')
+      ? await confirmDialog('Enable encryption', confirmMsg1, 'Continue', 'caution')
+      : true;
+    if (!isConfirmed1) return;
+    if (await confirmDialog('Enable encryption', confirmMsg2, 'Enable', 'caution')) {
+      setIsEncrypted(true);
+      mx.sendStateEvent(roomId, 'm.room.encryption', {
+        algorithm: 'm.megolm.v1.aes-sha2',
+      });
    }
  };

@@ -17,19 +17,19 @@ const visibility = {

 const items = [{
  iconSrc: null,
-  text: 'World readable (anyone can read)',
+  text: 'Anyone (including guests)',
  type: visibility.WORLD_READABLE,
 }, {
  iconSrc: null,
-  text: 'Member shared (since the point in time of selecting this option)',
+  text: 'Members (all messages)',
  type: visibility.SHARED,
 }, {
  iconSrc: null,
-  text: 'Member invited (since they were invited)',
+  text: 'Members (messages after invite)',
  type: visibility.INVITED,
 }, {
  iconSrc: null,
-  text: 'Member joined (since they joined)',
+  text: 'Members (messages after join)',
  type: visibility.JOINED,
 }];

@@ -87,7 +87,7 @@ function RoomHistoryVisibility({ roomId }) {
          </MenuItem>
        ))
      }
-      <Text variant="b3">Changes to who can read history will only apply to future messages in this room. The visibility of existing history will be unchanged.</Text>
+      <Text variant="b3">Changes to history visibility will only apply to future messages. The visibility of existing history will have no effect.</Text>
    </div>
  );
 }
@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './RoomIntro.scss';

-import { twemojify } from '../../../util/twemojify';
 import colorMXID from '../../../util/colorMXID';

 import Text from '../../atoms/text/Text';
@@ -15,8 +14,8 @@ function RoomIntro({
    <div className="room-intro">
      <Avatar imageSrc={avatarSrc} text={name} bgColor={colorMXID(roomId)} size="large" />
      <div className="room-intro__content">
-        <Text className="room-intro__name" variant="h1" weight="medium" primary>{twemojify(heading)}</Text>
-        <Text className="room-intro__desc" variant="b1">{twemojify(desc, undefined, true)}</Text>
+        <Text className="room-intro__name" variant="h1" weight="medium" primary>{heading}</Text>
+        <Text className="room-intro__desc" variant="b1">{desc}</Text>
        { time !== null && <Text className="room-intro__time" variant="b3">{time}</Text>}
      </div>
    </div>
@@ -35,9 +34,9 @@ RoomIntro.propTypes = {
    PropTypes.bool,
  ]),
  name: PropTypes.string.isRequired,
-  heading: PropTypes.string.isRequired,
-  desc: PropTypes.string.isRequired,
-  time: PropTypes.string,
+  heading: PropTypes.node.isRequired,
+  desc: PropTypes.node.isRequired,
+  time: PropTypes.node,
 };

 export default RoomIntro;
@@ -35,7 +35,12 @@ const items = [{
 function setRoomNotifType(roomId, newType) {
  const mx = initMatrix.matrixClient;
  const { notifications } = initMatrix;
-  const roomPushRule = mx.getRoomPushRule('global', roomId);
+  let roomPushRule;
+  try {
+    roomPushRule = mx.getRoomPushRule('global', roomId);
+  } catch {
+    roomPushRule = undefined;
+  }
  const promises = [];

  if (newType === cons.notifs.MUTE) {
@@ -15,6 +15,8 @@ import TickMarkIC from '../../../../public/res/ic/outlined/tick-mark.svg';
 import AddUserIC from '../../../../public/res/ic/outlined/add-user.svg';
 import LeaveArrowIC from '../../../../public/res/ic/outlined/leave-arrow.svg';

+import { confirmDialog } from '../confirm-dialog/ConfirmDialog';
+
 function RoomOptions({ roomId, afterOptionSelect }) {
  const mx = initMatrix.matrixClient;
  const room = mx.getRoom(roomId);
@@ -29,11 +31,16 @@ function RoomOptions({ roomId, afterOptionSelect }) {
    openInviteUser(roomId);
    afterOptionSelect();
  };
-  const handleLeaveClick = () => {
-    if (confirm('Are you really want to leave this room?')) {
-      roomActions.leave(roomId);
-      afterOptionSelect();
-    }
+  const handleLeaveClick = async () => {
+    afterOptionSelect();
+    const isConfirmed = await confirmDialog(
+      'Leave room',
+      `Are you sure that you want to leave "${room.name}" room?`,
+      'Leave',
+      'danger',
+    );
+    if (!isConfirmed) return;
+    roomActions.leave(roomId);
  };

  return (
@@ -179,6 +179,7 @@ function RoomPermissions({ roomId }) {
  const pLEvent = room.currentState.getStateEvents('m.room.power_levels')[0];
  const permissions = pLEvent.getContent();
  const canChangePermission = room.currentState.maySendStateEvent('m.room.power_levels', mx.getUserId());
+  const myPowerLevel = room.getMember(mx.getUserId())?.powerLevel ?? 100;

  const handlePowerSelector = (e, permKey, parentKey, powerLevel) => {
    const handlePowerLevelChange = (newPowerLevel) => {
@@ -208,7 +209,7 @@ function RoomPermissions({ roomId }) {
      (closeMenu) => (
        <PowerLevelSelector
          value={powerLevel}
-          max={100}
+          max={myPowerLevel}
          onSelect={(pl) => {
            closeMenu();
            handlePowerLevelChange(pl);
@@ -19,6 +19,7 @@ import PencilIC from '../../../../public/res/ic/outlined/pencil.svg';

 import { useStore } from '../../hooks/useStore';
 import { useForceUpdate } from '../../hooks/useForceUpdate';
+import { confirmDialog } from '../confirm-dialog/ConfirmDialog';

 function RoomProfile({ roomId }) {
  const isMountStore = useStore();
@@ -117,7 +118,13 @@ function RoomProfile({ roomId }) {

  const handleAvatarUpload = async (url) => {
    if (url === null) {
-      if (confirm('Are you sure you want to remove avatar?')) {
+      const isConfirmed = await confirmDialog(
+        'Remove avatar',
+        'Are you sure that you want to remove room avatar?',
+        'Remove',
+        'caution',
+      );
+      if (isConfirmed) {
        await mx.sendStateEvent(roomId, 'm.room.avatar', { url }, '');
      }
    } else await mx.sendStateEvent(roomId, 'm.room.avatar', { url }, '');
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import './RoomTile.scss';

 import { twemojify } from '../../../util/twemojify';
-import { sanitizeText } from '../../../util/sanitize';

 import colorMXID from '../../../util/colorMXID';

@@ -70,7 +70,7 @@ function RoomVisibility({ roomId }) {

  const noSpaceParent = currentState.getStateEvents('m.space.parent').length === 0;
  const mCreate = currentState.getStateEvents('m.room.create')[0]?.getContent();
-  const roomVersion = Number(mCreate.room_version);
+  const roomVersion = Number(mCreate?.room_version ?? 0);

  const myPowerlevel = room.getMember(mx.getUserId())?.powerLevel || 0;
  const canChange = room.currentState.hasSufficientPowerLevelFor('state_default', myPowerlevel);
@@ -9,7 +9,11 @@ function SettingTile({ title, options, content }) {
    <div className="setting-tile">
      <div className="setting-tile__content">
        <div className="setting-tile__title">
-          <Text variant="b1">{title}</Text>
+          {
+            typeof title === 'string'
+              ? <Text variant="b1">{title}</Text>
+              : title
+          }
        </div>
        {content}
      </div>
@@ -24,7 +28,7 @@ SettingTile.defaultProps = {
 };

 SettingTile.propTypes = {
-  title: PropTypes.string.isRequired,
+  title: PropTypes.node.isRequired,
  options: PropTypes.node,
  content: PropTypes.node,
 };
@@ -9,11 +9,12 @@ import Tooltip from '../../atoms/tooltip/Tooltip';
 import { blurOnBubbling } from '../../atoms/button/script';

 const SidebarAvatar = React.forwardRef(({
-  tooltip, active, onClick, onContextMenu,
-  avatar, notificationBadge,
+  className, tooltip, active, onClick,
+  onContextMenu, avatar, notificationBadge,
 }, ref) => {
-  let activeClass = '';
-  if (active) activeClass = ' sidebar-avatar--active';
+  const classes = ['sidebar-avatar'];
+  if (active) classes.push('sidebar-avatar--active');
+  if (className) classes.push(className);
  return (
    <Tooltip
      content={<Text variant="b1">{twemojify(tooltip)}</Text>}
@@ -21,7 +22,7 @@ const SidebarAvatar = React.forwardRef(({
    >
      <button
        ref={ref}
-        className={`sidebar-avatar${activeClass}`}
+        className={classes.join(' ')}
        type="button"
        onMouseUp={(e) => blurOnBubbling(e, '.sidebar-avatar')}
        onClick={onClick}
@@ -34,6 +35,7 @@ const SidebarAvatar = React.forwardRef(({
  );
 });
 SidebarAvatar.defaultProps = {
+  className: null,
  active: false,
  onClick: null,
  onContextMenu: null,
@@ -41,6 +43,7 @@ SidebarAvatar.defaultProps = {
 };

 SidebarAvatar.propTypes = {
+  className: PropTypes.string,
  tooltip: PropTypes.string.isRequired,
  active: PropTypes.bool,
  onClick: PropTypes.func,
@@ -24,6 +24,8 @@ import LeaveArrowIC from '../../../../public/res/ic/outlined/leave-arrow.svg';
 import PinIC from '../../../../public/res/ic/outlined/pin.svg';
 import PinFilledIC from '../../../../public/res/ic/filled/pin.svg';

+import { confirmDialog } from '../confirm-dialog/ConfirmDialog';
+
 function SpaceOptions({ roomId, afterOptionSelect }) {
  const mx = initMatrix.matrixClient;
  const room = mx.getRoom(roomId);
@@ -54,11 +56,16 @@ function SpaceOptions({ roomId, afterOptionSelect }) {
    afterOptionSelect();
  };

-  const handleLeaveClick = () => {
-    if (confirm('Are you really want to leave this space?')) {
-      leave(roomId);
-      afterOptionSelect();
-    }
+  const handleLeaveClick = async () => {
+    afterOptionSelect();
+    const isConfirmed = await confirmDialog(
+      'Leave space',
+      `Are you sure that you want to leave "${room.name}" space?`,
+      'Leave',
+      'danger',
+    );
+    if (!isConfirmed) return;
+    leave(roomId);
  };

  return (
@@ -210,7 +210,7 @@ function CreateRoomContent({ isSpace, parentId, onRequestClose }) {
            />
          )}
          content={(
-            <Text variant="b3">Override the default (100) power level.</Text>
+            <Text variant="b3">Selecting Admin sets 100 power level whereas Founder sets 101.</Text>
          )}
        />
        <Input name="topic" minHeight={174} resizable label="Topic (optional)" />
@@ -2,6 +2,7 @@
@use '../../partials/dir';

 .create-room {
+  margin: var(--sp-normal);
  @include dir.side(margin, var(--sp-normal), var(--sp-extra-tight));

  &__form > * {
@@ -8,7 +8,7 @@ import Text from '../../atoms/text/Text';
 function DragDrop({ isOpen }) {
  return (
    <RawModal
-      className="drag-drop__model"
+      className="drag-drop__modal"
      overlayClassName="drag-drop__overlay"
      isOpen={isOpen}
    >
@@ -1,4 +1,4 @@
-.drag-drop__model {
+.drag-drop__modal {
  box-shadow: none;
  text-align: center;

@@ -6,6 +6,8 @@
  --emoji-board-height: 390px;
  --emoji-board-width: 286px;
  display: flex;
+  max-width: 90vw;
+  max-height: 90vh;
  
  &__content {
    @extend .cp-fx__item-one;
@@ -91,6 +93,10 @@
  }
 }

+.emoji-row {
+  display: flex;
+}
+
 .emoji-group {
  --emoji-padding: 6px;
  position: relative;
@@ -0,0 +1,200 @@
+/* eslint-disable react/prop-types */
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import './EmojiVerification.scss';
+import { twemojify } from '../../../util/twemojify';
+
+import initMatrix from '../../../client/initMatrix';
+import cons from '../../../client/state/cons';
+import navigation from '../../../client/state/navigation';
+import { hasPrivateKey } from '../../../client/state/secretStorageKeys';
+import { getDefaultSSKey, isCrossVerified } from '../../../util/matrixUtil';
+
+import Text from '../../atoms/text/Text';
+import IconButton from '../../atoms/button/IconButton';
+import Button from '../../atoms/button/Button';
+import Spinner from '../../atoms/spinner/Spinner';
+import Dialog from '../../molecules/dialog/Dialog';
+
+import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
+import { useStore } from '../../hooks/useStore';
+import { accessSecretStorage } from '../settings/SecretStorageAccess';
+
+function EmojiVerificationContent({ data, requestClose }) {
+  const [sas, setSas] = useState(null);
+  const [process, setProcess] = useState(false);
+  const { request, targetDevice } = data;
+  const mx = initMatrix.matrixClient;
+  const mountStore = useStore();
+  const beginStore = useStore();
+
+  const beginVerification = async () => {
+    if (
+      isCrossVerified(mx.deviceId)
+      && (mx.getCrossSigningId() === null || await mx.crypto.crossSigningInfo.isStoredInKeyCache('self_signing') === false)
+    ) {
+      if (!hasPrivateKey(getDefaultSSKey())) {
+        const keyData = await accessSecretStorage('Emoji verification');
+        if (!keyData) {
+          request.cancel();
+          return;
+        }
+      }
+      await mx.checkOwnCrossSigningTrust();
+    }
+    setProcess(true);
+    await request.accept();
+
+    const verifier = request.beginKeyVerification('m.sas.v1', targetDevice);
+
+    const handleVerifier = (sasData) => {
+      verifier.off('show_sas', handleVerifier);
+      if (!mountStore.getItem()) return;
+      setSas(sasData);
+      setProcess(false);
+    };
+    verifier.on('show_sas', handleVerifier);
+    await verifier.verify();
+  };
+
+  const sasMismatch = () => {
+    sas.mismatch();
+    setProcess(true);
+  };
+
+  const sasConfirm = () => {
+    sas.confirm();
+    setProcess(true);
+  };
+
+  useEffect(() => {
+    mountStore.setItem(true);
+    const handleChange = () => {
+      if (request.done || request.cancelled) {
+        requestClose();
+        return;
+      }
+      if (targetDevice && !beginStore.getItem()) {
+        beginStore.setItem(true);
+        beginVerification();
+      }
+    };
+
+    if (request === null) return null;
+    const req = request;
+    req.on('change', handleChange);
+    return () => {
+      req.off('change', handleChange);
+      if (req.cancelled === false && req.done === false) {
+        req.cancel();
+      }
+    };
+  }, [request]);
+
+  const renderWait = () => (
+    <>
+      <Spinner size="small" />
+      <Text>Waiting for response from other device...</Text>
+    </>
+  );
+
+  if (sas !== null) {
+    return (
+      <div className="emoji-verification__content">
+        <Text>Confirm the emoji below are displayed on both devices, in the same order:</Text>
+        <div className="emoji-verification__emojis">
+          {sas.sas.emoji.map((emoji, i) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <div className="emoji-verification__emoji-block" key={`${emoji[1]}-${i}`}>
+              <Text variant="h1">{twemojify(emoji[0])}</Text>
+              <Text>{emoji[1]}</Text>
+            </div>
+          ))}
+        </div>
+        <div className="emoji-verification__buttons">
+          {process ? renderWait() : (
+            <>
+              <Button variant="primary" onClick={sasConfirm}>They match</Button>
+              <Button onClick={sasMismatch}>{'They don\'t match'}</Button>
+            </>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  if (targetDevice) {
+    return (
+      <div className="emoji-verification__content">
+        <Text>Please accept the request from other device.</Text>
+        <div className="emoji-verification__buttons">
+          {renderWait()}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="emoji-verification__content">
+      <Text>Click accept to start the verification process.</Text>
+      <div className="emoji-verification__buttons">
+        {
+          process
+            ? renderWait()
+            : <Button variant="primary" onClick={beginVerification}>Accept</Button>
+        }
+      </div>
+    </div>
+  );
+}
+EmojiVerificationContent.propTypes = {
+  data: PropTypes.shape({}).isRequired,
+  requestClose: PropTypes.func.isRequired,
+};
+
+function useVisibilityToggle() {
+  const [data, setData] = useState(null);
+  const mx = initMatrix.matrixClient;
+
+  useEffect(() => {
+    const handleOpen = (request, targetDevice) => {
+      setData({ request, targetDevice });
+    };
+    navigation.on(cons.events.navigation.EMOJI_VERIFICATION_OPENED, handleOpen);
+    mx.on('crypto.verification.request', handleOpen);
+    return () => {
+      navigation.removeListener(cons.events.navigation.EMOJI_VERIFICATION_OPENED, handleOpen);
+      mx.removeListener('crypto.verification.request', handleOpen);
+    };
+  }, []);
+
+  const requestClose = () => setData(null);
+
+  return [data, requestClose];
+}
+
+function EmojiVerification() {
+  const [data, requestClose] = useVisibilityToggle();
+
+  return (
+    <Dialog
+      isOpen={data !== null}
+      className="emoji-verification"
+      title={(
+        <Text variant="s1" weight="medium" primary>
+          Emoji verification
+        </Text>
+      )}
+      contentOptions={<IconButton src={CrossIC} onClick={requestClose} tooltip="Close" />}
+      onRequestClose={requestClose}
+    >
+      {
+        data !== null
+          ? <EmojiVerificationContent data={data} requestClose={requestClose} />
+          : <div />
+      }
+    </Dialog>
+  );
+}
+
+export default EmojiVerification;
@@ -0,0 +1,35 @@
+@use '../../partials/flex';
+@use '../../partials/dir';
+
+.emoji-verification {
+  &__content {
+    padding: var(--sp-normal);
+    @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
+    display: flex;
+    flex-direction: column;
+    gap: var(--sp-normal);
+  }
+
+  &__emojis {
+    margin: var(--sp-loose) 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    gap: var(--sp-extra-tight);
+    flex-wrap: wrap;
+  }
+
+  &__emoji-block {
+    @extend .cp-fx__column;
+    flex: 1;
+    align-items: center;
+    gap: var(--sp-extra-tight);
+    white-space: nowrap;
+    text-transform: capitalize;
+  }
+
+  &__buttons {
+    display: flex;
+    gap: var(--sp-normal);
+  }
+}
@@ -54,17 +54,20 @@ function InviteList({ isOpen, onRequestClose }) {
  }, [procInvite]);

  function renderRoomTile(roomId) {
-    const myRoom = initMatrix.matrixClient.getRoom(roomId);
+    const mx = initMatrix.matrixClient;
+    const myRoom = mx.getRoom(roomId);
+    if (!myRoom) return null;
    const roomName = myRoom.name;
    let roomAlias = myRoom.getCanonicalAlias();
-    if (roomAlias === null) roomAlias = myRoom.roomId;
+    if (!roomAlias) roomAlias = myRoom.roomId;
+    const inviterName = myRoom.getMember(mx.getUserId())?.events?.member?.getSender?.() ?? '';
    return (
      <RoomTile
        key={myRoom.roomId}
        name={roomName}
        avatarSrc={initMatrix.matrixClient.getRoom(roomId).getAvatarUrl(initMatrix.matrixClient.baseUrl, 42, 42, 'crop')}
        id={roomAlias}
-        inviterName={myRoom.getJoinedMembers()[0].userId}
+        inviterName={inviterName}
        options={
          procInvite.has(myRoom.roomId)
            ? (<Spinner size="small" />)
@@ -95,12 +98,13 @@ function InviteList({ isOpen, onRequestClose }) {
        {
          Array.from(initMatrix.roomList.inviteDirects).map((roomId) => {
            const myRoom = initMatrix.matrixClient.getRoom(roomId);
+            if (myRoom === null) return null;
            const roomName = myRoom.name;
            return (
              <RoomTile
                key={myRoom.roomId}
                name={roomName}
-                id={myRoom.getDMInviter()}
+                id={myRoom.getDMInviter() || roomId}
                options={
                  procInvite.has(myRoom.roomId)
                    ? (<Spinner size="small" />)
@@ -103,6 +103,18 @@ function InviteUser({
    updateIsSearching(false);
  }

+  async function hasDevices(userId) {
+    try {
+      const usersDeviceMap = await mx.downloadKeys([userId, mx.getUserId()]);
+      return Object.values(usersDeviceMap).every((userDevices) =>
+        Object.keys(userDevices).length > 0,
+      );
+    } catch (e) {
+      console.error("Error determining if it's possible to encrypt to all users: ", e);
+      return false;
+    }
+  }
+
  async function createDM(userId) {
    if (mx.getUserId() === userId) return;
    const dmRoomId = hasDMWith(userId);
@@ -117,7 +129,7 @@ function InviteUser({
      procUserError.delete(userId);
      updateUserProcError(getMapCopy(procUserError));

-      const result = await roomActions.createDM(userId);
+      const result = await roomActions.createDM(userId, await hasDevices(userId));
      roomIdToUserId.set(result.room_id, userId);
      updateRoomIdToUserId(getMapCopy(roomIdToUserId));
    } catch (e) {
@@ -0,0 +1,155 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import './JoinAlias.scss';
+
+import initMatrix from '../../../client/initMatrix';
+import cons from '../../../client/state/cons';
+import navigation from '../../../client/state/navigation';
+import { join } from '../../../client/action/room';
+import { selectRoom, selectSpace } from '../../../client/action/navigation';
+
+import Text from '../../atoms/text/Text';
+import IconButton from '../../atoms/button/IconButton';
+import Button from '../../atoms/button/Button';
+import Input from '../../atoms/input/Input';
+import Spinner from '../../atoms/spinner/Spinner';
+import Dialog from '../../molecules/dialog/Dialog';
+
+import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
+
+import { useStore } from '../../hooks/useStore';
+
+const ALIAS_OR_ID_REG = /^[#|!].+:.+\..+$/;
+
+function JoinAliasContent({ term, requestClose }) {
+  const [process, setProcess] = useState(false);
+  const [error, setError] = useState(undefined);
+  const [lastJoinId, setLastJoinId] = useState(undefined);
+
+  const mx = initMatrix.matrixClient;
+  const mountStore = useStore();
+
+  const openRoom = (roomId) => {
+    const room = mx.getRoom(roomId);
+    if (!room) return;
+    if (room.isSpaceRoom()) selectSpace(roomId);
+    else selectRoom(roomId);
+    requestClose();
+  };
+
+  useEffect(() => {
+    const handleJoin = (roomId) => {
+      if (lastJoinId !== roomId) return;
+      openRoom(roomId);
+    };
+    initMatrix.roomList.on(cons.events.roomList.ROOM_JOINED, handleJoin);
+    return () => {
+      initMatrix.roomList.removeListener(cons.events.roomList.ROOM_JOINED, handleJoin);
+    };
+  }, [lastJoinId]);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    mountStore.setItem(true);
+    const alias = e.target.alias.value;
+    if (alias?.trim() === '') return;
+    if (alias.match(ALIAS_OR_ID_REG) === null) {
+      setError('Invalid address.');
+      return;
+    }
+    setProcess('Looking for address...');
+    setError(undefined);
+    let via;
+    if (alias.startsWith('#')) {
+      try {
+        const aliasData = await mx.resolveRoomAlias(alias);
+        via = aliasData?.servers.slice(0, 3) || [];
+        if (mountStore.getItem()) {
+          setProcess(`Joining ${alias}...`);
+        }
+      } catch (err) {
+        if (!mountStore.getItem()) return;
+        setProcess(false);
+        setError(`Unable to find room/space with ${alias}. Either room/space is private or doesn't exist.`);
+      }
+    }
+    try {
+      const roomId = await join(alias, false, via);
+      if (!mountStore.getItem()) return;
+      setLastJoinId(roomId);
+      openRoom(roomId);
+    } catch {
+      if (!mountStore.getItem()) return;
+      setProcess(false);
+      setError(`Unable to join ${alias}. Either room/space is private or doesn't exist.`);
+    }
+  };
+
+  return (
+    <form className="join-alias" onSubmit={handleSubmit}>
+      <Input
+        label="Address"
+        value={term}
+        name="alias"
+        required
+      />
+      {error && <Text className="join-alias__error" variant="b3">{error}</Text>}
+      <div className="join-alias__btn">
+        {
+          process
+            ? (
+              <>
+                <Spinner size="small" />
+                <Text>{process}</Text>
+              </>
+            )
+            : <Button variant="primary" type="submit">Join</Button>
+        }
+      </div>
+    </form>
+  );
+}
+JoinAliasContent.defaultProps = {
+  term: undefined,
+};
+JoinAliasContent.propTypes = {
+  term: PropTypes.string,
+  requestClose: PropTypes.func.isRequired,
+};
+
+function useWindowToggle() {
+  const [data, setData] = useState(null);
+
+  useEffect(() => {
+    const handleOpen = (term) => {
+      setData({ term });
+    };
+    navigation.on(cons.events.navigation.JOIN_ALIAS_OPENED, handleOpen);
+    return () => {
+      navigation.removeListener(cons.events.navigation.JOIN_ALIAS_OPENED, handleOpen);
+    };
+  }, []);
+
+  const onRequestClose = () => setData(null);
+
+  return [data, onRequestClose];
+}
+
+function JoinAlias() {
+  const [data, requestClose] = useWindowToggle();
+
+  return (
+    <Dialog
+      isOpen={data !== null}
+      title={(
+        <Text variant="s1" weight="medium" primary>Join with address</Text>
+      )}
+      contentOptions={<IconButton src={CrossIC} onClick={requestClose} tooltip="Close" />}
+      onRequestClose={requestClose}
+    >
+      { data ? <JoinAliasContent term={data.term} requestClose={requestClose} /> : <div /> }
+    </Dialog>
+  );
+}
+
+export default JoinAlias;
@@ -0,0 +1,20 @@
+@use '../../partials/dir';
+
+.join-alias {
+  padding: var(--sp-normal);
+  @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
+
+  & > *:not(:first-child) {
+    margin-top: var(--sp-normal);
+  }
+
+  &__error {
+    color: var(--tc-danger-high);
+    margin-top: var(--sp-extra-tight) !important;
+  }
+
+  &__btn {
+    display: flex;
+    gap: var(--sp-normal);
+  }
+}
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';

 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
@@ -9,12 +10,12 @@ import { roomIdByActivity } from '../../../util/sort';
 import RoomsCategory from './RoomsCategory';

 const drawerPostie = new Postie();
-function Directs() {
+function Directs({ size }) {
  const mx = initMatrix.matrixClient;
  const { roomList, notifications } = initMatrix;
  const [directIds, setDirectIds] = useState([]);

-  useEffect(() => setDirectIds([...roomList.directs].sort(roomIdByActivity)), []);
+  useEffect(() => setDirectIds([...roomList.directs].sort(roomIdByActivity)), [size]);

  useEffect(() => {
    const handleTimeline = (event, room, toStartOfTimeline, removed, data) => {
@@ -63,5 +64,8 @@ function Directs() {

  return <RoomsCategory name="People" hideHeader roomIds={directIds} drawerPostie={drawerPostie} />;
 }
+Directs.propTypes = {
+  size: PropTypes.number.isRequired,
+};

 export default Directs;
@@ -42,12 +42,15 @@ function Drawer() {
  const [spaceId] = useSelectedSpace();
  const [, forceUpdate] = useForceUpdate();
  const scrollRef = useRef(null);
+  const { roomList } = initMatrix;

  useEffect(() => {
-    const { roomList } = initMatrix;
-    roomList.on(cons.events.roomList.ROOMLIST_UPDATED, forceUpdate);
+    const handleUpdate = () => {
+      forceUpdate();
+    };
+    roomList.on(cons.events.roomList.ROOMLIST_UPDATED, handleUpdate);
    return () => {
-      roomList.removeListener(cons.events.roomList.ROOMLIST_UPDATED, forceUpdate);
+      roomList.removeListener(cons.events.roomList.ROOMLIST_UPDATED, handleUpdate);
    };
  }, []);

@@ -61,14 +64,16 @@ function Drawer() {
    <div className="drawer">
      <DrawerHeader selectedTab={selectedTab} spaceId={spaceId} />
      <div className="drawer__content-wrapper">
-        {navigation.selectedSpacePath.length > 1 && <DrawerBreadcrumb spaceId={spaceId} />}
+        {navigation.selectedSpacePath.length > 1 && selectedTab !== cons.tabs.DIRECTS && (
+          <DrawerBreadcrumb spaceId={spaceId} />
+        )}
        <div className="rooms__wrapper">
          <ScrollView ref={scrollRef} autoHide>
            <div className="rooms-container">
              {
                selectedTab !== cons.tabs.DIRECTS
                  ? <Home spaceId={spaceId} />
-                  : <Directs />
+                  : <Directs size={roomList.directs.size} />
              }
            </div>
          </ScrollView>
@@ -7,7 +7,7 @@ import { twemojify } from '../../../util/twemojify';
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import {
-  openPublicRooms, openCreateRoom, openSpaceManage,
+  openPublicRooms, openCreateRoom, openSpaceManage, openJoinAlias,
  openSpaceAddExisting, openInviteUser, openReusableContextMenu,
 } from '../../../client/action/navigation';
 import { getEventCords } from '../../../util/common';
@@ -60,6 +60,14 @@ export function HomeSpaceOptions({ spaceId, afterOptionSelect }) {
          Join public room
        </MenuItem>
      )}
+      { !spaceId && (
+        <MenuItem
+          iconSrc={PlusIC}
+          onClick={() => { afterOptionSelect(); openJoinAlias(); }}
+        >
+          Join with address
+        </MenuItem>
+      )}
      { spaceId && (
        <MenuItem
          iconSrc={PlusIC}
@@ -14,6 +14,7 @@ import {
 } from '../../../client/action/navigation';
 import { moveSpaceShortcut } from '../../../client/action/accountData';
 import { abbreviateNumber, getEventCords } from '../../../util/common';
+import { isCrossVerified } from '../../../util/matrixUtil';

 import Avatar from '../../atoms/avatar/Avatar';
 import NotificationBadge from '../../atoms/badge/NotificationBadge';
@@ -26,8 +27,12 @@ import UserIC from '../../../../public/res/ic/outlined/user.svg';
 import AddPinIC from '../../../../public/res/ic/outlined/add-pin.svg';
 import SearchIC from '../../../../public/res/ic/outlined/search.svg';
 import InviteIC from '../../../../public/res/ic/outlined/invite.svg';
+import ShieldUserIC from '../../../../public/res/ic/outlined/shield-user.svg';

 import { useSelectedTab } from '../../hooks/useSelectedTab';
+import { useDeviceList } from '../../hooks/useDeviceList';
+
+import { tabText as settingTabText } from '../settings/Settings';

 function useNotificationUpdate() {
  const { notifications } = initMatrix;
@@ -72,7 +77,7 @@ function ProfileAvatarMenu() {
  return (
    <SidebarAvatar
      onClick={openSettings}
-      tooltip={profile.displayName}
+      tooltip="Settings"
      avatar={(
        <Avatar
          text={profile.displayName}
@@ -85,6 +90,22 @@ function ProfileAvatarMenu() {
  );
 }

+function CrossSigninAlert() {
+  const deviceList = useDeviceList();
+  const unverified = deviceList?.filter((device) => isCrossVerified(device.device_id) === false);
+
+  if (!unverified?.length) return null;
+
+  return (
+    <SidebarAvatar
+      className="sidebar__cross-signin-alert"
+      tooltip={`${unverified.length} unverified sessions`}
+      onClick={() => openSettings(settingTabText.SECURITY)}
+      avatar={<Avatar iconSrc={ShieldUserIC} iconColor="var(--ic-danger-normal)" size="normal" />}
+    />
+  );
+}
+
 function FeaturedTab() {
  const { roomList, accountData, notifications } = initMatrix;
  const [selectedTab] = useSelectedTab();
@@ -358,6 +379,7 @@ function SideBar() {
              notificationBadge={<NotificationBadge alert content={totalInvites} />}
            />
          )}
+          <CrossSigninAlert />
          <ProfileAvatarMenu />
        </div>
      </div>
@@ -57,4 +57,21 @@
  width: 24px;
  height: 1px;
  background-color: var(--bg-surface-border);
+}
+
+.sidebar__cross-signin-alert .avatar-container {
+  box-shadow: var(--bs-danger-border);
+  animation-name: pushRight;
+  animation-duration: 400ms;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
+@keyframes pushRight {
+  from {
+    transform: translateX(4px) scale(1);
+  }
+  to {
+    transform: translateX(0) scale(1);
+  }
 }
@@ -1,37 +1,53 @@
 import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
+import { twemojify } from '../../../util/twemojify';

 import initMatrix from '../../../client/initMatrix';
 import colorMXID from '../../../util/colorMXID';

+import Text from '../../atoms/text/Text';
+import IconButton from '../../atoms/button/IconButton';
 import Button from '../../atoms/button/Button';
 import ImageUpload from '../../molecules/image-upload/ImageUpload';
 import Input from '../../atoms/input/Input';

+import PencilIC from '../../../../public/res/ic/outlined/pencil.svg';
+import { confirmDialog } from '../../molecules/confirm-dialog/ConfirmDialog';
+
 import './ProfileEditor.scss';

 // TODO Fix bug that prevents 'Save' button from enabling up until second changed.
-function ProfileEditor({
-  userId,
-}) {
+function ProfileEditor({ userId }) {
+  const [isEditing, setIsEditing] = useState(false);
  const mx = initMatrix.matrixClient;
+  const user = mx.getUser(mx.getUserId());
+
  const displayNameRef = useRef(null);
-  const bgColor = colorMXID(userId);
-  const [avatarSrc, setAvatarSrc] = useState(null);
+  const [avatarSrc, setAvatarSrc] = useState(user.avatarUrl ? mx.mxcUrlToHttp(user.avatarUrl, 80, 80, 'crop') : null);
+  const [username, setUsername] = useState(user.displayName);
  const [disabled, setDisabled] = useState(true);

-  let username = mx.getUser(mx.getUserId()).displayName;
-
  useEffect(() => {
+    let isMounted = true;
    mx.getProfileInfo(mx.getUserId()).then((info) => {
+      if (!isMounted) return;
      setAvatarSrc(info.avatar_url ? mx.mxcUrlToHttp(info.avatar_url, 80, 80, 'crop') : null);
+      setUsername(info.displayname);
    });
+    return () => {
+      isMounted = false;
+    };
  }, [userId]);

-  // Sets avatar URL and updates the avatar component in profile editor to reflect new upload
-  function handleAvatarUpload(url) {
+  const handleAvatarUpload = async (url) => {
    if (url === null) {
-      if (confirm('Are you sure you want to remove avatar?')) {
+      const isConfirmed = await confirmDialog(
+        'Remove avatar',
+        'Are you sure that you want to remove avatar?',
+        'Remove',
+        'caution',
+      );
+      if (isConfirmed) {
        mx.setAvatarUrl('');
        setAvatarSrc(null);
      }
@@ -39,48 +55,72 @@ function ProfileEditor({
    }
    mx.setAvatarUrl(url);
    setAvatarSrc(mx.mxcUrlToHttp(url, 80, 80, 'crop'));
-  }
+  };

-  function saveDisplayName() {
+  const saveDisplayName = () => {
    const newDisplayName = displayNameRef.current.value;
    if (newDisplayName !== null && newDisplayName !== username) {
      mx.setDisplayName(newDisplayName);
-      username = newDisplayName;
+      setUsername(newDisplayName);
      setDisabled(true);
+      setIsEditing(false);
    }
-  }
+  };

-  function onDisplayNameInputChange() {
+  const onDisplayNameInputChange = () => {
    setDisabled(username === displayNameRef.current.value || displayNameRef.current.value == null);
-  }
-  function cancelDisplayNameChanges() {
+  };
+  const cancelDisplayNameChanges = () => {
    displayNameRef.current.value = username;
    onDisplayNameInputChange();
-  }
+    setIsEditing(false);
+  };

-  return (
+  const renderForm = () => (
    <form
-      className="profile-editor"
+      className="profile-editor__form"
+      style={{ marginBottom: avatarSrc ? '24px' : '0' }}
      onSubmit={(e) => { e.preventDefault(); saveDisplayName(); }}
    >
+      <Input
+        label={`Display name of ${mx.getUserId()}`}
+        onChange={onDisplayNameInputChange}
+        value={mx.getUser(mx.getUserId()).displayName}
+        forwardRef={displayNameRef}
+      />
+      <Button variant="primary" type="submit" disabled={disabled}>Save</Button>
+      <Button onClick={cancelDisplayNameChanges}>Cancel</Button>
+    </form>
+  );
+
+  const renderInfo = () => (
+    <div className="profile-editor__info" style={{ marginBottom: avatarSrc ? '24px' : '0' }}>
+      <div>
+        <Text variant="h2" primary weight="medium">{twemojify(username)}</Text>
+        <IconButton
+          src={PencilIC}
+          size="extra-small"
+          tooltip="Edit"
+          onClick={() => setIsEditing(true)}
+        />
+      </div>
+      <Text variant="b2">{mx.getUserId()}</Text>
+    </div>
+  );
+
+  return (
+    <div className="profile-editor">
      <ImageUpload
        text={username}
-        bgColor={bgColor}
+        bgColor={colorMXID(userId)}
        imageSrc={avatarSrc}
        onUpload={handleAvatarUpload}
        onRequestRemove={() => handleAvatarUpload(null)}
      />
-      <div className="profile-editor__input-wrapper">
-        <Input
-          label={`Display name of ${mx.getUserId()}`}
-          onChange={onDisplayNameInputChange}
-          value={mx.getUser(mx.getUserId()).displayName}
-          forwardRef={displayNameRef}
-        />
-        <Button variant="primary" type="submit" disabled={disabled}>Save</Button>
-        <Button onClick={cancelDisplayNameChanges}>Cancel</Button>
-      </div>
-    </form>
+      {
+        isEditing ? renderForm() : renderInfo()
+      }
+    </div>
  );
 }

@@ -1,28 +1,41 @@
@use '../../partials/dir';
+@use '../../partials/flex';

 .profile-editor {
  display: flex;
-  align-items: flex-start;
+  align-items: flex-end;
 }

-.profile-editor__input-wrapper {
-  flex: 1;
-  min-width: 0;
-  margin-top: 10px;
-  
+.profile-editor__info,
+.profile-editor__form {
+  @extend .cp-fx__item-one;
+  @include dir.side(margin, var(--sp-loose), 0);
  display: flex;
-  align-items: flex-end;
+}
+
+.profile-editor__info {
+  flex-direction: column;
+  & > div:first-child {
+    display: flex;
+    align-items: center;
+  }
+  .ic-btn {
+    margin: 0 var(--sp-extra-tight);
+  }
+}
+
+.profile-editor__form {
+  margin-top: 10px;
  flex-wrap: wrap;
+  align-items: flex-end;

  & > .input-container  {
-    flex: 1;
+    @extend .cp-fx__item-one;
  }
  & > button {
    height: 46px;
    margin-top: var(--sp-normal);
-  }
-
-  & > * {
    @include dir.side(margin, var(--sp-normal), 0);
  }
+
 }
@@ -32,6 +32,7 @@ import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.s
 import CrossIC from '../../../../public/res/ic/outlined/cross.svg';

 import { useForceUpdate } from '../../hooks/useForceUpdate';
+import { confirmDialog } from '../../molecules/confirm-dialog/ConfirmDialog';

 function ModerationTools({
  roomId, userId,
@@ -362,7 +363,7 @@ function ProfileViewer() {
      && (powerLevel < myPowerLevel || userId === mx.getUserId())
    );

-    const handleChangePowerLevel = (newPowerLevel) => {
+    const handleChangePowerLevel = async (newPowerLevel) => {
      if (newPowerLevel === powerLevel) return;
      const SHARED_POWER_MSG = 'You will not be able to undo this change as you are promoting the user to have the same power level as yourself. Are you sure?';
      const DEMOTING_MYSELF_MSG = 'You will not be able to undo this change as you are demoting yourself. Are you sure?';
@@ -370,9 +371,14 @@ function ProfileViewer() {
      const isSharedPower = newPowerLevel === myPowerLevel;
      const isDemotingMyself = userId === mx.getUserId();
      if (isSharedPower || isDemotingMyself) {
-        if (confirm(isSharedPower ? SHARED_POWER_MSG : DEMOTING_MYSELF_MSG)) {
-          roomActions.setPowerLevel(roomId, userId, newPowerLevel);
-        }
+        const isConfirmed = await confirmDialog(
+          'Change power level',
+          isSharedPower ? SHARED_POWER_MSG : DEMOTING_MYSELF_MSG,
+          'Change',
+          'caution',
+        );
+        if (!isConfirmed) return;
+        roomActions.setPowerLevel(roomId, userId, newPowerLevel);
      } else {
        roomActions.setPowerLevel(roomId, userId, newPowerLevel);
      }
@@ -4,7 +4,7 @@ import './PublicRooms.scss';

 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
-import { selectRoom } from '../../../client/action/navigation';
+import { selectRoom, selectTab } from '../../../client/action/navigation';
 import * as roomActions from '../../../client/action/room';

 import Text from '../../atoms/text/Text';
@@ -179,7 +179,9 @@ function PublicRooms({ isOpen, searchTerm, onRequestClose }) {
  }, [joiningRooms]);

  function handleViewRoom(roomId) {
-    selectRoom(roomId);
+    const room = initMatrix.matrixClient.getRoom(roomId);
+    if (room.isSpaceRoom()) selectTab(roomId);
+    else selectRoom(roomId);
    onRequestClose();
  }

@@ -193,7 +195,7 @@ function PublicRooms({ isOpen, searchTerm, onRequestClose }) {
    return rooms.map((room) => {
      const alias = typeof room.canonical_alias === 'string' ? room.canonical_alias : room.room_id;
      const name = typeof room.name === 'string' ? room.name : alias;
-      const isJoined = initMatrix.roomList.rooms.has(room.room_id);
+      const isJoined = initMatrix.matrixClient.getRoom(room.room_id)?.getMyMembership() === 'join';
      return (
        <RoomTile
          key={room.room_id}
@@ -7,6 +7,10 @@ import SpaceAddExisting from '../../molecules/space-add-existing/SpaceAddExistin
 import Search from '../search/Search';
 import ViewSource from '../view-source/ViewSource';
 import CreateRoom from '../create-room/CreateRoom';
+import JoinAlias from '../join-alias/JoinAlias';
+import EmojiVerification from '../emoji-verification/EmojiVerification';
+
+import ReusableDialog from '../../molecules/dialog/ReusableDialog';

 function Dialogs() {
  return (
@@ -16,8 +20,12 @@ function Dialogs() {
      <ProfileViewer />
      <ShortcutSpaces />
      <CreateRoom />
+      <JoinAlias />
      <SpaceAddExisting />
      <Search />
+      <EmojiVerification />
+
+      <ReusableDialog />
    </>
  );
 }
@@ -18,7 +18,6 @@ function Windows() {
  const [inviteUser, changeInviteUser] = useState({
    isOpen: false, roomId: undefined, term: undefined,
  });
-  const [settings, changeSettings] = useState(false);

  function openInviteList() {
    changeInviteList(true);
@@ -36,20 +35,15 @@ function Windows() {
      searchTerm,
    });
  }
-  function openSettings() {
-    changeSettings(true);
-  }

  useEffect(() => {
    navigation.on(cons.events.navigation.INVITE_LIST_OPENED, openInviteList);
    navigation.on(cons.events.navigation.PUBLIC_ROOMS_OPENED, openPublicRooms);
    navigation.on(cons.events.navigation.INVITE_USER_OPENED, openInviteUser);
-    navigation.on(cons.events.navigation.SETTINGS_OPENED, openSettings);
    return () => {
      navigation.removeListener(cons.events.navigation.INVITE_LIST_OPENED, openInviteList);
      navigation.removeListener(cons.events.navigation.PUBLIC_ROOMS_OPENED, openPublicRooms);
      navigation.removeListener(cons.events.navigation.INVITE_USER_OPENED, openInviteUser);
-      navigation.removeListener(cons.events.navigation.SETTINGS_OPENED, openSettings);
    };
  }, []);

@@ -70,10 +64,7 @@ function Windows() {
        searchTerm={inviteUser.searchTerm}
        onRequestClose={() => changeInviteUser({ isOpen: false, roomId: undefined })}
      />
-      <Settings
-        isOpen={settings}
-        onRequestClose={() => changeSettings(false)}
-      />
+      <Settings />
      <SpaceSettings />
      <SpaceManage />
    </>
@@ -64,9 +64,11 @@ function ReadReceipts() {
      onRequestClose={() => setIsOpen(false)}
      contentOptions={<IconButton src={CrossIC} onClick={() => setIsOpen(false)} tooltip="Close" />}
    >
-      {
-        readers.map(renderPeople)
-      }
+      <div style={{ marginTop: 'var(--sp-tight)', marginBottom: 'var(--sp-extra-loose)' }}>
+        {
+          readers.map(renderPeople)
+        }
+      </div>
    </Dialog>
  );
 }
@@ -3,9 +3,10 @@ import './Room.scss';

 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
-import navigation from '../../../client/state/navigation';
 import settings from '../../../client/state/settings';
 import RoomTimeline from '../../../client/state/RoomTimeline';
+import navigation from '../../../client/state/navigation';
+import { openNavigation } from '../../../client/action/navigation';

 import Welcome from '../welcome/Welcome';
 import RoomView from './RoomView';
@@ -53,7 +54,10 @@ function Room() {
  }, []);

  const { roomTimeline, eventId } = roomInfo;
-  if (roomTimeline === null) return <Welcome />;
+  if (roomTimeline === null) {
+    setTimeout(() => openNavigation());
+    return <Welcome />;
+  }

  return (
    <div className="room">
@@ -61,7 +65,7 @@ function Room() {
        <RoomSettings roomId={roomTimeline.roomId} />
        <RoomView roomTimeline={roomTimeline} eventId={eventId} />
      </div>
-      { isDrawer && <PeopleDrawer roomId={roomTimeline.roomId} />}
+      {isDrawer && <PeopleDrawer roomId={roomTimeline.roomId} />}
    </div>
  );
 }
@@ -1,4 +1,5 @@
@use '../../partials/flex';
+@use '../../partials/screen';

 .room {
  @extend .cp-fx__row;
@@ -9,4 +10,10 @@
    position: relative;
    overflow: hidden;
  }
-}
+}
+
+.room .people-drawer {
+  @include screen.smallerThan(tabletBreakpoint) {
+    display: none;
+  }
+}
@@ -36,6 +36,7 @@ import LeaveArrowIC from '../../../../public/res/ic/outlined/leave-arrow.svg';
 import ChevronTopIC from '../../../../public/res/ic/outlined/chevron-top.svg';

 import { useForceUpdate } from '../../hooks/useForceUpdate';
+import { confirmDialog } from '../../molecules/confirm-dialog/ConfirmDialog';

 const tabText = {
  GENERAL: 'General',
@@ -85,10 +86,15 @@ function GeneralSettings({ roomId }) {
        </MenuItem>
        <MenuItem
          variant="danger"
-          onClick={() => {
-            if (confirm('Are you really want to leave this room?')) {
-              roomActions.leave(roomId);
-            }
+          onClick={async () => {
+            const isConfirmed = await confirmDialog(
+              'Leave room',
+              `Are you sure that you want to leave "${room.name}" room?`,
+              'Leave',
+              'danger',
+            );
+            if (!isConfirmed) return;
+            roomActions.leave(roomId);
          }}
          iconSrc={LeaveArrowIC}
        >
@@ -123,7 +129,7 @@ function SecuritySettings({ roomId }) {
        <RoomEncryption roomId={roomId} />
      </div>
      <div className="room-settings__card">
-        <MenuHeader>Message history visibility (Who can read history)</MenuHeader>
+        <MenuHeader>Message history visibility</MenuHeader>
        <RoomHistoryVisibility roomId={roomId} />
      </div>
    </>
@@ -1,4 +1,6 @@
@use '../../partials/flex';
+@use '../../partials/screen';
+@use '../../partials/dir';

 .room-view {
  @extend .cp-fx__column;
@@ -18,6 +20,12 @@
    box-shadow: var(--bs-popup);
  }

+  & .header {
+    @include screen.smallerThan(mobileBreakpoint) {
+      padding: 0 var(--sp-tight);
+    }
+  }
+
  &__content-wrapper {
    @extend .cp-fx__item-one;
    @extend .cp-fx__column;
@@ -44,7 +44,9 @@ const commands = [{
 }, {
  name: 'leave',
  description: 'Leave current room',
-  exe: (roomId) => roomActions.leave(roomId),
+  exe: (roomId) => {
+    roomActions.leave(roomId);
+  },
 }, {
  name: 'invite',
  isOptions: true,
@@ -10,7 +10,7 @@
  &__info {
    display: flex;
    width: 40px;
-    @include dir.side(margin, 10px, 14px);
+    @include dir.side(margin, 14px, 10px);

    & > * {
      margin: auto;
@@ -8,6 +8,7 @@ import PropTypes from 'prop-types';
 import './RoomViewContent.scss';

 import dateFormat from 'dateformat';
+import { twemojify } from '../../../util/twemojify';

 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
@@ -50,21 +51,54 @@ function loadingMsgPlaceholders(key, count = 2) {
  );
 }

-function genRoomIntro(mEvent, roomTimeline) {
+function RoomIntroContainer({ event, timeline }) {
+  const [, nameForceUpdate] = useForceUpdate();
  const mx = initMatrix.matrixClient;
-  const roomTopic = roomTimeline.room.currentState.getStateEvents('m.room.topic')[0]?.getContent().topic;
-  const isDM = initMatrix.roomList.directs.has(roomTimeline.roomId);
-  let avatarSrc = roomTimeline.room.getAvatarUrl(mx.baseUrl, 80, 80, 'crop');
-  avatarSrc = isDM ? roomTimeline.room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 80, 80, 'crop') : avatarSrc;
+  const { roomList } = initMatrix;
+  const { room } = timeline;
+  const roomTopic = room.currentState.getStateEvents('m.room.topic')[0]?.getContent().topic;
+  const isDM = roomList.directs.has(timeline.roomId);
+  let avatarSrc = room.getAvatarUrl(mx.baseUrl, 80, 80, 'crop');
+  avatarSrc = isDM ? room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 80, 80, 'crop') : avatarSrc;
+
+  const heading = isDM ? room.name : `Welcome to ${room.name}`;
+  const topic = twemojify(roomTopic || '', undefined, true);
+  const nameJsx = twemojify(room.name);
+  const desc = isDM
+    ? (
+      <>
+        This is the beginning of your direct message history with @
+        <b>{nameJsx}</b>
+        {'. '}
+        {topic}
+      </>
+    )
+    : (
+      <>
+        {'This is the beginning of the '}
+        <b>{nameJsx}</b>
+        {' room. '}
+        {topic}
+      </>
+    );
+
+  useEffect(() => {
+    const handleUpdate = () => nameForceUpdate();
+
+    roomList.on(cons.events.roomList.ROOM_PROFILE_UPDATED, handleUpdate);
+    return () => {
+      roomList.removeListener(cons.events.roomList.ROOM_PROFILE_UPDATED, handleUpdate);
+    };
+  }, []);
+
  return (
    <RoomIntro
-      key={mEvent ? mEvent.getId() : 'room-intro'}
-      roomId={roomTimeline.roomId}
+      roomId={timeline.roomId}
      avatarSrc={avatarSrc}
-      name={roomTimeline.room.name}
-      heading={`Welcome to ${roomTimeline.room.name}`}
-      desc={`This is the beginning of ${roomTimeline.room.name} room.${typeof roomTopic !== 'undefined' ? (` Topic: ${roomTopic}`) : ''}`}
-      time={mEvent ? `Created at ${dateFormat(mEvent.getDate(), 'dd mmmm yyyy, hh:MM TT')}` : null}
+      name={room.name}
+      heading={twemojify(heading)}
+      desc={desc}
+      time={event ? `Created at ${dateFormat(event.getDate(), 'dd mmmm yyyy, hh:MM TT')}` : null}
    />
  );
 }
@@ -199,7 +233,7 @@ function usePaginate(
    };
    roomTimeline.on(cons.events.roomTimeline.PAGINATED, handlePaginatedFromServer);
    return () => {
-      roomTimeline.on(cons.events.roomTimeline.PAGINATED, handlePaginatedFromServer);
+      roomTimeline.removeListener(cons.events.roomTimeline.PAGINATED, handlePaginatedFromServer);
    };
  }, [roomTimeline]);

@@ -470,12 +504,14 @@ function RoomViewContent({ eventId, roomTimeline }) {

      if (i === 0 && !roomTimeline.canPaginateBackward()) {
        if (mEvent.getType() === 'm.room.create') {
-          tl.push(genRoomIntro(mEvent, roomTimeline));
+          tl.push(
+            <RoomIntroContainer key={mEvent.getId()} event={mEvent} timeline={roomTimeline} />,
+          );
          itemCountIndex += 1;
          // eslint-disable-next-line no-continue
          continue;
        } else {
-          tl.push(genRoomIntro(undefined, roomTimeline));
+          tl.push(<RoomIntroContainer key="room-intro" event={null} timeline={roomTimeline} />);
          itemCountIndex += 1;
        }
      }
@@ -8,7 +8,7 @@ import { blurOnBubbling } from '../../atoms/button/script';
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import navigation from '../../../client/state/navigation';
-import { toggleRoomSettings, openReusableContextMenu } from '../../../client/action/navigation';
+import { toggleRoomSettings, openReusableContextMenu, openNavigation } from '../../../client/action/navigation';
 import { togglePeopleDrawer } from '../../../client/action/settings';
 import colorMXID from '../../../util/colorMXID';
 import { getEventCords } from '../../../util/common';
@@ -25,6 +25,7 @@ import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.s
 import SearchIC from '../../../../public/res/ic/outlined/search.svg';
 import UserIC from '../../../../public/res/ic/outlined/user.svg';
 import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg';
+import BackArrowIC from '../../../../public/res/ic/outlined/chevron-left.svg';

 import { useForceUpdate } from '../../hooks/useForceUpdate';

@@ -73,6 +74,12 @@ function RoomViewHeader({ roomId }) {

  return (
    <Header>
+      <IconButton
+        src={BackArrowIC}
+        className="room-header__back-btn"
+        tooltip="Return to navigation"
+        onClick={() => openNavigation()}
+      />
      <button
        ref={roomHeaderBtnRef}
        className="room-header__btn"
@@ -87,7 +94,8 @@ function RoomViewHeader({ roomId }) {
        <RawIcon src={ChevronBottomIC} />
      </button>
      <IconButton onClick={() => toggleRoomSettings(tabText.SEARCH)} tooltip="Search" src={SearchIC} />
-      <IconButton onClick={togglePeopleDrawer} tooltip="People" src={UserIC} />
+      <IconButton className="room-header__drawer-btn" onClick={togglePeopleDrawer} tooltip="People" src={UserIC} />
+      <IconButton className="room-header__members-btn" onClick={() => toggleRoomSettings(tabText.MEMBERS)} tooltip="Members" src={UserIC} />
      <IconButton
        onClick={openRoomOptions}
        tooltip="Options"
@@ -1,5 +1,6 @@
@use '../../partials/flex';
@use '../../partials/dir';
+@use '../../partials/screen';

 .room-header__btn {
  min-width: 0;
@@ -24,4 +25,23 @@
    box-shadow: var(--bs-surface-outline);
    outline: none;
  }
-}
+}
+
+.room-header__drawer-btn {
+  @include screen.smallerThan(tabletBreakpoint) {
+    display: none;
+  }
+}
+.room-header__members-btn {
+  @include screen.biggerThan(tabletBreakpoint) {
+    display: none;
+  }
+}
+
+.room-header__back-btn {
+  @include dir.side(margin, 0, var(--sp-tight));
+
+  @include screen.biggerThan(mobileBreakpoint) {
+    display: none;
+  }
+}
@@ -199,7 +199,7 @@ function Search() {

  return (
    <RawModal
-      className="search-dialog__model dialog-model"
+      className="search-dialog__modal dialog-modal"
      isOpen={isOpen}
      onAfterOpen={handleAfterOpen}
      onAfterClose={handleAfterClose}
@@ -1,6 +1,6 @@
@use '../../partials/dir';

-.search-dialog__model {
+.search-dialog__modal {
  --modal-height: 380px;
  height: 100%;
  background-color: var(--bg-surface);
@@ -0,0 +1,117 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import './AuthRequest.scss';
+
+import initMatrix from '../../../client/initMatrix';
+import { openReusableDialog } from '../../../client/action/navigation';
+
+import Text from '../../atoms/text/Text';
+import Button from '../../atoms/button/Button';
+import Input from '../../atoms/input/Input';
+import Spinner from '../../atoms/spinner/Spinner';
+
+import { useStore } from '../../hooks/useStore';
+
+let lastUsedPassword;
+const getAuthId = (password) => ({
+  type: 'm.login.password',
+  password,
+  identifier: {
+    type: 'm.id.user',
+    user: initMatrix.matrixClient.getUserId(),
+  },
+});
+
+function AuthRequest({ onComplete, makeRequest }) {
+  const [status, setStatus] = useState(false);
+  const mountStore = useStore();
+
+  const handleForm = async (e) => {
+    mountStore.setItem(true);
+    e.preventDefault();
+    const password = e.target.password.value;
+    if (password.trim() === '') return;
+    try {
+      setStatus({ ongoing: true });
+      await makeRequest(getAuthId(password));
+      lastUsedPassword = password;
+      if (!mountStore.getItem()) return;
+      onComplete(true);
+    } catch (err) {
+      lastUsedPassword = undefined;
+      if (!mountStore.getItem()) return;
+      if (err.errcode === 'M_FORBIDDEN') {
+        setStatus({ error: 'Wrong password. Please enter correct password.' });
+        return;
+      }
+      setStatus({ error: 'Request failed!' });
+    }
+  };
+
+  const handleChange = () => {
+    setStatus(false);
+  };
+
+  return (
+    <div className="auth-request">
+      <form onSubmit={handleForm}>
+        <Input
+          name="password"
+          label="Account password"
+          type="password"
+          onChange={handleChange}
+          required
+        />
+        {status.ongoing && <Spinner size="small" />}
+        {status.error && <Text variant="b3">{status.error}</Text>}
+        {(status === false || status.error) && <Button variant="primary" type="submit" disabled={!!status.error}>Continue</Button>}
+      </form>
+    </div>
+  );
+}
+AuthRequest.propTypes = {
+  onComplete: PropTypes.func.isRequired,
+  makeRequest: PropTypes.func.isRequired,
+};
+
+/**
+ * @param {string} title Title of dialog
+ * @param {(auth) => void} makeRequest request to make
+ * @returns {Promise<boolean>} whether the request succeed or not.
+ */
+export const authRequest = async (title, makeRequest) => {
+  try {
+    const auth = lastUsedPassword ? getAuthId(lastUsedPassword) : undefined;
+    await makeRequest(auth);
+    return true;
+  } catch (e) {
+    lastUsedPassword = undefined;
+    if (e.httpStatus !== 401 || e.data?.flows === undefined) return false;
+
+    const { flows } = e.data;
+    const canUsePassword = flows.find((f) => f.stages.includes('m.login.password'));
+    if (!canUsePassword) return false;
+
+    return new Promise((resolve) => {
+      let isCompleted = false;
+      openReusableDialog(
+        <Text variant="s1" weight="medium">{title}</Text>,
+        (requestClose) => (
+          <AuthRequest
+            onComplete={(done) => {
+              isCompleted = true;
+              resolve(done);
+              requestClose();
+            }}
+            makeRequest={makeRequest}
+          />
+        ),
+        () => {
+          if (!isCompleted) resolve(false);
+        },
+      );
+    });
+  }
+};
+
+export default AuthRequest;
@@ -0,0 +1,12 @@
+.auth-request {
+  padding: var(--sp-normal);
+
+  & form > *:not(:first-child) {
+    margin-top: var(--sp-normal);
+  }
+
+  & .text-b3 {
+    color: var(--tc-danger-high);
+    margin-top: var(--sp-ultra-tight) !important;
+  }
+}
@@ -0,0 +1,223 @@
+/* eslint-disable react/jsx-one-expression-per-line */
+import React, { useState } from 'react';
+import './CrossSigning.scss';
+import FileSaver from 'file-saver';
+import { Formik } from 'formik';
+import { twemojify } from '../../../util/twemojify';
+
+import initMatrix from '../../../client/initMatrix';
+import { openReusableDialog } from '../../../client/action/navigation';
+import { copyToClipboard } from '../../../util/common';
+import { clearSecretStorageKeys } from '../../../client/state/secretStorageKeys';
+
+import Text from '../../atoms/text/Text';
+import Button from '../../atoms/button/Button';
+import Input from '../../atoms/input/Input';
+import Spinner from '../../atoms/spinner/Spinner';
+import SettingTile from '../../molecules/setting-tile/SettingTile';
+
+import { authRequest } from './AuthRequest';
+import { useCrossSigningStatus } from '../../hooks/useCrossSigningStatus';
+
+const failedDialog = () => {
+  const renderFailure = (requestClose) => (
+    <div className="cross-signing__failure">
+      <Text variant="h1">{twemojify('❌')}</Text>
+      <Text weight="medium">Failed to setup cross signing. Please try again.</Text>
+      <Button onClick={requestClose}>Close</Button>
+    </div>
+  );
+
+  openReusableDialog(
+    <Text variant="s1" weight="medium">Setup cross signing</Text>,
+    renderFailure,
+  );
+};
+
+const securityKeyDialog = (key) => {
+  const downloadKey = () => {
+    const blob = new Blob([key.encodedPrivateKey], {
+      type: 'text/plain;charset=us-ascii',
+    });
+    FileSaver.saveAs(blob, 'security-key.txt');
+  };
+  const copyKey = () => {
+    copyToClipboard(key.encodedPrivateKey);
+  };
+
+  const renderSecurityKey = () => (
+    <div className="cross-signing__key">
+      <Text weight="medium">Please save this security key somewhere safe.</Text>
+      <Text className="cross-signing__key-text">
+        {key.encodedPrivateKey}
+      </Text>
+      <div className="cross-signing__key-btn">
+        <Button variant="primary" onClick={() => copyKey(key)}>Copy</Button>
+        <Button onClick={() => downloadKey(key)}>Download</Button>
+      </div>
+    </div>
+  );
+
+  // Download automatically.
+  downloadKey();
+
+  openReusableDialog(
+    <Text variant="s1" weight="medium">Security Key</Text>,
+    () => renderSecurityKey(),
+  );
+};
+
+function CrossSigningSetup() {
+  const initialValues = { phrase: '', confirmPhrase: '' };
+  const [genWithPhrase, setGenWithPhrase] = useState(undefined);
+
+  const setup = async (securityPhrase = undefined) => {
+    const mx = initMatrix.matrixClient;
+    setGenWithPhrase(typeof securityPhrase === 'string');
+    const recoveryKey = await mx.createRecoveryKeyFromPassphrase(securityPhrase);
+    clearSecretStorageKeys();
+
+    await mx.bootstrapSecretStorage({
+      createSecretStorageKey: async () => recoveryKey,
+      setupNewKeyBackup: true,
+      setupNewSecretStorage: true,
+    });
+
+    const authUploadDeviceSigningKeys = async (makeRequest) => {
+      const isDone = await authRequest('Setup cross signing', async (auth) => {
+        await makeRequest(auth);
+      });
+      setTimeout(() => {
+        if (isDone) securityKeyDialog(recoveryKey);
+        else failedDialog();
+      });
+    };
+
+    await mx.bootstrapCrossSigning({
+      authUploadDeviceSigningKeys,
+      setupNewCrossSigning: true,
+    });
+  };
+
+  const validator = (values) => {
+    const errors = {};
+    if (values.phrase === '12345678') {
+      errors.phrase = 'How about 87654321 ?';
+    }
+    if (values.phrase === '87654321') {
+      errors.phrase = 'Your are playing with 🔥';
+    }
+    const PHRASE_REGEX = /^([^\s]){8,127}$/;
+    if (values.phrase.length > 0 && !PHRASE_REGEX.test(values.phrase)) {
+      errors.phrase = 'Phrase must contain 8-127 characters with no space.';
+    }
+    if (values.confirmPhrase.length > 0 && values.confirmPhrase !== values.phrase) {
+      errors.confirmPhrase = 'Phrase don\'t match.';
+    }
+    return errors;
+  };
+
+  return (
+    <div className="cross-signing__setup">
+      <div className="cross-signing__setup-entry">
+        <Text>
+          We will generate a <b>Security Key</b>, 
+          which you can use to manage messages backup and session verification.
+        </Text>
+        {genWithPhrase !== false && <Button variant="primary" onClick={() => setup()} disabled={genWithPhrase !== undefined}>Generate Key</Button>}
+        {genWithPhrase === false && <Spinner size="small" />}
+      </div>
+      <Text className="cross-signing__setup-divider">OR</Text>
+      <Formik
+        initialValues={initialValues}
+        onSubmit={(values) => setup(values.phrase)}
+        validate={validator}
+      >
+        {({
+          values, errors, handleChange, handleSubmit,
+        }) => (
+          <form
+            className="cross-signing__setup-entry"
+            onSubmit={handleSubmit}
+            disabled={genWithPhrase !== undefined}
+          >
+            <Text>
+              Alternatively you can also set a <b>Security Phrase </b>
+              so you don't have to remember long Security Key, 
+              and optionally save the Key as backup.
+            </Text>
+            <Input
+              name="phrase"
+              value={values.phrase}
+              onChange={handleChange}
+              label="Security Phrase"
+              type="password"
+              required
+              disabled={genWithPhrase !== undefined}
+            />
+            {errors.phrase && <Text variant="b3" className="cross-signing__error">{errors.phrase}</Text>}
+            <Input
+              name="confirmPhrase"
+              value={values.confirmPhrase}
+              onChange={handleChange}
+              label="Confirm Security Phrase"
+              type="password"
+              required
+              disabled={genWithPhrase !== undefined}
+            />
+            {errors.confirmPhrase && <Text variant="b3" className="cross-signing__error">{errors.confirmPhrase}</Text>}
+            {genWithPhrase !== true && <Button variant="primary" type="submit" disabled={genWithPhrase !== undefined}>Set Phrase & Generate Key</Button>}
+            {genWithPhrase === true && <Spinner size="small" />}
+          </form>
+        )}
+      </Formik>
+    </div>
+  );
+}
+
+const setupDialog = () => {
+  openReusableDialog(
+    <Text variant="s1" weight="medium">Setup cross signing</Text>,
+    () => <CrossSigningSetup />,
+  );
+};
+
+function CrossSigningReset() {
+  return (
+    <div className="cross-signing__reset">
+      <Text variant="h1">{twemojify('✋🧑‍🚒🤚')}</Text>
+      <Text weight="medium">Resetting cross-signing keys is permanent.</Text>
+      <Text>
+        Anyone you have verified with will see security alerts and your message backup will lost. 
+        You almost certainly do not want to do this, 
+        unless you have lost <b>Security Key</b> or <b>Phrase</b> and 
+        every session you can cross-sign from.
+      </Text>
+      <Button variant="danger" onClick={setupDialog}>Reset</Button>
+    </div>
+  );
+}
+
+const resetDialog = () => {
+  openReusableDialog(
+    <Text variant="s1" weight="medium">Reset cross signing</Text>,
+    () => <CrossSigningReset />,
+  );
+};
+
+function CrossSignin() {
+  const isCSEnabled = useCrossSigningStatus();
+  return (
+    <SettingTile
+      title="Cross signing"
+      content={<Text variant="b3">Setup to verify and keep track of all your sessions. Also required to backup encrypted message.</Text>}
+      options={(
+        isCSEnabled
+          ? <Button variant="danger" onClick={resetDialog}>Reset</Button>
+          : <Button variant="primary" onClick={setupDialog}>Setup</Button>
+      )}
+    />
+  );
+}
+
+export default CrossSignin;
@@ -0,0 +1,55 @@
+.cross-signing {
+  &__setup {
+    padding: var(--sp-normal);
+  }
+  &__setup-entry {
+    & > *:not(:first-child) {
+      margin-top: var(--sp-normal);
+    }
+  }
+
+  &__error {
+    color: var(--tc-danger-high);
+    margin-top: var(--sp-ultra-tight) !important;
+  }
+
+  &__setup-divider {
+    margin: var(--sp-tight) 0;
+    display: flex;
+    align-items: center;
+  
+    &::before,
+    &::after {
+      flex: 1;
+      content: '';
+      margin: var(--sp-tight) 0;
+      border-bottom: 1px solid var(--bg-surface-border);
+    }
+  }
+}
+
+.cross-signing__key {
+  padding: var(--sp-normal);
+
+  &-text {
+    margin: var(--sp-normal) 0;
+    padding: var(--sp-extra-tight);
+    background-color: var(--bg-surface-low);
+    border-radius: var(--bo-radius);
+  }
+  &-btn {
+    display: flex;
+    & > button:last-child {
+      margin: 0 var(--sp-normal);
+    }
+  }
+}
+
+.cross-signing__failure,
+.cross-signing__reset {
+  padding: var(--sp-normal);
+  padding-top: var(--sp-extra-loose);
+  & > .text {
+    padding-bottom: var(--sp-normal);
+  }
+}
@@ -0,0 +1,262 @@
+import React, { useState, useEffect } from 'react';
+import './DeviceManage.scss';
+import dateFormat from 'dateformat';
+
+import initMatrix from '../../../client/initMatrix';
+import { isCrossVerified } from '../../../util/matrixUtil';
+import { openReusableDialog, openEmojiVerification } from '../../../client/action/navigation';
+
+import Text from '../../atoms/text/Text';
+import Button from '../../atoms/button/Button';
+import IconButton from '../../atoms/button/IconButton';
+import Input from '../../atoms/input/Input';
+import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
+import InfoCard from '../../atoms/card/InfoCard';
+import Spinner from '../../atoms/spinner/Spinner';
+import SettingTile from '../../molecules/setting-tile/SettingTile';
+
+import PencilIC from '../../../../public/res/ic/outlined/pencil.svg';
+import BinIC from '../../../../public/res/ic/outlined/bin.svg';
+import InfoIC from '../../../../public/res/ic/outlined/info.svg';
+
+import { authRequest } from './AuthRequest';
+import { confirmDialog } from '../../molecules/confirm-dialog/ConfirmDialog';
+
+import { useStore } from '../../hooks/useStore';
+import { useDeviceList } from '../../hooks/useDeviceList';
+import { useCrossSigningStatus } from '../../hooks/useCrossSigningStatus';
+import { accessSecretStorage } from './SecretStorageAccess';
+
+const promptDeviceName = async (deviceName) => new Promise((resolve) => {
+  let isCompleted = false;
+
+  const renderContent = (onComplete) => {
+    const handleSubmit = (e) => {
+      e.preventDefault();
+      const name = e.target.session.value;
+      if (typeof name !== 'string') onComplete(null);
+      onComplete(name);
+    };
+    return (
+      <form className="device-manage__rename" onSubmit={handleSubmit}>
+        <Input value={deviceName} label="Session name" name="session" />
+        <div className="device-manage__rename-btn">
+          <Button variant="primary" type="submit">Save</Button>
+          <Button onClick={() => onComplete(null)}>Cancel</Button>
+        </div>
+      </form>
+    );
+  };
+
+  openReusableDialog(
+    <Text variant="s1" weight="medium">Edit session name</Text>,
+    (requestClose) => renderContent((name) => {
+      isCompleted = true;
+      resolve(name);
+      requestClose();
+    }),
+    () => {
+      if (!isCompleted) resolve(null);
+    },
+  );
+});
+
+function DeviceManage() {
+  const TRUNCATED_COUNT = 4;
+  const mx = initMatrix.matrixClient;
+  const isCSEnabled = useCrossSigningStatus();
+  const deviceList = useDeviceList();
+  const [processing, setProcessing] = useState([]);
+  const [truncated, setTruncated] = useState(true);
+  const mountStore = useStore();
+  mountStore.setItem(true);
+  const isMeVerified = isCrossVerified(mx.deviceId);
+
+  useEffect(() => {
+    setProcessing([]);
+  }, [deviceList]);
+
+  const addToProcessing = (device) => {
+    const old = [...processing];
+    old.push(device.device_id);
+    setProcessing(old);
+  };
+
+  const removeFromProcessing = () => {
+    setProcessing([]);
+  };
+
+  if (deviceList === null) {
+    return (
+      <div className="device-manage">
+        <div className="device-manage__loading">
+          <Spinner size="small" />
+          <Text>Loading devices...</Text>
+        </div>
+      </div>
+    );
+  }
+
+  const handleRename = async (device) => {
+    const newName = await promptDeviceName(device.display_name);
+    if (newName === null || newName.trim() === '') return;
+    if (newName.trim() === device.display_name) return;
+    addToProcessing(device);
+    try {
+      await mx.setDeviceDetails(device.device_id, {
+        display_name: newName,
+      });
+    } catch {
+      if (!mountStore.getItem()) return;
+      removeFromProcessing(device);
+    }
+  };
+
+  const handleRemove = async (device) => {
+    const isConfirmed = await confirmDialog(
+      `Logout ${device.display_name}`,
+      `You are about to logout "${device.display_name}" session.`,
+      'Logout',
+      'danger',
+    );
+    if (!isConfirmed) return;
+    addToProcessing(device);
+    await authRequest(`Logout "${device.display_name}"`, async (auth) => {
+      await mx.deleteDevice(device.device_id, auth);
+    });
+
+    if (!mountStore.getItem()) return;
+    removeFromProcessing(device);
+  };
+
+  const verifyWithKey = async (device) => {
+    const keyData = await accessSecretStorage('Session verification');
+    if (!keyData) return;
+    addToProcessing(device);
+    await mx.checkOwnCrossSigningTrust();
+  };
+
+  const verifyWithEmojis = async (deviceId) => {
+    const req = await mx.requestVerification(mx.getUserId(), [deviceId]);
+    openEmojiVerification(req, { userId: mx.getUserId(), deviceId });
+  };
+
+  const verify = (deviceId, isCurrentDevice) => {
+    if (isCurrentDevice) {
+      verifyWithKey(deviceId);
+      return;
+    }
+    verifyWithEmojis(deviceId);
+  };
+
+  const renderDevice = (device, isVerified) => {
+    const deviceId = device.device_id;
+    const displayName = device.display_name;
+    const lastIP = device.last_seen_ip;
+    const lastTS = device.last_seen_ts;
+    const isCurrentDevice = mx.deviceId === deviceId;
+
+    return (
+      <SettingTile
+        key={deviceId}
+        title={(
+          <Text style={{ color: isVerified !== false ? '' : 'var(--tc-danger-high)' }}>
+            {displayName}
+            <Text variant="b3" span>{`${displayName ? ' — ' : ''}${deviceId}`}</Text>
+            {isCurrentDevice && <Text span className="device-manage__current-label" variant="b3">Current</Text>}
+          </Text>
+        )}
+        options={
+          processing.includes(deviceId)
+            ? <Spinner size="small" />
+            : (
+              <>
+                {((isMeVerified && isVerified === false) || (isCurrentDevice && isVerified === false)) && <Button onClick={() => verify(deviceId, isCurrentDevice)} variant="positive">Verify</Button>}
+                <IconButton size="small" onClick={() => handleRename(device)} src={PencilIC} tooltip="Rename" />
+                <IconButton size="small" onClick={() => handleRemove(device)} src={BinIC} tooltip="Remove session" />
+              </>
+            )
+        }
+        content={(
+          <>
+            <Text variant="b3">
+              Last activity
+              <span style={{ color: 'var(--tc-surface-normal)' }}>
+                {dateFormat(new Date(lastTS), ' hh:MM TT, dd/mm/yyyy')}
+              </span>
+              {lastIP ? ` at ${lastIP}` : ''}
+            </Text>
+            {isCurrentDevice && (
+              <Text style={{ marginTop: 'var(--sp-ultra-tight)' }} variant="b3">
+                {`Session Key: ${initMatrix.matrixClient.getDeviceEd25519Key().match(/.{1,4}/g).join(' ')}`}
+              </Text>
+            )}
+          </>
+        )}
+      />
+    );
+  };
+
+  const unverified = [];
+  const verified = [];
+  const noEncryption = [];
+  deviceList.sort((a, b) => b.last_seen_ts - a.last_seen_ts).forEach((device) => {
+    const isVerified = isCrossVerified(device.device_id);
+    if (isVerified === true) {
+      verified.push(device);
+    } else if (isVerified === false) {
+      unverified.push(device);
+    } else {
+      noEncryption.push(device);
+    }
+  });
+  return (
+    <div className="device-manage">
+      <div>
+        <MenuHeader>Unverified sessions</MenuHeader>
+        {!isCSEnabled && (
+          <div style={{ padding: 'var(--sp-extra-tight) var(--sp-normal)' }}>
+            <InfoCard
+              rounded
+              variant="caution"
+              iconSrc={InfoIC}
+              title="Setup cross signing in case you lose all your sessions."
+            />
+          </div>
+        )}
+        {
+          unverified.length > 0
+            ? unverified.map((device) => renderDevice(device, false))
+            : <Text className="device-manage__info">No unverified sessions</Text>
+        }
+      </div>
+      {noEncryption.length > 0 && (
+      <div>
+        <MenuHeader>Sessions without encryption support</MenuHeader>
+        {noEncryption.map((device) => renderDevice(device, null))}
+      </div>
+      )}
+      <div>
+        <MenuHeader>Verified sessions</MenuHeader>
+        {
+          verified.length > 0
+            ? verified.map((device, index) => {
+              if (truncated && index >= TRUNCATED_COUNT) return null;
+              return renderDevice(device, true);
+            })
+            : <Text className="device-manage__info">No verified sessions</Text>
+        }
+        { verified.length > TRUNCATED_COUNT && (
+          <Button className="device-manage__info" onClick={() => setTruncated(!truncated)}>
+            {truncated ? `View ${verified.length - 4} more` : 'View less'}
+          </Button>
+        )}
+        { deviceList.length > 0 && (
+          <Text className="device-manage__info" variant="b3">Session names are visible to everyone, so do not put any private info here.</Text>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default DeviceManage;
@@ -0,0 +1,46 @@
+@use '../../partials/flex';
+
+.device-manage {
+  &__loading {
+    @extend .cp-fx__row--c-c;
+    padding: var(--sp-extra-loose) var(--sp-normal);
+
+    .text {
+      margin: 0 var(--sp-normal);
+    }
+  }
+  &__info {
+    margin: var(--sp-normal);
+  }
+  & .setting-tile:last-of-type {
+     border-bottom: none;
+  }
+  & .setting-tile__options {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-ultra-tight);
+    & .btn-positive {
+      padding: 6px var(--sp-tight);
+      min-width: 0;
+    }
+  }
+
+  &__current-label {
+    margin: 0 var(--sp-extra-tight);
+    padding: 2px var(--sp-ultra-tight);
+    color: var(--bg-surface);
+    background-color: var(--tc-surface-low);
+    border-radius: 4px;
+  }
+
+  &__rename {
+    padding: var(--sp-normal);
+    & > *:not(:last-child) {
+      margin-bottom: var(--sp-normal);
+    }
+    &-btn {
+      display: flex;
+      gap: var(--sp-normal);
+    }
+  }
+}
@@ -0,0 +1,288 @@
+/* eslint-disable react/prop-types */
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import './KeyBackup.scss';
+import { twemojify } from '../../../util/twemojify';
+
+import initMatrix from '../../../client/initMatrix';
+import { openReusableDialog } from '../../../client/action/navigation';
+import { deletePrivateKey } from '../../../client/state/secretStorageKeys';
+
+import Text from '../../atoms/text/Text';
+import Button from '../../atoms/button/Button';
+import IconButton from '../../atoms/button/IconButton';
+import Spinner from '../../atoms/spinner/Spinner';
+import InfoCard from '../../atoms/card/InfoCard';
+import SettingTile from '../../molecules/setting-tile/SettingTile';
+
+import { accessSecretStorage } from './SecretStorageAccess';
+
+import InfoIC from '../../../../public/res/ic/outlined/info.svg';
+import BinIC from '../../../../public/res/ic/outlined/bin.svg';
+import DownloadIC from '../../../../public/res/ic/outlined/download.svg';
+
+import { useStore } from '../../hooks/useStore';
+import { useCrossSigningStatus } from '../../hooks/useCrossSigningStatus';
+
+function CreateKeyBackupDialog({ keyData }) {
+  const [done, setDone] = useState(false);
+  const mx = initMatrix.matrixClient;
+  const mountStore = useStore();
+
+  const doBackup = async () => {
+    setDone(false);
+    let info;
+
+    try {
+      info = await mx.prepareKeyBackupVersion(
+        null,
+        { secureSecretStorage: true },
+      );
+      info = await mx.createKeyBackupVersion(info);
+      await mx.scheduleAllGroupSessionsForBackup();
+      if (!mountStore.getItem()) return;
+      setDone(true);
+    } catch (e) {
+      deletePrivateKey(keyData.keyId);
+      await mx.deleteKeyBackupVersion(info.version);
+      if (!mountStore.getItem()) return;
+      setDone(null);
+    }
+  };
+
+  useEffect(() => {
+    mountStore.setItem(true);
+    doBackup();
+  }, []);
+
+  return (
+    <div className="key-backup__create">
+      {done === false && (
+        <div>
+          <Spinner size="small" />
+          <Text>Creating backup...</Text>
+        </div>
+      )}
+      {done === true && (
+        <>
+          <Text variant="h1">{twemojify('✅')}</Text>
+          <Text>Successfully created backup</Text>
+        </>
+      )}
+      {done === null && (
+        <>
+          <Text>Failed to create backup</Text>
+          <Button onClick={doBackup}>Retry</Button>
+        </>
+      )}
+    </div>
+  );
+}
+CreateKeyBackupDialog.propTypes = {
+  keyData: PropTypes.shape({}).isRequired,
+};
+
+function RestoreKeyBackupDialog({ keyData }) {
+  const [status, setStatus] = useState(false);
+  const mx = initMatrix.matrixClient;
+  const mountStore = useStore();
+
+  const restoreBackup = async () => {
+    setStatus(false);
+
+    let meBreath = true;
+    const progressCallback = (progress) => {
+      if (!progress.successes) return;
+      if (meBreath === false) return;
+      meBreath = false;
+      setTimeout(() => {
+        meBreath = true;
+      }, 200);
+
+      setStatus({ message: `Restoring backup keys... (${progress.successes}/${progress.total})` });
+    };
+
+    try {
+      const backupInfo = await mx.getKeyBackupVersion();
+      const info = await mx.restoreKeyBackupWithSecretStorage(
+        backupInfo,
+        undefined,
+        undefined,
+        { progressCallback },
+      );
+      if (!mountStore.getItem()) return;
+      setStatus({ done: `Successfully restored backup keys (${info.imported}/${info.total}).` });
+    } catch (e) {
+      if (!mountStore.getItem()) return;
+      if (e.errcode === 'RESTORE_BACKUP_ERROR_BAD_KEY') {
+        deletePrivateKey(keyData.keyId);
+        setStatus({ error: 'Failed to restore backup. Key is invalid!', errorCode: 'BAD_KEY' });
+      } else {
+        setStatus({ error: 'Failed to restore backup.', errCode: 'UNKNOWN' });
+      }
+    }
+  };
+
+  useEffect(() => {
+    mountStore.setItem(true);
+    restoreBackup();
+  }, []);
+
+  return (
+    <div className="key-backup__restore">
+      {(status === false || status.message) && (
+        <div>
+          <Spinner size="small" />
+          <Text>{status.message ?? 'Restoring backup keys...'}</Text>
+        </div>
+      )}
+      {status.done && (
+        <>
+          <Text variant="h1">{twemojify('✅')}</Text>
+          <Text>{status.done}</Text>
+        </>
+      )}
+      {status.error && (
+        <>
+          <Text>{status.error}</Text>
+          <Button onClick={restoreBackup}>Retry</Button>
+        </>
+      )}
+    </div>
+  );
+}
+RestoreKeyBackupDialog.propTypes = {
+  keyData: PropTypes.shape({}).isRequired,
+};
+
+function DeleteKeyBackupDialog({ requestClose }) {
+  const [isDeleting, setIsDeleting] = useState(false);
+  const mx = initMatrix.matrixClient;
+  const mountStore = useStore();
+
+  const deleteBackup = async () => {
+    mountStore.setItem(true);
+    setIsDeleting(true);
+    try {
+      const backupInfo = await mx.getKeyBackupVersion();
+      if (backupInfo) await mx.deleteKeyBackupVersion(backupInfo.version);
+      if (!mountStore.getItem()) return;
+      requestClose(true);
+    } catch {
+      if (!mountStore.getItem()) return;
+      setIsDeleting(false);
+    }
+  };
+
+  return (
+    <div className="key-backup__delete">
+      <Text variant="h1">{twemojify('🗑')}</Text>
+      <Text weight="medium">Deleting key backup is permanent.</Text>
+      <Text>All encrypted messages keys stored on server will be deleted.</Text>
+      {
+        isDeleting
+          ? <Spinner size="small" />
+          : <Button variant="danger" onClick={deleteBackup}>Delete</Button>
+      }
+    </div>
+  );
+}
+DeleteKeyBackupDialog.propTypes = {
+  requestClose: PropTypes.func.isRequired,
+};
+
+function KeyBackup() {
+  const mx = initMatrix.matrixClient;
+  const isCSEnabled = useCrossSigningStatus();
+  const [keyBackup, setKeyBackup] = useState(undefined);
+  const mountStore = useStore();
+
+  const fetchKeyBackupVersion = async () => {
+    const info = await mx.getKeyBackupVersion();
+    if (!mountStore.getItem()) return;
+    setKeyBackup(info);
+  };
+
+  useEffect(() => {
+    mountStore.setItem(true);
+    fetchKeyBackupVersion();
+
+    const handleAccountData = (event) => {
+      if (event.getType() === 'm.megolm_backup.v1') {
+        fetchKeyBackupVersion();
+      }
+    };
+
+    mx.on('accountData', handleAccountData);
+    return () => {
+      mx.removeListener('accountData', handleAccountData);
+    };
+  }, [isCSEnabled]);
+
+  const openCreateKeyBackup = async () => {
+    const keyData = await accessSecretStorage('Create Key Backup');
+    if (keyData === null) return;
+
+    openReusableDialog(
+      <Text variant="s1" weight="medium">Create Key Backup</Text>,
+      () => <CreateKeyBackupDialog keyData={keyData} />,
+      () => fetchKeyBackupVersion(),
+    );
+  };
+
+  const openRestoreKeyBackup = async () => {
+    const keyData = await accessSecretStorage('Restore Key Backup');
+    if (keyData === null) return;
+
+    openReusableDialog(
+      <Text variant="s1" weight="medium">Restore Key Backup</Text>,
+      () => <RestoreKeyBackupDialog keyData={keyData} />,
+    );
+  };
+
+  const openDeleteKeyBackup = () => openReusableDialog(
+    <Text variant="s1" weight="medium">Delete Key Backup</Text>,
+    (requestClose) => (
+      <DeleteKeyBackupDialog
+        requestClose={(isDone) => {
+          if (isDone) setKeyBackup(null);
+          requestClose();
+        }}
+      />
+    ),
+  );
+
+  const renderOptions = () => {
+    if (keyBackup === undefined) return <Spinner size="small" />;
+    if (keyBackup === null) return <Button variant="primary" onClick={openCreateKeyBackup}>Create Backup</Button>;
+    return (
+      <>
+        <IconButton src={DownloadIC} variant="positive" onClick={openRestoreKeyBackup} tooltip="Restore backup" />
+        <IconButton src={BinIC} onClick={openDeleteKeyBackup} tooltip="Delete backup" />
+      </>
+    );
+  };
+
+  return (
+    <SettingTile
+      title="Encrypted messages backup"
+      content={(
+        <>
+          <Text variant="b3">Online backup your encrypted messages keys with your account data in case you lose access to your sessions. Your keys will be secured with a unique Security Key.</Text>
+          {!isCSEnabled && (
+            <InfoCard
+              style={{ marginTop: 'var(--sp-ultra-tight)' }}
+              rounded
+              variant="caution"
+              iconSrc={InfoIC}
+              title="Setup cross signing to backup your encrypted messages."
+            />
+          )}
+        </>
+      )}
+      options={isCSEnabled ? renderOptions() : null}
+    />
+  );
+}
+
+export default KeyBackup;
@@ -0,0 +1,27 @@
+.key-backup__create,
+.key-backup__restore {
+  padding: var(--sp-normal);
+
+  & > div {
+    padding: var(--sp-normal) 0;
+    display: flex;
+    align-items: center;
+  
+    & > .text {
+      margin: 0 var(--sp-normal);
+    }
+  }
+
+  & > .text {
+    margin-bottom: var(--sp-normal);
+  }
+}
+
+.key-backup__delete {
+  padding: var(--sp-normal);
+  padding-top: var(--sp-extra-loose);
+
+  & > .text {
+    padding-bottom: var(--sp-normal);
+  }
+}
@@ -0,0 +1,133 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import './SecretStorageAccess.scss';
+import { deriveKey } from 'matrix-js-sdk/lib/crypto/key_passphrase';
+
+import initMatrix from '../../../client/initMatrix';
+import { openReusableDialog } from '../../../client/action/navigation';
+import { getDefaultSSKey, getSSKeyInfo } from '../../../util/matrixUtil';
+import { storePrivateKey, hasPrivateKey, getPrivateKey } from '../../../client/state/secretStorageKeys';
+
+import Text from '../../atoms/text/Text';
+import Button from '../../atoms/button/Button';
+import Input from '../../atoms/input/Input';
+import Spinner from '../../atoms/spinner/Spinner';
+
+import { useStore } from '../../hooks/useStore';
+
+function SecretStorageAccess({ onComplete }) {
+  const mx = initMatrix.matrixClient;
+  const sSKeyId = getDefaultSSKey();
+  const sSKeyInfo = getSSKeyInfo(sSKeyId);
+  const isPassphrase = !!sSKeyInfo.passphrase;
+  const [withPhrase, setWithPhrase] = useState(isPassphrase);
+  const [process, setProcess] = useState(false);
+  const [error, setError] = useState(null);
+  const mountStore = useStore();
+
+  const toggleWithPhrase = () => setWithPhrase(!withPhrase);
+
+  const processInput = async ({ key, phrase }) => {
+    mountStore.setItem(true);
+    setProcess(true);
+    try {
+      const { salt, iterations } = sSKeyInfo.passphrase || {};
+      const privateKey = key
+        ? mx.keyBackupKeyFromRecoveryKey(key)
+        : await deriveKey(phrase, salt, iterations);
+      const isCorrect = await mx.checkSecretStorageKey(privateKey, sSKeyInfo);
+
+      if (!mountStore.getItem()) return;
+      if (!isCorrect) {
+        setError(`Incorrect Security ${key ? 'Key' : 'Phrase'}`);
+        setProcess(false);
+        return;
+      }
+      onComplete({
+        keyId: sSKeyId,
+        key,
+        phrase,
+        privateKey,
+      });
+    } catch (e) {
+      if (!mountStore.getItem()) return;
+      setError(`Incorrect Security ${key ? 'Key' : 'Phrase'}`);
+      setProcess(false);
+    }
+  };
+
+  const handleForm = async (e) => {
+    e.preventDefault();
+    const password = e.target.password.value;
+    if (password.trim() === '') return;
+    const data = {};
+    if (withPhrase) data.phrase = password;
+    else data.key = password;
+    processInput(data);
+  };
+
+  const handleChange = () => {
+    setError(null);
+    setProcess(false);
+  };
+
+  return (
+    <div className="secret-storage-access">
+      <form onSubmit={handleForm}>
+        <Input
+          name="password"
+          label={`Security ${withPhrase ? 'Phrase' : 'Key'}`}
+          type="password"
+          onChange={handleChange}
+          required
+        />
+        {error && <Text variant="b3">{error}</Text>}
+        {!process && (
+          <div className="secret-storage-access__btn">
+            <Button variant="primary" type="submit">Continue</Button>
+            {isPassphrase && <Button onClick={toggleWithPhrase}>{`Use Security ${withPhrase ? 'Key' : 'Phrase'}`}</Button>}
+          </div>
+        )}
+      </form>
+      {process && <Spinner size="small" />}
+    </div>
+  );
+}
+SecretStorageAccess.propTypes = {
+  onComplete: PropTypes.func.isRequired,
+};
+
+/**
+ * @param {string} title Title of secret storage access dialog
+ * @returns {Promise<keyData | null>} resolve to keyData or null
+ */
+export const accessSecretStorage = (title) => new Promise((resolve) => {
+  let isCompleted = false;
+  const defaultSSKey = getDefaultSSKey();
+  if (hasPrivateKey(defaultSSKey)) {
+    resolve({ keyId: defaultSSKey, privateKey: getPrivateKey(defaultSSKey) });
+    return;
+  }
+  const handleComplete = (keyData) => {
+    isCompleted = true;
+    storePrivateKey(keyData.keyId, keyData.privateKey);
+    resolve(keyData);
+  };
+
+  openReusableDialog(
+    <Text variant="s1" weight="medium">{title}</Text>,
+    (requestClose) => (
+      <SecretStorageAccess
+        onComplete={(keyData) => {
+          handleComplete(keyData);
+          requestClose(requestClose);
+        }}
+      />
+    ),
+    () => {
+      if (!isCompleted) resolve(null);
+    },
+  );
+});
+
+export default SecretStorageAccess;
@@ -0,0 +1,20 @@
+.secret-storage-access {
+  padding: var(--sp-normal);
+
+  & form > *:not(:first-child) {
+    margin-top: var(--sp-normal);
+  }
+
+  & .text-b3 {
+    color: var(--tc-danger-high);
+    margin-top: var(--sp-ultra-tight) !important;
+  }
+
+  &__btn {
+    display: flex;
+    justify-content: space-between;
+  }
+  & .donut-spinner {
+    margin-top: var(--sp-normal);
+  }
+}
@@ -1,10 +1,10 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
+import React, { useState, useEffect } from 'react';
 import './Settings.scss';

 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import settings from '../../../client/state/settings';
+import navigation from '../../../client/state/navigation';
 import {
  toggleSystemTheme, toggleMarkdown, toggleMembershipEvents, toggleNickAvatarEvents,
  toggleNotifications, toggleNotificationSounds,
@@ -16,16 +16,20 @@ import Text from '../../atoms/text/Text';
 import IconButton from '../../atoms/button/IconButton';
 import Button from '../../atoms/button/Button';
 import Toggle from '../../atoms/button/Toggle';
+import Tabs from '../../atoms/tabs/Tabs';
+import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
 import SegmentedControls from '../../atoms/segmented-controls/SegmentedControls';

-import PopupWindow, { PWContentSelector } from '../../molecules/popup-window/PopupWindow';
+import PopupWindow from '../../molecules/popup-window/PopupWindow';
 import SettingTile from '../../molecules/setting-tile/SettingTile';
 import ImportE2ERoomKeys from '../../molecules/import-export-e2e-room-keys/ImportE2ERoomKeys';
 import ExportE2ERoomKeys from '../../molecules/import-export-e2e-room-keys/ExportE2ERoomKeys';

 import ProfileEditor from '../profile-editor/ProfileEditor';
+import CrossSigning from './CrossSigning';
+import KeyBackup from './KeyBackup';
+import DeviceManage from './DeviceManage';

-import SettingsIC from '../../../../public/res/ic/outlined/settings.svg';
 import SunIC from '../../../../public/res/ic/outlined/sun.svg';
 import LockIC from '../../../../public/res/ic/outlined/lock.svg';
 import BellIC from '../../../../public/res/ic/outlined/bell.svg';
@@ -34,86 +38,76 @@ import PowerIC from '../../../../public/res/ic/outlined/power.svg';
 import CrossIC from '../../../../public/res/ic/outlined/cross.svg';

 import CinnySVG from '../../../../public/res/svg/cinny.svg';
-
-function GeneralSection() {
-  return (
-    <div className="settings-content">
-      <SettingTile
-        title=""
-        content={(
-          <ProfileEditor userId={initMatrix.matrixClient.getUserId()} />
-        )}
-      />
-    </div>
-  );
-}
+import { confirmDialog } from '../../molecules/confirm-dialog/ConfirmDialog';

 function AppearanceSection() {
  const [, updateState] = useState({});

  return (
-    <div className="settings-content">
-      <SettingTile
-        title="Follow system theme"
-        options={(
-          <Toggle
-            isActive={settings.useSystemTheme}
-            onToggle={() => { toggleSystemTheme(); updateState({}); }}
-          />
-        )}
-        content={<Text variant="b3">Use light or dark mode based on the system's settings.</Text>}
-      />
-      {(() => {
-        if (!settings.useSystemTheme) {
-          return (
-            <SettingTile
-              title="Theme"
-              content={(
-                <SegmentedControls
-                  selected={settings.getThemeIndex()}
-                  segments={[
-                    { text: 'Light' },
-                    { text: 'Silver' },
-                    { text: 'Dark' },
-                    { text: 'Butter' },
-                  ]}
-                  onSelect={(index) => settings.setTheme(index)}
-                />
-            )}
+    <div className="settings-appearance">
+      <div className="settings-appearance__card">
+        <MenuHeader>Theme</MenuHeader>
+        <SettingTile
+          title="Follow system theme"
+          options={(
+            <Toggle
+              isActive={settings.useSystemTheme}
+              onToggle={() => { toggleSystemTheme(); updateState({}); }}
            />
-          );
-        }
-      })()}
-      <SettingTile
-        title="Markdown formatting"
-        options={(
-          <Toggle
-            isActive={settings.isMarkdown}
-            onToggle={() => { toggleMarkdown(); updateState({}); }}
+          )}
+          content={<Text variant="b3">Use light or dark mode based on the system settings.</Text>}
+        />
+        {!settings.useSystemTheme && (
+          <SettingTile
+            title="Theme"
+            content={(
+              <SegmentedControls
+                selected={settings.getThemeIndex()}
+                segments={[
+                  { text: 'Light' },
+                  { text: 'Silver' },
+                  { text: 'Dark' },
+                  { text: 'Butter' },
+                ]}
+                onSelect={(index) => settings.setTheme(index)}
+              />
+          )}
          />
        )}
-        content={<Text variant="b3">Format messages with markdown syntax before sending.</Text>}
-      />
-      <SettingTile
-        title="Hide membership events"
-        options={(
-          <Toggle
-            isActive={settings.hideMembershipEvents}
-            onToggle={() => { toggleMembershipEvents(); updateState({}); }}
-          />
-        )}
-        content={<Text variant="b3">Hide membership change messages from room timeline. (Join, Leave, Invite, Kick and Ban)</Text>}
-      />
-      <SettingTile
-        title="Hide nick/avatar events"
-        options={(
-          <Toggle
-            isActive={settings.hideNickAvatarEvents}
-            onToggle={() => { toggleNickAvatarEvents(); updateState({}); }}
-          />
-        )}
-        content={<Text variant="b3">Hide nick and avatar change messages from room timeline.</Text>}
-      />
+      </div>
+      <div className="settings-appearance__card">
+        <MenuHeader>Room messages</MenuHeader>
+        <SettingTile
+          title="Markdown formatting"
+          options={(
+            <Toggle
+              isActive={settings.isMarkdown}
+              onToggle={() => { toggleMarkdown(); updateState({}); }}
+            />
+          )}
+          content={<Text variant="b3">Format messages with markdown syntax before sending.</Text>}
+        />
+        <SettingTile
+          title="Hide membership events"
+          options={(
+            <Toggle
+              isActive={settings.hideMembershipEvents}
+              onToggle={() => { toggleMembershipEvents(); updateState({}); }}
+            />
+          )}
+          content={<Text variant="b3">Hide membership change messages from room timeline. (Join, Leave, Invite, Kick and Ban)</Text>}
+        />
+        <SettingTile
+          title="Hide nick/avatar events"
+          options={(
+            <Toggle
+              isActive={settings.hideNickAvatarEvents}
+              onToggle={() => { toggleNickAvatarEvents(); updateState({}); }}
+            />
+          )}
+          content={<Text variant="b3">Hide nick and avatar change messages from room timeline.</Text>}
+        />
+      </div>
    </div>
  );
 }
@@ -125,7 +119,7 @@ function NotificationsSection() {

  const renderOptions = () => {
    if (window.Notification === undefined) {
-      return <Text className="set-notifications__not-supported">Not supported in this browser.</Text>;
+      return <Text className="settings-notifications__not-supported">Not supported in this browser.</Text>;
    }

    if (permission === 'granted') {
@@ -152,21 +146,22 @@ function NotificationsSection() {
  };

  return (
-    <div className="set-notifications settings-content">
+    <div className="settings-notifications">
+      <MenuHeader>Notification & Sound</MenuHeader>
      <SettingTile
-        title="Show desktop notifications"
+        title="Desktop notification"
        options={renderOptions()}
-        content={<Text variant="b3">Show notifications when new messages arrive.</Text>}
+        content={<Text variant="b3">Show desktop notification when new messages arrive.</Text>}
      />
      <SettingTile
-        title="Play notification sounds"
+        title="Notification Sound"
        options={(
          <Toggle
            isActive={settings.isNotificationSounds}
            onToggle={() => { toggleNotificationSounds(); updateState({}); }}
          />
          )}
-        content={<Text variant="b3">Play a sound when new messages arrive.</Text>}
+        content={<Text variant="b3">Play sound when new messages arrive.</Text>}
      />
    </div>
  );
@@ -174,153 +169,171 @@ function NotificationsSection() {

 function SecuritySection() {
  return (
-    <div className="set-security settings-content">
-      <SettingTile
-        title={`Device ID: ${initMatrix.matrixClient.getDeviceId()}`}
-      />
-      <SettingTile
-        title={`Device key: ${initMatrix.matrixClient.getDeviceEd25519Key().match(/.{1,4}/g).join(' ')}`}
-        content={<Text variant="b3">Use this device ID-key combo to verify or manage this session from Element client.</Text>}
-      />
-      <SettingTile
-        title="Export E2E room keys"
-        content={(
-          <>
-            <Text variant="b3">Export end-to-end encryption room keys to decrypt old messages in other session. In order to encrypt keys you need to set a password, which will be used while importing.</Text>
-            <ExportE2ERoomKeys />
-          </>
-        )}
-      />
-      <SettingTile
-        title="Import E2E room keys"
-        content={(
-          <>
-            <Text variant="b3">{'To decrypt older messages, Export E2EE room keys from Element (Settings > Security & Privacy > Encryption > Cryptography) and import them here. Imported keys are encrypted so you\'ll have to enter the password you set in order to decrypt it.'}</Text>
-            <ImportE2ERoomKeys />
-          </>
-        )}
-      />
+    <div className="settings-security">
+      <div className="settings-security__card">
+        <MenuHeader>Cross signing and backup</MenuHeader>
+        <CrossSigning />
+        <KeyBackup />
+      </div>
+      <DeviceManage />
+      <div className="settings-security__card">
+        <MenuHeader>Export/Import encryption keys</MenuHeader>
+        <SettingTile
+          title="Export E2E room keys"
+          content={(
+            <>
+              <Text variant="b3">Export end-to-end encryption room keys to decrypt old messages in other session. In order to encrypt keys you need to set a password, which will be used while importing.</Text>
+              <ExportE2ERoomKeys />
+            </>
+          )}
+        />
+        <SettingTile
+          title="Import E2E room keys"
+          content={(
+            <>
+              <Text variant="b3">{'To decrypt older messages, Export E2EE room keys from Element (Settings > Security & Privacy > Encryption > Cryptography) and import them here. Imported keys are encrypted so you\'ll have to enter the password you set in order to decrypt it.'}</Text>
+              <ImportE2ERoomKeys />
+            </>
+          )}
+        />
+      </div>
    </div>
  );
 }

 function AboutSection() {
  return (
-    <div className="settings-content set__about">
-      <div className="set-about__branding">
-        <img width="60" height="60" src={CinnySVG} alt="Cinny logo" />
-        <div>
-          <Text variant="h2" weight="medium">
-            Cinny
-            <span className="text text-b3" style={{ margin: '0 var(--sp-extra-tight)' }}>{`v${cons.version}`}</span>
-          </Text>
-          <Text>Yet another matrix client</Text>
+    <div className="settings-about">
+      <div className="settings-about__card">
+        <MenuHeader>Application</MenuHeader>
+        <div className="settings-about__branding">
+          <img width="60" height="60" src={CinnySVG} alt="Cinny logo" />
+          <div>
+            <Text variant="h2" weight="medium">
+              Cinny
+              <span className="text text-b3" style={{ margin: '0 var(--sp-extra-tight)' }}>{`v${cons.version}`}</span>
+            </Text>
+            <Text>Yet another matrix client</Text>

-          <div className="set-about__btns">
-            <Button onClick={() => window.open('https://github.com/ajbura/cinny')}>Source code</Button>
-            <Button onClick={() => window.open('https://cinny.in/#sponsor')}>Support</Button>
+            <div className="settings-about__btns">
+              <Button onClick={() => window.open('https://github.com/ajbura/cinny')}>Source code</Button>
+              <Button onClick={() => window.open('https://cinny.in/#sponsor')}>Support</Button>
+            </div>
          </div>
        </div>
      </div>
-      <div className="set-about__credits">
-        <Text variant="s1" weight="medium">Credits</Text>
-        <ul>
-          <li>
-            {/* eslint-disable-next-line react/jsx-one-expression-per-line */ }
-            <Text>The <a href="https://github.com/matrix-org/matrix-js-sdk" rel="noreferrer noopener" target="_blank">matrix-js-sdk</a> is © <a href="https://matrix.org/foundation" rel="noreferrer noopener" target="_blank">The Matrix.org Foundation C.I.C</a> used under the terms of <a href="http://www.apache.org/licenses/LICENSE-2.0" rel="noreferrer noopener" target="_blank">Apache 2.0</a>.</Text>
-          </li>
-          <li>
-            {/* eslint-disable-next-line react/jsx-one-expression-per-line */ }
-            <Text>The <a href="https://twemoji.twitter.com" target="_blank" rel="noreferrer noopener">Twemoji</a> emoji art is © <a href="https://twemoji.twitter.com" target="_blank" rel="noreferrer noopener">Twitter, Inc and other contributors</a> used under the terms of <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noreferrer noopener">CC-BY 4.0</a>.</Text>
-          </li>
-          <li>
-            {/* eslint-disable-next-line react/jsx-one-expression-per-line */ }
-            <Text>The <a href="https://material.io/design/sound/sound-resources.html" target="_blank" rel="noreferrer noopener">Material sound resources</a> are © <a href="https://google.com" target="_blank" rel="noreferrer noopener">Google</a> used under the terms of <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noreferrer noopener">CC-BY 4.0</a>.</Text>
-          </li>
-        </ul>
+      <div className="settings-about__card">
+        <MenuHeader>Credits</MenuHeader>
+        <div className="settings-about__credits">
+          <ul>
+            <li>
+              {/* eslint-disable-next-line react/jsx-one-expression-per-line */ }
+              <Text>The <a href="https://github.com/matrix-org/matrix-js-sdk" rel="noreferrer noopener" target="_blank">matrix-js-sdk</a> is © <a href="https://matrix.org/foundation" rel="noreferrer noopener" target="_blank">The Matrix.org Foundation C.I.C</a> used under the terms of <a href="http://www.apache.org/licenses/LICENSE-2.0" rel="noreferrer noopener" target="_blank">Apache 2.0</a>.</Text>
+            </li>
+            <li>
+              {/* eslint-disable-next-line react/jsx-one-expression-per-line */ }
+              <Text>The <a href="https://twemoji.twitter.com" target="_blank" rel="noreferrer noopener">Twemoji</a> emoji art is © <a href="https://twemoji.twitter.com" target="_blank" rel="noreferrer noopener">Twitter, Inc and other contributors</a> used under the terms of <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noreferrer noopener">CC-BY 4.0</a>.</Text>
+            </li>
+            <li>
+              {/* eslint-disable-next-line react/jsx-one-expression-per-line */ }
+              <Text>The <a href="https://material.io/design/sound/sound-resources.html" target="_blank" rel="noreferrer noopener">Material sound resources</a> are © <a href="https://google.com" target="_blank" rel="noreferrer noopener">Google</a> used under the terms of <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noreferrer noopener">CC-BY 4.0</a>.</Text>
+            </li>
+          </ul>
+        </div>
      </div>
    </div>
  );
 }

-function Settings({ isOpen, onRequestClose }) {
-  const settingSections = [{
-    name: 'General',
-    iconSrc: SettingsIC,
-    render() {
-      return <GeneralSection />;
-    },
-  }, {
-    name: 'Appearance',
-    iconSrc: SunIC,
-    render() {
-      return <AppearanceSection />;
-    },
-  }, {
-    name: 'Notifications',
-    iconSrc: BellIC,
-    render() {
-      return <NotificationsSection />;
-    },
-  }, {
-    name: 'Security & Privacy',
-    iconSrc: LockIC,
-    render() {
-      return <SecuritySection />;
-    },
-  }, {
-    name: 'Help & About',
-    iconSrc: InfoIC,
-    render() {
-      return <AboutSection />;
-    },
-  }];
-  const [selectedSection, setSelectedSection] = useState(settingSections[0]);
+export const tabText = {
+  APPEARANCE: 'Appearance',
+  NOTIFICATIONS: 'Notifications',
+  SECURITY: 'Security',
+  ABOUT: 'About',
+};
+const tabItems = [{
+  text: tabText.APPEARANCE,
+  iconSrc: SunIC,
+  disabled: false,
+  render: () => <AppearanceSection />,
+}, {
+  text: tabText.NOTIFICATIONS,
+  iconSrc: BellIC,
+  disabled: false,
+  render: () => <NotificationsSection />,
+}, {
+  text: tabText.SECURITY,
+  iconSrc: LockIC,
+  disabled: false,
+  render: () => <SecuritySection />,
+}, {
+  text: tabText.ABOUT,
+  iconSrc: InfoIC,
+  disabled: false,
+  render: () => <AboutSection />,
+}];

-  const handleLogout = () => {
-    if (confirm('Confirm logout')) logout();
+function useWindowToggle(setSelectedTab) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    const openSettings = (tab) => {
+      const tabItem = tabItems.find((item) => item.text === tab);
+      if (tabItem) setSelectedTab(tabItem);
+      setIsOpen(true);
+    };
+    navigation.on(cons.events.navigation.SETTINGS_OPENED, openSettings);
+    return () => {
+      navigation.removeListener(cons.events.navigation.SETTINGS_OPENED, openSettings);
+    };
+  }, []);
+
+  const requestClose = () => setIsOpen(false);
+
+  return [isOpen, requestClose];
+}
+
+function Settings() {
+  const [selectedTab, setSelectedTab] = useState(tabItems[0]);
+  const [isOpen, requestClose] = useWindowToggle(setSelectedTab);
+
+  const handleTabChange = (tabItem) => setSelectedTab(tabItem);
+  const handleLogout = async () => {
+    if (await confirmDialog('Logout', 'Are you sure that you want to logout your session?', 'Logout', 'danger')) {
+      logout();
+    }
  };

  return (
    <PopupWindow
-      className="settings-window"
      isOpen={isOpen}
-      onRequestClose={onRequestClose}
-      title="Settings"
-      contentTitle={selectedSection.name}
-      drawer={(
+      className="settings-window"
+      title={<Text variant="s1" weight="medium" primary>Settings</Text>}
+      contentOptions={(
        <>
-          {
-            settingSections.map((section) => (
-              <PWContentSelector
-                key={section.name}
-                selected={selectedSection.name === section.name}
-                onClick={() => setSelectedSection(section)}
-                iconSrc={section.iconSrc}
-              >
-                {section.name}
-              </PWContentSelector>
-            ))
-          }
-          <PWContentSelector
-            variant="danger"
-            onClick={handleLogout}
-            iconSrc={PowerIC}
-          >
+          <Button variant="danger" iconSrc={PowerIC} onClick={handleLogout}>
            Logout
-          </PWContentSelector>
+          </Button>
+          <IconButton src={CrossIC} onClick={requestClose} tooltip="Close" />
        </>
      )}
-      contentOptions={<IconButton src={CrossIC} onClick={onRequestClose} tooltip="Close" />}
+      onRequestClose={requestClose}
    >
-      {selectedSection.render()}
+      {isOpen && (
+        <div className="settings-window__content">
+          <ProfileEditor userId={initMatrix.matrixClient.getUserId()} />
+          <Tabs
+            items={tabItems}
+            defaultSelected={tabItems.findIndex((tab) => tab.text === selectedTab.text)}
+            onSelect={handleTabChange}
+          />
+          <div className="settings-window__cards-wrapper">
+            { selectedTab.render() }
+          </div>
+        </div>
+      )}
    </PopupWindow>
  );
 }

-Settings.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  onRequestClose: PropTypes.func.isRequired,
-};
-
 export default Settings;
@@ -1,60 +1,90 @@
@use '../../partials/flex';
@use '../../partials/dir';
+@use '../../partials/screen';

 .settings-window {
-  & .pw__drawer__content {
-    @extend .cp-fx__column;
-    min-height: 100%;
-    padding-bottom: var(--sp-extra-tight);
+  & .pw {
+    background-color: var(--bg-surface-low);
+  }
+  
+  .header .btn-danger {
+    margin: 0 var(--sp-tight);
+    box-shadow: none;
+  }

-    & > .pw-content-selector:last-child {
-      margin-top: auto;
+  & .profile-editor {
+    padding: var(--sp-loose) var(--sp-extra-loose);
+  } 
+
+  & .tabs__content {
+    padding: 0 var(--sp-normal);
+  }
+
+  &__cards-wrapper {
+    padding: 0 var(--sp-normal);
+    @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
+  }
+}
+.settings-window__card {
+  margin: var(--sp-normal) 0;
+  background-color: var(--bg-surface);
+  border-radius: var(--bo-radius);
+  box-shadow: var(--bs-surface-border);
+  overflow: hidden;
+
+  & > .context-menu__header:first-child {
+    margin-top: 2px;
+  }
+}
+.settings-appearance__card,
+.settings-notifications,
+.settings-security__card,
+.settings-security .device-manage,
+.settings-about__card {
+  @extend .settings-window__card;
+}
+
+.settings-window__cards-wrapper{
+  & .setting-tile {
+    margin: 0 var(--sp-normal);
+    margin-top: var(--sp-normal);
+    padding-bottom: 16px;
+    border-bottom: 1px solid var(--bg-surface-border);
+    &:last-child {
+      border-bottom: none;
    }
  }
-  & .pw__content-container {
-    min-height: 100%;
-  }
 }

-.settings-content {
-  @include dir.side(margin, var(--sp-normal), var(--sp-extra-tight));
-
-  & .setting-tile {
-    margin-top: var(--sp-normal);
-    border-bottom: 1px solid var(--bg-surface-border);
-    padding-bottom: 16px;
-  }
-}
-
-.set-notifications {
+.settings-notifications {
  &__not-supported {
    padding: 0 var(--sp-ultra-tight);
  }
 }

-.set-about {
+.settings-about {
  &__branding {
-    margin-top: var(--sp-extra-tight);
-    margin-bottom: var(--sp-normal);
+    padding: var(--sp-normal);
    display: flex;
-
+    
    & > div {
      margin: 0 var(--sp-loose);
    }
-
+    
  }
  &__btns {
-    margin: 0;
-    margin-top: var(--sp-normal);
-    & button:last-child {
-      margin: 0 var(--sp-tight)
+    & button {
+      margin-top: var(--sp-tight);
+      @include dir.side(margin, 0, var(--sp-tight));
    }
  }
-
+  
  &__credits {
-    margin-top: var(--sp-loose);
+    padding: 0 var(--sp-normal);
    & ul {
+      color: var(--tc-surface-low);
+      padding: var(--sp-normal);
      margin: var(--sp-extra-tight) 0;
    }
  }
-}
+}
@@ -36,6 +36,7 @@ import PinFilledIC from '../../../../public/res/ic/filled/pin.svg';
 import CategoryIC from '../../../../public/res/ic/outlined/category.svg';
 import CategoryFilledIC from '../../../../public/res/ic/filled/category.svg';

+import { confirmDialog } from '../../molecules/confirm-dialog/ConfirmDialog';
 import { useForceUpdate } from '../../hooks/useForceUpdate';

 const tabText = {
@@ -61,6 +62,7 @@ const tabItems = [{
 function GeneralSettings({ roomId }) {
  const isPinned = initMatrix.accountData.spaceShortcut.has(roomId);
  const isCategorized = initMatrix.accountData.categorizedSpaces.has(roomId);
+  const roomName = initMatrix.matrixClient.getRoom(roomId)?.name;
  const [, forceUpdate] = useForceUpdate();

  return (
@@ -89,10 +91,14 @@ function GeneralSettings({ roomId }) {
        </MenuItem>
        <MenuItem
          variant="danger"
-          onClick={() => {
-            if (confirm('Are you really want to leave this space?')) {
-              leave(roomId);
-            }
+          onClick={async () => {
+            const isConfirmed = await confirmDialog(
+              'Leave space',
+              `Are you sure that you want to leave "${roomName}" space?`,
+              'Leave',
+              'danger',
+            );
+            if (isConfirmed) leave(roomId);
          }}
          iconSrc={LeaveArrowIC}
        >
@@ -7,14 +7,10 @@

  & .room-profile {
    padding: var(--sp-loose) var(--sp-extra-loose);
-  }
+  } 

-  & .tabs {
-    box-shadow: inset 0 -1px 0 var(--bg-surface-border);
-
-    &__content {
-      padding: 0 var(--sp-normal);
-    }
+  & .tabs__content {
+    padding: 0 var(--sp-normal);
  }

  &__cards-wrapper {
@@ -0,0 +1,28 @@
+
+$breakpoint-tablet: 1124px;
+$breakpoint-mobile: 750px;
+
+@mixin smallerThan($deviceBreakpoint) {
+  @if $deviceBreakpoint==mobileBreakpoint {
+    @media screen and (max-width: $breakpoint-mobile) {
+      @content;
+    }
+  }
+  @else if $deviceBreakpoint==tabletBreakpoint {
+    @media screen and (max-width: $breakpoint-tablet) {
+      @content;
+    }
+  }
+}
+
+@mixin biggerThan($deviceBreakpoint) {
+  @if $deviceBreakpoint==mobileBreakpoint {
+    @media screen and (min-width: $breakpoint-mobile) {
+      @content;
+    }
+  } @else if $deviceBreakpoint==tabletBreakpoint {
+    @media screen and (min-width: $breakpoint-tablet) {
+      @content;
+    }
+  }
+}
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import './Client.scss';

 import { initHotkeys } from '../../../client/event/hotkeys';
@@ -23,6 +23,29 @@ function Client() {
  const [isLoading, changeLoading] = useState(true);
  const [loadingMsg, setLoadingMsg] = useState('Heating up');
  const [dragCounter, setDragCounter] = useState(0);
+  const classNameHidden = 'client__item-hidden';
+
+  const navWrapperRef = useRef(null);
+  const roomWrapperRef = useRef(null);
+
+  function onRoomSelected() {
+    navWrapperRef.current?.classList.add(classNameHidden);
+    roomWrapperRef.current?.classList.remove(classNameHidden);
+  }
+  function onNavigationSelected() {
+    navWrapperRef.current?.classList.remove(classNameHidden);
+    roomWrapperRef.current?.classList.add(classNameHidden);
+  }
+
+  useEffect(() => {
+    navigation.on(cons.events.navigation.ROOM_SELECTED, onRoomSelected);
+    navigation.on(cons.events.navigation.NAVIGATION_OPENED, onNavigationSelected);
+
+    return (() => {
+      navigation.removeListener(cons.events.navigation.ROOM_SELECTED, onRoomSelected);
+      navigation.removeListener(cons.events.navigation.NAVIGATION_OPENED, onNavigationSelected);
+    });
+  }, []);

  useEffect(() => {
    let counter = 0;
@@ -128,10 +151,10 @@ function Client() {
      onDragLeave={handleDragLeave}
      onDrop={handleDrop}
    >
-      <div className="navigation__wrapper">
+      <div className="navigation__wrapper" ref={navWrapperRef}>
        <Navigation />
      </div>
-      <div className="room__wrapper">
+      <div className={`room__wrapper ${classNameHidden}`} ref={roomWrapperRef}>
        <Room />
      </div>
      <Windows />
@@ -1,3 +1,5 @@
+@use '../../partials/screen';
+
 .client-container {
  display: flex;
  height: 100%;
@@ -5,12 +7,22 @@

 .navigation__wrapper {
  width: var(--navigation-width);
+  
+  @include screen.smallerThan(mobileBreakpoint) {
+    width: 100%;
+  }
 }
+
 .room__wrapper {
  flex: 1;
  min-width: 0;
 }

+@include screen.smallerThan(mobileBreakpoint) {
+  .client__item-hidden {
+    display: none;
+  }
+}

 .loading-display {
  position: absolute;
@@ -41,4 +53,4 @@
  .text {
    color: var(--tc-link);
  }
-}
+}
@@ -23,6 +23,13 @@ export function selectRoom(roomId, eventId) {
  });
 }

+// Open navigation on compact screen sizes
+export function openNavigation() {
+  appDispatcher.dispatch({
+    type: cons.actions.navigation.OPEN_NAVIGATION,
+  });
+}
+
 export function openSpaceSettings(roomId, tabText) {
  appDispatcher.dispatch({
    type: cons.actions.navigation.OPEN_SPACE_SETTINGS,
@@ -79,6 +86,13 @@ export function openCreateRoom(isSpace = false, parentId = null) {
  });
 }

+export function openJoinAlias(term) {
+  appDispatcher.dispatch({
+    type: cons.actions.navigation.OPEN_JOIN_ALIAS,
+    term,
+  });
+}
+
 export function openInviteUser(roomId, searchTerm) {
  appDispatcher.dispatch({
    type: cons.actions.navigation.OPEN_INVITE_USER,
@@ -95,9 +109,10 @@ export function openProfileViewer(userId, roomId) {
  });
 }

-export function openSettings() {
+export function openSettings(tabText) {
  appDispatcher.dispatch({
    type: cons.actions.navigation.OPEN_SETTINGS,
+    tabText,
  });
 }

@@ -149,3 +164,20 @@ export function openReusableContextMenu(placement, cords, render, afterClose) {
    afterClose,
  });
 }
+
+export function openReusableDialog(title, render, afterClose) {
+  appDispatcher.dispatch({
+    type: cons.actions.navigation.OPEN_REUSABLE_DIALOG,
+    title,
+    render,
+    afterClose,
+  });
+}
+
+export function openEmojiVerification(request, targetDevice) {
+  appDispatcher.dispatch({
+    type: cons.actions.navigation.OPEN_EMOJI_VERIFICATION,
+    request,
+    targetDevice,
+  });
+}
@@ -113,17 +113,19 @@ async function join(roomIdOrAlias, isDM, via) {
 * @param {string} roomId
 * @param {boolean} isDM
 */
-function leave(roomId) {
+async function leave(roomId) {
  const mx = initMatrix.matrixClient;
  const isDM = initMatrix.roomList.directs.has(roomId);
-  mx.leave(roomId)
-    .then(() => {
-      appDispatcher.dispatch({
-        type: cons.actions.room.LEAVE,
-        roomId,
-        isDM,
-      });
-    }).catch();
+  try {
+    await mx.leave(roomId);
+    appDispatcher.dispatch({
+      type: cons.actions.room.LEAVE,
+      roomId,
+      isDM,
+    });
+  } catch {
+    console.error('Unable to leave room.');
+  }
 }

 async function create(options, isDM = false) {
@@ -7,6 +7,7 @@ import RoomList from './state/RoomList';
 import AccountData from './state/AccountData';
 import RoomsInput from './state/RoomsInput';
 import Notifications from './state/Notifications';
+import { cryptoCallbacks } from './state/secretStorageKeys';

 global.Olm = require('@matrix-org/olm');

@@ -36,6 +37,10 @@ class InitMatrix extends EventEmitter {
      cryptoStore: new sdk.IndexedDBCryptoStore(global.indexedDB, 'crypto-store'),
      deviceId: secret.deviceId,
      timelineSupport: true,
+      cryptoCallbacks,
+      verificationMethods: [
+        'm.sas.v1',
+      ],
    });

    await this.matrixClient.initCrypto();
@@ -6,9 +6,6 @@ import cons from './cons';
 import navigation from './navigation';
 import settings from './settings';

-import NotificationSound from '../../../public/sound/notification.ogg';
-import InviteSound from '../../../public/sound/invite.ogg';
-
 function isNotifEvent(mEvent) {
  const eType = mEvent.getType();
  if (!cons.supportEventTypes.includes(eType)) return false;
@@ -83,7 +80,12 @@ class Notifications extends EventEmitter {

  getNotiType(roomId) {
    const mx = this.matrixClient;
-    const pushRule = mx.getRoomPushRule('global', roomId);
+    let pushRule;
+    try {
+      pushRule = mx.getRoomPushRule('global', roomId);
+    } catch {
+      pushRule = undefined;
+    }

    if (pushRule === undefined) {
      const overrideRules = mx.getAccountData('m.push_rules')?.getContent()?.global?.override;
@@ -233,14 +235,14 @@ class Notifications extends EventEmitter {

  _playNotiSound() {
    if (!this._notiAudio) {
-      this._notiAudio = new Audio(NotificationSound);
+      this._notiAudio = document.getElementById('notificationSound');
    }
    this._notiAudio.play();
  }

  _playInviteSound() {
    if (!this._inviteAudio) {
-      this._inviteAudio = new Audio(InviteSound);
+      this._inviteAudio = document.getElementById('inviteSound');
    }
    this._inviteAudio.play();
  }
@@ -6,6 +6,21 @@ function isMEventSpaceChild(mEvent) {
  return mEvent.getType() === 'm.space.child' && Object.keys(mEvent.getContent()).length > 0;
 }

+/**
+ * @param {() => boolean} callback if return true wait will over else callback will be called again.
+ * @param {number} timeout timeout to callback
+ * @param {number} maxTry maximum callback try > 0. -1 means no limit
+ */
+async function waitFor(callback, timeout = 400, maxTry = -1) {
+  if (maxTry === 0) return false;
+  const isOver = async () => new Promise((resolve) => {
+    setTimeout(() => resolve(callback()), timeout);
+  });
+
+  if (await isOver()) return true;
+  return waitFor(callback, timeout, maxTry - 1);
+}
+
 class RoomList extends EventEmitter {
  constructor(matrixClient) {
    super();
@@ -206,7 +221,7 @@ class RoomList extends EventEmitter {
    this.matrixClient.getRooms().forEach((room) => {
      const { roomId } = room;
      const tombstone = room.currentState.events.get('m.room.tombstone');
-      if (typeof tombstone !== 'undefined') {
+      if (tombstone?.get('') !== undefined) {
        const repRoomId = tombstone.get('').getContent().replacement_room;
        const repRoomMembership = this.matrixClient.getRoom(repRoomId)?.getMyMembership();
        if (repRoomMembership === 'join') return;
@@ -228,6 +243,7 @@ class RoomList extends EventEmitter {
  }

  _isDMInvite(room) {
+    if (this.mDirects.has(room.roomId)) return true;
    const me = room.getMember(this.matrixClient.getUserId());
    const myEventContent = me.events.member.getContent();
    return myEventContent.membership === 'invite' && myEventContent.is_direct;
@@ -243,22 +259,11 @@ class RoomList extends EventEmitter {
      latestMDirects.forEach((directId) => {
        const myRoom = this.matrixClient.getRoom(directId);
        if (this.mDirects.has(directId)) return;
-
-        // Update mDirects
        this.mDirects.add(directId);

        if (myRoom === null) return;
-
-        if (this._isDMInvite(myRoom)) return;
-
-        if (myRoom.getMyMembership === 'join' && !this.directs.has(directId)) {
+        if (myRoom.getMyMembership() === 'join') {
          this.directs.add(directId);
-        }
-
-        // Newly added room.
-        // at this time my membership can be invite | join
-        if (myRoom.getMyMembership() === 'join' && this.rooms.has(directId)) {
-          // found a DM which accidentally gets added to this.rooms
          this.rooms.delete(directId);
          this.emit(cons.events.roomList.ROOMLIST_UPDATED);
        }
@@ -298,23 +303,17 @@ class RoomList extends EventEmitter {
      }
    });

-    this.matrixClient.on('Room.myMembership', (room, membership, prevMembership) => {
+    this.matrixClient.on('Room.myMembership', async (room, membership, prevMembership) => {
      // room => prevMembership = null | invite | join | leave | kick | ban | unban
      // room => membership = invite | join | leave | kick | ban | unban
      const { roomId } = room;
+      const isRoomReady = () => this.matrixClient.getRoom(roomId) !== null;
+      if (['join', 'invite'].includes(membership) && isRoomReady() === false) {
+        if (await waitFor(isRoomReady, 200, 100) === false) return;
+      }

      if (membership === 'unban') return;

-      // When user_reject/sender_undo room invite
-      if (prevMembership === 'invite') {
-        if (this.inviteDirects.has(roomId)) this.inviteDirects.delete(roomId);
-        else if (this.inviteSpaces.has(roomId)) this.inviteSpaces.delete(roomId);
-        else this.inviteRooms.delete(roomId);
-
-        this.emit(cons.events.roomList.INVITELIST_UPDATED, roomId);
-      }
-
-      // When user get invited
      if (membership === 'invite') {
        if (this._isDMInvite(room)) this.inviteDirects.add(roomId);
        else if (room.isSpaceRoom()) this.inviteSpaces.add(roomId);
@@ -324,88 +323,53 @@ class RoomList extends EventEmitter {
        return;
      }

-      // When user join room (first time) or start DM.
-      if ((prevMembership === null || prevMembership === 'invite') && membership === 'join') {
-        // when user create room/DM OR accept room/dm invite from this client.
-        // we will update this.rooms/this.directs with user action
-        if (this.directs.has(roomId) || this.spaces.has(roomId) || this.rooms.has(roomId)) return;
+      if (prevMembership === 'invite') {
+        if (this.inviteDirects.has(roomId)) this.inviteDirects.delete(roomId);
+        else if (this.inviteSpaces.has(roomId)) this.inviteSpaces.delete(roomId);
+        else this.inviteRooms.delete(roomId);

-        if (this.processingRooms.has(roomId)) {
-          const procRoomInfo = this.processingRooms.get(roomId);
-
-          if (procRoomInfo.isDM) this.directs.add(roomId);
-          else if (room.isSpaceRoom()) this.addToSpaces(roomId);
-          else this.rooms.add(roomId);
-
-          if (procRoomInfo.task === 'CREATE') this.emit(cons.events.roomList.ROOM_CREATED, roomId);
-          this.emit(cons.events.roomList.ROOM_JOINED, roomId);
-          this.emit(cons.events.roomList.ROOMLIST_UPDATED);
-
-          this.processingRooms.delete(roomId);
-          return;
-        }
-        if (room.isSpaceRoom()) {
-          this.addToSpaces(roomId);
-
-          this.emit(cons.events.roomList.ROOM_JOINED, roomId);
-          this.emit(cons.events.roomList.ROOMLIST_UPDATED);
-          return;
-        }
-
-        // below code intented to work when user create room/DM
-        // OR accept room/dm invite from other client.
-        // and we have to update our client. (it's ok to have 10sec delay)
-
-        // create a buffer of 10sec and HOPE client.accoundData get updated
-        // then accoundData event listener will update this.mDirects.
-        // and we will be able to know if it's a DM.
-        // ----------
-        // less likely situation:
-        // if we don't get accountData with 10sec then:
-        // we will temporary add it to this.rooms.
-        // and in future when accountData get updated
-        // accountData listener will automatically goona REMOVE it from this.rooms
-        // and will ADD it to this.directs
-        // and emit the cons.events.roomList.ROOMLIST_UPDATED to update the UI.
-
-        setTimeout(() => {
-          if (this.directs.has(roomId) || this.spaces.has(roomId) || this.rooms.has(roomId)) return;
-          if (this.mDirects.has(roomId)) this.directs.add(roomId);
-          else this.rooms.add(roomId);
-
-          this.emit(cons.events.roomList.ROOM_JOINED, roomId);
-          this.emit(cons.events.roomList.ROOMLIST_UPDATED);
-        }, 10000);
-        return;
+        this.emit(cons.events.roomList.INVITELIST_UPDATED, roomId);
      }

-      // when room is a DM add/remove it from DM's and return.
-      if (this.directs.has(roomId)) {
-        if (membership === 'leave' || membership === 'kick' || membership === 'ban') {
-          this.directs.delete(roomId);
-          this.emit(cons.events.roomList.ROOM_LEAVED, roomId);
-        }
-      }
-      if (this.mDirects.has(roomId)) {
-        if (membership === 'join') {
-          this.directs.add(roomId);
-          this.emit(cons.events.roomList.ROOM_JOINED, roomId);
-        }
+      if (['leave', 'kick', 'ban'].includes(membership)) {
+        if (this.directs.has(roomId)) this.directs.delete(roomId);
+        else if (this.spaces.has(roomId)) this.deleteFromSpaces(roomId);
+        else this.rooms.delete(roomId);
+        this.emit(cons.events.roomList.ROOM_LEAVED, roomId);
        this.emit(cons.events.roomList.ROOMLIST_UPDATED);
        return;
      }
-      // when room is not a DM add/remove it from rooms.
-      if (membership === 'leave' || membership === 'kick' || membership === 'ban') {
-        if (room.isSpaceRoom()) this.deleteFromSpaces(roomId);
-        else this.rooms.delete(roomId);
-        this.emit(cons.events.roomList.ROOM_LEAVED, roomId);
+
+      // when user create room/DM OR accept room/dm invite from this client.
+      // we will update this.rooms/this.directs with user action
+      if (membership === 'join' && this.processingRooms.has(roomId)) {
+        const procRoomInfo = this.processingRooms.get(roomId);
+
+        if (procRoomInfo.isDM) this.directs.add(roomId);
+        else if (room.isSpaceRoom()) this.addToSpaces(roomId);
+        else this.rooms.add(roomId);
+
+        if (procRoomInfo.task === 'CREATE') this.emit(cons.events.roomList.ROOM_CREATED, roomId);
+        this.emit(cons.events.roomList.ROOM_JOINED, roomId);
+        this.emit(cons.events.roomList.ROOMLIST_UPDATED);
+
+        this.processingRooms.delete(roomId);
+        return;
      }
+
+      if (this.mDirects.has(roomId) && membership === 'join') {
+        this.directs.add(roomId);
+        this.emit(cons.events.roomList.ROOM_JOINED, roomId);
+        this.emit(cons.events.roomList.ROOMLIST_UPDATED);
+        return;
+      }
+
      if (membership === 'join') {
        if (room.isSpaceRoom()) this.addToSpaces(roomId);
        else this.rooms.add(roomId);
        this.emit(cons.events.roomList.ROOM_JOINED, roomId);
+        this.emit(cons.events.roomList.ROOMLIST_UPDATED);
      }
-      this.emit(cons.events.roomList.ROOMLIST_UPDATED);
    });
  }
 }
@@ -2,8 +2,9 @@ import EventEmitter from 'events';
 import { micromark } from 'micromark';
 import { gfm, gfmHtml } from 'micromark-extension-gfm';
 import encrypt from 'browser-encrypt-attachment';
+import { math } from 'micromark-extension-math';
 import { getShortcodeToEmoji } from '../../app/organisms/emoji-board/custom-emoji';
-import { spoilerExtension, spoilerExtensionHtml } from '../../util/markdown';
+import { mathExtensionHtml, spoilerExtension, spoilerExtensionHtml } from '../../util/markdown';
 import cons from './cons';
 import settings from './settings';

@@ -85,8 +86,8 @@ function getVideoThumbnail(video, width, height, mimeType) {

 function getFormattedBody(markdown) {
  const result = micromark(markdown, {
-    extensions: [gfm(), spoilerExtension()],
-    htmlExtensions: [gfmHtml(), spoilerExtensionHtml],
+    extensions: [gfm(), spoilerExtension(), math()],
+    htmlExtensions: [gfmHtml(), spoilerExtensionHtml, mathExtensionHtml],
  });
  const bodyParts = result.match(/^(<p>)(.*)(<\/p>)$/);
  if (bodyParts === null) return result;
@@ -1,5 +1,5 @@
 const cons = {
-  version: '1.8.2',
+  version: '2.0.0',
  secretKey: {
    ACCESS_TOKEN: 'cinny_access_token',
    DEVICE_ID: 'cinny_device_id',
@@ -38,6 +38,7 @@ const cons = {
      OPEN_INVITE_LIST: 'OPEN_INVITE_LIST',
      OPEN_PUBLIC_ROOMS: 'OPEN_PUBLIC_ROOMS',
      OPEN_CREATE_ROOM: 'OPEN_CREATE_ROOM',
+      OPEN_JOIN_ALIAS: 'OPEN_JOIN_ALIAS',
      OPEN_INVITE_USER: 'OPEN_INVITE_USER',
      OPEN_PROFILE_VIEWER: 'OPEN_PROFILE_VIEWER',
      OPEN_SETTINGS: 'OPEN_SETTINGS',
@@ -47,6 +48,9 @@ const cons = {
      CLICK_REPLY_TO: 'CLICK_REPLY_TO',
      OPEN_SEARCH: 'OPEN_SEARCH',
      OPEN_REUSABLE_CONTEXT_MENU: 'OPEN_REUSABLE_CONTEXT_MENU',
+      OPEN_NAVIGATION: 'OPEN_NAVIGATION',
+      OPEN_REUSABLE_DIALOG: 'OPEN_REUSABLE_DIALOG',
+      OPEN_EMOJI_VERIFICATION: 'OPEN_EMOJI_VERIFICATION',
    },
    room: {
      JOIN: 'JOIN',
@@ -83,6 +87,7 @@ const cons = {
      INVITE_LIST_OPENED: 'INVITE_LIST_OPENED',
      PUBLIC_ROOMS_OPENED: 'PUBLIC_ROOMS_OPENED',
      CREATE_ROOM_OPENED: 'CREATE_ROOM_OPENED',
+      JOIN_ALIAS_OPENED: 'JOIN_ALIAS_OPENED',
      INVITE_USER_OPENED: 'INVITE_USER_OPENED',
      SETTINGS_OPENED: 'SETTINGS_OPENED',
      PROFILE_VIEWER_OPENED: 'PROFILE_VIEWER_OPENED',
@@ -92,6 +97,9 @@ const cons = {
      REPLY_TO_CLICKED: 'REPLY_TO_CLICKED',
      SEARCH_OPENED: 'SEARCH_OPENED',
      REUSABLE_CONTEXT_MENU_OPENED: 'REUSABLE_CONTEXT_MENU_OPENED',
+      NAVIGATION_OPENED: 'NAVIGATION_OPENED',
+      REUSABLE_DIALOG_OPENED: 'REUSABLE_DIALOG_OPENED',
+      EMOJI_VERIFICATION_OPENED: 'EMOJI_VERIFICATION_OPENED',
    },
    roomList: {
      ROOMLIST_UPDATED: 'ROOMLIST_UPDATED',